界面中的隱喻設計研究綜述

王露露 謝偉 劉柱

摘要：對界面中的隱喻設計的研究進行了梳理與總結。從源自修辭學的隱喻視角切入，以概念隱喻理論中的映射論為基礎，從界面隱喻設計的由來、應用價值與意義、作用機制等方面，對界面中的隱喻設計的進行了深入的剖析，明確界面中的隱喻設計的本質與內核。以界面圖標為例，從具象隱喻、抽象隱喻、關系隱喻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]。

（二）界面中隱喻設計的應用價值與意義。隱喻是用戶界面的核心設計方法之一，在增強人機交互的易用性、可學習性等方面起到了重要作用。主要原因在于它將用戶來自現實世界中的經驗映射到人機界面當中，從而降低了用戶的認知和學習成本?？偨Y現有的研究，可以概括出隱喻在界面設計中主要有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右側的“出行?！眻D標中，因為“保險”的含義較為復雜，且不容易用具體的事物表達，它提取了“?！边@一關鍵文本，再結合寓意“保護”的盾牌形狀來表示，很好地突出了圖標含義中的關鍵信息。

（三）關系隱喻。關系隱喻，則是指分屬于始源域和目標域兩個事物之間存在某種關聯性與邏輯性而構成的隱喻，例如兩者是局部與整體、因果等關系。

以關系隱喻為基礎的圖標設計方法主要通過與所要表示的事物之間構成某種邏輯上的關聯來實現，主要有兩種表現方式，一是提取事物局部的典型特征來指代整體，即用圖標表現對象的最典型的某一部分元素來表示其本身；二是通過利用事物之間的某種特征、性質、關系等來構建不同概念之間的聯想。

第一種表現方式的關鍵點在于篩選、提取出始源域事物最具代表性的特征，需要在其所包含的視覺元素中進行取舍，選定與圖標表現對象映射距離最近、最容易讓用戶構建關聯的部分，從而憑借有限的設計準確表現出圖標所代表的含義，讓用戶一看便知。例如，在蘋果自帶的圖標中，天氣用了“一朵云遮住太陽”的形式來表現（見圖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.