网页视觉设计

网页是构成互联网的基本元素。作为新兴的一门设计学科，网页视觉设计不仅担当电商信息的主要载体技术，还是一种商业视觉的表现艺术。网页中最基本的两个元素是图像与文字，优秀的设计师会通过目标客户的心理特点与消费行为将图像与文字等信息内容构成视觉元素传递给消费者，最终达成顾客的消费触动。

6.6.1　网页设计要素

消费者为中心。在设计过程中，要时时刻刻站在目标客户的角度去思考每一个细节，在这些基础上来确定所设计网站的风格和特色。

功能性为基础。网页设计的界面最主要的功能之一就是传递一定的信息。若传达信息模糊不清，就会导致网站的界面视觉效果显得零乱，使得消费者在浏览网站时产生不必要的误解。

风格统一为整体。在网页设计中，页面之间的整体风格需要保持连贯统一性。网页的各个部分没有出现孤立状态，这是网页界面整体性的保持的必然条件。除此之外，结构、色彩以及内容的跳转上要有连贯性，使整个级别页面各部分融洽。设计师在网页中交错运用各种视觉元素将各级别界面连接在一起，使得其风格统一，让客户在浏览网站时产生愉悦感。

差异化为特征。在符合网站主旨的前提下，更能够吸引消费者的网站必然是具有商家独特的艺术个性的。

简洁化为导向。网页界面中的内容过于烦琐会使客户疲于使用。网页的作用主要是为了向客户清晰地传达重要的信息内容，复杂的排版模式、过多的图片堆积，反而会让网页的目的本末倒置。

6.6.2　网页设计中的基本形式元素

点、线、面是网页设计和印刷类平面设计中共同拥有的基本形式元素，在利用点、线、面进行设计时都具有相同的艺术规律。在网页设计中这些元素相辅相成，最终合理搭配才能形成一个完美的界面。网页设计师通过这些元素、符号的特征的再次创造，表达网页所想传达给客户的情感，这也是满足目标顾客对于网站的视觉需求。

6.6.3　主要排版方式

网页设计的第一步就是确定好网页的版式，特别是设计师需要根据客户的消费体验将最重要的信息布置在最佳的视觉领域里。在各式各样的网站中，比较常见的排版模式有骨骼型排版、网格型排版、水平型排版、分割式排版、L型排版、Z型排版和大图片背景排版等。

骨骼型排版。此排版方式有点类似于报刊的版面布局，一般是以竖向分栏比较多，如图6-9所示。这种版式可以最大化将丰富的内容展现给客户，并且做到条理清晰。适合于信息量极大的网站。

图6-9　骨骼型排版

网格型排版。这种排版方式建立在网格、模块的结构中，如搭积木一般，带给用户一种规则、理性的感觉，如图6-10所示。横向的网格设计可以交错的排列来打破网格边界的束缚，显得画面节奏感较强。

图6-10　网格型排版

水平型排版。此种排版模式安静而平定，用户在浏览界面时会将视线从左往右横向移动，慢慢感受出一种悠闲的氛围，如图6-11所示。这种排版适合于不需要太多的信息量的网站。

图6-11　水平型排版

分割式排版。此类排版利用了直线来分割界面，优势是直接将网站所想表达的最重要的两个主体内容传递给用户，简洁明了，如图6-12所示。这种网页版式适用于商家推广两个重要的货品信息或企业的独有的两个竞争优秀。

图6-12　分割式排版

L形排版。在L形排版中，导航一般布置在界面的左侧，下方放二级导航或者次要信息，中间放置重点主题内容，如图6-13所示。此种版式适用于多级页面的网站，优势在于结构清晰，当用户进入界面时能感到布局有条理。

图6-13　L形排版

Z形排版。此排版是一种相对自然、流畅的浏览方式，通常适用于报纸，当然，网页界面也同样适用，如图6-14所示。一般来说，客户会先在界面的顶部从左往右水平浏览，接着向左下方移动，然后在页面的最后一行再进行一次水平的搜寻。

图6-14　Z形排版

大图片背景排版。将高清的大图片用来做网页的背景是比较常见的一种设计方式，如图6-15所示。大图片的背景的运用，不仅只适用于一些个性比较独特的网站，很多创意、国际化的企业网站也可以尝试，这种背景设计版式带给用户大气、自由的氛围。

图6-15　大图片背景排版

6.6.4　字体设计

文字在网站界面设计范畴中不仅属于平面设计中的重要部分，还是网页设计的重要载体。网站界面设计中的文字语言，已经成为网络中传递信息的最基础表现手法之一。此类文字设计内容主体是字体形态、色彩选择和界面中呈现的编排艺术等，文字设计是研究以文字为主要造型元素的视觉传达设计，它已经成为设计的一种艺术表现形式，带给人们形象美感并且以此来感染用户的看法和情绪，从而实现网站树立企业文化以及传递内容的目的。文字语言除了能向使用者传递信息，还能够增强网页的视觉效果。文字的排版模式都必须遵循和整体网站页面相互统一的原则。如何处理好文字与网页的关系以及怎样设计文字适合的表现美感形式，这都是网页设计师需要特别注意的。字体设计作为网页设计的重要角色，视觉的造型处理必须要根据图形设计的规律来有效地指导文字的分布面积、颜色选择、形态构成等几个部分，由此促使文字在界面中使用时能更好地表现内容的准确性和视觉的冲击力。

6.6.5　图像设计

为能打破网页文字中的枯燥感，图像的运用能使界面更加生动。在网页设计中，图像占有面积相对比较大并且对用户具有强大的视觉影响力，这样的方式与文字元素相辅相成，帮助不同地域语言文化的使用者清晰、容易地理解网站信息，实现与目标用户的内心交流。

网页中的图像语言的构成需要符合目标使用者的审美心理，根据不同风格类型的网站定位，选择适合的主题，进行灵活的图像搭配，营造良好的视觉环境。最后再依据视觉流动的特点规律，对用户进行主动性的引导。

6.6.6　导航设计

导航菜单是网页界面设计中重要的组成部分，导航并不只是让客户从一个网页转换到另一个页面的链接，还是一种网站通道的思维，这种思维让进入的客户清楚地了解网页中的信息，不用花费太多精力就可以在可及范围之内快速找到所需要的内容。因此，网页设计师就需要考虑当用户穿梭在网站中时如何能更有效地把握网站的立体构造。并且在这个前提下，要清晰传递给用户本人是怎样进入当前页面来获取所需要信息的。

在网站界面中，好的导航菜单应该将功能性和美观性相互结合，一般来说满足以下三点：设置明确的导航菜单，操作简单便捷，安排于用户熟悉的位置。

6.6.7　网页色彩设计

在色彩元素的运用中，设计师要学会运用色彩表达其网站的风格或是行业的属性，通过利用设计色彩的普遍规律，结合网站自身的特点，将色彩语言的独特作用充分发挥。通过对网站主题进行一定的分析，设计师要选择相对应的色彩来向用户表达态度，并将此颜色作为网页用色的基本色彩模式，将不同的色彩元素相互组合，主动调动用户在心理上的各种感受。使用户在浏览网页内容的同时能够形成共鸣，这样的网页设计才能更好地融入人们的使用环境中。

同时色彩语言既能真实反映物象和产品的特定内容，也能够强烈地引起注意。网页可以采用强对比、高纯度的色彩进行搭配或者颜色分割。网页设计师可以利用各个色相间的相互对比来提升浏览者的阅读兴趣，并且能够使用户对其网站印象深刻，由此来为商家树立良好的品牌形象。

6.6.8　网页视觉设计实验与研究结果分析

研究目的：实验以眼动仪的运用为主要研究形式，研究消费者在服饰网页中的眼动轨迹，以及主要视线集中点。

实验准备：实验一共随机选取了50名被试者，所有被试者的视力或者矫正视力均属于正常，不存有色弱、色盲等视力疾病问题。

实验材料：实验研究共筛选了十张设计优秀的服饰官方网站图片，包括了男装、女装以及鞋品网站。根据实验要求，将网页图片进行编号并把所有的图片格式经过PHOTOSHOP软件处理为1024*768像素，由此达到眼动仪实验机器显示屏最合适的尺寸大小。

实验材料的数量：理论上来说，给被试者展现的实验图片越多，实验结果就越客观可信。但依据心理学实验的结果表明，实验测试时间不可以过长，不然被试者易产生厌烦心态，最终影响实验效果。因此本实验决定网站图片共选10张，每张图片每次呈现10秒，总共时间控制在5～10分钟。

实验结论：

第一，模特脸部受到的关注时间最长，如图6-16所示。因此一些网页在图片素材处理时，截去或概念化模特脸部，使观察者把更多注意力放在产品上。

第二，网页所传达的信息越丰富，关注时间会被均分，如图6-16所示。简洁的排版更能突出设计者传达的信息。

图6-16　实验反映消费者关注区域与时长图（1）

第三，字体并非越大越突出，可阅读性较强的字体更容易受到关注，如图6-17。因此，设计师在设计品牌名、导航栏等重要文字信息时，多采用清晰、可阅读性强的字体。

图6-17　实验反映消费者关注区域与时长图（2）

第四，文字处于图像正中时，受到的关注最多，因此设计师将想传达的重要文字信息放在此处，如品牌Logo、新季产品信息等。

第五，当文字位于图片正中时，观察者的关注点明显在文字上，如图6-17所示。