前言

本文是 UI 設計進階系列的第 7-2 篇（總第 15 篇），系列目錄：t。cn/EKGNffc。

各位好，又好久不見，我來繼續填坑啦~

在上一篇系列文章中我介紹了在 GUI 中視覺設計的四個要點，分別是字型、版式、色彩和品牌。這篇文章我將介紹在設計 UI 時隱喻的重要性以及 GUI 的構成。

隱喻的力量

早在本系列第 3-1 篇《以使用者為中心的設計：兩個人》一文中我就提到過 Norman 引入的「可供性（affordance）」一詞。圖形介面需要具備可供性，除了利用示能（signifier）來傳達外，隱喻（metaphors）也是最常用的辦法。

什麼是隱喻？

人機互動設計中的隱喻是指置入使用者熟悉的某一東西來藉此理解產品的某一含義。

這種隱喻可以是關於圖形的，比如計算器 app 的圖示就是個計算器，讓人一眼就明。

它也可以是關於聲音的，比如使用相機 app 拍照後，手機會發出「咔嚓」一聲來模擬傳統相機拍照的聲音，提示你拍攝成功。

它也可以是關於互動的，比如我們習以為常的頁面滑動操作，就是模擬了真實紙張被滑動的視覺效果。

而這種隱喻的設計，其實早在 GUI 誕生的時候，施樂（Xerox PARC）的研究員們就開始應用了。

桌面（Desktop）隱喻

我們知道早期的個人電腦主要是為各類辦公人員工作使用的。桌面的設計其實不只是在隱喻辦公桌的桌面，更是整個辦公室的場景。因此電腦桌面上才有檔案櫃、印表機、垃圾桶等。下圖是 Tim Mott（蒂姆 · 莫特）最早在餐廳用餐巾紙畫下的桌面隱喻靈感。這個想法直接奠定了個人計算機作業系統的桌面設計並沿用至今。

視窗（Windows）隱喻

當 Alan Kay 談到桌面隱喻的時候總會提起重疊視窗的點子，它是如何從紙張轉化到桌面上的。「你可以放一踏紙在桌面上，只要你可以看見每一張紙的一個角角，就可以將它拉出來後放在最上層。」

所以對 UI 的設計從來都是儘可能地隱喻現實生活中的物品和體驗，以降低人們的學習成本。時至今日依舊如此。

隱喻的缺點

但隱喻也不是萬能的，在《About Face 3》中就提到了隱喻的幾個問題：

User interfaces based on metaphors have a host of other problems as well： Therearen’t enough good metaphors to go around，they don’t scale well，and the ability ofusers to recognize them is often questionable，especially across cultural boundaries。

大意就是：這世上沒有那麼多好的隱喻可以用，並且隱喻的適用性不夠強。而且使用者對隱喻的認知和理解經常值得被懷疑，尤其是需要跨文化背景的時候。

Word 中的儲存圖示就用了隱喻（用 3。5 英寸軟盤來表示儲存，你可能在其他產品上也見過）。然而這對於那些不是那麼早接觸計算機的人來說，他們從沒有見過軟盤，這個圖示所傳達的含義就不夠直觀了。

善用隱喻可以說是 UI 設計中最重要的能力之一。各位在平日的工作中也許無法感受到，但若做更前沿的互動探索，如 VR、自動駕駛的互動等沒有固定正規化的設計，這個能力就顯得格外重要了。

GUI 的構成

講完隱喻，我們再來聊聊具體的圖形介面。下面是我自己的一套構成理論，特點是純粹基於視覺分解，方便沒有程式設計經驗的設計師理解。

如上圖所示。一款產品的圖形介面由各種頁面組成，每個頁面又可以分為不同區域。區域是由各類元件組合而成。而元件又是由最基礎的設計元素構成，分別是：圖形和文字。也就是說圖形和文字是構成頁面的基本單位。下面分別是這些單位的含義。

頁面

：產品的一個個獨立頁面，可透過互動完成頁面切換；

區域

：區域可以起到劃分頁面的作用，通常是按內容/功能的不同來劃分各個區域；

元件

：由元素合成基礎元件，最為常見的如按鈕（button）、模態框（modal）等。元件還另外有兩個特性：1。 元件可由元件複合成更復雜的元件；2。 元件必須是可複用的；

元素-圖形

：我所指的圖形範圍很大，包括圖示、線條、形狀、圖片素材等；

元素-文字

：可透過程式碼進行編寫的文字。

例項解構

這是印象筆記的 Mac 版，大致可以分為上面這幾個區域。每個區域又由不同的元件組合而成。拿「編輯區」舉例，裡面除了內容的編輯區外，還有用來編輯樣式、插入內容的編輯欄。編輯欄裡又是由複合的按鈕、選擇器等元件組成。

手機端的 app 頁面則要簡單得多，目前絕大多數產品都是由導航欄、標籤欄和內容區組成。當然還是一樣，內容區裡又由複雜的各個元件組合而成。

運用好隱喻和元件化的設計思維，可以幫助我們創造出體驗更自然、資訊更清晰的介面。我在這也整理了一些最為知名的平臺設計規範和元件庫，分享給大家。

拓展學習推薦

設計規範

Apple - macOS：developer。apple。com/macos/human-interface-guidelines/overview/themes/

Apple - iOS：developer。apple。com/ios/human-interface-guidelines/overview/themes/

Apple - watchOS：developer。apple。com/watchos/human-interface-guidelines/overview/themes/

Apple - tvOS：developer。apple。com/tvos/human-interface-guidelines/overview/themes/

Google - Material Design：material。io/guidelines/

Google - Actions on Google：developers。google。com/actions/extending-the-assistant

Microsoft - UWP：developer。microsoft。com/zh-cn/windows/apps/design

Microsoft - Windows Mixed Reality：docs。microsoft。com/zh-cn/windows/mixed-reality/

設計元件庫

Ant Design：ant。design

Lightning Design System：www。lightningdesignsystem。com

Bootstrap：getbootstrap。com

Muse-UI：www。muse-ui。org

公眾號：

hindydesign

轉載請註明出處，真誠感謝您對作者版權的尊重

如欲獲取完整 PPT，請關注我的公眾號，回覆「

圖形介面

」即可

參考資料

《關鍵設計報告，改變過去影響未來的互動設計法則》：book。douban。com/subject/6024020/

互動設計中隱喻 metaphor 和功能可見性 affordance 的區別？- 知乎：www。zhihu。com/question/268906308/answer/343341035

UI Patterns：ui-patterns。com