网页设计中的视觉语义与寓意

邓念 DENG Nian武汉科技大学城市学院 430083（Wuhan University of Science and Technology City College , 430083 WuHan）

网页设计中的视觉语义与寓意

邓念 DENG Nian
武汉科技大学城市学院 430083（Wuhan University of Science and Technology City College , 430083 WuHan）

网页设计的目的是要建立条理清晰的网站框架,亦即通过设计有秩序的导航,顺畅传达主题的种种内容。因此,设计新颖的视觉语言、建立吸引用户的导航方式成了网页视觉设计的重要内容。在视觉语言一般性表达的基础上,努力提高视觉语言寓意的文化性与艺术语义的表现性。增强网页界面的传达效率与价值则是探讨、研究的重点。

网页；视觉设计；用户；审美寓意

今天，我们使用的网页界面全都具有强大的操作功能和技术含量，通过人-机交流的方式以实现界面使用的功能。界面的信息与受众之间除了一般性语义指示交流之外，还需要使访问者达到视觉上的愉悦甚至产生更为重要的意义。“人”也就成了设计者研究绕不过去的目标对象，如果界面设计传达的信息指示不明确，结果就会导致用户对界面角色产生不确定的信息甚至信息混淆的困惑。即使是在网页呈现内容的方式等基本问题解决之后，视觉语义的表达在界面视觉设计过程中就更加重要。在多元而快节奏的信息社会，“好酒也怕巷子深”，优良产品的价值是要通过更明确、更有文化品质的视觉语言才能淋漓尽致地表达出来，才能被更多的人更快地所接受的。

通常我们在交谈某个事件（信息）的过程中，语言只是传递着某一部分的信息，大量其它信息的传达则是通过语气、面部表情，甚至肢体语言、手势等行为实现的。网页的视觉设计就如交谈过程中的一般性语言，但是其一般性语言以外的各种表现形式就更具有表现价值。一般性视觉语言主要是指直观视觉元素的设计关系，包括文字、符号、色彩、布局、排版、图像等，但是网站的语义风格、艺术表现、文化寓意却能够塑造网站的个性与品质，令网站具有独特的表现力和吸引力。因此，网页界面设计的审美第一层次是用直观视觉元素来阐明网站的基本结构，使整个网站的视觉能够达到同一性。而直观视觉元素包括色彩、布局、图形、字体、输入表单和导航符号等。第二层次则是设计者需要用心研究用户的心理及审美水平，通过体验、人文、情感、道德等载体以形成视觉语义，再通过寓意的表达，使用户在操作界面时完成使用、真情的参与、自我实现的过程，这就是我们所说的“人机合一”。如此，才能实现网页界面功能指示性与表现性的完美统一。

对于网页界面的视觉设计，视觉语义与审美寓意的表现尤为重要。人具有典型的视觉系特征，如和一个人第一次见面，90%都会在10秒钟之内对各自的外表作出评判，在4分钟之内就能对其形成基本的看法[1]。通过外观，可以判断一家餐厅食物的风味；通过包装，可以判断产品的主要特征；通过封面，可以判断书籍的内容。而通过网页的视觉语义传达，可以更加方便快捷地传达网站的全貌与内涵。

一、界面语言传达的视觉语义

对于网页设计的可用性，目前有两种截然不同的观点。“可用性”拥护者认为网页设计应该更加注重使用的便捷。可用性大师Jakob Nielsen①认为：“几乎所有为视觉效果而设计的事情，都会对可用性产生妨碍。将功能完全彻底简单化才是网站设计所要达到的最终目的。应当避免使用图像、色彩背景、精美布局等等。黑色的文本，几乎没有图形的白色背景，才是最好的界面。”与其相反的观点持有者则将界面的视觉语义上升到“体验”的高度，甚至认为好的网页视觉设计在各元素之间建立起主次渐进关系的基础上，要赋予网页一定的意境，达到刺激、吸引访问者的效果[2]。为访问者与网站的交流提供语境，从而唤起人们的认知情感，使网站显得尤为专业与可靠，无形之中便加强了访问者的信任感。

斯坦福大学的一项研究证实，“人们判断网站可信度的首要因素，是他们对网页视觉设计的第一印象。……如果它看起来不可信，或者看起来没有他们想象的那样可靠，他们就会离开，没有第二次测试机会。这与判断生活中其它一些事情的方式，没有什么不同。这也是我们判断一辆汽车或一名政客的方式。”——斯坦福大学普适科技实验室主任B.J.Fogg如是说。

当然，网页设计的视觉可用性和视觉语义表现并不冲突。我们以复杂的建筑体系为例。建筑结构的复杂性远大于网页的技术结构，但优秀的建筑设计师依然可以巧妙地设计出既美观又实用的建筑。美国著名建筑设计大师弗兰克·盖里被誉为“建筑界的毕加索”，他的设计采用多种材料、运用各种建筑形式，并将幽默、神秘以及梦想等元素融入设计之中。他曾经说过：“我喜欢这种在建筑过程中看不见的美，而这种美又常常在技术制造过程中失落了。”盖里设计的沃特迪士尼音乐厅就表达出他独特的设计理念，在建筑形式上传达出音乐厅生命延续的寓意。

可以看出，独特的外观与实用的功能（可用性）是能保持一致的（见图1）。这种平衡也同样可以应用在网页界面的设计中，抢眼的视觉冲击力与完善的功能操作共存 ，就能够最大限度地激发访问者的应用兴趣。因此，设计者要最大程度地保持形式与功能的平衡。假如说，可用性因素使网站具有了功能性，那么视觉设计语义传达则会使网页令人流连忘返，二者兼具才是网页界面设计的最佳方式。

图1 西班牙的毕尔巴鄂古根海姆博物馆②

二、界面语义的直观性

用户在初始登陆网页界面时，也许并不清楚网页界面具备怎样的实际操作功能，即这些功能如何使用或者能否操作成功等。因此，界面要建立起清晰的层次，每个层次都有明确的指示性，各层指示信号的强度根据各层信息的重要性来确定，一旦指示的需求与强度确定下来，包括大小、方向、题材等设计元素就可以有针对性的灵活应用了。

网页界面的功能是由视觉器官来感知，通过感知留存于记忆中的。因此，界面需要更明确的功能操作指示传达语义，比如，提示哪一部分是用来操作的，它们是如何操作的，用户如何与网页界面进行交互等。界面语义的直观性体现了目标动作和实际操作之间的对应。如果用户因为需要操作某项功能而必须记住网页界面的操作方式，在下一次使用时，他将花费更长的时间甚至需要借助一点运气才能找到并激活这一功能，如果这一功能是不可见的，使用者则需要像大海捞针一样寻找。正如许多网页游戏界面都没有文档说明，但游戏的控制方式和功能都是对应的关系那样。如果游戏界面都加上了说明文档，游戏的价值也就不高了。

如图2中的界面提示设计，这两种设计采用直观的时钟和百分制进度条形象，提醒用户操作的时间以及还要等待多长的时间，可以将时间信息有效并且准确地传达给用户。

为了在设计中实现可视性（相关的物品零件必须显而易见[3]），必须系统分析用户的行为特征与所处的文化环境，这种行为特征是人们在长期的生活实践中形成的习惯与经验。比如，我们在界面中设计一个类似音量控制的旋钮图形，用户就会尝试转动那个旋钮。苹果手机的解锁键slide to unlock也是一个很好的范例——它没有华丽的图形，只是设置了一个凹槽与滑块箭头，这样的直观性指示驱使用户滑动解锁键，无论成年人还是小孩都能得心应手的使用。对于初次操作的用户来说，这种直观性界面能够让信息传达变得更为简单、直接和准确。

图2 两个提示界面③

三、“隐喻”在视觉传达中的功能意义

“隐喻”的设计方法就是通过某种指示性的图形帮助使用者快速实施某种功能，“隐喻”虽然不是直接的功能语言，但它调动了使用者的体验经验与想象力，从而使功能语言传达得更加快捷。笔者认为，计算机桌面上的文件夹和回收站图标是最好的隐喻方式。

设计者可以把网站当作一个整体，以一种更加开放的方式使用隐喻。有效的隐喻有助于视觉语言对操作功能的诠释，实现使用功能目标将会变得更加简单。例如，可以把酒店的主页设计成一个有登记台、餐厅入口、服务台等设施的酒店大厅图形，通过点击这些设施的图形，能够分别进入客房预约页面、餐厅菜单页面、服务台页面和当地特色页面。这种“隐喻”的设计方式可以使酒店信息有效传达给消费者并能让消费者即时理解。要达到令人印象深刻的“隐喻”目的，需要概念与视觉上的整体协调。

从认知心理学角度出发，人们会比照自身熟悉的对象，通过对象形体的感知经验来理解无形的抽象概念,寻找建立图形与功能之间的联想从而达到隐喻性表达的思维方式，实现对界面功能的建构与理解。在网页界面设计时使用隐喻手段，能够清晰地表现出功能程序的概念及特点。比如将办公桌隐喻为文件组织的认知，并将其转化为可视化图形，一页纸图形表示一个文件概念；文件夹形状表示网站中的一组文件概念；字纸篓的形状表示存放删除文件的概念等。菜单是桌面隐喻的延伸，访问者从计算机菜单进行选择的行为将会与在餐厅中用菜单点菜联系在一起。在计算机环境中使用“菜单”这个词则加强了人们可以利用计算机等数码产品进行选择的意识。桌面形态系统的隐喻也是概念与事物关联的隐喻。

隐喻应用在网页视觉设计中具有以下的价值：

1.传达操作功能

通过隐喻，找出适合的符号载体以及功能特性与之相关联，使抽象的语义通过访问者熟悉的方式表达出来。图3是被誉为界面设计中应用隐喻传达信息的杰出案例——苹果Mac刻录软件Roxio Toast的图标——刻录软件“烧录”的功能通过烤面包机的形态诠释了出来。

图3 刻录软件图标④

2.易识别

隐喻建立的基础是人们的现实生活以及自身的既往经验，人们在识别图像时，寓意传达的速度比口头描述要快得多。

3.易记忆

相对于文字，图形符号的认知往往更容易让用户记忆深刻。

4.跨文化

隐喻图形相较于词语而言，在交流以及语言障碍的突破上变得更加简单起来。

5. 更少的占用空间

在描述相同概念时，隐喻图形比词语占用更少的空间。Automator软件图标（见图4）是用来帮助创建脚本以自动完成某些任务的。比起其他用鼠标指针、按钮之类来表示的同类软件图标，机器人小助手形象能更好地帮助用户理解软件的实质内容与实际用途。

图4 Automator软件图标⑤

6. 情感引导

视觉设计中的隐喻会让用户感受到抽象意象与情趣。每一种隐喻都可以被看作是一种陈述，它强调了情境中的外观性质，展示了特征，是一种表现情感的手段。

隐喻在网页界面的视觉设计中能够为用户提供直接的通道，使网页界面更具吸引力，但是，隐喻也是存在一定的风险的。当隐喻与访问者心智模型不一致时，视觉语言与指示功能就会模糊不清，因此，任何隐喻手法的运用必须建立在对用户研究的基础上，只有找到用户的行为驱使动因，界面视觉设计语言才能通过寓意的方法实现语义的有效传达。

[][]

注释

①Jakob Nielsen，尼尔森-诺曼集团的主要负责人之一，他被《美国新闻与世界报道》杂志誉为“Web可用性方面的世界顶尖专家”.

②http://wenhuachina.cn.西班牙毕尔巴鄂古根海姆博物馆.

③www.xxchixx.com.提示界面设计.

④http://www.chinaz.com/news/2009/0210/66042. shtml. Roxio Toast图标.

⑤http://www.chinaz.com/news/2009/0210/66042. shtml Automator.软件图标.

[1]Ben Shneiderman，Catherine Plaisant.用户界面设计:有效的人机交互策略[M].张国印，李健利，汪滨琦，译.北京：电子工业出版社，2010：49.

[2]Jef Raskin.人本界面-交互式系统设计[M].史元春,译.北京：机械工业出版社，2011:66-67.

[3]唐纳德.A.诺曼.设计心理学[M].梅琼,译.北京：中信出版社，2010:122.

On the Semantic and Symbolic Meaning of Vision in Web Design

The goal of web design is to build clear website architecture. Website architecture designers can effectively express topic of the website through designing well-organized guide. Therefore, fresh visual language and attractive website guide is becoming the main method of web visual design. The main point of this article is improving the transmission eff i ciency and value of web interface through enhancing the article and culture expression of the visual language based on the general expression of visual language.

website; visual design; customer; aesthetics implication

J0-03

A

10.3963/j.issn.2095-0705.2013.05.009（0041-04）

2013-09-20

邓念，武汉科技大学城市学院艺术学部助教。