数字产品设计与心理学16 - 视觉隐喻

数字产品设计与心理学

隐喻是借助过去已经熟悉的事物,来认识和理解新事物的方法。

人类的概念系统是通过隐喻性来构成和界定的。隐喻允许我们依据一个经验领域去理解另一个经验领域。(莱考夫 & 约翰逊,2015)

我们的概念系统建立于真实世界中的各种经验。在计算机问世的早期,人并没有与计算机对话的经验。为了跨越机器与人的沟通鸿沟,数字产品一直都有使用隐喻的传统。

桌面就是最经典的人机交互界面隐喻。早在 1970 年,施乐帕洛阿尔托研究中心的 Alan Kay 就在计算机系统中引入桌面隐喻。苹果公司在 1984 年推出图形用户界面 Macintosh 系统,这是计算机系统首次提供了一整套桌面办公的隐喻,包含现实生活中的物品图标(例如垃圾箱)。这让那些熟悉日常办公室环境的用户,能够直观地理解如何操作电脑。

2.3.5Apple_Macintosh_Desktop

图片来源:https://en.wikipedia.org/wiki/Macintosh

50 年过去了,桌面隐喻已经进化到 VR 的版本:

2.4.5OculusUI

图片来源:https://developer.oculus.com/

借助现成的比喻,可以快速传达复杂的含义。善用隐喻是 UI 界面设计的重要能力。具体来说,隐喻可以帮助设计师:

  • 引起注意
  • 解释抽象或复杂的概念
  • 触发情绪
  • 营造熟悉和信任感
  • 激励用户采取行动

概念隐喻

大规模的概念迁移和隐喻产生,往往出现在技术发展的早期,因为有太多模式的概念等待人们去了解和学习。以下是人机交互领域早期的隐喻集合的整理:

用户界面隐喻例子(Dennis,1997)

2.4.5用户界面隐喻例子

把生活中人们所熟知的概念,迁移到难以简单描述的数字产品和服务,是很多革命性产品早期成功的关键。

Facebook 最早使用学生档案的类比,开始在常青藤学校内推广。这对学生们来说既熟悉又自然。很快,这个概念就在学生群体中扩散开来。

图片来源:https://uxplanet.org/metaphors-and-analogies-in-product-design-b9af77c18dba

图片分享网站 Pinterest 的快速崛起,则得益于「把图片钉在画板上」这个大家熟悉的、来源于日常生活的隐喻。

Pinterest-blogger-tips

图片来源:http://www.myborrowedheaven.com/2016/01/pinterest-tips-for-bloggers.html

隐喻之所以有用而且高效,是因为它在经验之间构建起了桥梁——过去的、其他领域的经验,与未来的、另外一个领域的经验部分相通。而经验来自于人与真实世界的互动。如果想要构建出好的隐喻,就需要先深入观察人在特定情境中的需要、想法、行为、反应,知道他们有哪些熟知的概念和经验。在理解经验的基础之上,再去抽象出旧经验可以用于新经验的部分,并且以生动形象的方式表达出来。

作出好类比的秘诀就是作出更抽象的类比,就是那些在编码方式或是概念框架之间的类比。

(侯世达,2018)

形式隐喻:拟物化

数字产品中的所有内容都是数字——没有体量,无法触摸,怎么能让人一看就懂、知道该怎么操作呢?互联网早期的界面设计,大量借用了物理世界中的物品来表示虚拟世界中的对象:文件夹、垃圾桶、书架、指南针……在移动互联网爆发早期,更是兴起了拟物化设计风潮,目的是帮助人们在陌生的交互平台上,快速建立起熟悉的认知。

2.4.5ibooks111

iBooks 早期的拟物化界面。图片来源:https://www.wired.com/2010/07/ibooks-updated-with-image-zoom-audio-and-video-support/

设计是否需要拟物,并不由审美偏好决定,而是由用户对数字产品的经验和期望决定。如果用户在物理世界中有丰富的经验,但是没有使用过对应的复杂的数字产品,拟物化就是降低人们理解成本的必然选择。从物理世界迁移过来的复杂数字产品,总是倚重于还原物理对象的外表,来帮助人们理解和使用。比如,很早就开始了数字化浪潮的音乐产业。

2.3.5musichardware

处理声音的硬件和软件。图片来源:https://unsplash.com/@mirnyy

著名的数字音乐工作站软件 Logic Pro 中,有大量模拟物理硬件的界面设计,例如各种合成器、音效器、乐器等,目的是让已经熟悉了物理硬件的音乐创作者们,能与硬件一一对应起来,快速学会使用软件的功能。

2.4.5Logic-Pros-Logic-Pro-X-Plug-in-L

图片来源:https://9to5mac.com/2019/08/11/logic-plug-in-link/

符号图标

符号是包含了一定意义共识的图形化表达。数字产品使用大量符号来表示抽象的概念,例如各式各样的图标。图标往往是对真实世界中物体或概念的抽象表达,例如用四五根线条就可以组合成一个垃圾桶的形状:

2.4.5trashicon

真实的垃圾桶很复杂,为什么人们依然能够轻松识别垃圾桶图标呢?在前面的章节中,我们知道视觉搜索时,眼睛会识别物体的边缘,再组合成熟悉的模式,也会以大小、颜色、方向等特征来加速搜索过程。图标的设计就是利用了人的注意和视觉加工机制,来强化人们对特定图形的识别。如果说文字和概念隐喻是整体经验的迁移,那么图标的隐喻,则更多利用了人类经验中相对固定的图形记忆。

用图标代表物体、概念或功能,依赖于我们基于过往经验学习图标意义的能力。比如说,一个从来没有了解和使用过 Snapchat 的人,看见 Snapchat 的 Logo 可能会完全摸不着头脑:

2.4.5snapchat

具体来说,影响图标识别的因素包括(Isherwood et al.,2007):

  • 具体性:描绘现实生活中物体或人的具体程度
  • 视觉复杂性:图标细节程度和复杂程度
  • 语义距离:图标本身和它所代表意义之间的关系是否接近
  • 熟悉度:用户对图标本身或对图标指代的对象有多熟悉

随着人们使用数字产品的经验越来越丰富,图标越来越简单、抽象。现在主流的 UI 设计,基本以简洁的线型或基本几何图形组合而成的图标为主。

虽然图标可以用精简的形式表达较复杂的含义,但还是要留意用户对图标所传递概念是否熟,尽量缩小图标和意义之间的语义距离。如果语义距离太大,或者同时出现的多个不易区分的图标,就应该考虑增加辅助的识别方式,例如图标文字、帮助提示等。下面是 Snapseed 和 iOS 分享照片的两个功能弹窗,请比较一下它们如何处理多个图标同时展示时的识别问题,以及为什么要这么处理,可以如何优化?

2.4.5manyicons

Ref

  • 乔治·莱考夫, & 马克· 约翰逊. (2015). 我们赖以生存的隐喻 (何文忠, Trans.). 浙江大学出版社.
  • Dennis C. Neale, & John M. Carroll. (1997). The Role of Metaphors in User Interface Design. In Marting G. Helander, Thomas K. Landauer, & Prasad V. Prabhu (Eds.), Handbook of Human-Computer Interaction (Second Edition) (pp. 441–462). North-Holland.
  • 侯世达, & 桑德尔. (2018). 表象与本质 (刘健, 胡海, & 陈祺, Trans.). 浙江人民出版社.
  • Isherwood, S. J., McDougall, S. J. P., & Curry, M. B. (2007). Icon Identification in Context: The Changing Role of Icon Characteristics With User Experience. Human Factors, 49(3), 465–476.
kidult00 wechat
扫码关注 00 的公众号
如果文章帮您节省时间或者解答疑问,不妨打个赏 :)