南京信息工程大學 傳媒與藝術(shù)學院 胡 昆 奚 斌

摘要：隱喻是一種語言上的修辭手法，它用人們熟知的事物去表現(xiàn)另一事物，并在這兩者中建立類比關(guān)系。現(xiàn)代視覺設(shè)計中通過使用這種“類似性”的手法將產(chǎn)品傳達給用戶，加強用戶的操作體驗，減少用戶對于應用的學習成本。本文通過對Material Design中布局、動效、風格三個方面中隱喻設(shè)計的進行分析研究，以習慣養(yǎng)成應用Fabulous為例討論隱喻設(shè)計對移動端設(shè)計的影響，旨在為使用者提供參考實踐。

關(guān)鍵詞：隱喻 材料設(shè)計 移動端設(shè)計 

中圖分類號：J05 文獻標識碼：Ａ

文章編號：1003-0069(2017)08-0138-02

Abstract：Metaphor is a language rhetoric. It uses the things people know to show another thing and in the two to establish analogy. Modern visual design through the use of this "similarity" approach to the product to the user, enhances the user's operating experience, and reduces the user's learning costs for the application. This paper analyzes the metaphorical design in the three aspects of material design, dynamic and style, and discusses the influence of metaphor design on mobile design by using Fabulous as an example. It aims to provide reference practice for users. 

Keywords：Metaphor Material design Mobile design

引言

隱喻最早是在人類歷史上的第一部史詩《吉爾伽美什》( The Epic of Gilgamesh) 中( 公元前 2150 年 － 公元前 2000 年) ，作為文學領(lǐng)域中的一種修辭方法出現(xiàn)。在現(xiàn)代，隱喻更多地被認為是一種思維方式，在人類知識的進化過程中，隱喻傳達著人類的文化和思維[1]。

一、隱喻設(shè)計

隱喻設(shè)計是通過象征、類比的手法將復雜抽象的概念簡明化、具象化，降低用戶學習使用的成本，為用戶創(chuàng)造清晰、明了、舒適的操作體驗。例如手機應用中音樂的圖標設(shè)計通過對音樂體系中共同的元素進行符號化，創(chuàng)造符合用戶的認知，能為用戶傳達有效信息的圖標。合適的隱喻設(shè)計能夠消除用戶在使用新應用時產(chǎn)生的畏懼感，大大降低用戶的使用門檻，提升對信息產(chǎn)品的黏度[2]。

隱喻設(shè)計表面上是用圖形語言去引導用戶去理解和使用，但是在它的背后卻隱藏著使用者的生活經(jīng)驗和審美體會。例如用戶在面對應用界面時，他對看到的圖形產(chǎn)生的情感和其他人產(chǎn)生的情感可能截然不同，這里摻雜著用戶對于應用界面的想象、認知以及心情等因素。隱喻作為生活中普遍和重要的思想情感表達方式，在設(shè)計中也尤為多樣。如2016年第一屆“中國智造大賽”中獲得優(yōu)智獎的作品“錢椅”(如圖1)，其設(shè)計的靈感來自于中國古代的圈椅，從“方孔錢”的形象發(fā)散，“圓”隱喻平等、包容、和諧的道，“方”隱喻尊卑有序、松緊有度、近遠有別的理。作者通過“取像于錢，外圓內(nèi)方”的哲學思想，表達出中國古代包容的精神。椅子的本身看似纖細，但是里面卻藏著鋼筋，穩(wěn)定而堅固。使用者座在椅子上即可感受到中國古代人民對萬物包容的和諧思想，通過 “錢椅”讓使用者感受中國的博大胸懷注1。隱喻設(shè)計就是這種通過簡潔的設(shè)計去包含深刻的內(nèi)涵，讓使用者不僅體驗了設(shè)計帶來的舒適和愉悅，而且還體會到產(chǎn)品的精神。同樣，隱喻設(shè)計在設(shè)計的各個領(lǐng)域都起到了這樣的作用。

二、Material Design應用中隱喻的表現(xiàn)方式

Material Design是Google公司在2015年發(fā)布的視覺設(shè)計語言，它通過紙片隱喻現(xiàn)實世界中材質(zhì)的觸感，構(gòu)建系統(tǒng)化的動效和合理化的空間利用，將二者合二為一構(gòu)成實體隱喻，其中與眾不同的觸感則是實體的基礎(chǔ)，這種熟悉的觸感能讓用戶快速地理解和認知[3]。本節(jié)通過對Material Design中布局、動效、風格三個方面進行闡述，分析Material Design的隱喻設(shè)計表現(xiàn)手法。

（一）布局

Material Design布局結(jié)構(gòu)的思想源于對印刷品設(shè)計理念的提煉，它不同于柵格系統(tǒng)單純的網(wǎng)格化設(shè)計，而是通過在不同尺寸屏幕中使用相同的基準線和柵格線，為用戶在結(jié)構(gòu)和視覺上創(chuàng)造一個可識別的用戶環(huán)境，它給用戶提供高度的熟悉感和舒適性，讓應用便于使用。

內(nèi)容上Material Design采用卡片作為載體，利用Z軸凸顯應用環(huán)境的層次性，通過陰影的深淺表達空間的深度（如圖2）。用戶使用手機時，手機的屏幕是一個平面，傳統(tǒng)的應用布局通常是將頁面按類別分割成塊狀，雖然這樣看起來分類清楚，界面清晰，但是這也使得用戶在使用時找不到重點。Material Design中通過紙片隱喻思想，利用Z軸和陰影表達界面深度并考慮元素的優(yōu)先級將最重要的信息呈現(xiàn)在最上方，這樣用戶在打開應用時可以快速地了解主次關(guān)系，同時這種方式也為用戶提高了瀏覽時的效率。同樣，在生活中人們也會將相同的東西化為一類，將常用的放在最顯眼的位置，這都是生活中常見的生活規(guī)律。實質(zhì)上，人與應用即是實體上的交互，也是情感上的交互，Material Design通過合理化的空間使原本理性的界面情感化、性格化，與用戶產(chǎn)生情感層面上的共鳴，這種共鳴使用戶感受到這個應用更貼近生活，從而拉近了人與機器的距離感，打破了原有的理性使用戶更容易理解和接受，甚至不需要幫助文檔就可以輕松使用。

（二）動效

移動端設(shè)計中真實的動效隱喻能幫助人們感受到平面中的空間關(guān)系、功能以及在整體系統(tǒng)中的趨勢。Material Design中的動效能夠形象地表現(xiàn)出物體的自然運動規(guī)律，在物理世界中物體擁有質(zhì)量，只有施加給物體力量的時候才會移動，因此物體沒法在瞬間開始或者結(jié)束動作。動作也不會突然開始或者停止，或者在運動時突兀的變化方向，這些都會使用戶感到意外和不和諧。例如Material Design中按鈕漣漪效果（如圖3），用戶點擊按鈕的任何一個位置，漣漪就會從點擊的位置擴散，如同對平靜的水面施加動力產(chǎn)生的效果。

Material Design中動效不僅僅是用來裝飾，它應該有它獨有的內(nèi)涵，還要表達元素與界面之間的關(guān)系。設(shè)計師們通過動畫效果，將元素關(guān)聯(lián)起來，使他們以協(xié)調(diào)的方式運動來表現(xiàn)空間上的關(guān)系。同時優(yōu)雅的動畫效果也可以引導用戶的注意力，與布局的空間層次相互呼應，進一步加強了應用中的主次關(guān)系，體現(xiàn)了設(shè)計服務功能，功能與設(shè)計之間的內(nèi)在聯(lián)系。Material Design的動畫效果可以存在于所有組件和擴展中，無論從細小的圖標還是到核心的場景轉(zhuǎn)換和動作，只要恰到好處并足夠出色，同樣能打動用戶。例如元素在位置或狀態(tài)之間移動時，動作應該足夠快而不是緩慢的，緩慢的動作往往會使人理解為過渡。好比人通常不會慢慢地拿起手機而翻書時則會緩慢些。

（三）風格

Material Design的配色從當代建筑、路標、人行橫道以及運動場館中獲取靈感，通過大膽的顏色碰撞和明顯的陰影來突出物體，引出意想不到且充滿活力的顏色。應用在配色上使用少量的顏色進行搭配，通過選取一種主色和一種輔助色（非必需）相搭配使應用界面更加簡潔。主色來確定整個頁面的風格走向，輔助色和主色之間形成反差突出元素功能，通過改變顏色的明度和色相區(qū)分元素之間層次，使界面在顏色上產(chǎn)生韻律。(如圖4)Material Design充分考慮了人眼的色彩視覺感受，即使在全白背景下的字體也不會呈現(xiàn)為全黑，它會在對應的文字中加入透明值，給用戶更舒服的視覺體驗[4]。

手機應用中系統(tǒng)或者UI界面往往通過基本的圖形將功能表達出來，這些基本的圖形我們稱之為圖標。由于圖標的要顯示在不同的設(shè)備當中，所以在設(shè)計時就要考慮到在最小的尺寸下的可讀性。網(wǎng)格是所有圖標的基準(如圖5)，它具有特定的比例以保證圖標在任何情況下的視覺一致性，在16世紀，西方學者認為設(shè)計是比例，比例在設(shè)計美學中有著不可撼動的地位，可以使設(shè)計產(chǎn)物更具有條理性和美感[5]。

三、Fabulous中隱喻設(shè)計的案例分析

Material Design中的隱喻設(shè)計主要通過紙化質(zhì)感和情感引導的方式，將真實的世界隱喻到虛擬的界面當中。Fabulous是一款幫助人們養(yǎng)成好習慣的應用（如圖6），用戶通過使用應用來制訂和實行計劃，比如早晨喝一杯水，堅持吃早餐等。用戶通過使用一段時間后會養(yǎng)成良好的生活習慣，讓自己每天都有好的狀態(tài)去面對新的生活。Fabulous作為真正關(guān)心你的朋友會時刻鼓勵你，它會寫信給你，在信中親切稱呼你的名字，告訴你最近的進步，已經(jīng)發(fā)生的改變，和下一步努力的方向。Fabulous應用繼承了隱喻設(shè)計的典范，應用無論在信息傳達、行為塑造還是情感引導方面都做得十分優(yōu)秀。本節(jié)通過對Fabulous應用進行分析，闡述Fabulous中隱喻設(shè)計的主要表達方式。

（一） Fabulous中紙化質(zhì)感的表現(xiàn)

Fabulous在布局上遵循了Material Design中的紙化質(zhì)感的隱喻表現(xiàn)，通過卡片將任務寫入以卡片的形式展現(xiàn)任務的條理關(guān)系。如應用中有一個“Make Me Fabulous”的功能（如圖7），用戶只需要5分鐘的閑暇時間就可以給自己充電，而用戶只要跟隨它的引導。用戶打開功能時出現(xiàn)五種可供選擇的方案，當用戶選擇一個方案之后，動畫跳轉(zhuǎn)到另一個頁面，同時這個方案作為背景展現(xiàn)。Fabulous通過這種層級關(guān)系很清楚地表達出任務的嵌套關(guān)系，使用戶不會感覺到碎片化從而更加容易地去完成任務。

Material Design這種紙化質(zhì)感的核心思想不僅使用戶在查看任務時感到井然有序，而且還能給用戶帶來一種真實的感覺，使原本枯燥無味的任務具有人性化。

（二） Fabulous對用戶的情感引導

Jon Kolko注2 曾經(jīng)說過“所謂的交互設(shè)計，是人與產(chǎn)品、系統(tǒng)或服務之間創(chuàng)建的一系列對話”[6]。產(chǎn)品應用中如果使用合理的隱喻手法不僅能使原本機械的交互變成人性的、有情感的。Fabulous作為一款優(yōu)秀的習慣養(yǎng)成類應用，它不同于傳統(tǒng)的任務列表應用，而是像一位知心的朋友一樣去關(guān)心你，它會定期給你寫信告訴你最近是否進步，是否有所改變和下一步努力的方向。Fabulous通過人性化的方式與用戶培養(yǎng)感情，使用戶在對信息收取的被動方式變?yōu)橹鲃臃绞剑層脩粝矚g上應用而不是被動地去完成任務。

Fabulous還為基礎(chǔ)的習慣設(shè)計了塔羅牌風格的插畫，這種風格可以簡潔地傳達信息。（如圖8）。例如當用戶在吃飯時看到綠色就會想起要吃點蔬菜或水果，當看到一只手拿著傾倒的水杯的時候，就會像自己是不是該喝水了，當看到夜幕的時候就會馬上入眠。這些簡潔的插畫明了地表達任務的意圖，拉近了用戶與應用之間的距離。

結(jié)語

應用設(shè)計中Material Design提煉隱喻設(shè)計的精髓為設(shè)計師們提供了一個良好的隱喻設(shè)計指引。在未來應用不僅只局限于手機或者電腦屏幕上，設(shè)計理念也是如此。隱喻設(shè)計能夠幫助用戶更好地理解應用，使用戶更加主動地去使用應用，從而更好地促進應用的發(fā)展。隱喻理論之所以能夠在交互界面設(shè)計中提供重要的理論指導也是由于數(shù)字技術(shù)不斷融入我們的日常生活，人們需要一種連接物質(zhì)世界和數(shù)字世界之間的紐扣，而隱喻則是辨析現(xiàn)實和虛擬對象之間最直接的方法。

本文系南京信息工程大學大學生創(chuàng)新項目“藍印花布的數(shù)字化設(shè)計制作研究”（201610300144），江蘇省高校哲學社會科學研究項目（項目編號：2015SJB060）階段性成果。

注釋

注1“中國設(shè)計智造大獎”是中國工業(yè)設(shè)計領(lǐng)域的首個學院獎。

注2 Jon Kolko是奧斯丁設(shè)計中心的創(chuàng)始人和主任，一個進步的教育機構(gòu)，教學交互設(shè)計和社會企業(yè)家精神。

參考文獻

[1] 左美云 . 陸楊 . 互聯(lián)網(wǎng)產(chǎn)品中隱喻表達的設(shè)計研究 [J] . 現(xiàn)代圖書情報技術(shù) . 2011 (05) : 20-27

[2] Wells J D.Fuerst W L.Palmer J W.Designing Consumer Interfaces for Experiential Tasks: An Empirical Investigation[J].European Journal of Information Systems . 2005 . 14 ( 3) : 273 – 287

[3] Material Design官方網(wǎng)站 [EB/OL] . https://material.io/guidelines . 2017

[4] 杰夫·約翰遜 . 認知與設(shè)計：理解UI設(shè)計準則 [M] . 北京 . 人民郵電出版社 . 2011

[5] 徐曉庚 . 設(shè)計美學導論 [J] . 裝飾 . 2002 (11) : 4-5

[6] 田蘊 . 王浩 . 隱喻在產(chǎn)品界面設(shè)計中的應用研究 [J] . 設(shè)計 . 2016 (01) : 76-77