3.4 可视化设计

网页可视化设计的主要目的是提供给用户一个关于网站的展示方案，可视化设计主要内容包括：网页版面布局设计；网页色彩设计；网页中图片和文字的设计；首页设计。

3.4.1 网页布局设计

精确的布局、美观的页面、规范的版式，会给网民一个难以忘却的印象。布局是指在一个限定的面积范围内，合理安排图片、文字的位置，按照轻重缓急和审美要求逐步将信息展示出来的过程。

1.网页布局设计原则

在网页布局过程中，须遵循以下几个原则。

1）正常平衡原则，指的是“匀称”，即左右、上下对照形式平衡，主要强调秩序，能达到安定诚实、信赖的效果。

2）异常平衡原则，指的是非对照形式，但也要平衡和韵律，当然都是不均衡的，此种布局能达到强调性、不安性、高注目性的效果。

3）对比原则，指的是利用色彩、色调等技巧来做表现，在内容上可涉及古与今、新与旧、贫与富等对比。

4）凝视原则，指的是利用页面中人物视线，使浏览者仿照跟随的心理，以达到注视页面的效果，一般多用明星凝视状。

5）用图表解说原则，指的是对不能用语言说服、或用语言无法表达的情感，使用图表解说的内容，可以直观地表现出来，特别有效，也可以传达给浏览者更多的心理因素。

6）面向客户原则，网站的客户群决定了网页布局的方法，如以儿童用品为主题的电子商务网站，采用海报式布局是最佳的选择，而新闻页面则适合采用上下结构的布局方法。

7）整体布局要遵循简洁大方的原则，这是网页版式布局的重要原则，整个布局不要过于花哨，提倡简约的布局突出网站的主题，强调网站的内容，不要以繁杂的布局吸引网民一时的眼球。

8）视觉效果与内容翔实相结合的原则，整个网页的布局要注意视觉效果的实现，恰当使用图像文字，将有些标题文字用图像表现出来，更好地突出文字的内容，网站的内容要翔实，要为网页的主要内容留出足够的空间。

9）主次分明条理清晰的原则，设计网页布局时要突出网站的主题，将网页的主要部分放在左上角及上面居中位置，而无关紧要的内容则放置在其他位置，做到主题突出，主次分明。内容与视觉效果要兼顾，形成和谐统一的整体布局。

2.网页布局设计基础

网页的展示设备是计算机，而网页的受众对象则是人，因此，网页版面布局的设计既要根据计算机的显示能力，又要符合人的视觉习惯。好的网页布局是一个成功网站的重要方面。

（1）分辨率确定。像素是指荧光屏上的每一个发光小点。例如，某台计算机的显示器横向能显示1024个发光小点，即1024像素，纵向能显示768个发光小点，即768像素，则该显示器的分辨率为1024×768。目前，广泛流行的显示器的分辨率有1600×1200、1280×1024、1024×768、800×600四种。

电子商务网站的建设，首先要确定网站的尺寸，即以什么样的分辨率作为网站的制作依据。一般来讲，网站的宽度以1024像素及800像素为依据较多，而高度则比较随意。

一般网站在设计时两边留出少许空白，以1024像素为依据的网站，其实际宽度多为1000像素左右，而以800像素为依据的网站，实际制作时宽度多选择为750～780像素，实际制作时以采用776像素居多。

（2）网页的内容与放置位置。版面布局要符合人的视觉习惯。人们阅读材料时习惯按照从左到右，从上到下的顺序进行。人的眼睛首先看到的是左上角，其次是顶部居中的位置。因此网页的左上角是整个网页的“黄金地段”，也是人的最佳视阈。根据这一习惯，设计时可以把重要信息放在页面的左上角或页面顶部，如标志、通知新闻等，然后依据重要程度放置其他内容。

页面中不同的位置，吸引人的程度不同，给人心理上的感受也不同。一般而言，上部给人轻快、积极之感；下部给人压抑、稳定的印象；左侧，感觉轻便、自由；右侧，感觉局促却显得庄重。根据内容的不同对放置位置要做恰当的选择。

3.网页布局设计步骤

（1）草稿。新建的页面就像一张白纸，没有任何表格、框架和约定俗成的东西，可以尽可能多地发挥想象力，将你想到的“景象”画上去。这属于创造阶段，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。尽你的可能多画几张，最后选定一个满意的作为继续创作的脚本。

（2）初步布局。在草案的基础上，将确定需要放置的功能模块安排到页面上。通常首页设计的内容主要包含网站标志、主菜单、新闻、搜索、友情链接、广告条、邮件列表、计数器、版权信息等。在初步布局时，必须遵循突出重点、平衡协调的原则，将网站标志，主菜单等最重要的模块放在最显眼、最突出的位置，然后再考虑次要模块的排放。

（3）定稿。在初步布局的基础上，具体化、精细化的过程。

4.网页布局的设计

网页布局设计包括页面框架设计和合适的布局技术。

（1）页面框架设计。

1）左右型结构：这种布局结构体部由左右两部分组成。左部分占整个宽度的20%～30%，左半部内容可以是菜单、用户登录、流量统计、联系方式等内容。右部则为显示主体内容。这是网页设计中使用最为广泛的一种布局结构。

2）上下型结构：整个网页由上下两部分组成，上面是标题，下面则只有正文，也称为标题正文型布局，通常的二级页面、文章页面都采用这种布局方法。

3）复合型结构：上下型和左右型结构的结合（见图3-11）。

（2）网页布局技术。

1）帧布局。这里所说的帧对应于HTML文档中的一个Frame元素。帧布局就是将页面分成互不重叠的几个部分，每个部分称为一帧并对应于一个独立的网页（页面框架技术）。采用帧布局最大的好处在于可以随意调整各个帧在页面中所占的比例，并且在显示网页时，拖动一个帧的滚动条只会滚动该帧画面的内容而不会影响其他帧。

2）表格布局。这里所说的表格对应于HTML文档中的一个Table元素。表格布局的最大好处在于可以根据需要将整个页面分隔成任意数量和任意大小的单元格，并且可以在单元格内嵌入任何网页对象。而且在对每个单元中的对象进行单独操作时，都不会影响其他单元格中的对象。

3）层（Layer）布局。层布局是目前的主流技术，也是一种较新的布局技术，采用CSS进行页面布局，其最大优点是将页面的布局从平面空间扩展到立体空间。采用层布局技术可以将一个页面看做由多个层面重叠而成，各个层面不仅允许以像素为单位精确地定位其在整个空间中的位置，而且还可以通过一定的设置来控制某一层是否显示及层与层之间的叠放次序。在网页设计中，层有Div和Layer两种不同的标记，并且不同的浏览器对层的支持是不一样的。

3.4.2 网页色彩设计

网站的配色决定着网站的整体效果，因为它能产生强烈的视觉冲击。不同的色彩搭配产生不同的效果，反映出不同网站的文化内涵，并可能影响访问者的情绪。自然界中的色彩五颜六色、千变万化，通常将颜色分为红、橙、黄、绿、青、蓝、紫七色，其中，红、绿、蓝是三原色，三原色通过不同比例的混合可以得到各种颜色。色彩有冷暖色之分，冷色（如蓝色）给人的感觉是安静、冰冷；而暖色（如红色）给人的感觉是热烈、火热。冷暖色的巧妙运用可以让网站产生意想不到的效果。色彩与人的心理和情绪也有一定的关系，利用这一点可以在设计网页时形成自己独特的色彩效果，给浏览者留下深刻的印象。

1.主色调的选择

网站的标准色彩是指能体现网站形象和延伸内涵的色彩，用于网站的标志、标题、主菜单和主色块，给人以整体统一的感觉。至于其他色彩也可以使用，只是作为点缀和衬托，绝不能喧宾夺主。

所谓色环就是将色彩按红→黄→绿→蓝→红依次过渡渐变，就可以得到一个色彩环。色环有暖色系、寒色系和中性系，如图3-12所示。

每个网站使用的标准色彩原则上不得超过3种，并且有一个占比例较大的颜色，我们称为网站的主色调，而其他颜色则称为网站的辅色调。例如，IBM网站的主色调是深蓝色的，肯德基网站的主色调是红色条形的，网易网站的主色调是淡蓝色的，Windows视窗标志上的红蓝黄绿色块，都使我们觉得很贴切，很和谐。

每种颜色适合不同类别的网站，选择主色调时要考虑色彩的象征性、色彩的生理反应和色彩的一般含义等。

（1）色彩的象征性。所谓色彩的象征性，是指色彩所拥有的象征意义，不同文化有着不同的看法，不同民族有着不同的含义，例如，黄色，东方代表尊贵，优雅，西方基督教则以为耻辱象征；又如红色，东方则代表吉祥、喜庆之意，西方作为战斗象征牺牲之意。因此，色彩对不同的地域不同的民族产生不同的文化观。

（2）色彩的生理反应。色彩可以引起一些生理上的反应。例如，红色就是一种非常刺激的颜色，往往会令人心跳加快、呼吸急促。所以，红色非常适合用在需要引起注意和强调的时候，例如，交通信号灯中的红灯，医院的红十字等。但若用在背景颜色的时候可能显得过于强烈。相同地，黄色也能引起注意，但因为其反射性太强，容易造成眼睛的疲劳和不舒服。

另一方面，蓝色对神经系统具有放松的效果，且根据一些研究显示，以蓝色当背景还能增加生产力。但是，如果你的产品与食物有关，千万不要用蓝色作为背景颜色，因为蓝色可是会抑制人们的胃口。

（3）色彩的一般含义。

• 蓝色。蓝色属于冷色调，表示忠诚、安全、保守、宁静、永恒、博大，给人以沉静、踏实、寒冷之感，也是网站采用最多的主色调，一般适用于企业、事业单位。

• 红色。红色属于典型的暖色调。红色，是火的色彩，也是血的颜色，首先给人的感觉是温暖、兴奋、热烈、坚强和威严，所以我们的国旗使用红色赋予了革命的含义。红色一般用于政府网站的制作，也有的企业网站在重大节日期间改版为红色，代表喜庆。

• 绿色。绿色是大自然的代表色，表示自然、稳定、成长、和平、具有自然美、宁静、生机勃勃，可衬托多种颜色而达到和谐。绿色象征春天、新鲜、自然和生长，也用来象征和平、安全、无污染，如绿色食品，同时绿色也是未成年人的象征。绿色一般用于食品、农业类网站，也可用于购物类网站及儿童类网站。

• 黑色。黑色是典型的冷色调，表示一种深沉、神秘，把黑和其他颜色相配时能显出黑色的力量和个性，如黑白相衬，显得精致、新鲜、有活力，在黑色衬托下可以使用各种非常刺激的冷暖颜色，因为它有调和色彩的作用。这类颜色一般用于科幻、游戏类网站。

• 粉色。粉色给人一种活泼的感觉，一般用于女性、儿童类网站。

• 紫色。紫色表示创造、忠诚、神秘、稀有。大面积的紫色有恐怖感，紫红色尤其明显，暗紫色有灾难感，淡紫则是一种优美的活泼色，紫与黄共存时，消极性更加显著。

• 黄色。黄色表示明亮、光辉、疾病、懦弱。

• 白色表示纯洁、天真、洁净、真理、和平、冷淡、贫乏，也可表示虚无，有无尽的可能性。

• 灰色是色彩中最被动的颜色，受有彩色影响极大，靠邻近的色彩获得自己的生命，近冷则暖，近暖则冷。最有平静感（中性），是视觉中最安静的色彩，有很强的调和对比的作用。

2.色彩搭配技巧

网页在色彩搭配上要注意并不是色彩用得越多就越美观。事实上，全局采用和谐，局部采用对比的色彩选择往往最容易达到一个商务网站雅致美观的要求。如何运用最简单的色彩表达最丰富的含义，下面介绍使用色彩搭配的技巧。

（1）运用相同色系的色彩技巧。所谓相同色系，是指几种色彩在360°色环上位置十分相近，在45°左右或同一色彩不同明度的几种色彩，也就是说，将某一种单色彩变淡或变深后产生一种新的色彩用于网页。这种搭配的优点是易于使网页色彩趋于一致，有层次感，容易塑造网页和谐统一的氛围。缺点是容易造成页面的单调，因此，有时可以利用局部加入对比色来增加变化，例如，局部对比色彩的图片等。

（2）运用对比色或互补色技巧。所谓对比色，是指色环相距较远，在100°左右，视觉效果鲜亮、强烈，而互补色则是色环上相距最远的两种色彩，即相距180°，其对比关系最强烈、最富有刺激性，往往使画面十分突出，容易塑造活泼、韵动的网页效果，特别适合体现轻松、积极的素材的网站。缺点是容易造成色彩的花，使用中注意色彩使用的度。

要注意的是，以上两种用色方式在实际应用中要注意主体色彩的运用，即以一种或两种色彩为主，其他色彩为辅，不要几种色彩等量使用，以免造成色彩的混乱。

（3）色彩的应用技巧。在实际应用过程，要根据具体情况而定。

1）了解网站所要传达的信息和品牌。选择可以加强这些信息的颜色。

2）了解客户群。文化差异可能会使色彩产生非预期的反应。同时，不同地区与不同年龄层对颜色的反应也会有所不同。

3）不要使用过多的颜色。除了黑色和白色以外，一般选择3～4种颜色就够了。太多的颜色会导致混淆，也会拉走读者的注意力。

4）在阅读的部分使用对比色。颜色太接近无法产生足够的对比效果，也会妨碍观众阅读。白底黑字的阅读效果最好。

5）选择颜色要注意时效性。同一个色彩很容易就充斥着整个市场，且消费者很快就对流行色彩感到麻木。但就另外一个角度来看，你可以使用几十年前的流行色彩，引起人们的怀旧之情。

3.4.3 文字设计

1.网站的字体运用

所谓标准字体，是指用于标志、标题、主菜单的特有字体。一般我们网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格，我们可以根据需要选择一些特别字体。例如，为了体现专业可以使用粗仿宋体，体现设计精美可以用广告体，体现亲切随意可以用手写体，体现企业文化内涵可以用美术字等。企业可以根据自己网站所表达的内涵，选择更贴切的字体。目前常见的中文字体有二三十种，常见的英文字体有近百种。此外，网络上还有许多专用英文、中文艺术字体下载，要寻找一款满意的字体并不困难。

在电子商务网站中，字体的设置要遵循以下原则。

• 正文字体。网页正文无特殊情况一般使用宋体。书刊、报纸通常使用的标准字体是宋体，这也是人们平时接触最多的、最符合人们阅读习惯的字体。

• 非标准字体的使用。正常情况下，网站上使用黑体、宋体、楷体、仿宋体以外的字体时，必须将字体以图形的形式表现出来，浅显地说，就是把文字在Photoshop中做成图像文件再使用。如果使用了上述字体以外的其他字体，在没有安装更多字体的计算机上将无法按设计效果显示出来。因此，如果你的网站中使用的是非默认字体，那么，为了让所有的用户都能看到，用图片的形式是最好的选择。

• 网站标题字体的使用。网站头部标题字体一般要使用方方正正的字体，不得使用行楷体等过于活泼的字体，以表达庄严、稳重之意。

• 栏目字体。栏目字体一般以黑体或其他艺术字体为主，但一般要用图形的方式表现出来，略加艺术化处理，以及搭配一些小图标，可以达到意想不到的视觉效果。

对于网站字体设置应注意以下几点内容：

• 不要使用三种以上的字体。字体太多则显得杂乱，没有主题。

• 不要用太大的字。因为版面是宝贵的、有限的，粗陋的大字体不能带给访问者更多信息。

• 不要使用闪烁不停的文字。

• 原则上标题的字体较正文大，颜色也应有所区别。

2.字号的设置

网站字号的设定，要注意以下几点。

• 网站正文。网站正文的字号一般设置为12像素，如果用磅表示则为10磅，其大小相当于平时常说的五号字及标准的书刊用字大小。这个文字字号标准最符合人们阅读习惯，也是网站标准文字字号。

• 网站大标题。网站的大标题，即网站头部名称，此处使用的文字字号，一般来说是网页中最大的字号，但其实际大小一般不能超过36像素。过大的标题给人以笨重的感觉，过小的标题，则不显眼。

• 网站栏目标题。网站的栏目标题，即网站的小标题，一般为16～18像素，类似常用的三号字大小，太小起不到栏目标题的作用，太大则不灵动，一般以黑体或宋体加粗为好。但目前广泛使用的办法是将栏目标题图片化，通过图像处理软件，实现一些特殊的文字效果。注意文字不要进行过多的艺术处理，否则会弄巧成拙。

3.行间距的设置

网站文字的行距设置一般采用的方法是在样式表中定义，其大小一般为1.2～1.5倍行距。通常宋体12像素大小的正文文字，将行间距设为18像素是比较理想的数值。

3.4.4 首页设计

电子商务网站设计的最重要的一步就是首页设计，就是网站的主页设计。首页设计包括版面、色彩、图像、动态效果、图标等的设计，也包括广告条、菜单、标题、版权等模块设计。

网站的首页设计，除了要掌握网站页面设计的一般要求外，还要把握其特殊性，因为网站首页是最先呈献给向浏览者的。首页应该具有良好的视觉效果、简洁的页面、较少的加载时间和首页的风格设计等。

1.视觉效果

视觉效果指用户打开网站网页的第一印象，好的网页能让浏览者产生强烈的视觉冲击，给浏览者留下深刻的印象。所以对于网站的网页来说，视觉效果是相当重要的，它主要体现在色彩的搭配、字体设置和页面布局结构上，详见以上所述。

2.网页简洁

设计网页的主要目的是进行信息交流，因此使信息更易于被浏览者浏览显得非常重要，除此之外的其他东西都处于从属的地位。尽管浏览者会被精美的动画和花哨的图片所吸引，但是只有当网页的内容易于访问且有价值时，他们才会经常性地访问。很难想象一个只有精美的外表，而访问速度极慢且无实质内容的网站能够留住浏览者的眼光。

3.传输速度

传输速度是网页设计中一个需要着重考虑的问题，它对于网站的首页显得尤为重要。一般来说，首页的传输时间不能超过10～15秒，超过这个时间，大多数用户都会失去等待的耐心。为提高网页的传输速度，可采用以下几种方法。

• 尽量减少首页的数据量。例如，为了减少首页的数据量，在首页的新闻中可以限制新闻显示的条数，其他更多的新闻可以通过“更多……”来显示。

• 页面在采用图片时，应尽量采用较小的图片，如果图片太大，可以采用分割图片的方法，将较大的图片分割成较小的图片。在网站开发平台中，都采用较小的图片，并且采用储存量较小的GIF和JPEG格式的图像文件。

• 整个页面不要都套在一个表格里，应尽量拆分成多个表格；表格嵌套层次要尽量少，越复杂、嵌套层次越多的表格下载速度越慢。这是由于浏览器在读取网页HTML源代码时，是读完整个Table才将表格内容显示在屏幕上，而且显示也有优先级。先读到的先显示，如果一个大表格中含有多个子表格，必须等大表格读完，才能将子表格一起显示出来，就像我们遇到的有些站点等待很久却什么也出不来，单击“停止”按钮却一下显示出页面，就是这个原因。

4.首页的风格设计

网站的风格建筑在网站内容的质量和价值性上，这是最基本的。如果一个网站只有风格而无内容，就好比绣花枕头一包草，好比一个性格傲慢但却目不识丁的人。所以必须彻底搞清楚自己希望站点给人的印象是什么。

网站首页是企业网上的虚拟门面，在设计自己门面时绝不能敷衍了事、马马虎虎。网站的页面就好比是“无纸的印刷品”，精良和专业网站的设计，如同制作精美的印刷品，会大大刺激消费者（访问者）的购买欲望，反之，您公司所提供的产品或服务将不会给消费者（访问者）留下较好的印象。一般来说，网站首页的形式不外乎两种。

1）纯粹的形象展示型，这种类型文字信息较少，图像信息较多，通过艺术造型和设计布局，利用一系列与公司形象和产品、服务有关的图像、文字信息，组成一幅生动的画面，向浏览者展示一种形象、一个氛围，从而吸引浏览者进入浏览。这需要设计者具有良好的设计基础和审美能力，能够努力挖掘企业深层的内涵，展示企业文化。这种类型的首页在设计过程中一定要明确要以设计为主导，通过色彩、布局给访问者留下深刻的印象。

2）信息罗列型，这种类型一般是大、中型企业网站和门户网站常用的方式，即在首页中就罗列出网站的主要内容分类、重点信息、网站导航、公司信息等，这种风格比较适合网站信息量大、内容丰富的网站。

一个网站特别是电子商务网站，需要统一的风格，即网站中每一个网页风格必须保持一致，这是进行内页设计过程中须重点考虑的问题。所谓风格一致，是指结构的一致、色彩的一致、导航的一致、特别元素的一致、背景的一致等。

1）结构的一致性，指的是网站布局、文字排版、装饰性元素出现的位置、导航的统一、图片的位置等，也就是网站或公司的名称、网站或企业的标志、导航及辅助导航的形式及位置、公司联系信息等，这种结构一致性的方式是目前网站普遍采用的结构，它可以减少设计和开发的工作量，同时更有利于以后的网站维护与更新。

2）色彩的一致性，指的是网站中各网页使用的色彩与主体色彩相一致，可以改变局部的色块。这种风格的优点是一个独特色彩的网站会给人留下很深刻的印象，因为人的视觉对色彩要比布局更敏感，更容易在大脑中形成记忆符号。

在色彩的一致性中，我们强调的是如果企业有自身的CI形象，最好在互联网中沿袭这个形象，给观众网上网下一致的感觉，更有利于企业形象的树立。

3）导航的一致性，指的是利用导航取得统一。导航是网站的一项重要组成部分，一个出色的富有企业特性的导航将会给人留下深刻的印象。例如，将标志的形态寓于导航之中，或将导航设计在整个网站布局之中等。

4）特别元素的一致性，指的是个别具有特色的元素，例如，标志、象征图形、局部设计等重复出现时的一致性。这种一致性会给访问者留下深刻印象。

5）背景的一致性，指的是各网页中的背景的风格保持一致性。网页中的背景图像在使用上一定要慎之又慎，尤其是一些动画，当网页中充斥着各种可有可无的动画，而这些动画根本与本企业内容无关时，请将它们删除掉。通常是将公司的标志、象征性的简单图片作为背景，并将其淡化，使浏览者在阅读网站内容的同时不经意间记下公司的标志。