廣東網(wǎng)站建設(shè)多少錢僅需500元（ui圖形設(shè)計步驟是什么）ui設(shè)計圖片，
前言本文是 UI 設(shè)計進階系列的第 7-2 篇（總第 15 篇），系列目錄：t.cn/EKGNffc各位好，又好久不見，我來繼續(xù)填坑啦~在上一篇系列文章中我介紹了在 GUI 中視覺設(shè)計的四個要點，分別是字體、版式、色彩和品牌。
這篇文章我將介紹在設(shè)計 UI 時隱喻的重要性以及 GUI 的構(gòu)成隱喻的力量早在本系列第 3-1 篇《以用戶為中心的設(shè)計：兩個人》一文中我就提到過 Norman 引入的「可供性（affordance）」一詞。
圖形界面需要具備可供性，除了利用示能（signifier）來傳達外，隱喻（metaphors）也是最常用的辦法什么是隱喻？
人機交互設(shè)計中的隱喻是指置入用戶熟悉的某一東西來借此理解產(chǎn)品的某一含義這種隱喻可以是關(guān)于圖形的，比如計算器 app 的圖標就是個計算器，讓人一眼就明它也可以是關(guān)于聲音的，比如使用相機 app 拍照后，手機會發(fā)出「咔嚓」一聲來模擬傳統(tǒng)相機拍照的聲音，提示你拍攝成功。
它也可以是關(guān)于交互的，比如我們習以為常的頁面滑動操作，就是模擬了真實紙張被滑動的視覺效果而這種隱喻的設(shè)計，其實早在 GUI 誕生的時候，施樂（Xerox PARC）的研究員們就開始應用了桌面（Desktop）隱喻。
我們知道早期的個人電腦主要是為各類辦公人員工作使用的桌面的設(shè)計其實不只是在隱喻辦公桌的桌面，更是整個辦公室的場景因此電腦桌面上才有文件柜、打印機、垃圾桶等下圖是 Tim Mott（蒂姆 · 莫特）最早在餐廳用餐巾紙畫下的桌面隱喻靈感。
這個想法直接奠定了個人計算機操作系統(tǒng)的桌面設(shè)計并沿用至今
窗口（Windows）隱喻當 Alan Kay 談到桌面隱喻的時候總會提起重疊窗口的點子，它是如何從紙張轉(zhuǎn)化到桌面上的「你可以放一踏紙在桌面上，只要你可以看見每一張紙的一個角角，就可以將它拉出來后放在最上層。
」
所以對 UI 的設(shè)計從來都是盡可能地隱喻現(xiàn)實生活中的物品和體驗，以降低人們的學習成本時至今日依舊如此隱喻的缺點但隱喻也不是萬能的，在《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.。
大意就是：這世上沒有那么多好的隱喻可以用，并且隱喻的適用性不夠強而且用戶對隱喻的認知和理解經(jīng)常值得被懷疑，尤其是需要跨文化背景的時候Word 中的保存圖標就用了隱喻（用 3.5 英寸軟盤來表示保存，你可能在其他產(chǎn)品上也見過）。
然而這對于那些不是那么早接觸計算機的人來說，他們從沒有見過軟盤，這個圖標所傳達的含義就不夠直觀了
善用隱喻可以說是 UI 設(shè)計中最重要的能力之一各位在平日的工作中也許無法感受到，但若做更前沿的交互探索，如 VR、自動駕駛的交互等沒有固定范式的設(shè)計，這個能力就顯得格外重要了GUI 的構(gòu)成講完隱喻，我們再來聊聊具體的圖形界面。
下面是我自己的一套構(gòu)成理論，特點是純粹基于視覺分解，方便沒有編程經(jīng)驗的設(shè)計師理解
如上圖所示一款產(chǎn)品的圖形界面由各種頁面組成，每個頁面又可以分為不同區(qū)域區(qū)域是由各類組件組合而成而組件又是由最基礎(chǔ)的設(shè)計元素構(gòu)成，分別是：圖形和文字也就是說圖形和文字是構(gòu)成頁面的基本單位下面分別是這些單位的含義。
頁面：產(chǎn)品的一個個獨立頁面，可通過交互完成頁面切換；區(qū)域：區(qū)域可以起到劃分頁面的作用，通常是按內(nèi)容/功能的不同來劃分各個區(qū)域；組件：由元素合成基礎(chǔ)組件，最為常見的如按鈕（button）、模態(tài)框（modal）等。
組件還另外有兩個特性：1. 組件可由組件復合成更復雜的組件；2. 組件必須是可復用的；元素-圖形：我所指的圖形范圍很大，包括圖標、線條、形狀、圖片素材等；元素-文字：可通過代碼進行編寫的文字實例解構(gòu)
這是印象筆記的 Mac 版，大致可以分為上面這幾個區(qū)域每個區(qū)域又由不同的組件組合而成拿「編輯區(qū)」舉例，里面除了內(nèi)容的編輯區(qū)外，還有用來編輯樣式、插入內(nèi)容的編輯欄編輯欄里又是由復合的按鈕、選擇器等組件組成。
手機端的 app 頁面則要簡單得多，目前絕大多數(shù)產(chǎn)品都是由導航欄、標簽欄和內(nèi)容區(qū)組成當然還是一樣，內(nèi)容區(qū)里又由復雜的各個組件組合而成運用好隱喻和組件化的設(shè)計思維，可以幫助我們創(chuàng)造出體驗更自然、信息更清晰的界面。
我在這也整理了一些最為知名的平臺設(shè)計規(guī)范和組件庫，分享給大家拓展學習推薦設(shè)計規(guī)范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/designMicrosoft - Windows Mixed Reality：docs.microsoft.com/zh-cn/windows/mixed-reality/
設(shè)計組件庫Ant Design：ant.designLightning Design System：www.lightningdesignsystem.comBootstrap：getbootstrap.com
Muse-UI：www.muse-ui.org公眾號：hindydesign轉(zhuǎn)載請注明出處，真誠感謝您對作者版權(quán)的尊重如欲獲取完整 PPT，請關(guān)注我的公眾號，回復「圖形界面」即可參考資料《關(guān)鍵設(shè)計報告，改變過去影響未來的交互設(shè)計法則》：
book.douban.com/subject/6024020/交互設(shè)計中隱喻 metaphor 和功能可見性 affordance 的區(qū)別？- 知乎：www.zhihu.com/question/268906308/answer/343341035
UI Patterns：ui-patterns.com