详解网页视觉设计的心得技巧
宋翠君
摘 要：当今高技术的时代需要有高情感的环境，网站的情感设计是当下网站设计的重头戏，令人愉悦的外观能够大大提高网站的可用性。众多的视觉元素构成了整个网页的外观，而这些所有视觉元素的外观，又是由它们的色彩、形态和组合方式来形成的，从这三方面把握好视觉元素情感设计的基本规律，有助于我们对网站用户建立起良好的第一印象，给用户营造出高情感的网络环境。
关键词：网页 视觉元素 情感设计
检 索：www.artdesign.org.cn
Abstract ：High technology era needs a high emotional environment. Now the emotion design is the highlight of the website design. Pleasant appearance can greatly improve the website usability. The webpage appearance consist of numerous visual elements， and all the visual elements appearance is composed of their color， shape and the way of combination. Grasp the basic rules of emotion design for visual elements from these three aspects， will help us to establish a good first impression and create a high emotional network environment for web users.
Keywords ：Webpage， Visual Elements， Emotion Design
Internet ：www.artdesign.org.cn
一、网页视觉元素情感化设计的重要性
当今的世界，网络媒体以各种形式充斥着人们的生活：电脑、智能手机、智能家电、手持设备等等，人们能够以前所未有的方便快捷的方式来获取信息。然而，随之而来的一个重大变化却被忽略，那就是无论是在人们的工作、生活还是娱乐时，人们直接接触的对象始终是机器，而不再是人。当人们的信息交流对象更多的是高科技的产品而不是其他人时，人性中情感交流的需求就越发凸现出来。宅男宅女盛行的时代，也正是人们情感缺失的时代。人们需要交流对象是有情感的，或者是能激发自身情感反应的。因此，在整个社会大力发展新媒体、新技术的同时，这种技术的情感化方面的研究必须引起足够的重视，只有用技术的软性来平衡其硬性的一面，才能创造出真正符合人性需求的技术，才能促进社会的和谐稳定发展。
另一方面，从产品发展角度来说，产品的生长周期一般可以分为四个阶段：引入期、成长期、成熟期和衰退期。在网站诞生之后，人们更多的把精力放在其使用功能的实现和完善上。然而，一个成熟的产品应该是物质和精神的双重载体，在满足实用功能的同时，丰富着人们的情感需求。目前，网站已进入其发展周期的成长期，技术手段的完善和丰富为网站的情感表现提供了可能。同时，当技术不再是障碍，各种网站如雨后春笋般兴起的时候，其独有的精神内涵便成了网站的个性化标签，成为其脱颖而出的必备要素。因此，在保障网站可用性的基础之上，充分重视更高层次的情感层面的东西，是当下网站设计的重点，是使网站能够顺利从成长期发展到成熟期的关键所在。
著名认知心理学家唐纳德·A·诺曼教授曾说过：“美观的物品更好用”[1]，言简意赅的道明了网页艺术性与功能性之间的关系。目前，我们可以通过网站做多种事情：浏览资讯、聊天、找工作、玩游戏、写日志、电子交易、听音乐、看电影等等。这些不同的事情有着不同的操作方法，同时操作过程又牵涉到网站用户、用户操作的电脑、网络传输环境、服务器四大对象，任何一个环节出现问题都会直接影响到用户操作成功与否。一旦我们的尝试没有达到需要的结果，最自然的反应是更努力的接着试。然而面对计算机，我们重新做相同的操作难以达到不同的结果。正确的反应是寻找别的解决方法，而负面情感会使人的注意力往深度上深入而不是广度上扩展，积极的情感则使得我们的头脑灵活富有创造性。因此，如果一个网站具有美观的外观，获得人们的喜爱给人带来愉悦的感受，那这个网站的可用性也得以大大提高。
二、网页视觉元素色彩、形态、组合方式的情感设计
唐纳德·A·诺曼在其著作《情感化设计》中把情感化设计分为本能、行为、反思三个层次。“本能水平处于意识之前，思维之前。这是外形显得重要，并会形成第一印象的原因。本能水平的设计与产品的最初效果有关，涉及产品的外形、质地和手感。[1]”本能水平的设计是基于人的本能反应。在本能水平上，全世界的人都大致相同。网页的外形是由众多视觉元素组成的，这些视觉元素主导着网页给用户带来的情感。
（一）网页视觉元素色彩的情感设计
心理学研究表明，人的视觉器官在观察物体时，在最初的几秒内色彩感觉占80%，而形体感觉只占20%，两分钟后色彩占60%，形体占40%，五分钟后色彩形体各占一半，并维持这种状态。在网页的各视觉元素中，表现作用最直接、最快速、最明显的就是色彩。我们打开一个网站，首先给我们留下深刻印象的不是网站的布局，也不是网站的内容或功能，而是网站的色彩体系。可见色彩设计在网页的情感设计里占据着非常重要的地位。鲁道夫·阿恩海姆说过：“色彩能够表现感情，这是一个无可辩驳的事实。[2]”那么，网页中运用的色彩是如何表现感情的呢，下面从三个方面进行分析：
首先，不同色相的色彩会给用户带来不同的心理振荡，形成不同的情感。歌德把色彩划分为积极的色彩（黄、红黄、黄红）和消极的色彩（蓝、红蓝、蓝红）。积极的色彩能够产生出一种“积极的、有生命力的和努力进取的态度”，消极的色彩，则“适合表现那种不安的、温柔的和向往的情绪”[2]。比如可口可乐中国网站的主色运用的就是其标准色鲜红，光亮夺目、热情似火，充分传达出一种激情、快乐的积极情绪，同时又满足了中国人对喜庆的红色的偏好情怀。这里要注意的是，不同文化背景的人对色彩情感的释义会有不同，设计师要顺利传达某种情感，所选择的色相需要考虑到网站用户的生活经验和文化背景。比如在中国传统文化主题的网站里，我们用黄色来表达帝王般的尊贵，但在西方文化背景里，红色才是使人敬畏的帝王的颜色，因为它会使人“想起最后审判的日子那布满天地的红色”[2]。endprint
其次，色彩的情感表现不仅取决于它的色相，还取决于它的明度和饱和度。不同色调配色的网页能够表现出不同的情感。如由高纯色相组成的纯色调充满活力与朝气，给人以积极奋进的情感体验；加入了大量白色的明色调透明、明净、清丽，给人以轻快的感受；加入了适量灰色的中灰调高雅、大方、古朴，给人以安宁、沉静的心理感受；加入了大量黑色的暗色调低沉、冷漠，让人觉得压抑，心情黯淡。这些不同色调引发的不同感情倾向，为网页设计师运用色彩表达情感提供了另一种途径。
最后，还有一些外在的因素会影响到色彩的情感表现，如色彩的形式、表现的主题等。康定斯基在《论艺术的精神》里提到：“色彩和形式之间的必然联系向我们提出了形式对色彩的作用的问题。”“很明显，某些色彩的内涵能够因为所用的某些形式而得以加强或减弱。一般来说，刺眼的色彩较适用于轮廓鲜明的形状（如黄色用于三角形），柔和、深暗的色彩较适用于圆形（如蓝色用于一个圆圈）。”[3]色彩必定要以一定的形状呈现出来，同色彩一样，不同的形状也有不同的情感，如果两者表现出来的情感一致，则色彩的情感内涵得以强化，反之则弱化。比如网页界面中的Hot图标，常常设计成醒目的红色或者红黄色再配以有着尖角的星形，从而营造出一种紧张的气氛，以吸引浏览者的注意。
另外，同一种色彩表现出来的情感还可以因网站的主题而改变。比如前面提到的可口可乐网站的鲜红色，传达出一种热情、快乐、喜庆的情绪，但同样的红色运用到恐怖电影的网站上，则表现出的是让人心惊胆战的血腥气息了。这是因为人们在观看色彩时，除了感官被动接受色彩带来的刺激外，思维还会主动携带着这些色彩所要表现的情景的含意来进行观察。
（二）网页视觉元素形态的情感设计
除了色彩，形态是被眼睛把握到的物体的第二大基本特征。在用户对网页第一印象获取的过程中，继色彩冲击之后紧跟着的重要信息便是网页上各视觉元素的存在形态。在人们阅读这些元素的具体内容之前，它们的外形就已经在人们的心理上植入了相应的情感。在网页中，形态有两大类型，一是就外部形式而言的实体形态，比如一张圆形的图片，一条笔直的分割线。二是就骨骼结构而言的假想形态，比如人的视线流程所形成的线条。
网页中各视觉元素的存在形态可归为点、线、面三种类型。点是静止的、稳固的、简明的。单独的点有很强的注目性，能够产生视觉中心的效果，网页中单个点的形态能让人心灵安静且注意力集中，这种形式在网站的首页更常见。需要注意的是，单个的点放在页面中的位置不同所引起的心理感受也是不同的。放在画面的正中间，能给人平静、聚焦的感觉；放在画面顶部，会给人以不稳定感；放在画面的底部，能给人安定的感觉，但容易被忽视。因此在以单个点为布局形态的页面中，常把最重要的信息如网站LOGO等形成的点放置在画面三分之二偏上的位置。
线是源于点的运动，线的最基本形态有直线、曲线两种。正如康定斯基在《点、线、面》里所述：“直线和曲线组成了一对最基本的对立线。[4]”线有很强的心理暗示作用，不同的线具有不同的感情性格。政府机构类、资讯门户类网站的版式往往是由直线划分组成的网格型，因为直线严肃有力、安稳大气；儿童、女性、娱乐类网站的版式则多采用曲线型，因为曲线轻松活泼、柔美优雅。折线有一种速度感同时又不断改变方向，让人立刻联想到激动、不稳定和力量感[5]，因此运动类网站的页面上常见到这种形态。直线中的水平线让人有宁静、平和、安稳的感觉，而垂直线给人崇高、尊严、有力的感觉，不断往下延展的垂直线则强化了线的运动性，如目前流行的瀑布流式布局，随着页面滚动条向下滚动，这种布局会不断加载数据块并附加至当前尾部，错落有致的图片如同瀑布一般倾泻而下，给人轻松自由的心理感受。
面是线的移动终结而形成的，一般来讲，由什么类型的线组成的面，它就具有该种线的情感特征。一个网站的信息量很多，为了更有效的传达信息，网页上的内容文字和内容图片都是以块面状来展现，因此它们不同的情感特征更多的是通过其轮廓线的形态来体现，我们可以结合前面所述的线的情感特征对其边缘轮廓进行处理。
（三）网页视觉元素组合方式的情感设计
网页中视觉元素的色彩与形态具有丰富的情感特征，这在上文已有详细论述，另一方面，这些视觉元素之间的组合方式同样能给人带来不同的情感体验。能够带来美好的情感体验的组合规律有平衡、对比、节奏、比例等。
一般而言，平衡是指矛盾双方在力量上相抵而保持一种相对静止的状态。在网页中，通过对视觉元素的位置、大小、比例、色彩、质感等各方面进行设计，页面可以形成一种视觉平衡。平衡关系是视觉美感的最基本要求，视觉上的平衡能够给观者带来心理上的平静。平衡包括对称式平衡和非对称式平衡，对称式平衡是可见的形式上的平衡，而非对称式平衡则是抽象的力场上的平衡。对称式平衡构成的网页给人以庄重、稳定的感觉，而非对称式平衡构成的网页视觉上更丰富活泼、更有动感。
对比是把反差很大的两个视觉要素成功地放置在一起，在某些方面这两个视觉要素有着鲜明的反差，而在其它方面，他们又显示出统一和谐的感觉。网页中的对比关系可以通过视觉元素的色彩、形状、方向、位置、数量等多方面的比较来实现。合理的运用对比关系不仅能够使页面信息有着明确的主次关系，而且能够使页面的视觉效果更加活跃，从而避免沉闷、呆板的情感体验。
节奏本是指音乐中音响节拍轻重缓急的变化和重复，在设计上则是指以同一视觉要素连续重复时所产生的运动感。需要注意的是，这种重复是有变化的而不是简单重复。在网页中，重复的同一视觉要素很多，如一段段内容文字、一个个栏目标题、一张张图片等等，如果这些视觉元素都是按照同一种形式简单重复排版，可以想见最终的页面将是多么单调乏味！而具有节奏韵律的页面，应该在这些元素重复放置时，进行大小、色彩、形态、距离等方面的变化，从而形成错落有致、富有律动感的效果，赋予页面以活力和生命，给网站用户带来美妙的情感体验。
比例是数量之间的对比关系，是部分与部分或部分与全体之间的数量关系。恰当的比例有一种谐调的美感，是视觉美感的重要内容。最知名的如早在古希腊就已被发现的黄金分割比1：1.618。在网页设计中，各视觉元素之间形的大小、宽窄、高低的比例关系协调与否，是直接决定着页面形态的视觉美感的重要因素。
三、结语
网页上聚集着各种各样的视觉元素，像文字、图片、动画、背景等等，文字又分标识文字、导航文字、标题文字、正文等，图片又分为图形、图像、小图标等。众多的视觉元素各自传递着丰富的信息，实现着网站的功能。它们构成了整个网页的外观，而这些所有视觉元素的外观，又是由它们的色彩、形态和组合方式来形成的。把握好这些视觉元素色彩、形态、组合方式的情感设计基本规律，便能有目的有意图的营造出适当的网页情感，从而给网站用户建立起良好的第一印象，给用户营造出高情感的网络环境。
注释
[1] [美]唐纳德·A·诺曼.情感化设计[M].付秋芳，程进三，译.北京：电子工业出版社，2005：2-20
[2] [美]鲁道夫·阿恩海姆.艺术与视知觉[M].腾守尧，朱疆源，译.成都：四川人民出版社，2001：457-467
[3] [俄]瓦·康定斯基.论艺术的精神[M].查立，译.北京：中国社会科学出版社，1987： 37
[4] [俄]瓦西里·康定斯基.点、线、面——抽象艺术的基础[M].罗世平，译.上海：上海人民美术出版社，1996：61.
[5] 段轩如.艺术的表达与表现[M].北京：北京交通大学出版社，2009：21.endprint
