揭開隱喻設計面紗-界面隱喻類型與隱喻設計方法

2018-7-16 博博

揭開隱喻設計面紗-界面隱喻類型與隱喻設計方法

互聯(lián)網(wǎng)er的早讀課 2018-07-14 18:46:25

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，請點這里

來源：網(wǎng)易UEDC（ID：NetEase_UEDC）

編輯：Juvae

隱喻設計是一種常用卻很少有人提及的概念，人們往往身在其中卻不知究竟為何物。

簡單說，隱喻設計它可以將現(xiàn)實生活中用戶熟悉的事物以多種形式映射到界面中，從而使用戶不熟悉的概念、陌生且復雜的操作等變得熟悉與簡單。

它不等同擬物設計，隱喻是一個大的概念，界面中充斥著不同的隱喻元素。本文將常見的隱喻元素按照視覺、聽覺、觸覺三種界面交互類型分類，并整理了四種隱喻設計方法，以供大家參考。

界面隱喻的類型

1. 視覺隱喻 - 靜態(tài)

1.1 文字隱喻

界面中常見的文字隱喻可以分為兩種，一種是功能命名類語言，另一種是產(chǎn)品定義類語言。

常見的功能命名類語言有：“解鎖、導航、登錄”等等。功能命名類語言主要是運用隱喻的方法對界面中經(jīng)常使用的功能進行命名，例如“導航”本義是駕駛某種交通工具從某個地方去往另外一個地方，它可以指引人們路線，設計師將界面中“依據(jù)地圖行走可以到達目的地”這一功能命名為“導航”,可以和現(xiàn)實生活中人們熟悉的導航本義結(jié)合起來，方便記憶。

常見的產(chǎn)品定義類語言有：應用市場中的“市場”、文件助手中的“助手”等等。而產(chǎn)品定義類語言，不僅可以準確表達功能要求，還能傳遞給用戶某種情感。例如，文件助手中的“助手”兩個字本義是可以幫助他人的人，設計師將手機中的文件夾定義為“文件助手”，意圖是這一功能可以為用戶整理文件排憂解難，給用戶傳遞一種被感動的情感。

1.2 色彩與材質(zhì)隱喻

在界面設計中也有兩種形式的色彩隱喻。一種為指示性的設計，運用用戶熟悉的某種顏色指示界面中的某種狀態(tài)，例如QQPC版用綠色icon代表我在線上、紅色icon代表忙碌或請勿打擾。另一種為氣氛的營造，借用色彩帶給用戶的某種心理暗示，為產(chǎn)品營造某種氛圍，例如支付寶軟件整體采用藍色的風格，可以營造一種安全的氛圍。

材質(zhì)的隱喻可以使界面不再生硬，用戶使用起來更加親切。例如讀書APP的閱讀界面采用紙質(zhì)效果，使用戶在閱讀時更像是閱讀一本真正的書。

1.3 圖形隱喻

圖形是構(gòu)成界面的重要元素，具有隱喻特征的圖形會讓一些繁瑣并難以理解的操作行為變得輕松且生活化。所以在設計中，設計師需要有效地構(gòu)建圖形隱喻從而表達事物的含義與特征。

常用的圖形隱喻非常多，例如界面中鎖可以代表“密碼”，火箭可以代表“加速”，調(diào)色板可以代表“主題”，齒輪可以代表“設置”，地球可以代表“瀏覽器”，雨傘可以代表“安全”等等。

2. 視覺隱喻 - 動態(tài)

2.1 人的行為習慣上的隱喻

人的行為習慣上的隱喻是指界面設計中的交互方式模擬用戶真實操作生活中的物體時的手勢、動作。例如，界面中的手勢操作：滑動，放大，縮小，旋轉(zhuǎn)，拖動，抓取等；將垃圾文件放置回收站，將商品放入購物車；手機滑動解鎖等等。

2.2 物體物理屬性的隱喻

物體物理屬性上的隱喻是指現(xiàn)實生活中，物體被移動、被操作會表現(xiàn)出一種自然的屬性，設計師根據(jù)這種屬性進行界面隱喻設計。常見界面中物體物理屬性的隱喻有：讀書軟件中翻書書頁模擬真實的效果；點擊或觸摸屏幕時視覺水波效果的反饋; 頁面轉(zhuǎn)場的加速度，慣性等物理運動曲線效果等等。

3. 聽覺隱喻

聽覺隱喻元素是指界面系統(tǒng)反饋給用戶的某種能夠準確映射出這種交互行為的隱喻性聲效。例如，將文件放入回收站的音效（當將一個文件放入回收站后系統(tǒng)會模擬紙張被撕開，扔入垃圾桶的音效）；當用戶讀電子書翻頁時，紙張的摩擦聲的音效；此外還涉及游戲音效：當用戶玩游戲植物大戰(zhàn)僵尸游戲的時候存在多種聽覺隱喻元素，種下植物時植物與地面結(jié)合的音效、植物發(fā)射子彈打在僵尸身上的響聲、僵尸來臨時的營造氛圍的恐怖音效、最終失敗時主人公大腦被吃掉時的叫聲，聽覺通道上的隱喻音效讓整個游戲更加真實、生動。

4. 觸覺隱喻

觸覺上的隱喻可以理解為，設計師模擬真實世界用戶獲得的某種觸覺體感，為界面提供適當?shù)姆抡娣答仯瑥亩岣哂脩趔w驗的方法。常見觸覺上的隱喻，例如：iPhone7的home鍵并非實體按鍵，但為了保持用戶的使用習慣，仿真設計成實體按鍵的外形并提供用戶實體按鍵的反饋；iPhone的3DTouch可以理解為設計師為了模擬電腦鼠標的右鍵，為產(chǎn)品提供更多功能的一種移動端快捷方式；此外，在游戲中，撞車時、飛機被擊中時的震動反饋也屬于觸覺上的隱喻形式。

界面隱喻的設計方法

界面隱喻設計方法的本質(zhì)是設計師通過將界面中某元素和現(xiàn)實生活中的某事物聯(lián)系起來，挖掘二者之間相似的屬性，從而使用戶接觸到界面中的此元素時，就能夠認知這個元素所代表的概念或功能等。針對二者之間相似的屬性，具體可以分為概念上的屬性、特征上的屬性、結(jié)構(gòu)上的屬性、行為上的屬性等。

1. 從概念上進行隱喻設計

例如，現(xiàn)在最普遍的兩大電腦操作系統(tǒng)Mac OS系統(tǒng)與Windows系統(tǒng)的“桌面”界面都是由現(xiàn)實生活中的工作桌面的概念映射而來。