三種界面交互類型,四種隱喻設計方法

2021-01-15 人人都是產品經理

本文作者歸納了隱喻設計類型和隱喻設計方法，與你分享，enjoy~

隱喻設計是一種常用卻很少有人提及的概念，人們往往身在其中卻不知究竟為何物。簡單說，隱喻設計它可以將現實生活中用戶熟悉的事物以多種形式映射到界面中，從而使用戶不熟悉的概念、陌生且複雜的操作等變得熟悉與簡單。

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

一. 界面隱喻的類型

1. 視覺隱喻 – 靜態

1.1 文字隱喻

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

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

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

1.2 色彩與材質隱喻

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

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

1.3 圖形隱喻

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

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

2. 視覺隱喻 – 動態

2.1 人的行為習慣上的隱喻

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

2.2 物體物理屬性的隱喻

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

3. 聽覺隱喻

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

4. 觸覺隱喻

觸覺上的隱喻可以理解為，設計師模擬真實世界用戶獲得的某種觸覺體感，為界面提供適當的仿真反饋，從而提高用戶體驗的方法。常見觸覺上的隱喻，例如：iPhone7的home鍵並非實體按鍵，但為了保持用戶的使用習慣，仿真設計成實體按鍵的外形並提供用戶實體按鍵的反饋；iPhone的3DTouch可以理解為設計師為了模擬電腦滑鼠的右鍵，為產品提供更多功能的一種移動端快捷方式；此外，在遊戲中，撞車時、飛機被擊中時的震動反饋也屬於觸覺上的隱喻形式。

二. 界面隱喻的設計方法

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

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

例如，現在最普遍的兩大電腦作業系統Mac OS系統與Windows系統的「桌面」界面都是由現實生活中的工作桌面的概念映射而來。

2. 從特徵上進行隱喻設計

例如，設計師會使用盾牌的圖形來表示安全軟體，因為盾牌與安全管家等軟體同樣具有防護的特徵。

3. 從結構上進行隱喻設計

例如，網易郵箱大師的「郵箱與文件夾」展開結構與現實生活中抽屜被抽開的結構具有一致性。

4. 從行為上進行隱喻設計

例如，在界面中用戶將某文件拖進回收站這一動作模擬了現實生活中人們將廢紙扔進垃圾桶。

三. 寫在最後

好的隱喻設計可以簡單高效地傳達一個功能所代表的意義，或能更加匹配用戶心智模型從而引導用戶進行正確的操作。

本文歸納的隱喻設計類型和隱喻設計方法，希望可以對大家提供一些設計啟發。

作者：李揚，網易CC互動設計師，東南大學專業設計系畢業，職場新人，參與多款遊戲相關產品的互動設計工作。希望可以成為一名有想法、有創造價值的設計師。

本文來源於人人都是產品經理合作媒體@網易UEDC，作者@李揚

題圖來自 Pexels，基於 CC0 協議

相關焦點

  • 界面設計方法(1):界面的概念與分類
    編輯導語：對於很多軟體工程師來說，工作內容都與界面設計有很大的關聯。而界面設計的本質又是業務功能的設計，基於此，作者在本篇文章中，從數據分類、業務功能分類以及界面分類這三個方面，為我們詳細地說明了界面設計方法，希望能夠對你有所幫助。
  • 信息維度與互動設計原理
    信息維度與互動設計原理，包裝工程，第39卷第16期，2018，pp57-68.摘要：目的 探討信息通訊技術支持下，信息維度與互動設計的關係，研究通用性的互動設計原理與方法。方法 採用文獻調查法、大數據分析法和用戶參與式設計方法進行分析研究。
  • iOS 12 人機互動指南(一):主題與基本界面元素
    本文主要講述的是 iOS 12 界面互動設計指南，一起來看看~主題（Themes）>1. iOS設計主題作為一個app設計師（其實我是一隻產品狗），其實便意味著你將有機會去設計發布一款能夠位於App Store排行榜之首的驚世駭俗之產品。
  • 生物粘性電子界面,實現穩定高效人機界面交互
    圖3：生物粘性導電界面的粘附性能　　針對上述弊端，設計出生物粘性電子界面，使其具有高柔韌性和高吸溼性的聚丙烯酸-聚乙烯醇交聯網絡。　　圖4：生物粘性導電界面的性能。a各向異性溶脹；b 導電性。　　此外，設計引入了還原氧化石墨烯導電網絡。
  • 互動投影的三種交互方式
    互動投影技術實現交互功能有三種方式，其一，運用交互技術以及互動投影軟體來做到人和投影界面的交互效果；其二，使用攝像頭捕捉光源轉變，計算機設備分析，操縱投影信息界面來做到交互效果；其三，利用感應開關設施，來感應人體的轉變來做到交互的效果。因此當用戶在觸碰到感應點時，就會觸發某種效果，能夠讓用戶了解到其中蘊含的產品信息。
  • 界面設計(UI)中顏色的基礎知識
    對於藝術家來說，正確的操作非常重要，因此在整個歷史中，它已經以多種方式和不同的方法得到了理論化。 繪畫，印刷，攝影，圖形設計和界面設計使用色彩理論來喚起特定的思想和觀念，充分利用色彩的非語言能力，而不是其他較慢的交流形式。
  • 人機互動系統現階段的發展狀況以及未來發展方向
    人機互動應該是一種允許用戶，機器和服務進行協作的設計。為了達到對服務質量和最佳性能的特定效果。例如，飛機零件設計工具應在視圖和設計中提供較高的準確性，而圖形編輯軟體可能不需要這種準確性。當前的技術還可以影響出於相同目的但類型不同的人機互動的設計。
  • 互動設計|如何做好操作反饋規範的設計?
    互動設計中的操作反饋設計，要從用戶和產品的兩個角度去思考——反饋能為品牌氣質的提升帶來什麼價值，能多大程度地優化用戶的體驗效果？規範，意指符合邏輯，客觀、真實、全面、完整、準確、及時，達標。明文規定或約定俗成的標準， 使某一行為或活動達到或超越規定的標準。
  • 互動設計 | 如何做好操作反饋規範的設計?
    互動設計中的操作反饋設計，要從用戶和產品的兩個角度去思考——反饋能為品牌氣質的提升帶來什麼價值，能多大程度地優化用戶的體驗效果？設計規範的制定都帶有很強的目的性，一份規範的制定不僅是對產品自身有利，對設計研發團隊以及用戶都是有諸多顯著的好處。什麼是互動設計中的操作反饋？設計規範中的操作反饋規範的制定，實則就是將用戶操作APP後的行為給出一致性的反饋，讓用戶的每一步操作都有明確的感知。
  • 在設計過程中,有哪些不容忽視的互動設計要點?
    如何通過界面元素間的位置關係引起用戶注意，從而快速有效地感知並獲取目標信息是界面設計的重要方面。從設計角度來說，應當使設計內容容易被發現、容易被識別。在人機互動界面中我們希望能產生儘可能多的深度信息，因為在人機互動界面中圖像是眼睛和大腦的注意焦點。如果破壞了深度信息，也就喪失了真實感。在界面的設計過程中，亮度是一個決定視覺感知效果的因素，因此對象的明暗變化成為判斷對象遠近的依據。此外，利用光與影的變化、內容的重疊與幹涉以及細節與空中透視產生的立體效果。
  • 新交互時代:自然用戶界面中的「自然」到底是什麼意思?
    而與之前的主要針對桌面計算機和工作環境而設計的界面相比，今天的用戶界面所面臨的是多樣化的使用情境，移動、遊戲、社交等等不一而足。而在何種情況下選擇何種模態進行交互才最自然，這是每個人機互動從業者必須面對的問題。
  • 分析Google、微軟、蘋果設計規範的異同點
    2011年，公司啟動代號為「甘迺迪」的項目，召集公司裡所有重要的設計師，重新設計Google裡的每一項產品，尋找一種共同的設計語言。Google的設計師們通過整合Google現有的技術和能力，再加上對跨設備界面與交互思考，結合卡片式設計，終於設計出在不同設備上界面和體驗都相對統一的產品。
  • 設計原則總結:最全的互動設計原則和理論匯總
    設計是有原則和方法論的，鑑於網上各種文章和原則比較零碎，這次統一將互動設計的方法和理論匯總，不足之處也希望各位能夠提出，一起補全。成本效益、古騰堡圖表法、交互易用性五大法則、馬斯洛需求層次理論…部分理論可能意思相近或重複。
  • 路燈應該如何預防雷電 雷電的四種類型介紹
    首先介紹下雷電主要有以下四種類型：1.感應雷雲層之間頻繁放電產生強大的電磁波導致共模和差模幹擾，影響電氣設備運行。2.傳導雷遠處的雷電擊中線路或因電磁感應產生的極高電壓，由室外電源線路和通信線路傳至建築物內室內的電氣設備。
  • 解讀交互稿模板:如何讓設計稿更規範化?
    PS：本文適用於移動端，Axure軟體製作的文檔型交互稿。交互稿應該包含哪些內容？如何搭建一個合理的交互稿結構？各個界面應該如何擺放？清晰易讀的設計說明應該是怎樣的？想必作為一個新人，很難完全弄清上面的問題。
  • 關於交互Demo設計的一些建議
    為方便產品經理、設計師、開發及項目相關人員能夠看到直觀的效果，進行更有效的溝通；提供直觀的產品設想，說明用戶將如何與產品進行交互，在互動設計的過程中一定會產出各種各樣的產出物，如流程圖、思維圖、紙上的草稿、甚至高保真演示稿。這裡簡單分享下自己在項目過程中的交互Demo設計的一些心得。
  • 概念隱喻多層觀:概念隱喻的新進展
    在2017年的《隱喻層級》（Levels of Metaphor）一文中，科韋切斯首次提出並闡釋了「概念隱喻多層觀」，並在2020年出版的《拓展的概念隱喻理論》（Extended Conceptual Metaphor Theory）一書中進一步詳細闡釋了構成概念隱喻的四種概念結構及其相互關係。根據羅施（E. Rosch）、萊考夫和蘭蓋克（R. W.
  • 格式塔原理,教你如何合理的布局設計界面
    APP頁面設計布局最關鍵的是為用戶展現層次清晰的視覺傳達，格式塔原理可以有效地指導界面設計中的用戶交互，它能夠幫助設計師準確對界面進行組織和架構，從而設計出用戶友好型界面。界面中的設計元素，會引導眼鏡在平面中的移動，提高界面的可閱讀性。創建順序並且指導用戶瀏覽不同的內容分組。4、封閉原則人們在觀察一個物體的時候，視覺系統傾向於把不完整的局部當作一個整體來感知。將不連續的，敞開的圖形自動補充，從而感知到它為完整的物體，而不是分散的碎片。
  • 納蘭性德詞中情感隱喻的類型及認知闡釋
    納蘭性德作品的魅力更在於其抒發內心情感事時創造的隱喻,即情感隱喻。其主要類型可分為自然現象情感隱喻、植物情感隱喻以及動物情感隱喻。納蘭性德詞情感隱喻中始源域到目標域的映射產生的理據是作者基於自己的具身體驗在其內部情感與客觀事物之間建立了一種同一性,這也正是如"桃花"等具有積極寓意的事物在納蘭性德詞中映射的卻是消極情感原因所在。
  • 西行紀:去往陰間的四種方法,孫悟空用過三種,如來只會一種
    在西行紀這部動漫中，世界分為陰間和陽間兩個區域，活人在陽，死人在陰，這是自古以來的道理，不過根據動漫的設定來看，要去往陰間的方法其實不少，總計下來的話一共有四種，讓我們一起來看看吧。第一種、穿越深淵。在妖怪大道中段部分，存在著一個撕裂大地的地方，這裡的土地有著眾多的裂縫，而這些裂縫又被人稱作深淵，只要掉入深淵最底部，就能來到陰間裡面，這也是去往陰間比較實用的方法，不需要施展什麼法術，眼睛一閉一睜就行了，當初唐三藏和傲雪就用這種方法去過陰間，其它人也能用。第二種、禁忌之術。