2020 年，新冠疫情席卷全球，后疫情時代的需求也促使設計師們不斷提出更有意義的醫療解決方案。作者梳理了醫療保健類 APP 的類型，從產品的研究、功能特性、導航、顏色等角度提出了針對醫療保健 APP 的一系列設計建議，簡單直觀的界面、便捷的功能，以及積極的情感，才能使用戶接受并喜歡原本 “令人生畏” 的醫療產品。

△ Justas Galaburda 繪制的插畫

在移動應用市場中，的應用類別是 “游戲”，而 “健康與健身” 類勉強躋身前十名。2020 年是十分艱難的一年，但也創造了很多機會，例如，移動應用市場中醫療行業的產品大熱，受到多方關注，這類產品直接影響人們的健康行為，可以使人們的生活更加輕松愉快。

為此，大批創業人士開始關注醫療這一領域。首先，你需要制作一個功能強大的 APP，因為如果一款產品不能交付使用的話，它就一文不值。但是，這種功能必須通過設計能力來呈現。一個好的醫療保健 APP 設計，應突出其最重要的細節，引導用戶進行操作，并提出下一步建議，從而產生必要的行動。APP 本身可以成為有效的潛在客戶開發工具和公司的主要產品。對于一個健康或醫學相關的產品來說，用戶界面或用戶體驗設計尤為重要。

△ George Frigo 設計的呼吸檢測 APP

本文將探討一些醫療保建 APP 設計的成功案例和經驗，這對設計師和企業來說都很有幫助。

醫療保健應用的類型

值得注意的是，“醫療保健類 APP” 是一個綜合性概念，涵蓋了許多與健康和醫學相關的數字產品。

醫療保健 APP 類型很多，包括但不限于：

• 醫護人員與患者進行遠程咨詢的 APP（遠程醫療）
• 患者與其電子健康病歷（EMR，Electronic Health Records）進行交互的 APP
• 記錄和管理患者生命體征的 APP
• 提醒患者何時服用藥物或進行運動的 APP
• 用于醫學計算的 APP
• 包含醫療信息的參考型 APP
• 健身和運動類 APP
• 健康生活方式和健康管理類 APP（日常飲水量、睡眠管理等）

這似乎是一個相當寬泛的主題（例如，卡路里計數 APP 和醫學教育解決方案相差甚遠，卻都屬于這個領域）。但是，有一些通用的設計方案，可以提高任何一款 mHealth APP 的易用性。（ mHealth（Mobile Health，移動醫療或移動健康）：通過移動設備提供與醫療相關的服務，例如，通過 PDA、移動電話和衛星通信來提供醫療信息和醫療服務等。）

△Victor Nikitin 的醫療類 APP

如何設計移動醫療保健 APP

一款 APP，即使它不是企業的主要產品，也可能具有巨大的價值。例如，用于醫療工作的配套 APP，能夠為客戶提供信息和服務，從而減輕員工的負擔。如果一款醫療保健類 APP 是企業的主要產品（例如，健身或冥想 APP），因為沒有硬核的業務場景支持，會有很大的風險。有時，這類 APP 設計中的不足會導致用戶完全放棄使用它。

為了避免這種情況，我們來看看設計醫療保健 APP 的 12 個要點，以及它們如何幫助設計師們設計出更具針對性、更直觀、更的 APP。

△ Anatoly 設計的 Healthcare APP

1. 研究 – 成功的第一步

在制作 APP 界面原型之前，你需要了解產品的目標受眾是誰，他們的地理分布、社會人口特征以及心理特征是什么。因為沒有一種產品可以滿足所有人的需求。用戶的興趣和能力決定了他們如何與 APP 進行交互。因此，回答以下問題將對你有所幫助：

• 產品的目標受眾是誰？
• 他們喜歡什么？
• 他們每天都使用哪些 APP？
• 他們使用這些 APP 是出于什么目的？

一般來說，患者和醫生都會使用醫療保健類 APP（假設我們將生活方式類 APP 的用戶也視為患者）。這兩類用戶在功能和 UI 設計方面有不同的需求。

醫務人員通常需要快速找到一些數據項，例如 EHR / EMR、藥物規格、診斷和治療建議、參考材料等。但是，患者希望能與盡可能少的信息進行交互，且這些信息應該簡單易懂。因為這類用戶中有很多是老年人，或是存在某些障礙的人。

只有在進行適當的用戶研究，并得出相應結論后，設計師才可以著手進行醫療保健類 APP 的設計。

△ Chahua 設計的健康管理 APP

2. 每一個案例都簡潔明了

對于一般人來說，醫學是一門復雜的學科。所以在設計醫療保健類 APP 時，請盡可能地讓它們保持簡單，這有助于讓用戶平靜下來，并保持專注。

“復雜性是你的敵人。很多傻瓜都可以讓事情變復雜，而讓事情變簡單是很困難的。” — 理查德·布蘭森

為了讓醫療類 APP 看起來很重要并給人留下深刻印象，而將其界面做得過于詳細，是沒有意義的。即使該產品是為醫務人員設計的，也最好 讓界面和邏輯易于理解。

△ lgor Savelev 設計的醫療類 APP

在設計醫療保健類 APP 的用戶界面時，請提供有意義的用戶引導，并 使界面直觀易懂。否則，用戶可能會在觸達該應用核心內容之前就對其體驗感到沮喪。

如果該 APP 清晰明了，醫生及患者雙方都更容易接受。這樣一來，用戶易于學習上手。即使它是針對醫療的解決方案，人們也不會感到不習慣。

為幫助用戶在比較舒適的節奏下了解產品功能，請使用漸進呈現的原則，逐步為用戶提供指示。從新手指引開始，將應用程序中的每個操作分成可管理的小模塊，每次僅提供一個指引。（漸進呈現（progressive disclosure）：每次只展示用戶當前需要的信息，引導人們平緩地由簡單狀態進入復雜狀態。例如將原本復雜的邏輯隱藏起來，通過更易于認知的界面形式幫助人們輕松完成最為基礎的任務。）

另外，采用被動輸入、自動輸入、調整鍵盤和動態驗證字段的方式，能夠限制用戶必須輸入的信息量。

所有醫療信息必須由受過相關教育且具備專業知識的專家提供。否則，內容要么不完整，要么包含錯誤，對于醫療產品來說是不可接受的。

△ yurig 為醫生設計的醫療類 APP

3. 功能和特性

醫療保健類 APP 的 功能及特性取決于其用途和目標受眾。例如，醫療中心 APP 需為用戶提供個人帳戶，在該帳戶中，用戶可查看其就診記錄、就診建議以及預約情況。如果沒有安全加密的視頻會議和通訊功能，遠程醫療 APP 將毫無意義。畢竟醫療類 APP 依賴的是可靠且有用的通知。

主頁承載著一個 APP 的主要功能。請試著回答這個問題：用戶為什么使用你的 APP？或與之類似的 APP 呢？如果用戶訪問 APP 是為了記錄或接收某些信息，或是聯系醫生，查看他們的進程等，那么這個功能應該位于 APP 的主頁。

重要的是，正如前文所提到的，避免一次性出現太多功能，從而造成混亂。不可否認的是，這種情況經常發生在老版本的 APP 上。這些 APP 常常不斷添加新功能，偏離焦點，以至于只有專家用戶才能理解它。

（專家用戶（super-users）：專家用戶在生活中愿意給予企業反饋，主動做口碑，或是積極分享、點贊等，這些無法以價錢衡量，卻能在品牌價值傳遞、產品創新、營銷推廣等經營各環節，為企業帶來實質貢獻。）

根據帕累托原理（二八法則），80％ 的用戶傾向于使用不超過 20％ 的功能。因此，務必確認哪些功能對用戶來說是最重要的。

（帕累托原理（ Pareto’s principle）：也稱二八法則。在任何特定群體中，重要的因子通常只占少數，因此控制具有重要性的少數因子，即可控制全局。）

△ Manoj Dalvadi 設計的 Medicine APP

4. 便于探索與享受的導航

清晰的導航結構是一個有效的醫療保健類 APP 的必要條件，也是醫療保健類 APP 用戶界面設計的基礎。沒有清晰的導航，APP 是不會被廣泛使用的。完善的導航意味著率和易用性，這對用戶來說是十分有價值的。醫療專業人士需要的是能夠快速開展工作的應用，因為他們花費了太多時間在處理電子健康檔案（EHR）上。一項由斯坦福醫學院展開的調查發現，醫生花費在每個病人身上的時間，有 62% 是用于處理電子健康檔案。如果針對醫務人員的 APP 不夠簡潔，那 APP 便失去了使用價值。同樣的，對于患者來說，他們也不會喜歡混亂的導航，即使當前的任務不是很重要。

重要的信息應放在明顯的位置，并在必要時提供詳情。根據 3 次點擊原則，系統應保證用戶在 3 次點擊之內，找到所需信息。

為了使 APP 導航結構清晰，可采用標準的 APP 導航組件，如漢堡菜單、標簽欄或抽屜式導航等。

△ Alex Samofalov 設計的醫療類 APP

顏色的選擇

一般來說，APP 的顏色選擇取決于目標受眾以及該 APP 的主題。

醫療保健類 APP 設計通常采用中性色調，尤其是冷色調的藍色和綠色，背景一般為 白色。設計師這樣做是為了達到以下效果：利用柔和的色彩和醫療保健行業的聯系，緩解用戶焦慮并增加可信度。因此，在醫療保健類 APP 的用戶界面中，亮紅色或黃色是很少見的。

△ Adam Soko?owski 設計的醫療類 APP — Pharmagy

但是，考慮到醫療類軟件的多功能性，顏色選擇并沒有特別的限制。主要思路是，這類 APP 的整體外觀應營造積極的印象，不應引起焦慮、恐懼或其他不良情緒。

例如，深色的健身 APP 看起來優雅且有品味：

△ Saepul Rohman 的 UI 設計—健康及鍛煉類 APP

而亮色為 APP 增添了許多活力：

△ Michal Parulski 設計的移動健身 APP

追求個性化

APP 的個性化定制是近年來最顯著的設計趨勢之一。特定的功能與特定的用戶模式相適應，并且系統會暗示用戶下一步可執行的操作，以免被用戶忽略。

這些技術的目標是，幫助用戶更快地利用 APP 解決問題。因此，有必要識別和分析用戶模式，并跟進他們的變化。

正如每個人都有著不同的健康狀況，用戶希望他們所使用的 APP 也能提供同樣獨特的體驗。除此之外，在非醫療保健行業，也有 33％ 的用戶會因個性化程度不足而卸載應用程序。

在設計醫療保健類 APP 時，可以使用許多自定義選項，如顏色主題、個性化通知、交互元素，以及利用 AI 定制個性化推薦等。

△ Jawad 設計的在線咨詢 APP

無障礙性是必需的

無障礙的 UI 設計對任何 APP 來說都很重要，對于醫療類 APP 尤為重要。

移動醫療解決方案針對的是不同年齡，具有不同視覺和聽覺能力、身體和心理特征的用戶。因此，醫療保健類 APP 主要功能的設計，應保證每個潛在用戶都能訪問。請考慮可能存在的限制，并努力克服它們的負面影響。例如，有暈動癥的人不會喜歡過多的動效。

但這并不意味著一個醫療保健類 APP 的界面中只能有兩種顏色，也并非所有文本字號都要非常大，但這確實意味著設計師將面臨一些挑戰。對于醫療保健類 APP 來說，其中的挑戰也許相對多一些。無障礙設計能帶來更多的機會，而不是負擔。試著從瀏覽 W3C 網頁中關于無障礙指南的內容開始，嘗試使用色盲模擬器，如下圖這種。

無需多言，試試移動端無障礙設計的常用方式：將主要元素的尺寸控制一個拇指大小的區域中、添加將視圖改為水平模式的選項，以及放大文本的選項等。

△ keithar 的對比度分析儀和色盲模擬器

積極態度的力量

醫學不僅復雜，而且通常令人生畏，即使涉及的醫學內容不多。一個比較聰明的辦法是使 APP 看起來與醫學毫不相干。這將消除用戶因刻板印象而產生的壓力，并使體驗更加愉悅。

除了使用柔和的顏色，還可以在用戶使用 APP 的不同階段 推送鼓舞人心的消息、有趣的圖片、歡快的語音或其他元素。醫療保健類 APP 用戶界面中的圖像和圖標，應始終帶給用戶積極、愉悅的情緒，并 營造一種無痛感和安全感。

△ Mahdieh Khalili 設計的冠狀病毒 APP

區別于 Web 設計

當產品已具備現成的網站，企業方甚至設計師為了降低制作成本，可能會想從產品的網頁版中 “借鑒” 一些解決方案直接應用在移動端設計中，這很可能導致用戶拒絕使用 APP。

用戶與移動設備間的交互不同于與電腦間的交互。移動設備的屏幕比顯示器屏幕或筆記本屏幕小。此外，用戶與移動設備交互的方式不同于在電腦上進行的操作。在移動設備上，我們做任何事情都依賴手指的移動，不愿意輸入冗長的文本，但同時希望系統能更快地工作。

一般來說，盡管 APP 中的導航也很重要，但對于移動設備而言，更需關注的是交互設計。在大多數情況下，人們喜歡使用網站來獲取信息，使用 APP 來完成任務。此外，APP 還集成了智能手機的功能，如加速度傳感器和攝像頭，這也是導致 APP 的用戶界面設計與 Web 版有所不同的原因。

△ Grace Saraswati 設計的健康健身類 APP

好事過頭反成壞事

視覺吸引力與功能性之間的平衡是非常重要的。醫療保健類 APP 必須便捷，且不能分散用戶對內容的注意力。

圖形元素，包括動畫，應始終以滿足使用目的為前提，來考慮是否需要，如數據輸入，以及說明用戶與系統間的微交互等。不能僅僅因為它看起來不錯而添加。不要過度使用漸變和陰影，要將用戶注意力集中在主要信息上。字體也只需選擇一種，可以通過改變字號和其他特征（如斜體、粗體）來做區分。

使用簡單的配色方案可以更清晰地傳達品牌信息，并創造更好的導航效果。

△ Dibbendo Pranto 的健康及活動追蹤交互設計

是否借鑒競爭對手

你可能會在某些點上考慮，是否要借鑒一些競爭對手的成功案例。好吧，如果這有用的話……一方面，抄襲其他產品是不明智的，因為 它們的設計可能并不完善。你采納的可能是競爭對手的錯誤決策，以至于阻礙 APP 的未來發展。

另一方面，你應該先對其他應用進行分析，對競品進行研究。應該參考用戶以前使用其他 APP 的經歷，并進行借鑒，從而降低用戶的學習成本。添加太多創意會使 APP 顯得很煩人，用戶需要花大量時間去習慣并學習操作。為此，可以參考蘋果制定的人機交互指南（Human Interface Guidelines ）和谷歌制定的材料設計指南（ Material Design）。

“用戶大部分時間是花在別人家的網站上。” — 雅各布定律

（雅各布定律：用戶在其他千千萬萬個網站中積累經驗，學會如何使用網站，當一個網站跟其他網站一致時，用戶會立刻知道該如何操作，但如果違反了雅各布定律，用戶會毫不猶豫地離開。）

必須根據品牌、服務和產品細節來進行設計。例如，健身類 APP 與醫學計算器有著很大區別。設計必須完全符合目標受眾的要求、APP 的功能細節及主題場景等。

△ Martyna Zielińska 的醫療提醒 APP

可用性測試

最后，重要的是要記住，每個設計師都有自己的觀點，認為這個或那個決定是合理或有效的。他們可能會對 APP 架構和導航的一致性，嚴謹的設計解決方案，以及產品的實用價值深信不疑，以至于忘記了測試。通過不斷的實踐，設計師提高了自己的共情能力，可以更好地理解用戶需求。但事實上，直覺和經驗帶來的潛在陷阱也會給應用帶來負面影響。

只有在分析用戶與 APP 界面交互的相關數據后，才能得出相對準確的結論。測試有助于及時獲得反饋，覆蓋 APP 中的所有行為場景，并檢查交互模式。

用戶的積極參與是成功的關鍵。相關測試受眾的年齡、職業、地理位置、性別、文化和宗教背景等要盡可能接近目標受眾，越接近越好。盡可能多地讓他們使用 APP 的主要功能并收集反饋。

△  Alex Samofalov 設計的患者卡片 APP

結論

設計所關注的并不僅僅是顏色和字體，而是創造價值和解決業務問題的能力。健康是一個敏感且具有挑戰性的問題，需要特別注意。設計師們一直努力地在醫療類 APP 極高的安全性及可用性要求與界面美觀性之間取得平衡。

經過深思熟慮的醫療保健用戶體驗和 UI 設計是一種極好的工具，它能憑借簡單直觀的界面、便捷的功能以及它所帶來的積極情感等，吸引用戶參與體驗。

文章來源：優設網     作者：TCC翻譯情報局

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

今天給大家帶來的是如何建立設計師個人的插畫組件庫，因內容過長并知識點過多，請泡杯枸杞觀看。

一、關于個人插畫組件庫的3大疑問點：

1、為什么要建立個人插畫組件庫？

其實最主要目的是為了給自己的插畫提供一個設計軸心，我們可以圍繞著這個軸心創作出更具有效率規范的插畫內容，演變更多的插畫風格，讓我們使用插畫時變得游刃有余，提升率的設計輸出，衍生更多的組件化運營設計與品牌插畫組件庫。（注：按照以下步驟設計，插畫手殘黨也能輕松學會哦?。?

2、品牌（產品、項目）插畫組件庫與個人插畫組件庫的區別？

01-規范區別：

品牌插畫組件庫：組件品牌插畫庫前會做很多細致的規范，如：顏色規范/情景規范/光線規范/關節細節處理/景別元素處理等等；

個人插畫組件庫：為了讓我們的插畫更具有靈活性，所以在做個人插畫組件庫時不會做太多的規范，反而為了插畫的衍生要更注重人物構造、比例、小組件等等，目的就是為了成立個人插畫軸心。（注：個人插畫軸心是針對于第一個插畫系統的原型，我們后面的插畫風格衍生都會參照第一個插畫系統的原型，后面會給大家詳細講解）

02-使用效率：

品牌插畫組件庫：使用更加，拖入即可更換組件使用；

個人插畫組件庫：因為我們采用的是不斷迭代式做法，所以在剛建立個人插畫組件庫時，我們的組件替換效率是比較低的，但是在逐漸迭代中，我們的使用效率會逐步提升。

03-拓展力：

品牌插畫組件庫：因為有很多規范的約束，所以拓展力偏弱，不過針對于自己的品牌已經足夠了，它本身就是為了自己的品牌服務的；

個人插畫組件庫：因為從我們插畫組件庫的層級分區來看本來就是為了衍生拓展，所以拓展力非常強，不僅可以衍生出相同類型的插畫風格，還可以衍生出不同類型的插畫形勢，甚至可以以個人插畫組件庫為基礎創建單獨的運營設計組件庫，或者升級為品牌插畫組件庫。

3、個人插畫組件庫哪些人最應該去建立？

我認為UI設計師是最應該去建立的，在我們線上接觸的banner、功能頁、啟動頁、海報等等，很多都可以用到插畫去設計，不管是針對于在公司還是針對于自己私下接私活都是一大利器，可以讓你的完成甲方的任務，更大程度保證設計的統一性以及輸出的質量。（相信大家都遇到過到處找插畫素材拼湊banner的時候吧，有了個人插畫組件庫就不用愁了）

當然除了UI設計師還有插畫設計師、平面設計師、美工也都可以去建立插畫組件庫，不過具體還是要看每個人所接觸的不同設計內容，有些設計師的設計內容很少接觸到插畫部分，或者很少接觸到可以組件化的插畫（比如材質復雜、偏手繪插畫），所以就沒有必要去建立插畫組件庫。

二、如何建立個人插畫組件庫？

想要建立個人插畫組件庫就要從它的本質特點出發去考慮，個人插畫系統歸納下來一共有三大特點：可復用、適應力強、效率高。那么接下來我會圍繞著這三點來闡述該如何制作UI設計師個人的插畫系統。

1、可復用性方向出發設計

可復用性是做插畫系統的一個基礎，如果不能解決可復用問題，那么做個人插畫系統根本沒有任何意義。

如果想要達到插畫可復用性，我們就要把插畫內容進行不同的拆分，在它可替換的部分都作為一個復用樣式，讓它可以更換不同的組件，那么我的解決方案有五步：

第一步：

設定基礎人物組件（肢體細節、型體比例），規范組件內容。如果你是第一次做人物組件，可以多在網上找一些可參考內容：

下圖是我做的一個基礎人物組件案例：

從人物組件上面來看我一共把它們分為了9個小件，它們分別為：頭部、上身、上臂、前臂、手掌、臀部、大腿、小腿、腳掌。

從人物比例來看，男性比例為10a，男性略高，上身寬大，整體壯碩；而女性比例為9a，稍矮于男性，纖細苗條。不管是男性還是女性整個身體構造簡單常規，符合真實人物比例，有利于后期的組件改造。（第一個插畫組件最好使用常規比例，后面會提到為什么要這樣做）

在人物組件上的劃分并不是固化的，你可以把它細化分為9個部分，也可以分為7個部分，如果分為7個部分就把上臂與前臂統一融為手臂，大腿與小腿統一融合為腿部，到底要怎么去進行組件化，還是要取決于自己設計的插畫人物特性。

除了男性、女性外也可以建造更多的人物進來，例如老人、小孩、嬰兒...人物越多，后續的延展空間也越大，前期為了更快的制作插畫組件庫，可以先建立1到2個人物，后續可以逐步完善迭代。

第二步：

為了后期人物的動態延展，我們可以用人物組件制定一些高頻的人物基礎動態，例如標準站姿、坐姿、跑動等，以便于我們插畫的延展，圖示如下：

做人物基礎動態可以讓我們在后面的插畫設計上少花很多時間，例如工作中要用到跑步動態時，那么就可以直接用人物基礎動態里面的跑步動作進行添加人物細節，會節省很多工作時間，提升工作效率。

第三步：

有了人物組件的基礎，我們就可以開始設計插畫的風格。

在設計前我們可以多參考一下別人的插畫風格，這里所說的風格主要是指插畫的處理方式，比如：顏色的選擇、表情的處理、衣服材質的處理、曲線直線的選擇等。

我們需要注意的是建立第一個插畫系統時可以先做一個風格簡單的，不僅容易調節組件也有利于后期的風格衍生，以下是我為人物添加的簡單基礎風格（ 特點：純色/完全按人物組件貼合設計/無漸變）：

第四步：

設計人物組件（可以讓你的插畫在不同的場景應用不同的動作/服裝/表情/膚色等）

1/發型：

在發型上面我們可以進行一些人物的區分，可以適用于不同的場景，例如：男性第一個適用于公司場景，第二個適用于學生，第三個適用于軍人...

2/膚色：

做膚色的變化最主要原因是讓插畫適應于國際化，在不同的場景中可以加入不同膚色的人物。

3/表情：

表情是為了更好的體現出人物在環境中的狀態，如：領取紅包插畫，人物的表情就應該是開心或者大笑。

4/角度：

在插畫的角度上，我們采用了最常用：正面、半側、正側，讓它在插畫中的適應力變得更強。

5/紋理：

我們目前設計了6個基本紋理，基本紋理不僅可以設定于服裝中，還可以設定于輔助元素以及背景中。

6/服裝：

在整個人物組件中，分為3大塊可替換服裝組件，分為別：上身、下身、鞋子。例如上身可以替換為短袖、長袖、衛衣、背心等，同時在它的下一個層級還可以替換服裝紋理、服裝動作、服裝顏色。

結合以上的人物組件我們就可以組合出各種不同的動作，如下：

第五步：

設計通用組件庫：

通用組件庫中的元素最開始要用黑白灰來表達，因為在不同的場景中元素的運用也有很大差異，例如花盆作為近景元素會多許多細節，作為遠景元素可能只是作為線條來點綴，這些表達方式我們可以在日后使用過程中添加到它的子級庫即可，這樣可以讓我們在使用組件庫時更加靈活，也有利于我們迭代組件庫，后面會逐一的講解。

這5個步驟下來我們的可復用性插畫就做好了，那么接下來看看運用效果：

我們可以看到以下4個場景，運用到了不同的景別處理方式，例如：第一組為背景漸變；第二組背景則采用了大面積的純色；第三組背景用線性表達；第四組則用淺色面表達。

這也是與品牌插畫組件庫的很大區分點，雖然都是可復用性插畫，但是品牌插畫組件庫大部分是使用現有的、具有規范的，而我們所做的個人插畫組件庫可以用同一個輔助元素增添不同的插畫表達形式，不斷迭代子級，迭代的子級越多它的內容選取性就越高，后續就可以直接拖入使用，比如圖4中的植物就有2種狀態，第一種是顯示部分顏色，第二種則直接為灰色。（注：后面會詳細講解）

以下活動頁中，背景元素也可以運用同樣的方法，在我們的背景組件庫中調取想要的單個插畫元素，把它們組合放入活動頁背景中，進行再次調色得到不同的背景組合，以下三種背景組合都可以相互替換使用。

2、讓你的插畫具有極強的適應力

適應力強是指我們的插畫系統可以匹配大多數的產品，因為個人插畫組件庫是以設計師身份做的，我們會面臨各類產品，而各類產品風格都會有不同的變化，要解決這一點我們可以使用以下三個方法：

方法一：改變人物結構

例如：你想為產品A做一些插畫類的功能頁或banner時，發現你現有的第一套插畫組件庫并不符合產品特性，產品A想表達更多夸張的成分，而我們所做的插畫系統顯示更多的是柔和與大眾，這樣就完全不匹配，那么我們就要去改變一個基礎點，那就是人物結構，通過人物結構的重組我們可以得到想要的夸張效果，那么我就男女各舉一例結構重組對比圖，如下：

我們為了在身體結構中達到人物夸張的效果，在原有10a比例不動的情況下對原本的身體結構做了重大調整，男性：上身的縮短，下身的延長以及手部腳部的突出；女性：整體更加硬朗，手腳放大，腿加長。

如果把他們用相同的插畫風格表現出來，就會出現如下效果：

當你在做人物結構調整時，你會發現有一個常規的人體結構作為基點去設計是多么重要，也就是之前所提的為什么第一版插畫組件讓你做常規的，因為如果不是常規人體結構，調整起來會非常麻煩，就很難有參考意義。

方法二：改變插畫風格

除了人物結構外我們還可以更多的考慮插畫風格，通過不同的插畫風格去適應不同的產品，例如：線面/漸變/雜色/極簡...同樣我就男女各舉一例，如下：

上圖改變風格后，男性的風格則更偏向于線條的表達與高亮色調；女性的風格則簡單直接，更注重凸顯配色的碰撞。

方法三：改變人物結構+插畫風格

在上面兩種方法中除了已有的基礎人物結構A與插畫風格A，我們還得到了人物結構B、C與插畫風格B、C，如果我們用人物結構B（或C）與插畫風格B（或C）結合又可以形成新的插畫狀態。

按照這樣的方式下來我們就可以逐步添加自己的插畫系統，假如當你的插畫系統人物結構有5組、插畫風格有5組時，你就可以組合出25組不同的插畫，這樣你的插畫系統適應能力就極強了，甚至你要為產品做插畫系統時，也可以大幅度參考你的個人插畫系統，當然這一切都是需要自己去慢慢迭代添加的。

3、用軟件規范插畫組件庫（層級詳解），提升應用效率

為了更好的替換組件，提升輸出的工作效率，我們可以從一開始就使用軟件對插畫進行管理。市面上可以提供復用樣式的軟件也蠻多的，這里我就使用應用率最高的Sketch來進行講解。

首先我給大家講一下我的插畫組件庫的構成，我的插畫組件庫一共分為了5大塊，分別為：人物組件庫、非常規人物組件庫、動物組件庫、輔助元素組件庫、輔助背景組件庫，而這5大塊中也細分出了很多小層級，我就一一為大家分析下我所用的層級。

我們可以從以上圖中看出從風格分類開始直至最小的組件，我用到最多的層數是5層。

如果大家看的有點懵，我們就拿一塊從層級1到層級5舉例說明：

風格分類（A）-角度分類（正側）-四大組件（下身）-動作（B）-顏色（B）

這里所用的是sketch復用樣式中的“套中套”，“套中套”的組件方式看似復雜，其實挺簡單的，并且在軟件中換取都在大組件內，因為不是軟件講解所以就不帶入過多的軟件知識。

在制作時我們不要想著一次性就做出很多小組件，比如你想做表情時，一來就想做10多20個全部包含完，其實沒有必要，我個人是比較建議最開始小組件做個3-5種常用的就可以了，因為組件庫是要不斷添加優化的，所以可以在后續工作應用中再不斷的添加。

有了層級的劃分，我們可以用sketch的復用樣式簡單、的規范插畫組件庫，想要覆蓋替換組件內容也是十分方面，如下：

2/非常規人物組件庫

除了常規的人物組件庫外，我還單獨羅列了非常規人物組件庫，這一類組件庫主要是作用于人物特殊的動作形態，比如下面3個透視類的插畫動作形態，這些動態與常規的插畫組件庫的內容很多是不互通的，比如臉的角度、鞋子的角度、身體的透視尺寸，所以我們就單獨給他羅列一個非常規人物組件庫。

都是同為組件庫，當然也有可替換內容，非常規人物組件庫與常規的人物組件庫的層級邏輯有所不同，常規的人物組件庫是用小組件替換人物動作，但是非常規人物組件庫是先替換整體的動作然后才可以替換小組件，這也是對他的特殊化管理。（注：不想舍棄它，又不想為他做出更大的調整，所以就單獨讓它成立出來。）

根據非常規組件庫的設定給大家做個小案例：

以上可以看出我在這個透視化的插畫人物中可以替換表情、發型、紋理、上身、下身。

3/動物組件庫

我這里做的動物組件庫是用來輔助人物以及調和場景的，所以在層級劃分上并不會做的非常細，滿足我的日常插畫需求即可，當然如果你想把動作組件庫做的非常細，那么可以參照人物組件庫的層級來劃分層級。

根據我使用的動物組件庫層級，給大家舉一個正確小案例與錯誤小案例，先看下錯誤小案例：

可以看到下圖（狗子）是一個非常粗糙的動物組件庫，里面只能替換動作以及動物的動作，當選在狗子的狀態下，狗子除了換動作沒有其他的組件選項，雖然我想讓動物組件庫簡化，但是也不至于什么都不能替換。

接下來看看正確的案例：

我們可以看到在貓咪的狀態下就有很多組件可以選擇，不僅可以替換貓咪的動作，還可以替換展示形式（展示形式我是按照景別來做差異化，當然也可以用其他方法）、貓咪表情以及貓咪的顏色，這樣的動物組件庫已經完全能夠滿足我的設計需求。

4/輔助元素組件庫

輔助元素組件庫層級最好要添加景別，因為我們經常會遇到同一個元素在不同產品中體現出不同的景別，如果不區分，在選取組件時就非常的傷腦經，經驗之談、強烈要求。

為了大家更好的理解，我給大家舉一個小案例：

我們可以看到我不僅可以切換元素，還可以切換景別以及顏色，至于其他的小組件我并不需要，因為這些已經足以滿足我的日常運營設計需求，這個層級劃分簡單實用非常推薦。

5/背景元素組件庫

背景元素組件庫一共分為兩種類型，分別為：組合場景背景與紋理背景。

組合場景背景：

組合場景背景是用輔助元素組件庫拼湊而來，它是一個可以直接用的完整場景，想要替換的組件如果在輔助元素組件庫能夠替換，那么在背景組件庫也是可以的。（注：這里牽涉到組件庫的重組調動，在后續出的文章中會詳細提到）

上面的插畫由白天變為黑夜只需要用組件庫就能輕松完成，而這些組件庫也不是現做的，全部是輔助元素組件庫里提取過來的，也就是我所說的組合場景背景是用輔助元素組件庫拼湊而來。

大家可以發現插畫中山上的小房子只用一個組件就可以全部替換顏色，而左右兩邊的樹卻要做6次不同的替換，樹木需要多次替換的原因這就是沒有做重組，如果想要相同元素做相同的替換，那么建議在調換過程中重組組件，優化層級。

紋理背景：

紋理背景相對于來說就是最簡單的，它里面只存在紋理的不同樣式，并且只可更換顏色。

三、人物插畫組件庫如何結合到運營設計中？

1、創建常見運營設計規范

在做設計前，我們先要做好運營設計的規范，以便于組件庫的插入應用。

那么我就用卡片彈窗來舉例：做設計前我們先確定卡片內容，當內容確定后，根據內容進行卡片的運營設計規范：

我們需要注意的是初步規范里并不需要涉及到用什么字體，也不需要羅列出插畫的尺寸規范，我們可以在后面的設計中一步步去實現。

2、結合運營設計的兩大方法：

當規范做好時，我們就可以利用規范去制作相應的組件庫，利用組件庫來結合運營設計，按照不同的情況可以分為以下兩種方法：

1/重組組件庫（無人物動態組件的情況下）

在一些運營設計中，如果我們要用到的人物動作之前并沒有做過，那么就需要我們重新設計人物動作，設計完后再把可以重組的人物組件拖到我們現在的組件中進行重組，分以下幾步進行：

第一步，根據卡片的規范做出卡片的設計內容，如下：

第二步，把設計好的內容分板塊，以便于組件庫的層級劃分。在這里我把他們一共分為了4個大塊，分別為：文字組件、人物組件、輔助裝飾組件、背景元素組件。

第三步，在大的板塊下劃分小組件，結合小組件就可以得到我們組件庫的層級，可看下圖：

在小組件里，很多都是個人組件庫里原本有的內容，這時我們就可以把它們拖進來進行重組。

假如你替換的元素不夠用，那么就需要你自己手動設計了，這樣也能反過來擴充你總的人物組件庫內容，其實組件庫的內容就是這么一點點迭代添加的，當你的組件庫內容越來越多時，你的設計成本就會越來越低。

三步下來我們就把組件庫融入到了運營設計中了，有了新的子級運營設計組件庫。

2/直接替換（有人物動態組件的情況下）

如果你做的運營內容組件庫里都有，那么就可以按著規范直接拖入即可，也沒有必要去進行重組。

總結：

總的來說組件庫的建立是一個龐大的工程，在你有了基礎架構的時，你就要慢慢往里面塞更多的內容進行填充，當你的內容足夠多時它就可以反向為你提供更多的便利，它是你的寶貴的設計資源庫。

因為這期的內容實在太多，所以插畫組件庫的應用、運營設計常用模塊組件案例、重組技巧以及品牌插畫組件庫的建立我會另外抽時間給大家總結。（做案例太費時間希望大家諒解）

參考資料提?。?/span>

我為大家提供了一些組件庫的可參考性文件，里面包含成套組件庫（sketch）、成套的插畫圖片、宣傳動畫、一些參考性的圖片（構圖、表情、發型等等）。

文章來源：tob.design     作者：黑獅力

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

祝愿大家在新的一年，有一個新的開始，更加有活力，更加有生機，生活像亮麗黃一樣靚麗而多彩，像灰一樣靜謐而不失優雅。

為什么ui要有一致性設計

大家有沒有聽說過一次性設計

一次性設計就是，我今天投入成本完成了一個界面或者營銷需求，但也只是完成了這個需求而已，今后再碰到類似的需求依然吃癟，還得重新投入一輪成本。這種設計就好像一次性的碗筷，用后即扔，非常非常得低效，它不僅沒有辦法復用，而且無體系、非模塊的處理方式非常摧殘設計師的精力。

所以保持一致性設計也是可以提升操作的一致性、提高工作效率、延續品牌定位……而且一致性設計是UI和開發交接的一種很好的辦法。

一致性設計的好處

對于開發團隊而言

1.復用資源，降低設計成本

很多不同的界面中會用到同一個資源，如果見一個重做一個，會很大程度浪費設計的人力資源

2.產品風格及體驗不易出問題

因為資源的復用，能基本保證整個產品的風格不跑偏，而在用戶體驗上，也起碼能保持在一貫的水準

3.新人可以快速上手

比較大型的項目中如果人員流動率較高，一致性就相當有必要了。新人先閱讀規范后更容易展開工作，根據一致性也能更快了解當前產品

4.程序能提高開發速度

主要也是因為能夠復用自用資源，有些界面和控件，程序甚至無需找設計出資源，在產品策劃指導下可直接開發

對于用戶而言

1.對界面和功能操作的認知統一，學習成本低

熟悉過主要界面/功能后，在其他界面/功能中能基本自由操作

比如在北京開車是靠右行駛，到上海你不用學就知道也是這樣。因為中國道路交通相關法律中對此是做了統一規范的。要是這一點不一致的話，到上海突然讓你靠左行駛，你肯定要適應一段時間并難免犯錯.....

2.提高操作效率

在降低了認知成本后，用戶很容易就熟悉了產品的設計風格，那么操作起來自然也更容易上手，效率也更高

3.加強對產品（品牌）辨識度

別人一看很容易辨識出：哦，這是某某等那個產品

常見的產品中保持一致性設計的例子非常多，相信各位天天見，我就不啰嗦了。

一致性的規范提現在哪里

什么是設計規范？

設計規范是一個老生常談的話題了，網上相關的文章也非常多，但我相信有很多設計師對設計規范的理解還是比較模糊，認為設計規范指的就是字體，顏色，控件規范那些，這種理解其實是比較狹隘的。

于我而言，設計規范用一句話總結就是：設計規范是針對特定產品所制定出來的一整套產品標準，包括流程標準，技術標準，設計規則等等。

今天就只來說最基礎的幾個小方面（也算是干貨滿滿了）

• 顏色

• 字體

• 組件

• 交互

其他的一些需要大家根據自己的產品定義

顏色

顏色的搭配和選擇影響著產品最后呈現出來的視覺效果，合理的顏色配比能加深用戶對品牌的印象。色彩無處不在。

那我們如何去定義顏色規范呢，下面本人分享一套規范，小伙伴們可以根據自己的產品進行套用（如果不對大佬勿噴，一起學習）

1.定義基本的顏色

首先要定義基本色。理想情況下應該有1-3個基本色與產品相關聯。

基本顏色的使用場景主要是

• 突出顯示重要的界面狀態或信息

• 在交互方面：如文本字段切換、復選框等

• 提供視覺反饋，如新的消息等

2.60%30%10%配色原則

根據數據反饋60%+30%+10%是是整體畫面最有平衡感，也是用戶最滿意的方案引導用戶的視線從一個CTA區域平滑移動到另一個區域。

如圖

按其他順序搭配，它仍然有效

3.了解受眾

好的用戶體驗的關鍵是理解受眾。顏色在這里起著重要的作用，因為顏色的選擇會影響用戶與產品交互時的感受和情緒。

• 你需要考慮的問題

• 誰是你的目標受眾？

• 他們的年齡？

• 產品的專業化是什么？

• 你想讓產品喚起什么樣的情感？

注意：與團隊討論選擇時，請始終關注這些問題。

4.色重對比

如果你想把用戶的注意力集中在特定的操作上，最好使用強對比度的顏色來幫助用戶找到焦點。

通過這種小技巧檢查顏色的飽和度，能看到別人看不見的東西。

5.命名方式

另外分享一些將圖像生成調色板的實用工具：

• Coolors.co/image-picker（Web app）

• Alembic(Sketch插件)

• Image-Palette(Figma插件)

  
  

字體

在項目中文案風格也要和產品定位統一，各個界面出現的文字提示等要風格統一。

主要從五個方面入手

• 類型

• 字號

• 字重

• 行高

• 行寬

類型

iOS設備的系統默認字體，中文為蘋方，英文&數字為SF UI Text。

Android設備系統默認字體，中文為思源黑體，英文&數字為Roboto。

字號

不同的使用場景，文字的字號也不相同。文字的主使用場景分為：一級標題、二級標題、三級標題、正文和提示文字 。

通常最小字號為12px也有文字最小字號為11px的，特殊情況下，字號為10甚至可能更小，例如標簽里面的文字。

字重

字重就是指字體筆畫的粗細。字重的等級是用來標明同一字體家族中不同粗細筆畫的字型。

UI設計中，常用的字重有兩個，一個是常規（Regular），另一個是中黑體（ Medium）。

正常文字使用常規體（Regular）。當需要突出層級展示，增加對比時使用中黑體（ Medium），中黑體（ Medium）常用于標題。

行高

字號大小等于文字高度，如下圖所示，字號為16時，行高設置為16，那么其行高也是字體本身的高度（16pt）。

如下圖所示：行間距距離文字上方為3pt，行間距距離文字下方也為3pt。字體高度為16pt。

舉個例子，設計一個標簽時，當字號為14時，行高為20，那么為了保持視覺上字體到四周距離相同，那么上下間距為4，左右間距為8。

因為行間距的存在，不能將上下間距和左右間距設置相同。

如果行高設置為14（文字本身大?。敲瓷舷麻g距應該也為8pt，而非4pt。

下圖是Sketch默認字號和行高對照表

行寬

行寬=字體寬度+兩側距離字體的寬度

將行寬拉長，代表著設置了文本內容范圍，文本距離右側語音圖標為12pt，表示當文字內容距離語音圖標12pt時，文字打點或截斷展示。

組件

組件的使用場景有很多今天借一個例子來分析和總結，讓大家了解和認識組件的使用和規范。

那就來個最基本的：頂部欄設計

• 組成

• 變化

• 交互方式

來認識組件的模式和規則

頂部欄的常見樣式

頂部欄是什么樣子，它由什么組成？

通常，頂部欄提供有關此頁面總體的信息，以及用戶可能對該頁面進行的潛在操作。常見的頂部欄如下所示：

頂部欄中常見的組件包括：標題、容器、操作項、導航圖標等，接下來為大家逐一介紹各個組件的使用。

頂部標題通常與底部導航一起使用，共同解釋頁面的信息。

如果一個頁面中底部導航只有圖標沒有文字解釋，用戶有可能不了解圖標的意思，那么解釋頁面信息的重任就落在了頂部欄的標題上。

大多數情況下，標題位于頂部欄的中間，有時也會在左上角有一個很大的標題作為導航（IOS應用中）。除了解釋頁面的目的，大標題還可以用于品牌推廣。

標題也可以解釋用戶在這個頁面上執行的操作。例如，當用戶想修改個人資料時，標題會顯示“edit profile”，用來解釋操作。

有時，在頂部欄主標題的下方會有補充文本，這樣方便為用戶提供更多的信息。

容器的趨勢越來越不明顯。容器通常是灰色或者不飽和的顏色，有時容器也會使用品牌主題色，起到宣傳和推廣品牌的作用。

操作項通常以圖標和文本按鈕的形式出現在頂欄上 ，當需要時可以在頂欄上顯示0-4個圖標或文本按鈕。

在不同的頁面中操作項可能代表不同的含義，但一些常見的圖標/操作遵循著一定的規則：

1、返回：當用戶進入第二/第三層級頁面時，“返回”通常出現在左上角。單擊“返回”圖標可引導用戶回到原始頁面。

2、關閉或取消的位置不固定，可以在左側也可以在右側，具體取決于是否有其他操作。

這里討論一個常見的問題，頂部欄中“返回”和“關閉”分別應該在什么情況下使用：使用“返回”：當用戶在一個漫長的探索過程中需要不止一步的操作，或者在該頁面上沒有一個簡短而明確的目的時。使用“關閉”：表示一個完整的單頁操作，它有明確的起點和終點，在頁面上執行特定的操作實現特定的目的。

3、個人資料或帳戶有時會出現在頂部欄上，以方便用戶編輯個人信息，設置或切換帳戶。

4、添加或搜索可幫助用戶瀏覽更多內容或者擴展他們感興趣的區域，通常出現在右上角作為易觸摸的目標。

需要注意的一點是，為了避免引起不必要的關注，頂部欄上的圖標/文本按鈕通常是線性圖標而不是填充圖標，并且是非飽和顏色。除非它們確實想吸引用戶的注意，或者為了提示用戶進行操作。

搜索頂部欄 

使用App時我們會發現，有的頁面頂部欄中沒有標題，而是增加了一個搜索框(淘寶首頁)。

根據特定的需要，可以將搜索用在不同頁面的頂欄上，因為它在用戶瀏覽內容時為用戶提供了更多的價值。

什么時候放棄使用頂部欄？

當頂部有很多內容時，一些App會讓頂部欄變得非常簡單甚至完全舍棄。

在Robinhood頂部顯示最重要的用戶信息——每日投資增長，右上角只有一個提示文本按鈕，用來邀請好友。

放棄使用頂部欄的常見案例是個人資料頁面。這樣做的目的是自我暗示，這個頁面自己可以掌控，個人信息在頂部占據了很大的空間。

頂部欄的交互模式

一個頁面中可以有很多交互發生，有時頂部欄需要通過改變樣式或內容來反映交互動作。

反映滑動位置 

下滑出現頂部欄:當頂部欄有許多重要信息但又占用大量空間的情況下，頂欄的內容可能會根據滾動位置而變化。當用戶下拉頁面以獲取更多內容時頂部欄會出現。

下滑隱藏上拉出現:另一種形式是在Google搜索中，用戶向下滑動頂部搜索框會隱藏(Google猜測用戶希望集中精力瀏覽內容)，但是只要用戶向上滑動，中止瀏覽過程，頂欄搜索框又會出現。

不管交互形式如何，這類頂部欄能在用戶需要時快速顯示：

• 用戶可以進行搜索功能或常見操作；

• 標題/重要信息作為參考，提醒用戶在哪個頁面。

下滑隱藏頂部欄:對于那些不會影響用戶需求和操作求的頂部欄，通常會隨著頁面的向下滑動而隱藏。

星巴克頂部有一個令人愉快的問候語，當用戶向下滑動并嘗試選擇要喝哪種咖啡時，它會隨著頁面滑動而消失。

Airbnb會在頂部展示房屋圖片，以便給用戶留下深刻印象，但是當用戶向下滑動時，頂部的圖片也會跟著滑動。

反映當前頁面的變化 

有時，頂部欄的信息會根據內容的變化而實時發生改變。

最常見的案例是收到消息時的反饋：在微信中，頂部標題會顯示用戶收到信息數量的變化；Instagram通過頂部小紅點的變化來展示收到的消息。

交互式頂部欄

作為頁面中必不可少的一部分，交互式頂欄減輕了頁面中其它元素的負擔。除了常見的圖標或文本按鈕(添加、取消、后退)的變化，在頂部欄中還會發生哪些有趣的交互？

互動標題 

有的產品服務非常依賴于用戶的偏好、位置，例如常見的外賣或打車軟件。

在這種情況下，App通常依靠用戶的初始輸入來決定顯示的內容，用戶也可以直接在頂欄標題上編輯信息。

交互式圖標/文本按鈕 交互式圖標/文本按鈕意味著用戶可以在頂部欄上執行某些操作，而不必離開此頁面。在robinhood中用戶可以在不用切換頁面的情況下，直接選擇購買股票要用的計算方法，或者把頁面上的股票添加到自己的收藏中。

頂部導航 

有的App希望在一個頁面中能顯示多個平行的內容，所以會在頂部欄上設置多個選項，實現更方便的導航。

常見的頂部導航包括分段控件和標簽導航:

分段控件導航選項一般不支持左右滑動,選項較少，；標簽導航選項的設計更多樣，支持左右滑動切換。

https://www.xueui.cn/experience/app-experience/top-bar-ui-design-patterns-and-rules.html

研究過程可能會花費很多的時間和精力，卻能讓我們真正受益。

總結

一致性設計大方向為產品有更杰出的體驗，在保證用戶體驗良好的同時，我們需要與同類產品做出差異化競爭設計，這就需要我們平時多觀察互聯網設計趨勢，國外設計趨勢，集合自己品牌去打造一套好用的產品。

這里推薦幾個必看的大廠設計規范官網，建議收藏。

蘋果iOS設計官網：https://developer.apple.com/design/human-interface-guidelines

谷歌Material Design設計官網：https://material.io/design

微軟Fluent Design System設計官網：https://www.microsoft.com/design/fluent

IBM設計官網：https://www.ibm.com/design/language

Facebook設計官網：https://design.facebook.com

螞蟻金服設計官網：https://ant.design/index-cn

其實，規范也是要在遵守和引領用戶習慣中不斷迭代的。既要保持大的設計規范框架不變化，又要在設計的過程中給用戶制造驚喜。比如，整個UI的配色和字體需要保持統一，但在一些圖形，動效上可以做出亮點，讓用戶在整個使用體驗中既是沉浸的又能有些小驚喜。規范的打破與重建一定是需要一個動態平衡的過程。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

作為一名UI設計師，圖標設計是我們剛入門就必須學會的必備技能之一，它是用戶界面中絕對不可或缺的元素。通常我們理解圖標設計的含義，是將某個概念轉換成清晰易讀的圖形，從而降低用戶的理解成本，提升界面的美觀度。隨著扁平化設計風格的普及，圖標的風格越來越簡約，看似簡單的圖形，實際要準確的表達含義，也是需要注意很多細節的，在如今大同小異的圖標中，如何讓你設計出的圖標具有說服力也是一門學問，今天就給大家全面的剖析一下圖標的知識，讓你做出的圖標有理有據。

目錄

1、圖標的定義及分類

2、圖標的設計規范

3、圖標的性格走向

4、圖標的評判標準

5、總結

一、圖標的定義及分類

1、圖標的定義

圖標是具有高度概括性的、用于視覺信息傳達的圖像。圖標常常可以傳達出豐富的信息，并且常常和詞匯、文本搭配相互搭配使用，兩者互相支撐，或隱晦或直白地共同傳遞出其中所包含的意義、特征、內容和信息。

在數字設計領域，圖標作為網頁或者UI界面中的象形圖和表意文字而存在，是確保界面可用性的基礎設施，也是達成人機交互這一目標的有效途徑。

2、圖標類型（基于功能劃分）

2-1釋意性圖標：

釋意性圖標是用來解釋和闡明特定功能或者內容類別的視覺標記。它并不是一定被點擊可交互的UI元素，在很多時候只是有輔助解釋其含義的文案。在不搭配文本的情況下用戶會借助這些圖標來獲取信息。不過有時候圖標表達的含義可能還不夠完整或者清晰，所以會將圖標和文案搭配起來一起使用，這樣可以大大降低誤讀的可能性，釋意性圖標一共可以分為以下三類：

2-1-1純圖標：

例如火球買手APP中的店家“特定標簽”，以及圖文展示下的“觀看數量圖標”與“收藏圖標”，它們并不需要用文字去解釋，用戶也知道它表達的是什么。

2-1-2圖文結合：

例如造作APP中的“購物車圖標”與“收貨地址圖標”，為了讓用戶能夠很好的明白圖標的意圖，所以在圖標下方會配有文字提示，這樣就能大大的降低誤讀的可能性。

2-1-3純圖標（圖標內含文字）：

例如開眼APP中視頻封面左上角“開眼精選圖標”，它把圖標與重要文字結合在一起展示給用戶，看起來不僅十分具有個性，而且用戶對其理解性也非常強。

2-2交互性圖標：

交互圖標的最大意義在于可以引導用戶進行交互行為，是在產品中不可或缺的組成部分。它們可以在用戶不同的操作手勢下幫助用戶執行不同的交互過程，這種類型圖標也是APP中最常見的，常見的交互性圖標如：搜索、底部標簽、返回、點贊、收藏、掃一掃等。

2-3裝飾性圖標：

裝飾性圖標僅僅是用來提升整個界面的視覺體驗，它并不具備任何功能性。這類圖標往往是為了迎合用戶的偏好與期望，通過豐富視覺體驗的方法來增加內容的觀賞性，這樣不僅可以吸引并留住用戶，還可以讓整個用戶體驗更加積極，最為大家所熟悉的就是滴滴出行APP中的“小車圖標”。

3、圖標類型（基于基礎樣式+表現手法）

圖標基于基礎樣式（線、面、線面結合）+表現手法（顏色、透明度、投影、疊加...）劃分，一共可以分為20種類型，每種類型的展示方式也都各有不同。

3-1線性圖標（6種）

線性圖標通過線來塑造輪廓，在界面中App的圖標尺寸并不大，所以如果線過于復雜，在小面積中過多的線會對識別性產生較大的困擾。在圖標設計中使用的線有粗細之分，常用的App圖標設計線的粗細一般有2PX或者3PX，不同的線條粗細所帶來的視覺感受也不同，細線顯得精致，粗線視覺面積大，顯得厚重。

3-2面性圖標（6種）

面性圖標是通過面來塑造形體的圖標，采用了剪影的設計形式，通過線或者面去切割基礎輪廓面，通過分型來塑造圖標的體積感。不同的切割手法造成了面性圖標設計感的差別。

3-3線面結合圖標（6種）

線面結合圖標相較單一的線性圖標或單一的面性圖標樣式更加豐富、也更富有趣味性。從設計的角度上說，由于元素的多樣化，設計更容易獲得好的效果。相反，如果運用不當會顯得圖標非常雜亂，如何有效的把控好兩者之間的過度是關鍵。

3-4擬物化圖標

這類圖標的特點是通過細節和光影還原現實物品的造型和質感，能給用戶極強的代入感，用戶可通過對現實事物的聯想，快速領會圖標表達的意圖。但是隨著 ICON 的發展，擬物圖標也帶來了一些問題，因為用戶關注的核心永遠都是信息本身，華麗的視覺元素或許在用戶使用的初期，起到賞心悅目的裝飾，但久而久之，這都將成為對用戶獲取信息的一種干擾，所以現在擬物化的圖標很少運用在APP界面之內。

3-5輕質感圖標

相較于擬物風格不會有太多復雜的視覺元素，層次簡單，用色素雅干凈，采用輕投影、輕漸變的方法設計，這類圖標具有一定的立體感，能給人輕盈、簡潔、精致的感覺，在界面設計中，一般在面積比較大的區域我們會使用加入輕質感的圖標。

二、圖標設計規范

合理的遵循圖標規范可以有利于設計師之間合作使用，指導設計師如何規范的去設計圖標，以確保企業所有產品圖標風格的一致性和可用性達到統一，同時也是為了后續產品更新迭代有可參考的地方。

1、圖標尺寸

為了保證圖標的尺寸大小一致性，我們往往會建立基礎的網格尺寸來進行繪制圖標，常用的網格繪制尺寸為：16、24、36、48、64、128、512、1024。這些尺寸并不是固定的，在設計中也會存在特殊的尺寸，例如谷歌在臺式機上設計圖標，當鼠標和鍵盤是主要輸入方法時，就會使用密集布局，基礎網格就會縮小到20。

下面就以常用的24x24為大家展示：

網格包含2px出血位。這樣可以確保圖標在導出時將保留其所需的比例和周圍的空白區域，同時還能夠很好的平衡圖標的視覺重心。

*在使用常規圖標時避免一部分在出血位。

*在使用多個元素的圖標時，避免圖標擁擠我們可以讓其部分出現在出血位，確保它們之間有足夠的空間。

2、圖標的keyline

keyline由圓形，正方形，矩形，正交，三角形和對角線組成。它可以為您提供圖標集中基本形狀或比例的一致大小。這使創建視覺上的穩定變得更加容易，并有助于在設計相似比例的圖標時有共同的參考準則。

在24尺寸下的keyline構成如下（24尺寸下的出血區域為2）：

當把圖標畫在網格上時可以很好的規范圖標，讓它們從整體的視覺上看著統一規范。

3、像素

3-1像素統一

在設計一整套系統化的圖標時，我們一定要注意圖標的像素大小，要運用相同的網格尺寸設計相同線條粗細的圖標，包括曲線，角度以及內部和外部筆劃。這樣圖標看起來才更統一，也有利于后期圖標的迭代更新。

當然，描邊像素的粗細并不是絕對的，如果我們要做一些密集型的圖標時，可以考慮適當的縮小線的像素大小。如下，我們設定的系統圖標線條粗細為3px，當你用3px作用于指紋圖標上時就會顯得非常擁擠，并且在視覺上比其余圖標更重，這時我們就可以把它的線條像素降級，設定為2px。

3-2避免小數位

我們在用矢量工具繪制圖標時，要仔細看好圖標的網格尺寸和圖標結構尺寸，避免產生小數位。

4、圖標的曲率

曲率簡單來講就是圖標中帶有圓角的邊角度數，只要是帶有圓角的矩形就都會有一定的曲率。在圖標中曲率的呈現方式有兩種：外曲、內曲。

外曲與內曲并不一定同時存在，在特定情況下內部結構可以是直角（無曲率）。如下圖：當內部結構都是圓角時會發現整個圖標稍顯臃腫，這時我們可以把部分內部圓角直接變為直角（也可以改變曲率大?。淖兒缶蜁l現圖標的整體結構會顯得更加協調。需要注意的是如果一個圖標做了這樣的處理，在同等情況下的圖標都要做一樣的處理，不然圖標會顯得非常雜亂，不統一。

5、傾斜角度

根據像素的網格線來設置兩條對角線，會讓你的圖標看起來更清晰。在傾斜的角度選擇上，不要出現7.8°、14.2°這樣的奇怪數值。我們可以將15°的增量用于傾斜角度（也可以采用其他有規律的角度方案），這樣會使得整體的圖形變化顯得更加規律，也能夠滿足不同圖形的角度需求。

6、斷點形態

在做很多圖標時都會用斷點的缺口來打破“全包邊圖標”的沉悶感，使圖標具有透氣性，如果想給圖標添加斷點，那么要保證斷點的形態保持一致。

7、圖標間距

確保圖標內每個細節和元素都有足夠的空間，圖標的相鄰元素之間的空間在整個圖標中不應太小，我們可以定義最小間隙以避免輪廓“粘住”，在24px尺寸下的間距不得小于1px。

8、透視

如果在做圖標時牽涉到了透視需求，那么就一定要保證圖標的透視角度一致。

9、視覺重心

非中心對稱圖形物理對齊時視覺上會有偏離感，多個不同形狀的圖標視覺重心并不在一條水平線上，需要微調才能保證平衡感。

10、圖形整潔

在圖形的處理上，不要留有多余的節點，干掉多余的節點，保持圖形的整潔。

11、命名

ICON命名要求較為嚴格，涉及到我們切圖給開發，所以我們命名爭取做對，且需嚴格遵守規則，正確的命名原則：類型_位置_功能_狀態_大小

三、圖標的性格走向

每個App應該有自己獨特的產品氣質，同樣圖標性格也應當與產品氣質保持一致。圖標性格一共分為了4個走向：粗曠（粗直）、活潑（粗圓）、商務（細直）、精致（細圓）。

1、粗曠類圖標

圖標結構特點：線條較粗（或面性圖標、線面結合圖標）、拐角為直角。

粗曠類圖標讓人看起來非常飽滿、剛正，它更多適用于男性、潮流、有格調類型等產品中。例如VSCO，它的底部標簽欄圖標全部采用了粗線條的直角設計。

2、活潑類圖標

圖標結構特點：線條較粗（或面性圖標、線面結合圖標）、拐角為圓角。

活潑類圖標讓人看起來十分容易接近，能讓人感受到溫暖、舒適，它更多適用于電商、社交、母嬰、二次元、娛樂、直播、美食等產品中。例如閑魚，不管是在LOGO字體的處理還是APP內部的圖標處理，都是采用了線條較粗的圓角設計。

3、商務類圖標

圖標結構特點：線條較細、拐角為直角。

商務類圖標讓人看起來十分規矩、嚴謹、值得信賴，它更多適用于新聞、政府、商務、工具等產品中。例如工具類的思維導圖APP，它的可操作按鈕都是商務類的圖標。因為這類圖標的特性，所以目前我們很少在移動端上看到它，它更多適用于PC端的后臺界面中。

4、精致類圖標

圖標結構特點：線條較細、拐角為圓角。

精致類圖標讓人看起來非常干凈、柔和、顯得高級感，它更多適用于旅游、品、藝術、領域垂直等產品中。例如airbnb，在APP應用中大部分都采用了精致類圖標。

四、圖標的評判標準

當圖標設計完后，我們應該如何去評判一個圖標的好壞？很多設計師并沒有完整的評判體系，其實我們可以從這五個維度對圖標進行評判：識別性、圖標氣質、協調性、一致性、品牌調性。

1、識別性

圖標最主要的用途就是輔助用戶理解信息，特別是對于當圖標單獨存在時，一定不能讓用戶產生疑慮。要想圖標達到高識別，我們可以從這2個方向入手：大眾認知隱喻、真實世界映射。

1-1 大眾認知隱喻

在互聯網普及的今天，許多界面的隱喻圖標已被廣大用戶熟知認可，對于這類隱喻圖標用戶不用思考身體就已做出反應，我們在設計圖標時可以從隱喻圖標中添加修改部分元素，從而形成新的圖標，這樣既能保證圖標的識別性，也能做出差異化。

1-2 真實世界映射

選擇真實世界中的物品映射，能使人下意識對圖標的作用有近似預期，降低學習成本，提高識別度。

2、圖標氣質

每個App應該有自己獨特的產品氣質，而我們所做的圖標就是要跟隨產品的氣質。例如當你要做一款二次元產品，你的圖標氣質就應該偏活潑、可愛、萌、青春，而不是剛硬、嚴謹、規矩。

3、一致性

一致性是圖標的基礎，我們在繪制整套圖標時要確保它們的基礎屬性全部一致，細節統一，圖標內容的統一在視覺上也更加和諧美觀。圖標是否具有一致性，就要從以下七個方向去評判：尺寸大小、圖形角度、拐角（曲率）、描邊、間距、透視、顏色。

3-1 尺寸大?。壕W格大小是否統一、是否遵守圖標的keyline規則。

3-2 圖形角度：是否遵循設定的角度規范（15°的增量用于傾斜角度）

3-3 拐角（曲率）：拐角的曲率是否統一，如果圖形太多且復雜，那么我們可以根據圖標的特性去設定曲率的規則，例如可以設定當邊角像素在1-2px時內外曲率為2px；當邊角像素在3px時內外曲為2px，內曲為1px；當邊角像素大于或等于4px時，外曲為2px，內部則為直角。

3-4 描邊：描邊大小是否一致。

3-5 間距：是否遵守間距規范。

3-6 透視：透視是否一致，避免在同一套圖標中出現正視圖/側視圖混雜的情況。

3-7顏色：在圖標的配色上要保持一致的規律，采用相同的顏色是比較常見的配色方式。如果采用不同色相的配色方式。也需要保持整體的配色協調，避免出現飽和度、明度反差過大的配色。

4、協調性

一致性代表的是圖標的基礎，而協調性則代表圖標的整體狀態，協調性的呈現狀態是驗證一致性是否合理的標準，當協調性存在問題時，我們就要反過來查看一致性存在的誤區并給予修改。在圖標的協調性上我們主要審視這三點：視覺大小、飽滿度、透析感。

4-1 視覺大小

視覺大小對標的是一致性的尺寸大小與描邊大小，當你發現圖標視覺大小不對等時，你就要回過去查看你的網格與keyline是否運用正確，確保正確后再查看你的圖標是否按照keyline的規范繪制以及描邊大小是否一致。（同樣尺寸下的圖標，從光感上來看描邊粗的圖標視覺偏大）

4-2 飽滿度

飽滿度對標的一致性的間距，當你發現圖標不夠飽滿時，你就要去查看你設定的間距值是否偏大，是否合理。

4-3 透析感

透析感簡單來說就是留白區域。透析感對標的也是一致性的間距，當元素的描邊過大時，我們就要合理的設定間距的最小值，不然整個圖標就顯得非常臃腫。

5、品牌調性

品牌調性是我們經常提到的緯度，我們打開很多APP都會發現他們的圖標設計都非常普通，沒有任何特色，過于大眾化，雖然都做了一些形式上的改變，但總是與品牌缺乏聯動性。其實我們可以結合品牌調性，在圖標上做更多的聯動、創新。

5-1品牌顏色

色彩是圖標設計中重要的構成元素之一，我們可以直接提取品牌色作為圖標設計視覺元素。例如站酷，站酷的品牌色是黃色，標簽欄的圖標（選中狀態）就提取了品牌的黃色，讓其與品牌調性高度一致。

當然品牌顏色除了可以直接用外，還可以在提取時適當調整色彩的飽和度、明度，做更多的形式變化。例如懂車帝，就在原有的黃色基礎上做了些許調整，圖標采用黃色透明漸變的處理方式，在與品牌顏色呼應的同時，使得整個圖標更加精致、有活力。

5-2品牌LOGO

提取品牌LOGO是最常用的使用方式，我們從品牌中提取出來的圖標一般運用在APP首頁標簽。因為首頁是APP中最重要的頁面，也是進入APP默認的頁面，把首頁圖標替換成品牌LOGO，能反復加強了用戶對App的logo印象，這樣不但使App內外形成了視覺聯系，同時也二次傳遞了品牌形象。例如大眾點評，它的首頁標簽就用了品牌LOGO。

5-3品牌元素

我們可以在品牌中提取它識別性較強的局部元素作為圖標。例如虎牙直播，它就提取了品牌卡通形象的外輪廓作為首頁圖標。

品牌提取的元素并不只是所見到的品牌視覺形象，還可以提取與品牌內容強相關的元素。例如QQ音樂，就把音符作為首頁圖標。

5-4品牌名稱

如果你的品牌還不為大眾所熟知，那么為了強化用戶對品牌名稱的認知，可以把品牌名稱直接放入標簽欄中。例如MONO，就把它的名稱分為四個字母分別放在了4個標簽內，需要注意的是這類圖標不能單獨出現，因為它本身不具備引導含義，必須配合文字一起出現，這樣才能讓用戶能易理解。

5-5品牌性格

圖標風格可以與品牌性格保持一致，一套帶有濃厚品牌感的圖標，會讓人記憶猶新。例如：每日故宮，它的圖標就非常具有特色，結合了品牌的性格以及定位，加入了眾多的古代中國元素，整體看起來有股濃濃的古韻之風。

5-6吉祥物 

如果品牌中含有吉祥物，我們可以提取吉祥物的外形，把它用于產品的圖標中。例如盒馬，它就把盒馬的吉祥物做了風格化的處理，放于APP的首頁標簽。

五、總結

設計師對自己做出的所有設計都必須要有理論支撐，圖標也不例外，一套優秀的圖標是設計師不斷沉淀的結果。看完本文章后，如果大家想要去練習圖標，建議找大廠的圖標放在keyline里臨摹，真的會讓你收獲不少。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

全文閱讀約 5 分鐘， 主要分享 Ant Design 在頁面信息組織策略上的探索思路。

人們是如何組織信息的？

在 Ant Design 的界面設計中，會包含大量的信息組織和編排工作，我們常常會遇到這樣的問題：

·     一個詳情頁面里應該包含哪些信息？

·     什么樣的信息應該放在卡片里，什么樣的信息應該平鋪顯示？

·     一個頁面內的信息該怎么讓用戶快速找到重點？

·     ···

信息組織是我們在日常生活中經常會遇到的問題，商場里的樓層導航、機場車站的標志指引、餐桌上的菜單、手機里的通訊錄等等，各式各樣的信息是如何被組織編排到一起，又是以何種方式把信息呈現給用戶呢？

在解答這些關于頁面設計的問題之前，我想先給大家講一個生活中的小案例：

動線設計

逛過宜家的人，應該會注意到宜家類似迷宮的動線設計，這種動線設計能夠讓消費者不知不覺逛完商場的各個角落。踏入宜家門口時，就會被一條隱形“向導”默默地引導著向前走：一條曲折宛轉的主線依次引導至客廳家具、客廳儲物室、臥室、書房等各個主區域，直到一個不落地走完才抵達出口。但在這個主線之外，為了確保一些消費者在購物中，能夠快速離開或快速去往感興趣的區域，每個主區域間都有一些較隱蔽的捷徑作為輔動線。

這種動線設計一方面能夠把所有商品按照路徑有效的串聯起來，另一方面又能讓消費者不知不覺的沿著這個路徑去了解商品。

商品布局

動線布局是宜家的隱形骨架，而真正讓宜家賣場豐富起來的，還是琳瑯滿目的商品。宜家的賣場和大部分零售賣場不一樣，它不會把同類型產品進行大集合，而是根據人們的正常生活場景來分類，不同類型的產品在同一區域組合陳設，構成生活中的一個小場景，一方面能達到對各個商品功能的完美詮釋，另一方面，一個產品盡量不會重復出現，盡可能減少商品展示的復雜性。

在整體商品布局上，有兩個很有意思的地方：第一，在居家體驗中心，樣板間的陳列順序完全是按照消費者回家后的場景而布置：客廳、餐廳、廚房、書房、臥室、衛生間......，第二，在家居用品中心，則會根據消費者在家的日常起居行為進行擺放：做飯、休息、讀書、收納......

現實生活中的這些例子，對我們的界面信息組織有什么啟發呢？

關于動線和布局的思考

在宜家的案例中，關于動線，映射到人的行為上，有一個比較專業的概念叫做“流”（flow）。 Mihaly Csikszentmihalyi 的著作《心流：最優體驗心理學》中對“流”的定義：當人們全身心投入到某個活動中時，會對周邊干擾視而不見，這種狀態被稱為“流”。宜家的動線設計很好的營造了這種狀態，讓消費者完全沉浸于商品瀏覽，并且盡量不去打斷這種行為流。

經過研究發現，構成“流”的行為動作，其前后必然存在某種連續性或者關聯性，例如回家的行為動線，日常起居的行為關聯等。這個概念在界面設計中依然適用，很多界面設計都在有意無意的去創造“流”的狀態，帶給你用戶沉浸式體驗，例如各類短視頻應用會根據用戶瀏覽習慣推薦相關聯的視頻內容，讓用戶沉浸其中無法自拔。

關于商品布局，映射到信息組織上，《韋氏大詞典》 中提到一個詞“編配”（orchestration），對應的解釋為“和諧的組織”。這個詞能比較好的表達信息組織的含義，宜家的商品和諧的組織構成一個場景，它向消費者傳遞的不僅僅是商品本身的功用性，更是在傳遞一種搭配建議或者一種生活方式。這種商品組織方式能非常有效的降低消費者對信息篩選的復雜程度。而在界面設計上，表單頁的和諧組織能夠幫助用戶快速完成信息錄入，詳情頁的和諧組織能夠幫助用戶快速理解一個描述對象......

各種各樣的信息總能以某種關系組織到一起，而如何根據這種流為用戶去組織和呈現信息呢？

“流”的本質其實是一系列具有關聯性的行為動作串聯，而“編配”的目的則是為了降低串聯信息呈現的復雜程度。有了這兩個基礎的概念之后，我們可以做一個初步假定：所有的信息是否都可以通過關聯性和復雜度來進行組織編排？針對著這兩個維度，我們又進行了更深層次的研究和驗證，并得到基本定義：

·     信息復雜度：信息量的大小，包括種類、數量等。

·     信息關聯性：信息之間的潛在關聯或者相互影響。

我們設想，這兩個維度能否運用到界面設計上的信息組織呢？

頁面信息的組織方式

信息關聯性

界面信息之間的潛在關聯或者相互影響，通常體現在「邏輯關聯」和「視覺關聯」兩個層面。

邏輯關聯

顧名思義是指一個事件中的所有信息之間的關系，在界面設計中，無論什么樣的信息，總能以某種方式進行分類和編排在一起，例如手機通訊錄中的人名，可以按照字母順序從 a 到 z 進行排列，電商網站的商品導航會根據類別進行分組，待辦事項可以根據時間進行排序等。

如何找出信息之間的邏輯關聯性呢？

被稱之為信息架構之父的 Richard saul wurman 在《信息焦慮》一書中將信息組織方式用“五頂帽架”來概括：

·     地點（Location）

·     字母（Alphabet）

·     時間（Time）

·     類別（Category）

·     層級（Hierarchy）

簡稱LATCH。這五種方式基本可以涵蓋所有的信息組織策略，信息是無限的，但是信息組織方式卻是有限的。

視覺關聯

任何一個界面呈現給用戶的時候，用戶都會下意識的去判斷界面上什么信息是最重要的，接著會去關注這些信息都有什么關聯，因此，除了按照邏輯去組織信息之外，還應該合理的去呈現信息的視覺層級關系。

視覺層級關系有幾種常見的區分方式：

·     強調：使用基本視覺元素（顏色、形狀、大小等）區分層級

·     親密性：位置接近的元素通常是有關系的，而且位置越近，關系越強

·     圖勝于言：視覺符號和對象關聯，例如：齒輪或扳手=設置，垃圾桶=刪除

·     瀏覽順序：根據瀏覽順序，從左到右（部分地區）或從上到下信息重要程度依次減弱

·     ···

如何驗證界面元素的視覺關聯性是否合理呢？

瞇眼測試

《About Face 4: 交互設計精髓》 中提到了一個很有意思的測試，為了確保界面視覺信息有效的拉開層次關系，圖形設計師經常會用到一個方法“瞇眼測試”（squint test）。閉上一只眼睛，瞇著另外一只眼睛看屏幕，看看哪些元素突出，哪些元素模糊，哪些元素看上去成組，哪些元素看上去零散。從多個角度去觀察，總能夠發現之前沒有注意到的布局和構成問題。

信息復雜度

通常以信息量的大小或樣式多少來衡量，這兩個維度實際決定了信息的瀏覽時長。例如一個詳情頁面內都是純文本信息，但是信息量較大（超過三屏），則認為這個頁面的復雜度較高，或者一個詳情頁面內同時包括文本、表格、代碼展示、圖表等元素，也會認為這個頁面的復雜度較高。

信息的復雜度和關聯性并不是兩個完全獨立的維度，根據關聯性去組織信息，本身就是為了降低信息呈現出的復雜程度。而對復雜度的研究，可以幫助我們如何選擇合適的方式把信息呈現給用戶。

頁面信息組織實踐 - 詳情頁設計

具體到界面設計層面，信息體量大、復雜度高常常是中后臺界面設計的難題之一。以詳情頁為例，詳情頁內的信息該如何合理的組織信息并有效的傳達給用戶呢？

根據關聯性和復雜度的概念，我們抽象出一個簡單的「復雜度模型」，用來判斷信息復雜程度和關聯性對頁面結構的影響。

橫坐標表示頁面信息之間的關聯性，縱坐標表示信息的復雜程度，兩者交叉組成的色塊代表不同的信息等級?？拷c最淺的色塊，代表復雜程度低且關聯性強的內容，例如一段純文本的產品描述信息；遠離原點顏色最深的色塊，代表復雜程度高且相互獨立的信息，例如一個發布流程中的集成測、預發環境測試、灰度測試、上線等各個階段信息展示。

與之對應的，我們對信息展示方式也進行了維度劃分，用來解決在復雜的企業級產品界面設計中，何時使用卡片區分，何時拆分為 tab 等布局問題。

根據承載信息復雜程度的不同，我們對容器組件也進行復雜度劃分，用來解決在不同頁面布局中，不同類型的信息用何種方式呈現的問題。

這個模型可以幫助設計者在決策布局組件時，有章可循。最終讓用戶感知，當用戶來到一個頁面時，即可對頁面的信息量、信息的搜尋方式有統一的預期。我們嘗試將復雜度和關聯性模型在界面布局中落地：

關于以上的模型在實際設計中該如何操作，這里提供一個推薦步驟可以參考：

·     「復雜度判斷」明確設計對象信息量的大小

·     「關聯性判斷」判斷各個信息之間的關聯性，并合理分組

·     「組件選擇」選擇合適的容器組件來呈現信息

·     「模板選擇」選擇合適的頁面模板，組織編排信息

·     「瞇眼測試」檢查整體布局是否合理（僅參考）

文章來源：站酷   作者：Ant_Design

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

轉自：站酷

作者：杜失憶

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

收藏

收藏

收藏

收藏

收藏

轉自：站酷

作者：673052665

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務