网页设计职场技巧和经验分享

西岭飘雪

简单就是美 给用户最想看的

　　很多网页设计师一开始都会陷入这样一个误区——在页面中加入很多元素和修饰，同时加入很多的Javascript代码、Flash效果等，把“好看的”都摆上去，以求页面“华丽无比”。殊不知这样的页面带给用户的只会是眼花缭乱的感觉，反而找不到想要看的内容。根据相关统计显示，如果用户第一次访问某一个页面，在3～10秒内找不到自己感兴趣的内容，那么他就会毫不犹豫地选择离开这个页面。

　　留住用户，第一印象自然要好，就目前网页发展的趋势而言，“简单”的设计风格更符合主流，因此页面中的修饰元素和样式都不宜过多，同时样式要尽量保持统一或接近，以文字颜色、字体等不超过3种为宜，以避免造成页面混乱的感觉。这一点在一些公司的形象网站或企业网站当中尤为明显——页面主要以网站导航、形象(产品)宣传Banner和公司业务为主。例如联想中国网站、Dell公司网站等(图1)。

　　结构要主流 给用户最习惯的

　　除了页面的表现形式，设计网页时还要保证最重要的内容占据页面当中最显眼的位置。通过对用户浏览网页习惯的调查，一个页面当中最显眼的位置以字母“F”形分布(图2)，这也是用户浏览页面的顺序：首先，用户会以从左至右的方式看页面最上方，然后是从上至下浏览页面的左侧部分，接着是根据左侧内容浏览右侧部分。虽然具体情况不尽相同，但大体如此，因此这也是网页设计师安排页面内容的一个重要依据。

　　一般情况下，网站页面结构可简单分为三部分：头部、主体和页脚。头部和页脚在一个网站当中的样式基本是固定的，不同的页面不会有太大区别，特别是页脚，因为主要放置网站信息和联系方式等，因此几乎是一样的。而头部当中可能包含一些形象广告，所以不同页面可能稍有不同。

　　如同上文所述，根据用户的浏览习惯和网站设计的基本风格，一般情况下页面的头部用来放置网站导航和形象(广告)Banner，左侧以小字体放置二级导航和辅助功能导航，主体部分以稍微大一点的字体放置网站主要内容。这样是最符合用户浏览习惯的页面形式。此外，如果主体部分采用左中右结构，右侧也应以辅助补充和广告内容为主。

　　搭配要合理 给用户最便捷的

　　既然一个网站页面的基本样式和内容都是固定的，那网页设计师还能怎样发挥自己的创意进行设计呢？首先需要说明的是，我们这里为大家讲解的主要是传统网站的设计，也是最常见的网站设计，如公司形象网站、企业网站或其他行业网站等的设计，而不包括一些个性化的网站设计，因为个性化网站的设计需要达到的效果就是与众不同，因此并无任何规律可言。

　　在传统网站设计过程中，既然页面的基本框架和内容都已经确定，如何能够在这个框架内让网站页面在清爽的同时又可以展现更多内容，就需要网页设计师了解网页制作技术，通过技术手段丰富页面内容和样式。

　　以最为常用的标签功能为例(标签功能是指将页面当中不同分类的内容以标签的形式归类，用户点击相应标签就可以查看相应标签中的内容)，国内主要的门户网站新浪和网易，如果不采用标签功能，全部内容采用平铺的方式，那么页面无疑将非常冗长，而采用标签功能，既保证了主要内容都在最主要的位置展现，又保证了给用户提供最感兴趣的内容，另提供了更多选择，让用户可以选择查看可能感兴趣的内容(见图3上)。可以说，同样的页面，是否采用标签功能将有完全不同的效果。

　　除了标签功能，还有很多其他技术手法，例如层功能(层功能多用于鼠标悬浮操作，通过鼠标悬浮将隐藏的层展示出来，以实现在有限的范围内展示更多的内容，如淘宝网的二级导航，见图3下)等。

　　可见，只有网页设计师了解这些技术才有可能在设计时将这些技术融会贯通并付诸实践，从而丰富页面展现形式，充分利用页面空间，在有限的区域内展示更多的内容。而这些技术也都是以服务用户为纲，以“不给用户添麻烦”为准。

　　规范是王道 给后期维护减负

　　上文我们主要说了一些网页设计上的总体思路，也是“大方向”，下面我们说一下网页设计师需要注意的工作细节，这里就以网页制作时的HTML代码和CSS样式表为例。我们都知道，虽然一个网站的设计方案通过Photoshop设计出样式图之后再进行页面制作工作一般不会出现返工的问题，但修改是不可避免的，包括网站在运行了一段时间之后根据实际情况进行修改也是非常常见的，这就要求我们在前期制作页面的时候打好基础，为后期的修改维护做好准备。

　　规范格式 源码查看更方便

　　很多网页设计师在进行页面制作的时候只是在可视化环境当中编辑(这是万万不可的，如果设计师不能驾驭纯源码模式，那么他就一定不是一名合格的网页设计师)，这就很容易产生冗余代码，从而使源码混乱。而源码混乱，一方面会影响页面的执行效率，另外一方面也会在后期修改的时候产生莫名其妙的问题。因此规范源码格式，可以有效减少后期修改的工作量，提高工作效率。

　　不要懒惰 关键点加上注释

　　除了规范源码的格式，制作网页时在HTML源码当中加入必要的注释是非常重要的!因为注释可以为我们后期的修改提供重要的参考信息，例如一段代码的功能说明、一个区域的开始或结尾等等。这样在后期修改的时候就可以实现不需要再次查看源码来区分，只要根据注释针对特定区域进行修改或替换即可，从而大大降低后期修改维护的难度。