龙腾 发表于 2007-10-6 19:44

优化网站设计的五种方法

<P><A href="http://chn.blogbeta.com/226.html" rel=bookmark><FONT size=7>优化网站设计的五种方法</FONT></A></P><P><FONT size=5>&nbsp;&nbsp;&nbsp;&nbsp; 每天有成千上万的网站被创造出来,这些新网站不是基于浏览者的需要而是基于网站所有者的需要。浏览者被忽视,是大多数网站不成功的最大原因。这里将给出5种方法来优化您的设计。</FONT></P><P><FONT size=5><STRONG>1. 成为浏览者中的一员</STRONG> 把自己放在浏览者的地位。浏览者到您的网站来,他想要什么?您的网站的目标不仅仅需要满足您的需求,更重要的是需要满足浏览者的需求。要得出浏览者想要 的,有一种好的方法就是,对对您开发的产品和服务感兴趣的人做个调查,并调整您的设计以满足他们的需求和您自己的需求。这并不需要花多少钱,比如您可以问 问身边的朋友们。</FONT></P><P><FONT size=5><STRONG>2. 简约是最终的目标</STRONG> 假如您看了比较成功的网站,比如 Google、Flickr 和 Blogger,他们都是简约的。为什么要加上臃肿的内容呢?尤其是当只有80%的浏览者使用了20%的上述的内容。当加入每一个特征时,请考虑浏览者的需要!把它当做您的目标吧。</FONT></P><P><FONT size=5><STRONG>3. 内容为王</STRONG> 确保网站的内容以一种有效的方式排列。如果您仅仅将注意力集中于网站的视觉及其引起的感受,而忽视了内容,那么由浏览者转化为忠实的会员的比值,您认为会 很高吗?如果您想浏览者购买您的产品或服务,就需要一种简洁的、令人心悦诚服的内容和立体化的信息结构。同时最重要的是,内容要通俗易懂。</FONT></P><P><FONT size=5><STRONG>4. 细节是大的区别</STRONG> 网站的每一个方面的细节都需要仔细考虑。有一些元素,比如颜色、形状甚至梯度改变后,在整体上就有可能给浏览者很大的冲击。使用蓝色、绿色、青绿色和银白 色,能给人一种平静的氛围。在您的设计中,使用圆角比使用尖角更能给人一种柔和的、个性化的感受。通过适当的混合颜色、图形、图片,您可以创造出强烈的氛 围和感受,这将对浏览者产生深刻的映像。</FONT></P><P><FONT size=5><STRONG>5. 指导浏览者</STRONG> 您并不想要浏览者为了寻找一个产品而点遍您的网站。避免混乱,通过链接、导航菜单指导浏览者,是可行的。在页面上”告诉”浏览者,以便他们仅通过几次点击就可以买到产品和服务。通过降低浏览者点击的次数,可有效的降低浏览者的挫折感,提高从浏览者到会员的转化率。</FONT></P><P class=poweredbyperformancing><FONT size=5>这些优化您的设计的方法可能看起来很简单,但是大多数情况下,他们被忽视了。试着用用,他们所起的作用,通过优化您的设计就能节约很多广告费用,这些将震撼您!</FONT></P>

龙腾 发表于 2007-10-6 19:57

<P><A href="http://chn.blogbeta.com/223.html" rel=bookmark><FONT color=#5b9eff size=7>当前的网站设计风格</FONT></A></P><P><STRONG><FONT size=5>共同的特点</FONT></STRONG></P><P><FONT size=5>以上这些网站都有下面的特征:</FONT></P><UL><LI><FONT size=5>布局简单 </FONT><LI><FONT size=5>中心定位 </FONT><LI><FONT size=5>3D效果 </FONT><LI><FONT size=5>柔和,自然的背景色 </FONT><LI><FONT size=5>颜色鲜亮(要谨慎使用) </FONT><LI><FONT size=5>可爱的图标(也要谨慎使用) </FONT><LI><FONT size=5>有许多留白 </FONT><LI><FONT size=5>大字体 </FONT></LI></UL><P><FONT size=5>我们一个一个来说。</FONT></P><P><STRONG><FONT size=5>布局简单</FONT></STRONG></P><P><FONT size=5>和几年前相比,设计师们似乎正在寻找更加简单的单栏或双栏布局。总的感觉就是设计师们普遍认同简单的页面表现更好。阅读这类页面只需要从上看到下即可,你的眼睛不用在页面上转来转去拼命寻找想要的东西。同时在浏览过程中它也提供更加平和、稳定的浏览体验。</FONT></P><P><STRONG><FONT size=5>中心定位</FONT></STRONG></P><P><FONT size=5>从上面的这些网站还可以发现第二个特点,它们的内容都分布在中轴线附近。</FONT></P><P><FONT size=5>大概两年前,你可以找到很多“流动布局”和“左对齐并固定宽度”的布局,现在内容开始在出现在屏幕的中央。</FONT></P><P><FONT size=5><IMG src="http://www.webdesignfromscratch.com/snippets/current-style-orientation.gif"></FONT></P><P><FONT size=5>左对齐的布局方式已经不如以前常见了,流动布局(全屏)也没有这么流行了。</FONT></P><P><FONT size=5>尽可能在“一屏”以内显示更多的信息似乎是一直以来的至理名言(也就是尽可能不要滚屏)。而流动布局可以达到这一点。然而,现在我们似乎不太介意滚屏了,而且我们更乐意发挥由滚屏带来的优势,比如更多的留白和行高。</FONT></P><P><STRONG><FONT size=5>有节制地使用3D效果</FONT></STRONG></P><P><FONT size=5>上面所有的网站都使用了一些很细致的斜面、给分隔条的边缘来个轻微的倒角、给背景一点点空间感、或者使用一些很“跳”的带着浮雕和阴影的图标。倒影和渐变非常普遍,阴影也还在使用,不过非常小心。</FONT></P><P><FONT size=5><IMG src="http://www.webdesignfromscratch.com/snippets/hot-ref1.jpg"><IMG src="http://www.webdesignfromscratch.com/snippets/hot-ref2.jpg"><IMG src="http://www.webdesignfromscratch.com/snippets/hot-ref3.jpg"><IMG src="http://www.webdesignfromscratch.com/snippets/hot-ref4.jpg"><IMG src="http://www.webdesignfromscratch.com/snippets/hot-fade2.jpg"></FONT></P><P><FONT size=5>到处都是带着闪光图案的商标:</FONT></P><P><FONT size=5><IMG src="http://www.webdesignfromscratch.com/snippets/hot-flash1.jpg"><IMG src="http://www.webdesignfromscratch.com/snippets/hot-flash2.jpg"><IMG src="http://www.webdesignfromscratch.com/snippets/hot-flash4.jpg"><IMG src="http://www.webdesignfromscratch.com/snippets/hot-strcol4.jpg"><IMG src="http://www.webdesignfromscratch.com/snippets/hot-flash5.jpg"></FONT></P><P><STRONG><FONT size=5>柔和,自然的背景色</FONT></STRONG></P><P><FONT size=5>上面这些网站都有一个朴素的背景,最流行的就是白色和灰调渐变。这样的背景提供了一个又酷又柔和又中立的环境,让那些抢眼的颜色可以引导用户的目光。</FONT></P><P><STRONG><FONT size=5>颜色鲜亮(要谨慎使用)</FONT></STRONG></P><P><FONT size=5>柔和、时髦的背景色为添加吸引眼球的特性提供了极好的基础,而强色调高对比度非常适合页面上的其他重要元素。</FONT></P><P><FONT size=5><IMG src="http://www.webdesignfromscratch.com/snippets/hot-strcol2.jpg"><IMG src="http://www.webdesignfromscratch.com/snippets/hot-strcol3.jpg"><IMG src="http://www.webdesignfromscratch.com/snippets/hot-strcol5.jpg"><IMG src="http://www.webdesignfromscratch.com/snippets/hot-strcol6.jpg"><IMG src="http://www.webdesignfromscratch.com/snippets/hot-strcol7.jpg"></FONT></P><P><A href="http://www.iomega.com/"><FONT color=#0066ff size=5>Iomega</FONT></A><FONT size=5>比其他几个网站用了更重的颜色,它的推广区域使用了浓烈的暗红色。然而这并没有淹没页面上的其它部分,因为它采用了一致的色调和简单的形状。</FONT></P><P><STRONG><FONT size=5>可爱的图标(也要谨慎使用)</FONT></STRONG></P><P><FONT size=5>有一个“规则”:不要在同一个页面上使用太多好看的元素(这样会影响用户的注意力)。(译者注:所谓适可而止)</FONT></P><P><FONT size=5>抢眼的颜色、3D效果、漂亮的图标和按钮可以给页面增加一些闪光点,给人一种高品质的感受。但是,如果用滥了,就会产生一种叠加效应,使页面变得混乱,用户变得迷惑。</FONT></P><P><FONT size=5><IMG src="http://www.webdesignfromscratch.com/snippets/hot-icons1.jpg"> <IMG src="http://www.webdesignfromscratch.com/snippets/hot-icons2.jpg"> <IMG src="http://www.webdesignfromscratch.com/snippets/hot-icons7.jpg"> <IMG src="http://www.webdesignfromscratch.com/snippets/hot-icons4.gif"> <IMG src="http://www.webdesignfromscratch.com/snippets/hot-icons5b.jpg"></FONT></P><P><STRONG><FONT size=5>有许多留白</FONT></STRONG></P><P><FONT size=5>今天的网页设计风格非常之清新,仿佛刚刚经历了深呼吸一般</FONT></P><P><FONT size=5>有时候我甚至想把一些非常拥挤的网页粘到气球上,然后一直吹气直到页面上所有东西之前都有足够的空隙。</FONT></P><P><FONT size=5>我们的眼睛需要被注视物的周围有一定的空间,这样才能看清楚它是个什么玩意儿。</FONT></P><P><FONT size=5>一般来说,留白越多越好。我极少看到一个页面,然后会想:“唉,他们一定要再加点内容上去才行!”。</FONT></P><P class=comment><FONT size=5>当然,留“白”不一定是<STRONG>白</STRONG>的,但它必须留出一定的空间。</FONT></P><P><FONT size=5>很高兴地看到现在有很多设计都使用了合适大小留白,页面上的元素之间有足够的空隙。同时为了屏幕阅读也设定了额外的行间距。</FONT></P><P><FONT size=5>看看这些让人舒服的留白吧!</FONT></P><P><FONT size=5><IMG src="http://www.webdesignfromscratch.com/snippets/hot-wspace1.jpg"> <IMG src="http://www.webdesignfromscratch.com/snippets/hot-wspace2.jpg"> <IMG src="http://www.webdesignfromscratch.com/snippets/hot-wspace3.gif"></FONT></P><P><STRONG><FONT size=5>大字体</FONT></STRONG></P><P><FONT size=5>我并不是说你网站上的所有文字都要大得让人吃惊。事实上,在某些情境下,小字体也不错。</FONT></P><P><FONT size=5>真正优秀的设计应该是这样:</FONT></P><H4 style="MARGIN-TOP: 0px; TEXT-ALIGN: center"><FONT size=5>让重要的文字比一般的文字更大</FONT></H4><P><FONT size=5>就像我们在上面提到的设计方法一样,它只有在一定的模式下使用才能起作用。如果所有的文字都很大,那就没有一个是大的了。</FONT></P><P><FONT size=5>用大字体让你的访客迅速地了解这个页面是关于什么的,什么是重要的,并且指出接下来他们可以在哪里找到想要的东西。</FONT></P>

靓菊 发表于 2007-10-7 11:14

很好的方法

三省克己 发表于 2007-10-7 08:24

<P><FONT face=黑体 color=#f70997>智者!</FONT></P>

入水蛟龙 发表于 2007-10-7 16:28

原文由 三省克己 发表: <br><P><FONT face=黑体 color=#f70997>智者!</FONT></P>

三尺雨 发表于 2007-10-7 19:28

简约是网站最终的目标.

畅游白令海峡 发表于 2007-10-7 20:27

原文由 靓菊 发表: 很好的方法
页: [1]
查看完整版本: 优化网站设计的五种方法