界面中的隐喻设计研究综述

王露露 谢伟 刘柱

摘要：对界面中的隐喻设计的研究进行了梳理与总结。从源自修辞学的隐喻视角切入，以概念隐喻理论中的映射论为基础，从界面隐喻设计的由来、应用价值与意义、作用机制等方面，对界面中的隐喻设计的进行了深入的剖析，明确界面中的隐喻设计的本质与内核。以界面图标为例，从具象隐喻、抽象隐喻、关系隐喻3个角度，归纳出隐喻设计的具体应用方法。明确了界面设计中的隐喻的概念与本质，总结界面图标中隐喻的设计方法，形成相对系统的理论框架，为设计师在界面设计中更好地应用隐喻的设计方法提供启示和参考，以最终实现优化与界面交互过程中的用户体验，提高界面设计可用性的目标。

关键词：隐喻；隐喻设计；界面；界面设计；映射论

中图分类号：J524.1 文献标识码：A文章编号：1003-0069（2024）07-0069-03

Abstract：The research of metaphor design in interface is analysed and summarized. From the perspective of metaphor originated from rhetoric，based on the mapping mechanism in conceptual metaphor theory，this paper makes an in-depth analysis of metaphor design in the interface from the aspects of the origin，application value and significance，and mechanism，and clarifies the essence and core of metaphor design in the interface. Taking interface icons as an example，this paper sums up the specific application methods of metaphor design from three perspectives：concrete metaphor，abstract metaphor and relational metaphor.It clarifies the concept and essence of metaphor in interface design，summarizes the design methods of metaphor in interface icon design，forms a relatively systematic theoretical framework. It provides inspiration and reference for designers to better apply metaphor design methods in interface design，so as to ultimately achieve the goal of optimizing the user experience in the interaction process with the interface and improving the usability of interface design.

Keywords：Metaphor；Metaphor design；Interface；Interface design；Mapping theory

引言

隱喻，其概念可以从其英文词汇“Metaphor”的构成上来拆解[1]。Metaphor这一单词是由希腊语“Metapherein”简化而来，其中“meta”表示“从一边到另一边”，“pherein”表示“传达、传送”，合起来即是用一种事物来表达另一种事物，它是一个由此及彼的过程。在传统的隐喻观中，只将隐喻视作一种修辞现象，只针对语言现象进行研究和解释。而在现代隐喻观中，代表人物Lakoff和Johnson揭示了隐喻的认知本质，认为隐喻是基于人类普遍生存的经验之上，不同概念域之间由始源域向目标域发出的一系列映射[2]。

随着对隐喻研究的深入，隐喻研究所涉及的领域不再仅局限于语言。有关界面中隐喻的研究可以追溯到1990年代初，它开始成为HCI领域的一个流行的问题，并在交流、互动、学习、教学和认知中的基本作用得到了许多研究的认可。文中从界面中的隐喻设计的由来、应用价值与意义、作用机制等方面对其进行综述，廓清界面中的隐喻设计的本质，梳理该领域的研究现状，并在此基础上对界面中图标的隐喻设计方法进行总结，为隐喻设计研究提供理论参考。

一、界面中的隐喻设计概述

（一）界面中隐喻设计的由来。隐喻研究最早是属于修辞学领域的研究，而后逐渐被应用到哲学、符号学、认知心理学、设计学等许多不同的学科。我国语言学家束定芳在研究了大量国内外有关隐喻的研究后指出，“如果语言表达的概念是隐喻性的，通过视觉手段的表达同样也具有隐喻性”。[3]

隐喻之所以能够应用在更为直观的图像乃至界面当中，主要有以下两点原因。第一，这是基于隐喻所具备的思维的特性所决定的。隐喻被认为是一种人类认识与看待世界的最基础的思维方式，故而它的载体也是多样的，除了文字性的材料之外，它也能够无意识地渗透到图像、人机界面中，并逐渐发展成为一种重要的设计导向与方法。

第二，一些相关的理论与实证研究也为这一观点提供了支持。概念隐喻理论就对非语言材料中的隐喻有明确的预测，Lakoff 和 Johnson[2]认为图像也能够赋予抽象概念结构和意义。其他学者也使用了非语言的材料来验证视觉中的隐喻。Meier探究了物体的尺寸大小与人们对其评价的好坏之间的隐喻关系，结果表明，人们通常将尺寸更大的物体与更积极的评价联系起来，这反映了隐喻的映射不仅是语言的，还存在非语言的、自动的倾向[4]。

（二）界面中隐喻设计的应用价值与意义。隐喻是用户界面的核心设计方法之一，在增强人机交互的易用性、可学习性等方面起到了重要作用。主要原因在于它将用户来自现实世界中的经验映射到人机界面当中，从而降低了用户的认知和学习成本。总结现有的研究，可以概括出隐喻在界面设计中主要有3大应用价值：帮助用户构建认知模型、促进用户主动学习以及增强界面的表现力和创新性。

1.构建认知模型。隐喻设计之所以有效，关键在于能够借助用户过往经验以及对所涉及的视觉表现形式的熟悉性，从而刺激用户获得与该界面相匹配的认知模型。Carroll与Mack指出在用户界面中嵌入隐喻的设计方法是构建认知和概念模型的有力工具，认为在界面设计中运用隐喻可以让用户更好地理解设计师的设计意图，减少用户与设计师之间心智模型的差异，进而帮助用户更快、更直觉地学习使用新设计出来的产品界面。

2.促进主动学习。隐喻能够借助溯因和归纳推理来促进用户的主动学习，用户能够通过隐喻更好地构建有关界面的程序知识。隐喻在学习的过程中扮演着联系者的角色，将熟悉对象的现有经验和模型，稍加调整，套用在需要理解的事物（如用户界面）上。

3.增强表现力和创新性。隐喻有一种陌生化的功能，从原先互不相关的不同事物、概念和语言表达中发现相似点，并建立丰富的联想与想象，为界面设计提供了更多不同的设计思路和可能性[5]。借助隐喻的设计方法，可以增强界面的表现力和感染力，营造出用户所熟悉的情感氛围。例如，拟物化的设计能一定程度上让用户更好地理解所对应的功能模块的主要内容，并让用户有一种亲切感。

二、界面中隐喻设计的作用机制

前人关于隐喻的作用机制的研究有很多，本文沿用的是最受到普遍认可的概念隐喻理论中的“映射论”。在Lakoff和Johnson[2]提出的概念隐喻理论中，引入了“映射”（mapping）这一关键概念，用于解释隐喻具体的作用过程与机制。从其观点中可以归纳出构成隐喻的基本要素，如图1所示。首先，存在两个事物分别属于始源域和目标域，并且这两个概念域之间存在一定差异。其次，这两个事物在某个或多个方面具有相似点，这种相似点有时候可能是人为建立起来的偏离正常意义的含义[6]。最后，在这种映射的过程中，会产生意义的改变，即可以借助另一种事物来表征和解释一种事物。

在隐喻形成的过程中，始源域的关系、特征以及知识会被依次映射至目标域的关系、特征以及知识上，从而达到帮助人们认知事物的目的。

根据隐喻本身的概念与作用机制，界面设计中的隐喻同样是基于跨域的映射机制实现的，其具体的作用机制如图2所示。在界面设计的情境下，隐喻的始源域为用户的过往经验，此种经验一般可以分成两种类别：日常生活经验和图形界面使用经验；目标域为程序功能，包括界面的视觉部分和交互行为。界面设计中的隐喻就是基于这两个概念域的某些共同点，再用设计的手法来表现[5]，在这个过程中会产生意义的转变，从而创造出新的体验。

（一）始源域。用户经验：用户的过往经验是隐喻构建机制中的始源域，主要可以分为两部分，一是用户在现实世界中所获取的生活经验，二是用户在之前的界面使用中积攒的经验。相较于现实生活来说，人与界面的交互是抽象复杂的，如果设计得当，绝大部分用户依托于自身固有的认知经验很快就能理解掌握。

此外，不同用户群体所沉淀的认知经验是不同的。随着年龄的增长与阅历的积累，个体所获得的认知经验会越发多维与丰富，在接触陌生事物时，他们能够从更多的角度来构建新事物与旧事物之间的联系。但也有学者指出，用户所生活的时代背景在很大程度上影响其对界面设计中隐喻的理解。Prensky曾提出“数字原住民”的概念，是指新一代用户，他们“一生都被计算机、电子游戏、数字音乐播放器、摄像机、手机以及所有其他数字玩具和工具包围”。对于这一类型的用户，他们会更倾向于借助以往在其他界面使用过程中获得的知识来学习新的界面，而不是使用在现实的物理世界中积累的经验。

（二）目标域。程序功能：界面中隐喻设计的另一个关键组成部分是所要设计的界面程序的功能，所对应的是隐喻构建机制中的目标域，是界面中的视觉隐喻的最终呈现形式，由两个部分组成，一是界面的视觉部分，二是用户与界面的交互行为。

在界面的视觉部分上，隐喻主要应用于界面中图标的设计，其中拟物化的图标设计手法是一种常见的隐喻方法。用户界面设计中的拟物化因其实用性和使用的目的受到了很大的关注，Tom Page[7]在其关于未来移动设备用户界面的风格方向的研究中指出，拟物化设计风格所具有的物理和立体性，能够让用户更容易与应用程序进行交互。但同时也需要注意，拟物化的使用应当适度。Google公司于2015年发布了一款名为Material Design的轻拟物视觉设计语言（见图3），主要采用纸张隐喻，模拟现实世界中材质的触感[8]，将拟物风格与抽象风格相结合，主要采用阴影、渐变等形式，以素雅、简洁又不失表现力的方式呈现界面。

在用户与界面的交互行为的部分上，隐喻主要体现在界面整体结构的设计和一些交互小细节的设计上。例如，在网易云音乐的界面設计中（见图4左），歌曲播放的界面设计成了唱片的形式，点击播放唱片就会缓慢转动，这就是以现实生活中的唱片机的运作形式作为始源域映射得到。此外，在网易云音乐中有一个新颖的“一起听”的功能（见图4右），当两名用户在一起听时，界面上会出现两个人的头像和两只耳机，这也是基于现实生活中与他人听歌的实际场景所设计的隐喻。

（三）基于共同点的跨域映射：在始源域（用户经验）与目标域（程序功能）之间建立跨域的映射是界面设计中隐喻的主要作用机制，并且这种映射是基于两个概念域之间的共同点形成的。

映射论可以用于解释视觉隐喻的产生过程，通过结构相同的部分，将两个来自不同概念域的事物关联起来[9]，从而达到两者概念的一致。

界面设计中隐喻的映射形成的关键是两个跨域事物存在某一方面的共同点，借由此来促使始源域向目标域的转变，这里的共同点包括3种，1.具象的、外表上的共同点，这种共同点是直接的，通过观察就可以得到；2.抽象的、概念上的共同点，這种共同点是间接的，需要通过一定的学习才能获取；3.两者之间具有某种关联性。下文会以界面中的图标设计为例，就这3种不同的隐喻方法具体展开论述。

三、界面图标中的隐喻设计方法

在图标设计中，设计师通常根据事物之间的相互的关联以及功能上的相似点，选择大家容易认知的各种形象，使用图形表示抽象的交互过程。图标设计中隐喻的设计方法可以按照上文中所提到的隐喻的分类进行分析，具体包括具象隐喻、抽象隐喻、关系隐喻这3种设计方法。

（一）具象隐喻。具象隐喻的概念为：从事物的外形方面来创造关联从而形成隐喻。具象隐喻的设计方法即通过模仿现实世界中图标表现对象的整体外观，提取事物完整的轮廓结构来进行设计。具象隐喻设计的关键在于对始源域中事物的忠实模仿，它提取的是事物完整的结构形态。

在图标设计中，基于具象隐喻的设计方法的一个典型例子是拟物化。拟物化是图标设计中被广泛应用的一种设计方法，是指模仿现实世界中图标所对应物体的外表特征来设计图标，包括事物的形状、材料、颜色等物理方面的属性。利用拟物化的手法设计而成的图标大都是借鉴生活中常见的日用品的材质与外观，从而为用户提供熟悉的视觉线索，来帮助他们轻松地理解图标的含义。

这种基于外表共同点的隐喻是直观、易懂的，因此，利用此种方法设计出来的图标具有浅显易懂，直觉性强的特点，在帮助用户快速识别图标含义上发挥了重要作用。Konstantinos Spiliotopoulos、Christian Stickel、Minji Cho等人[10][11][12]都对图标的拟物化设计进行了探讨，且多集中在图标的用户偏好、用户绩效、审美感知等可用性研究上。但各位学者对拟物化图标的研究结论也存在着差异，部分学者认为拟物化图标具有更高的识别精度，用户的识别效率更高，也有学者认为拟物图标有可能会阻碍其可用性。

采用具象隐喻进行图标设计的例子有很多，譬如在苹果自带的图标当中，计算器、备忘录、相机、时钟、指南针等都是仿照着现实世界中对应物体的外表特征设计而成的（见图5），且这些物体也都是日常生活中人们非常熟悉的物体，这就能够让用户直观地联想到图标所要表达的含义。

（二）抽象隐喻。抽象隐喻，是指从事物的概念或意义角度产生映射而形成的隐喻。在图标设计中，抽象隐喻的设计方法是基于图标与所表现事物之间的概念或意义方面的共同点来进行的，常常表现为文字与图形相结合的形式。

因为抽象隐喻的设计方法主要依靠社会契约、指定原则来发生关联，而文字就是传达这种社会规则的常见方式之一。故而在图标设计中抽象隐喻的设计方法需要提取出事物关键的文本或符号信息，并与图形结合在一起，以赋予图标一定的社会契约关系。

这种设计方法常应用于两大情境。一是在各大App的logo设计中，且与品牌的名称及标准字等品牌视觉识别的文字内容的关联非常紧密[15]。例如，支付宝App的图标设计（见图6左）就是一个“支”的文字，代表了“支付宝”这一品牌名称，让用户在看到图标的时候不断地加深对品牌的印象。此外，文本所表示的这种抽象性的含义，相较于纯图像的形式，更不会产生歧义与误解。但是相应的，单纯的文字所携带的信息含量也比较单一，与人脑思维和记忆的信息组织结构并不是特别匹配，且较为含蓄、间接，需要用户在知晓这个品牌的基础上才能理解图标的含义，表现形式上也比较容易缺乏新意，创意空间比较受限。

二是在一些含义复杂的图标中，相较于纯图形化的形式，依靠关键的文本或符号能更贴近图标所想表达的含义。例如，在高德地图App的功能图标中就不乏此类“图文并茂”的图标。在图6右侧的“出行保”图标中，因为“保险”的含义较为复杂，且不容易用具体的事物表达，它提取了“保”这一关键文本，再结合寓意“保护”的盾牌形状来表示，很好地突出了图标含义中的关键信息。

（三）关系隐喻。关系隐喻，则是指分属于始源域和目标域两个事物之间存在某种关联性与逻辑性而构成的隐喻，例如两者是局部与整体、因果等关系。

以关系隐喻为基础的图标设计方法主要通过与所要表示的事物之间构成某种逻辑上的关联来实现，主要有两种表现方式，一是提取事物局部的典型特征来指代整体，即用图标表现对象的最典型的某一部分元素来表示其本身；二是通过利用事物之间的某种特征、性质、关系等来构建不同概念之间的联想。

第一种表现方式的关键点在于筛选、提取出始源域事物最具代表性的特征，需要在其所包含的视觉元素中进行取舍，选定与图标表现对象映射距离最近、最容易让用户构建关联的部分，从而凭借有限的设计准确表现出图标所代表的含义，让用户一看便知。例如，在苹果自带的图标中，天气用了“一朵云遮住太阳”的形式来表现（见图7左），语音备忘录用了“声波”来表示（见图7右），这都是采用局部指代整体的方法设计而成的图标。

第二种表现方法则更加多样化，是指借助设计构建“隐形的共同点”，这种共同点可以是两种事物之间存在的某种逻辑关系（例如因果关系）。

由于事物之间的关联性是非常丰富的，在构建关系隐喻的过程中，会有很多不同的方向选择。借助关系隐喻设计而成的图标，其含义更隐晦、更间接，并且更关注去呈现事物的本质，需要用户进行一定的推断与联想，并具有一定的认知经验基础，才能准确识别出隐喻的预期含义。

总结与展望

随着信息技术应用程序的日益复杂，软件设计者面临着构建易懂且易于使用的界面的问题，这使用户可以专注于应用程序本身，而不会被无关的界面复杂性分心。如何提高界面使用的直觉性来降低用户在学习使用界面过程中的负担，就显得至关重要。为解决这一问题，在界面设计中，隐喻已被有意无意地广泛应用，并成为界面设计中的核心设计方法之一。隐喻在人机界面中的应用价值是多维度的，既是一种表征与计算机交互的手段，是一种界面设计方法，也是为了便于考虑实现问题的概念工具，可以有效控制用户界面的复杂性、减少用户必需的认知和努力、减轻用户学习和记忆的负担、促进用户主动学习以及增强表现力和创新性。本文就界面中的隐喻设计的由来、应用价值与意义、作用机制等方面进行了总结与梳理，明确了隐喻设计的概念与核心，并在此基础上结合相关案例，讨论总结了界面图标的隐喻具体设计方法。

综合国内外的有关界面设计中的隐喻的研究，可将其分为3个主要的类别。第一类是对界面设计中的隐喻的操作性分析，侧重于阐明使用隐喻表征方法所产生的可衡量的效果，以证明隐喻可以为学习和表现带来实质性的积极影响。第二类是对界面设计中的隐喻的结构性分析，旨在解决隐喻的始源域和目标域之间映射的作用机制和表现形式，即对隐喻的构成部分进行研究，以了解隐喻的本质。第三类是对界面设计中的隐喻的实用性分析，考虑了在实际使用中，可能的隐喻映射会如何受到情境和目标的限制，以帮助设计师使用隐喻来更好地解决实际的问题。其中，大多数研究都集中在操作性分析和结构性分析上，国内外对隐喻的实用性分析的研究都较为欠缺。因此，未来需要更加深入地探究在实际的界面设计情境中，隐喻设计是如何被具体应用的。

参考文献

[1]王洪刚，杨忠.试论隐喻思维的特点及功能[J].东北师大学报，2003（02）：86-91.

[2]Lakoff G，Johnson M. Metaphors we live by.[M]. Chicago：Chicago University Press，1980：27-114

[3]束定芳.隐喻学研究[M].上海：上海外语教育出版社，2000：32.

[4]Meier，B.P.，Robinson，M. D.& Caven，A. J.Why a big mac is a good mac：Associations between affect and size.Basic and Applied Social Psychology，2008，30（1），46–55.

[5]朱小杰.图形用户界面设计中隐喻的作用研究[J].装饰，2014（3）：2.

[6]彭增安.隐喻的作用机制[J].修辞学习，1998（05）：29-30.

[7]Page T . Skeuomorphism or flat design：Future directions in mobile device User Interface（UI）design education[J]. International Journal of Mobile Learning and Organisation，2014，8（2）：130-142.

[8]胡昆，奚斌.基于Material Design设计语言的隐喻设计研究[J].设计，2017（15）：136-137.

[9]尹岩. 基于意象图式的语义理解模型研究[D].江苏：南京农业大学.2013：50-51.

[10]Konstantinos S，Maria R，Spiros S . A Comparative Study of Skeuomorphic and Flat Design from a UX Perspective[J]. Multimodal Technologies & Interaction，2018，2（2）：31.

[11]Stickel C，Pohl H M，Milde J T . Cutting Edge Design or a Beginners Mistake？ – A Semiotic Inspection of iOS7 Icon Design Changes[J].Springer，Cham，2014：358-369

[12]Cho M，Kwon S，Na N，et al. The Elders Preference for Skeuomorphism as App Icon Style[C] Proceedings of the 33rd Annual ACM Conference Extended Abstracts on Human Factors in Computing Systems：ACM，2015：899-904

[13]Barr P，Biddle R，Noble J. A Semiotic Model of User-Interface Metaphor[J]. Virtual Distributed & Flexible Organisations，2005：189-215

[14]付彧. 基于符號学的手机APP图标图形设计方法研究[J]. 包装工程，2017，38（10）：5.

[15]滕兆烜，金颂文，甄永亮. 论手机图形用户界面中图标设计可视性[J].包装工程.2013.34（2）：66-70.

[16]胡佳琦，张凯*.隐喻在界面设计中的应用研究综述[J].设计，2022，35（23）：86-89.