一个网站首页设计的分析

答案：作者：lain      发布时间：2004年5月13日   更新时间：2004年5月13日
 

其实早就想写一个这样的文章了，讨论一下网页的配色、排版和整体设计。光从理论上说，很多人都无法很好地理解。所以今天找了一个典型的网站来分析一下。

以下就是我们今天要进行全面分析的某个网站的截图（我只是实事求是地分析，绝无诋毁该网站的意思。为了避免不必要的麻烦，我隐去了这个网站的名称）。




【图1】点这里看完整的屏幕截图

这个网站的首页设计，几乎是包揽了网页设计中所有的不足和忌讳（汗…………）
现在我把这个页面分成几个部分来说明。


【图2】点这里看完整的屏幕截图

先插一句，在对截图进行区域划分的时候我就遇到了一点小麻烦。我不知道该用什么颜色来划分页面。因为这个页面用的颜色实在太多了，我找不到一种突出的颜色来做划分边框……最后还是用了红色-_-b

整体设计：刚打开这个网页，给人的感觉就是“乱”。
首先，页面的导航系统混乱。【3】部分的导航，和下面的【5】、【6】、【10】部分的栏目有些是重合的，有些又是互不相同。让人无法捉摸这个网站到底有多少栏目。
再者，色彩搭配上犯了大忌。 从这个页面上我们能看出它的主要用色吗？很难……我们能看到蓝色、红色、绿色、灰色、白色等等颜色，却找不到页面的主色调。所以整个页面给人的感觉是花哨有余，底蕴不足。用的红、绿、蓝都是饱和度很高的，更糟的是这些颜色同时出现在一个页面上，让人的视觉上就有点受不了。作为一个以青年为主题的网站，用点活泼的色彩当然是必要的，但是也不是这么用的啊。一般来说，网页的色彩搭配上，必须要有一个主色调，而辅助颜色一般在1－3种之间，而且要与主色调搭配。尤其是底部的鲜绿色，和上面部分的页面丝毫不相配。如果整个页面的主色调是这种绿色倒也罢了。

现在我来详细分析一下这个页面。
【1】这个图片是页面中最莫名其妙的地方。页面左上角是整个页面的精华之处，是直接向来访者传达页面信息的地方。这个图片没有任何意义。我猜是页面设计者刚用PS学习了这类图片的做法所以做一个在这里炫耀的（汗……）。其实【2】位置的图片才是这个网站的banner（标志），为什么不把【2】的图片放在【1】的位置呢？
【2】这个已经说了，要放到【1】的位置。
【3】这个导航。这个导航菜单图片能做成这个样子我实在是无话可说。最起码的，菜单的字体排版要整齐吧？结果呢，各个栏目名称距离栏目分隔线的距离都不一样，这不是让人笑话么？
【4】这里为什么会用这么压抑的灰色呢？一个要求会员登陆的地方，却显得这么不友好，恐怕大家都没有什么登陆进去的心情了。
【5】【6】【10】这几个都是页面上栏目的标题。每一个都不一样，这影响了页面的整体性。这些花哨的栏目标题，单个看来并没有什么问题，但是这么组合在一个页面上并不合适。尤其是【10】那里，4个并列在一起的栏目，竟然用了四种字体-_-b！而起用的这些字体看起来又不是很明晰的那种，哎~
还有【10】栏目标题前的图标，也是五花八门的。
【7】列在左边的三个栏目，也是用了三种完全不同的蓝色做栏目标题。致使整个页面的配色更加混乱。
【8】【9】这里我也没啥好说的，除了色调的问题外，表格的形状也和页面上的其他表格不甚搭配。
【11】项目前的列表符号，4个栏目用了不同的图片。还是一句话，破坏了页面的整体性。
【12】 这是个在页面上飞来飞去的公告。是公告而不是广告。但是给人的感觉就像是广告。
【13】这里上面说过的，颜色过于突兀。 
【14】这个图片也是毫无意义的。因为这个栏目的上面是一个图片新闻，已经有图片了。这里再出来这么一个图片，会有喧宾夺主之感。

总得来说，网站的页面设计没有什么死板的规律在里面，我们要时刻记住一个原则：“让来访者方便地浏览你的网站。”在设计的时候，多想想，如果你是一个普通访问者，那么，你初来这里，首先想要了解的是：这个网站的主题是什么？它主要是想展示什么？第二：它展示的内容都包括哪些？是否能快速找到自己感兴趣的栏目？
一个网站的首页，首先是以其设计吸引住人，这样才能保证来访者继续看下去。内容紧随其后，再漂亮的网站没有实际内容那也不过是个绣花枕头。

上一个：如何用PS切图和输出网页？
下一个：真空尘埃的过去－2000年第一版