它山之石

汪俊

摘 要：当今市面上也有不少书籍或文章提出了各种各样网站视觉设计的相关准则，但这些准则有时存在着某种模糊性或不一致性，常令非专业设计师或初学者感到困惑和烦恼。本文旨在整理世界范围内知名网页设计师的书籍、论文、访谈的基础上，对其设计理念及设计经验进行总结，形成一套相对权威而有使用的设计准则，以提供给广大读者借鉴、参考、批评。

关键词：视觉设计准则；网站视觉设计；网页设计经验

良好的网站视觉设计，可提升浏览者对网站的深刻印象，强化网站形象的完整性，并增加浏览者的访问率。有统计数据显示，平均一位浏览者花不到15秒时间来浏览一个网站。许多浏览者进入一个陌生网站，通常只以数秒时间就决定是否要继续浏览或离开，其中一个决定因素就是对这个网站的第一个印象，而影响此印象的一个重要元素，就是该网站的视觉设计。但一般非专业之网站设计人员，往往最缺乏的就是有关视觉设计方面的专业知识与经验。虽然大部分知名、出色的网站多是由专业网站制作公司所完成，但仍有许多小型网站是由一些不具备丰富经验的设计者所制作。有时会有不一致甚至相互矛盾的情形发生，[1]笔者通过整理世界范围内知名网页设计师的书籍、论文、访谈，初步形成了一套基于经验的设计准则，以提供给广大设计师和初学者借鉴、参考、批评。

本文通过文献首先整理出网站视觉设计的项目，包含文字、版面、图像、色彩灯四个项目，然后搜集各项目的相关设计准则，简略叙述如下。

1 文字

我们分别针对内文编排及字体设计来整理与文字相关的设计准则，内容如下所列。

（1）内文编排。1）文字量不宜过多。2）将内容进行疏密有序的分割排版。3）全文编排得分段。4）主要信息放置于显眼的页面位置上。

（2）字体设计。1）最适合阅读的屏幕文字以10 pt与12 pt的字号为最佳。2）页面一般内容的字体最好使用12 pt大小。3）同一页面字体最好在三种内，以不同的字体区隔标题层次，标题与内文可用同一字体也可不同。4）字号变化不宜太多，大约3～6个层次。5）大标题，小内文；粗标题，细内文。6）标题文字要明显、大且粗。7）使用于内容的文字不宜太大，以便于识别为主，9 px或12 px左右即可。

2 版面

我们将网站版面的设计分为版面分割及版面配置两个子项目。

（1）版面分割。1）从信息内容的角度划分网页，可将其框架结构分为以下三种：分栏式框架结构、区域排版结构、无规律页面设计。2）以造型和视觉因素为基础，对页面作分割，水平分割、垂直分割、水平和垂直交叉分割。3）依视觉表达可将网页形式区分为两种基本页面布局（含上下分割型、左右分割型）以及三种较具变化的配置（含半包围型、全包围型、自由型）（张楠溪，2007）。4）依使用性的角度将导航条作为网页划分的区隔，有以下五种划分的类型上方导航条、底部导航条、左侧导航条、右侧导航条、中心导航条。5）依据内容和导航条结构的复杂程度，将网页分为单一结构和复合结构两类：①单一结构：内容较少的网站常使用此结构，包含以下五种类型：置中导航条、顶部导航条、左侧导航条、右侧导航条、底部导航条。②复合结构：包含以下三种类型：顶部导航条页面分割、左侧导航条页面分割、固定区域分割。6）信息的呈现方式决定网页的骨架，可将网页以信息表现类型划分为以下几种：检索型、均衡型、印象型、超印象型。7）根据信息量的多寡，可将网站区分为以下五种形态：检索型准检索型中庸型，图像为主型、目录省略型。8）信息内容即使完全相同，经由不同的配置也会营造不同的风格，以下为八种版面配置的样式：左右对齐样式、全景样式、卫星样式、照片组合样式、包围样式、散落样式、齐头或齐尾样式、居中样式。

（2）版面配置。1）用户浏览网页的视觉动线起点为左上角，Logo放置在左上角，可以让使用者于第一时间明白所处的网站。2）用户最常使用的功能为搜寻，搜寻功能多放置在上方的位置。3）会员登入功能多放置左上或右上方，避免使用者进入頁面后还需要往下拉才能看到此功能，而增加使用的困难度。4）页面的信息内容应该占整个页面空间的50%到80%。5）页面长度以不超过三至四个屏幕页面为最佳。6）版面适当留白，可以使观者的视线获得暂时缓冲、休息。7）版面配置时应保持页面的视觉平衡，视觉上的平衡主要有两种形式：对称平衡、非对称平衡。

3 图像

图像的呈现方式可分为静态图像和动态图像两种类型，以下为其相关设计准则：

（1）动态图像。1）跑马灯式的文字不易阅读，重复循环的动画会妨碍读者浏览网页其他的内容。2）闪烁的文字会造成用户头痛，应完全避免使用。3）页面中过多的动态图形会造成用户阅读上的困扰。4）过多或是不间断的动画容易眼花缭乱，易造成眼睛容易疲劳。

（2）静态图像。

1）图示的设计要能明确传达其功能意涵。2）多数图像的功能需能辅助文字讯息说明。3）不同按钮的外观必须经过一致的图像处理，各个网页间按钮的设计与位置应大致相同。4）按钮的外观应以精简达意为原则，以免延长网页下载的时间。5）与内容不符合的图片会令讯息混乱。6）图片说明字数最好在150字以内。

4 色彩

我们依文字色彩、背景色彩两个子项目来分别整理有关网站色彩设计准则。

（1）文字色彩。1）文字的色彩越缤纷，阅读上越困难。2）字体与背景的亮度对比愈小，易读性愈低。3）亮眼的颜色用于少数重点文字。4）文字色彩与背景色彩避免使用相似的色系，以免造成浏览者阅读困难。5）可读性指文字是否易于阅读，背景与文字色彩的明度反差程度愈高，可读性愈高。

（2）背景色彩。1）基本色的功用为做出整体感觉的色彩，辅助色为辅助基本色的颜色，强调色为让重点更醒目的颜色。2）基本色、辅助色、强调色全部加起来尽量不要超过6种。3）基本色、辅助色、强调色三种，一般使用大多以基本色70%、辅助色25%、强调色5%的比例为主。4）背景的色彩越缤纷，阅读上越困难。5）同一网站中，应只使用几个特定的颜色与字体。复杂的字体或过多的颜色，会造成视觉凌乱。6）背景应尽量避免采用过于明亮的颜色。7）网页背景与内容间应产生适当的对比，提高对比度。8）背景色彩数量最好限制在4种以内。9）网页设计常使用白色和灰色来做背景色，因为对视觉刺激较低，适合阅读。10）色彩设计必须符合网站的可视性、适合阅读功能为主要目的。白纸黑字的阅读效果为最佳。11）亮色比较强烈，易视觉疲劳而放弃浏览。

参考文献：

[1] McIntire，2007；Nielsen，1999；Syed，2004.

[2] 黄朝盟，赵美慧.网站规划与设计[M].台北：商鼎文化出版社，2007.

[3] エ ビスコム テック ラボ，2004.

[4] 内田广由纪.简明版面设计[M].北京：中国建筑工业出版社，2005.

[5] 胡崧.DreamWeaver网页制作[M].北京：中国青年出版社，2008.

[6] 魏泽群.使用者最大——从优使性出发的界面设计[M].台北：网奕信息，2005.

[7] 梁景红.设计师谈网页设计思维[M].北京：电子工业出版社，2006.