装饰杂志,《装饰》杂志社, 立足当代 关注本土 www.izhsh.com.cn

图形用户界面设计中隐喻的作用研究

  • Update:2014-04-27
  • 朱小杰 山东工艺美术学院视觉传达设计学院
  • 来源: 《装饰》杂志2014年第3期
内容摘要
本文通过实例分析对图形用户界面中视觉元素的隐喻功能做了梳理,探讨了隐喻的作用机制,并尝试形成了界面设计隐喻模型。此外还从隐喻的心理认知的角度对其在界面设计中的优势做了进一步探讨。

图形用户界面(GUI)自诞生之初就和隐喻有着密不可分的关系。为了更好地将计算机的功能和操作方法展现给用户,施乐帕洛阿尔托研究中心(Xerox PARC)的用户界面开发人员借用了“办公室景象”,把系统界面和程序图标设计成办公室中常见的文件、档案夹、垃圾桶等形象。藉由苹果以及微软的个人电脑在全世界的普及,这种“隐喻”式的图形界面成为计算机界面的主流。近年来移动终端设备如手机、平板电脑等迅速发展,引发了对界面设计新的思考,深入研究隐喻的作用对界面设计的方法以及发展有指导性的意义。

1. 信息传导模型
2. 交互设计中的隐喻模型

功能化图形用户界面需要具备两个层面:能指层面和所指层面。能指层面是图形界面中组件的形状、颜色、位置等,是用户能够直接看到的;而所指层面则是图形界面组件的交互功能和内容,是用户间接感受到的。所指层面的内容通过能指层面的形式表现出来,形成符号化的图形界面。最初的人机交互界面(如Dos 系统界面)中,计算机功能通过程序的命令行表现,所指内容和能指形式没有直接的联系,需要用户生硬的记忆;而在图形用户界面中,能指形式借用了用户熟知的形象,利用这种形象和所指内容的内在联系帮助用户识别和操作,大大降低了用户的认知成本。如操作系统中的文件夹,不仅图标被设计成现实生活中的样式,而且还可以通过拖拽等方式操作,无论是形象还是操作方法上都显而易见。利用这种方法设计的用户界面,能指层面就是隐喻的“喻源”(Vehicle),所指层面则是“本体”(Tenor),形成完整的隐喻构型。
一、图形用户界面中视觉元素的隐喻功能
1. 形状
内容标识。利用不同的形状对界面元素进行标识是最普遍的方法,这其中拟物是最直观的方式,习惯性的符号也被经常用到。无论是拟物还是习惯性用法,利用容易被理解的形状可以帮助用户迅速了解界面按钮的功能或者内容的性质。
操作引导。界面设计中的一些功能组件如窗口中的按钮、滚动条以及音、视频播放器中的进度条等,具备引导用户操作的功能,通过形状给用户明确的操作指引。
2. 颜色
状态标注。视觉界面设计中,颜色经常被用作表现当前组件的工作状态,如按钮、文本的底色变化可以表示其对用户操作如over、down、selected 等的回应。
视觉引导。视觉界面设计中通常会用鲜艳的颜色来引起用户的注意,常用在一些修改、删除等功能的按钮上,软件新增的功能也常常会利用特别的颜色和现有功能区别开来。
功能暗示。视觉界面中的特定颜色往往有约定俗成的功能,如绿色往往被用来表示输入或操作正确,红色表示错误或失败,橙色表示提醒或警告,灰色则常表示不可用的状态等等。
3. 位置
操作指引。视觉界面中元素的位置也有其特定的意义。如“前进”按钮通常被放在页面的右面,而“后退”则被放置在页面的左面,这种位置的意义符合用户的习惯和操作方式。合理的位置可以帮助用户迅速准确地理解和操作;反之,则会给用户带来疑惑和困扰,进而可能会引起误操作。
内容隔离。和平面设计一样,界面设计中也常用距离来分割不同的内容,形成明确的阅读指引。
4. 交互动作
确认或拒绝。一般情况下,系统或软件应用会用声音提示用户的操作正确与否,但有的时候视觉交互反馈更直观、更具表现力。及时、适当的视觉反馈可以增强用户的代入感,进而提升操作体验。
信息提示。如“弹性滚动”,当使用触摸板等设备时,沿着滚动条的方向拉到头之后继续拉动,会产生一种拉过头的效果,并显示出背景上的材质,松开手指后画面会自动弹回默认的位置。这种交互动作和用户的操作相呼应,功能和形式匹配融洽,受到用户的欢迎。
应当明确的是,在大部分情况下,这些视觉元素都需要相互搭配才能完成较好的隐喻并发挥视觉界面的作用。如软件中功能按钮的“分组”就需要外观和位置的配合:从外观上看,同一功能组内的按钮形状需要一致,功能组之间则应当有较明确的区别;从位置上看,功能组内按钮的距离要小,而功能组之间的距离则要大一些。
二、隐喻在视觉界面中的作用机制
1. 视觉界面中的隐喻模型
那么隐喻是如何在视觉界面中产生作用的?雷迪(Michael Reddy ) 在1979 年的《传导隐喻:语言中关于语言的框架冲突的个例》一文中提出“传导隐喻”的论点,意即说话人将思想通过语言表述传递给听话人,就像将一个物体顺着管道传送给另外一个人一样。这个论点和现代信息理论的创始人维纳(Norbert Wienner)的信息传导模型一致。(图1)
在语言隐喻中,这个容器往往是指某个词汇或者句子,听话人根据言语接收到内含信息。而在视觉界面中,这个容器则是指界面中的UI组件如窗口、动作条、按钮等,还有视觉元素形状、位置、色彩等等。用户根据UI 组件和视觉元素推测到当前界面的作用和操作方法。在这个过程中隐喻的作用非常重要。莱柯夫和约翰逊说过:“隐喻的本质是以另一件事和经验来理解和经历一件事或经验。”[1] 若要让界面起到应用的作用,就需要根据用户相似的经验、感觉或情感特性来设计。
根据莱柯夫和约翰逊的“结构隐喻”的理论,隐喻的形成并非是某个词汇或句子单独作用的结果,而是通过一个“命题结构”形成的,人们用熟悉的、清晰的概念去构筑另一个概念。同样,视觉界面中的隐喻也绝不仅仅是界面视觉元素本身。如经典的回收站的图标,除了拟物的垃圾桶的形象,更重要的是,这个隐喻形成了经验的映射。现实生活中人们将垃圾丢弃到垃圾桶当中,这是一个“经验结构”,界面设计中通过图标的拟物建立起隐喻关系,帮助人们理解计算机删除文件的程序动作。所以纯粹的“拟物”并不能算作完善的界面设计,还需要看是否通过界面将和人们的经验建立起共同点。
据此我们可以初步得出交互设计中视觉界面设计的隐喻模型:找到和当前程序功能有共同点的用户经验,分析该经验代表性的形态或动作,再将其用抽象或直接拟物的方法设计成视觉用户界面或交互行为。(图2 )
2. 用户经验的形成和积累
图形用户界面诞生之初,人们对视觉界面的使用经验为零,这使得界面设计师不得不从人们的日常生活中寻找灵感。施乐Star 电脑就找到办公室里面的场景作为模仿对象,“桌面”、“文件夹”、“回收站”等经典的界面元素也就此诞生;风靡一时的iOS6 中的拟物设计同样也是这个原因。但随着个人电脑的普及,人们开始熟悉图形用户界面和操作,这逐渐形成了新的经验。微软WindowsPhone7 以及Windows8 采用了全新的metro 风格,不久之后苹果在iOS7 中也几乎完全抛弃拟物设计而替换为扁平化风格,这些改动都是因为人们已经熟悉图形用户界面的逻辑,用户对界面使用经验的积累反过来为界面设计带来了新的灵感。
因此,该隐喻模型中的“用户经验”大致可分为日常生活经验和图形界面使用经验两类。设计师除了需要具备基本的图形设计能力,还要养成观察生活、研究优秀作品的好习惯,这些可以为把握用户心理以及开拓设计思路提供素材。
三、利用隐喻进行用户视觉界面设计的优势
认知和引导。所谓 “以其所知谕其所不知而使人知之”( 刘向《说苑•善说》),隐喻的界面在程序功能和用户经验之间建立了桥梁,可以带动用户的联想和推理,大大减少了用户的学习成本。iOS7 界面设计规范中,将返回键统一设定在顶部状态条的左面。这并不仅仅是一个外观的问题,而是将返回键的位置和功能链接到一起,形成了隐喻关系。这种设定使得用户使用任何应用,都可以到同样的位置找到返回的功能。
更富表现力。在文学作品当中的,隐喻可以让词句更丰富,意象更饱满,可以把本来比较模糊、比较隐晦的感觉表现出来,让词句更有文学色彩。界面设计中的隐喻也一样,隐喻的手法给界面设计和交互设计提供了更大的可能性,不仅可以塑造更美观的界面,也可以营造让用户熟悉的情感氛围。如拟物的图标往往精致而富有立体感,能够快速抓住用户的眼球;而iBooks 中翻页的拟物则大大降低了用户对电子读物这种新的阅读方式的排斥。
创新。胡壮麟在他的《认知隐喻学》当中说,隐喻的作用是在人们用语言思考所感知的物质世界和精神世界时,能从原先互不相关的不同事物、概念和语言表达中发现相似点,建立想象极其丰富的联系。反过来讲,在视觉界面设计中利用这种丰富的想象,找到界面和用户经验及认识体系的联系,就更容易进行设计上的创新。Twitter 公司在2013 年5 月份获得“下拉刷新”的专利,这个创新的设计就是建立在人们对现有隐喻“弹性滚动”认识的基础上。Twitter 公司将这个设计进行了延伸,当用户拉着列表不放的时候,“弹性滚动”便增加了刷新的功能。对于设计师来讲,隐喻的方法特别是隐喻的思维模式具有发散思维、开拓创意的作用,通过对数字产品的功能和内容的研究找到现实场景中对应的实物或行为模式,能够给界面设计带来更多的创意;而对用户来讲,利用隐喻的方法完成的界面,无论是在降低学习成本还是提升使用效率上,都具有很多的优势。
总结
不管是否是设计师的有意而为,现在较出色的用户界面设计作品都或多或少地采用了隐喻的手法——正像人们言谈中无意中用到的修辞一样。研究隐喻在用户界面设计中的作用机制对于形成完善的界面设计理论并指导设计实践是很有意义的。根据文中的实际案例我们也可以发现,隐喻的方式对于开拓设计思路、提升用户体验都有很大的帮助。当然设计实践中也有一些实际的问题需要注意。首先是要尊重用户的习惯性用法。除了创新,界面设计非常重要的原则是遵循用户的习惯。只有认真研究用户并将用户经验总结提炼,才有可能做出可用并实用的设计。如果为了隐喻而隐喻却忽略了其背后的用户经验和习惯,就背离了设计的根本。其次是要注意要从结构化的角度去理解用户经验,只有将其完整地应用到界面中才能发挥隐喻的作用,进而被用户认知和理解。碎片化的、单纯的拟物是没有意义的。再次,界面设计中的隐喻不仅仅是外观的拟物,颜色、大小、位置和操作方法都是用户使用经验中的一部分。
注释:
[1] 胡壮麟:《认知隐喻学》,北京大学出版社,2004,第10 页。
参考文献:
[1] Bill Moggridge, Designing Interactions, MIT Press,2006.
[2] 洪峰:“ 符号学视野下的隐喻思维”,《青年文学家》,2012.29。
[3] 胡壮麟:《认知隐喻学》,北京大学出版社,2004。

 

评论

暂无评论!
填写评论
用户名 密码 匿名发表   没有用户名?
[发言请遵循国家相关法律]