如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

為什么要構建 MIZ Design？

1. 背景

隨著米莊 APP 用戶的增長，以及 APP 不停的迭代，我們在設計上積累了越來越多的債務。越來越多的新頁面，新功能，以及不同的組件，都是由不同的設計師來設計，前端也是由不同的開發來實現，這直接導致了整個 APP 越來越臃腫無序，視覺和交互體驗不一致，且團隊溝通成本高，重復勞動力大，輸出效率低，迭代速度慢。

2. 現狀

開發層面

• 代碼混亂不統一
• 沒有可控性和可持續性

場景：

設計師：涉及到這個組件的頁面都改一下吧。

開發：改不了，每個頁面都是單獨寫的，改起來非常麻煩，耗時間耗資源耗人力。

設計師：為什么同樣的組件要單獨寫？

開發：我怎么知道，這是以前的開發寫的，而且寫的亂七八糟。

設計師：……

那怎么辦？不改也得改呀。總不能一直留著這些大大小小的毛病，不解決問題會越來越嚴重。

代碼混亂，遺留了非常多的開發層面代碼不一致的問題，后期迭代的過程中如果不統一，也會使整個系統失去可控性。

設計師層面

• 時間和精力的重復浪費
• 產品體驗和風格的混亂

場景 1：

設計師 A：這個頁面是誰做的？源文件有嗎？

設計師 B：不知道哎。以前的設計師做的。去庫里找一下吧。

30 分鐘以后，依然沒有找到源文件。

場景 2：

開會：為什么這個項目的頁面和以前的風格差很多？

設計師 A：現在流行的就是這個風格呀，多好看。

設計師 B：雖然設計每年都有流行趨勢，但還是要和產品品牌風格相結合。

一個項目兩個設計師負責，設計出來的頁面控件：按鈕，列表，輸入框，色彩，視覺風格完全不一致。在 2 個設計師完成設計以后，還需要整合在一起重新修改，效率很低。并且每次頁面中的元素，開發需要根據不同業務中的不同設計師的「創意」來進行人肉修改。

當我們開始設計新的頁面，功能需求點優化的時候，這個問題變得更加嚴重。同時，因為沒有一個統一的基礎設計規范原則，設計師在設計項目的時候，在設計決策和討論中花費了大量時間，會存在大量的重復勞動。同時由于產品的界面和交互缺乏一致性和可預測性，用戶體驗也受到了影響。整個產品也會在風格定位上不統一，沒有確定產品風格特質的情況下越來越模糊，失去自身品牌該有的特性。

產品迭代，基本上是基于新功能的開發設計迭代，新的功能、新的頁面不斷的增加，對于設計師而言，有設計規范的原則做基礎設計框架，更容易延續 APP 統一的設計風格，不至于被不同的需求，不同的設計趨勢以及蠢蠢欲動的新的設計靈感牽著鼻子走，導致越做越亂，無章可循。

一個 APP 就像自己的孩子一樣，從一個嗷嗷待哺的嬰兒逐漸長大成人。設計系統就好比一個人的生物系統，是整個生物體的基礎。如果對此系統不維護，那么此系統將會隨著時間的增長越來越脆弱以及呈現不可逆的現象。那么如果維護好一個設計系統，骨骼會在成長中呈現規律清晰的生長模式，會隨著業務的生長而生長，可控制、可更新，使生物體健康的發展然后去完成它的使命。

什么是設計規范？

Design System 最開始是 Guide 演化而來，Guide 是一套可指導、可延續、可擴展、可統一的、可區分的視覺指引手冊，指導相關設計結構完成統一性與對外區分性。具象層，它是一種設計方法；抽象層，它是一種思考模型。

最近幾年，「Design System」這個詞非?；稹Ｏ旅娼榻B紅遍全球設計界的兩大設計規范網紅。

1. Material Design

谷歌在 2014 年的 Google I/O 上推出了 Material Design，它的目標是創造一個將經典的設計原則和科技、創新相結合的設計語言，并且在不同設備上提供一致的體驗底層系統，并同時支持觸摸、語音、鼠標、鍵盤等輸入方式。

一經發布就紅遍了全球設計界。新穎的設計理念，清晰明確的設計原則，詳細的設計規范，使之成為完美的安卓端標準設計規范。也給設計界的設計師們提供了非常好的參考，很多設計師也根據 Material Design 設計原則延展出更多的創新設計可能性，制作了各家的設計規范。

出了官方的 Sketch 組件庫以后，谷歌團隊還開發了基于此設計規范的延展工具：比如基于 Material Design 色板的 Sketch 源文件下載；谷歌色彩顏色獲取工具；一整套的 Material Design IOCN 輸出；在 2018 年 5 月份的 Google I/O 大會上，Google 設計團隊開發了一款叫做 Material Theme Editor 工具，可以幫助設計師輕松且快速創建符合自身品牌又符合 Material Design 風格的應用。

設計價值觀

• Create：創造一個將經典的設計原則和科技、創新相結合的設計語言。
• Unify：開發一套統一的底層系統，保持各端一致的用戶體驗。
• Customize：靈活多變的視覺語言，讓各家自成一派，形成獨特鮮明的品牌風格。

設計原則

材質是一種隱喻：Material Design 的靈感來源于物理世界和世界中的材質，包含了材質如何接受光的影響以及所形成的光影效果，并且對紙張的質感和墨水的介質重新進行了構想。

大膽，圖形，鮮明：Material Design 基于印刷設計的指導原則，字體、柵格、留白、顏色等元素都以創造層次、意義和焦點為基礎來讓用戶沉浸在設計體驗中。

動效賦予意義：微妙順暢地反饋和過渡性的動作效果，引起用戶的注意力并使之保持持續關注。當元素出現在一個界面中的時候，元素之間的互動重塑了環境。

基礎靈活：Material Design 同樣旨在實現品牌價值的傳遞。結合了基礎的代碼、組件和元素，可表達不同的品牌需求。

跨平臺：Material Design 的 UI 組件庫可在不同的平臺共用，不論在安卓平臺、iOS、Flutter，還是 Web 都可保持一致的組件元素。

2. iOS Human Interface Guidelines

iOS 的人機規范指南，保持了蘋果一貫的風格。雖然沒有 Material Design 規范那么細致全面，但是核心的設計原則在每個組件的設計說明中都有滲透。作為 iOS 系統的設計基礎，建議每個設計師都需要仔細研究。

iOS 設計價值觀

• Clarity：系統中所有的文字、圖標、圖像以及各個元素都清晰可見，語意表達準確，功能驅動設計。
• Deference：順應用戶的行為，流暢的動效和清晰美觀的界面，使用戶沉浸在順暢的交互中，不去打擾用戶。
• Depth：清晰的視覺層級和流暢的動效，同樣提供了系統清晰的層次感，使其富有活力且易于用戶理解。

iOS 設計原則

Aesthetic Integrity 整體美感：整體美感不僅僅包括美觀的 APP 界面，還包括流暢的交互體驗，產品功能和用戶行為的有效結合。比如當一款工具類 APP 主要是幫助用戶完成一項任務時，設計師應關注于用戶操作本身的行為路徑，和產品功能相結合來幫助用戶完成目標，使用戶聚焦功能本身。而如果是一款游戲，那么需要提供非常有吸引力的界面，在鼓勵引導用戶探索的同時也有非常棒的操作體驗。

Consistency 一致性：一個保持了一致性原則的 APP，通過使用標準的控件、熟悉的 icon、標準的文字規范、統一的組件俗語來實現一個擁有標準化范例的系統。這個系統提供的特性和交互行為也符合用戶的心智模型和預期。

Direct Manipulation 直接操作：讓用戶在屏幕上直接對內容進行操作的交互行為，可以鼓勵用戶和系統進行交互并且更易于理解。當用戶翻轉屏幕或者使用手勢直接與屏幕交互時，他們會感知到直接操作的行為，并且能立即得到操作結果。

Feedback 反饋：反饋能夠響應操作，呈現結果，使用戶獲得信息。手機中內置的 iOS 應用程序為用戶的每一個動作提供可感知的反饋。交互元素在點擊時會凸顯被高亮顯示，進度指示器顯示了需要長時間運行的操作進度、動效和聲音，使用戶能夠更清晰地感知交互行為的結果并作出響應。

Metaphors 隱喻：當一個 APP 的虛擬對象和操作路徑與用戶本身所熟悉的心智模型一致時，不管它是來自于真實世界還是數字世界，用戶都能很快上手。隱喻之所以有效果，是因為用戶和屏幕存在物理上的交互。用戶可以通過移動分層視圖來顯示手機上被遮擋的內容；拽拖并且滑動對象，切換開關，移動滑塊，滾動數值選擇器，用戶甚至可以通過翻轉手勢來翻閱手機上的雜志和文章。

User Control 用戶控制：在 iOS 系統中，用戶是主導者，而不是 APP。APP 可以提供行動建議，給予警告提示，但是不應該替用戶做選擇。優秀的 APP 始終會在用戶主導和用戶不想要出現的結果中保持平衡。一個 APP 應該始終讓用戶感知到在他的掌控之中。交互的元素給用戶熟悉感并且可預期；對有破壞性的操作可確認；對錯誤操作可取消，即使是在進行中的行為也可中斷。

在 Sketch 工具中可直接下載 iOS 的組件庫使用。

3. Airbnb DLS

在 2016 年，由工程師和設計師組成的團隊創建了 Airbnb 的設計語言系統 （DLS）的第一個版本，其目標是創建一致的體驗和跨平臺的統一。DLS 包含了一套內部和第三方工具，由共享原則和模式定義的組件的集合。這允許使用跨設計、工程和其他學科的共享詞匯表進行快速迭代。DLS 的結構簡單而連貫，簡化了團隊之間的溝通。并制定了以下幾條原則來指導 DLS 的設計：

• Unified 統一性，每個組件都是系統的一部分，并且需要積極地響應系統，沒有單獨特殊的單一組件。
• Universal 通用性，Airbnb 在全球被全世界人使用，所以我們的產品和視覺語言需要是受歡迎的和易于理解的。
• Iconic 標志性，產品的視覺和功能設計是最重要的，我們的工作必須專注于對視覺和功能給予清晰明確的定義。
• Conversational 對話性，動效在我們產品中是有生命的，它能讓用戶和我們的產品更好的交流對話。

ADS 開源庫

Airbnb 設計副總裁 Alex Schleifer 在 IXDC 2017 國際體驗設計大會上分享了這一創新的 React Sketch APP 管理設計系統，這是為 Airbnb 的設計系統而設計的，其實就是個實時更新的代碼數據庫，可以實時查詢 Sketch 數據和代碼，也可以下載圖標、設計模塊，所有工程師和設計師都可以免費下載?？吹竭@個，我想完美共享庫也許并不是那么的遙遠。

Airbnb 團隊在設計 DLS 過程中，也是通過原子組件的方式來構建整個框架，我覺得他們對于設計系統的理解非常對：「一個統一的設計語言不應該只是一組靜態的規則和原子組件構成，它應該是一個可持續發展的系統?！顾栽跇嫿ê玫讓拥脑O計語言之后，可持續性、可發展性，是維護并讓設計系統產生價值的重點。

4. Ant Design

隨著商業化的趨勢，越來越多的企業級產品對擁有更好的用戶體驗有了進一步的要求。帶著這樣的一個終極目標，螞蟻金服體驗技術部經過大量的項目實踐和總結，逐步打磨出一個服務于企業級產品的設計體系 Ant Design?；凇复_定」和「自然」的設計價值觀，通過模塊化的解決方案，降低冗余的生產成本，讓設計者專注于更好的用戶體驗。

設計價值觀

自然，讓人機交互行為更自然。

自然規律運用到設計中，自然界的方方面面都會對用戶行為產生深遠影響，設計者應該從其中汲取靈感，并運用到當下的設計工作中。螞蟻金服已做了部分探索，并將追求「自然」作為未來持之以恒的方向。

自然的人機交互核心：節能。既要節省身體運動的體力，更要節省大腦思考的腦力。

那么如何在設計中體現呢？

• 保持統一性，減少用戶學習成本，降低用戶思維耗能。「Don’t make me think」一個道理。
• 隱喻映射，操作行為符合用戶的心智模型，提升產品易學性，也是減少用戶耗能的一個方向。
• 保持本能，讓用戶行為保持在本能層面，本能層面中無意識產生的自然情緒和行為，容易讓用戶達到心流狀態。讓用戶更順暢完成任務，產生愉悅感。

確定，保持克制、對象設計方法、模塊化。

設計者需要做出更好的設計決策，給予研發團隊一種高確定性、低熵值的研發狀態。同時，不同設計者在充分理解業務訴求后，基于 Ant Design 體系都會有相同且符合當前業務特性的設計產出。

給予用戶確定感，結合 Ant Design 的三個關鍵點，可以總結為邊界和規則 2 個方面：

• 設定邊界，專注于最重要的界面和功能點來組件系統。
• 制定規則，所有元素抽象為使用者都可理解的類似于「原子」的對象，并且將對象再組件成「模塊」，進行打包封裝，在內容和規則上都給予確定性。

構建米莊設計系統的目標是什么？

構建米莊設計系統的目標是什么？

• 輕量
• 一致

意義

有了規范和控件庫，設計師在接受需求的時候，可以減少設計成本，提高設計效率，尤其是在用于快速迭代產品的階段，通過大量的標準化組件即可實現縮短設計周期的效果，并且設計師可以更專注于深耕體驗和細節，同時能保證高質量的輸出。

構建一個設計系統來支撐產品的所有業務線，解決團隊協作一致性問題，產品的周期性更新問題，解決不同的設計師和工程師規范性輸出 UI 的問題，最終從設計驅動商業的層面上，解決用戶體驗一致性，迭代開發的問題。

如何來構建設計系統？

1. 項目啟動基礎三要素

時間

APP 進入穩定發展階段，也完成了基礎功能的開發，在業務穩定發展的前提下，構建已有 APP 的整體框架，規范前端開發和設計流程是個好時機。在產品發展到穩定階段、參與的人越來越多時，對整個 APP 的頁面整理是非常有必要的。也為了后續快速發展的業務起到完整系統地支撐能力。

人力

相信幾乎在所有的公司和團隊，規范建立都是非常有價值，也非常耗費資源的一件事。你可以一天抄一套亮麗炫酷的 UI kit，但是你沒法一天上線一套系統。沒有上線落地的視覺規范只是耍流氓。所以項目啟動的時候，團隊分工必須明確，你們是一條船上的人了。勢必要有劈浪前行，破釜沉舟的決心。

場景

所以在項目開始之前，便需要和整個團隊統一目標意義：視覺規范的建立，除了保障統一的用戶體驗和認知，還能夠通過工程師代碼層面的組件化提高開發、設計效率。整個設計系統的開發，從設計到落地，需要產品、設計和前端的全力支持。

2. 項目啟動基礎框架

雞生蛋問題

即使我們看了很多設計系統范例，甚至也下載了很多 UI KIT 的源文件來做參考。我們依然無法確定第一步需要做什么。當我們還沒有組建一個 UI kits 組件庫的時候是如何來搭建一個頁面的呢？是先有了組件，然后創造了模塊頁面；還是先設計了頁面，然后再來歸納總結出頁面匯總的元件呢。這和先有雞還是先有蛋的問題有所相似。

原子理論

在學習其他公司如何搭建設計系統的時候，我們了解到了 Brad Frost 的原子設計理論。他提出了原子設計原則，并且在他的文章中有一句非常出名的引用：

we’re not designing pages, we’re designing systems of components.──Stephen Hay

概念

2013 年網頁設計師 Brad Frost 從化學中受到啟發：原子（Atoms）結合在一起，形成分子（Molecures），進一步結合形成了生物體（Organisms）。于是提出了原子設計方法論，由原子、分子、組織、模板和頁面共同協作以創造出更有效的用戶界面系統的一種設計方法。

原子設計的五個階段

原子（Atoms）：符號，為頁面構成的基本元素。例如顏色、字體，或是一個圖標等。

分子（Molecules）：組件，由原子構成的簡單 UI 組件。例如，一個表單標簽，搜索框和按鈕共同打造了一個搜索表單分子。

組織（Organisms）：模塊，由原子及分子組成的相對復雜的組織，在 UI 頁面中可視為模塊/樣式層級。

模板（Templates）：原型，將以上元素進行排版，顯示設計的底層內容結構，在 UI 設計中對應的是原型圖層級。

頁面（Pages），將實際內容（圖片、文章等）套件在特定模板，頁面是模板的具體實例。

特點：

• 一致：組件可復用性高，減少重復設計開發成本，體現一致性原則。
• 清晰：原子理論提出來的層級結構偏向于結構思維，層層遞進，邏輯清晰，使構建的所有頁面形成一個系統。
• 效率：系統化的構建方式，易于拓展和維護，不僅方便設計師思考頁面的和諧性，也可以讓工程師、品質檢驗清楚頁面的邏輯架構及變化，降低溝通成本。

從 Brad Frost 的原子設計理論得到啟發，將我們 APP 產品的所有頁面都整理了出來，我們歸納出了組成這些頁面的常用組件。這個詳盡的庫幫助我們以一種更合理的方式構建了一個設計系統的底層框架。

這個理論提出來以后就產生了非常大的轟動。并且至此以后 Atomic Design（原子設計）成為了構建 Design System 的核心指導理論。

Sketch工具

Brad Frost 在 2014 年提出來：「使用 Sketch 的 Atomic Design 是產品設計的未來。」我們可以使用 Sketch Library 功能實現組件庫的創建。而組件庫的底層邏輯就是原子設計理論。Sketch 中的 symbols、textstyles、color styles、Layer style ，來構建組件和樣式。

Text style：Text Style 用于設置文字規范，在一個系統中包含大量的文本樣式，并且擁有不同的文本屬性。使用字體樣式來管理一個系統中的字體樣式，可使之便于管理和修改，保持系統的可持續性和可用性。并且可單獨輸出字體樣式系統進行團隊之間，不同項目之間的共享。

Layer Style：可編輯元素的各種樣式，比如用于制作顏色規范，涵蓋填充顏色、描邊顏色、內外陰影、模糊效果等內容?？墒乖乇３忠恢碌膱D層樣式。

symbols：設計系統中的任何元素都使用 symbols 來形成符號，可復用、可嵌套、可批量修改，非常靈活化、輕量化。并且將符號進行嵌套組合，可形成符號嵌套，作為模塊來使用。symbols 在使用過程中如果使用「/」來命名，那么會形成符號嵌套層，作為不同符號組件的分層。同樣的對于 symbols，可使用縮放工具，來靈活適配各種不同的界面需求。

Library：Library 是所有元素、文字樣式、圖層樣式等組合的一個組件庫，可通過共享形式，來使它成為團隊的設計工具。輕松訪問次庫中的所有元素和樣式，并且始終可同步接受更新，保持一致和的文件狀態。

3. 實施項目計劃

在確定了原則和工具之后，我們為設計系統項目制定了完整的項目計劃，因為涉及到上線和設計兩大塊，所以項目也是分設計線和落地線，兩條線既有關聯性，又是相對獨立和分離的。組件設計完成以后才可上線落地，因推動落地的過程是需要整個設計開發團隊的，不管是從時間還是人力上的資源協調和配合，所以落地線需要更加靈活。

設計階段 – 設計線

目標結果 – 設計資產

設計階段，我們所產出的設計資產包括設計價值觀，設計指導原則，以及設計模式（解決方案）。

展開實施 – 任務細分

確定了設計資產以后，我們將設計資產進行細分。整理規范的內容并對每個組件進行優先級的確定。整理規范內容的過程也是一個逐漸完善的過程，第一次整理可能并不完善，但是沒有關系，先把基礎框架和內容整理好，后續在設計過程中有遺漏的再進行添加。

內容整理好以后，我們會發現一套規范里內容非常多，所以需要根據項目時間來安排所有內容的優先級和分工。根據我們的設計系統的底層邏輯，所以我們將核心組件建設放在第一階段，比如字體、顏色、icon 等。構建了基礎元件以后再來搭建模塊，最后再根據不同場景來確定樣式。至于分工，最好整個設計團隊的人員都可參與，互相分擔工作量以達到工作效率最大化。

整體內容確定以后，因每個組件的整理有規范可循，所以我們針對每個組件的設計過程也確定了單個組件的設計流程。

過程跟進 – 關鍵節點

在設計過程中，我們也需要對關鍵時間節點的項目整體進程和結果輸出總結。此階段是和上線的項目節點重合的關鍵點，設計輸出的內容會和上線過程有非常多的磨合，一個組件的落地還需要不停的和開發溝通，收集反饋意見，并且進行調整修改，記錄解決問題。

執行復盤 – 結果驗證

在每個組件的設計過程中，我們都會反復完善每個組件的內容，包括設計原則、交互細節以及應用場景等。反復去驗證組件的可行性。并且對階段性完成的設計結果進行復盤和分享，進一步來驗證設計方案的可行性。規范需要不停地優化創新，才能讓它的可持續性特性發揮至最大。

上線階段 – 落地線

沒有上線落地的視覺規范只是耍流氓。

設計師自嗨并無意義。推進的過程，最重要的還是溝通。溝通的內容包括組件輸出的合理性、開發工作量、產品版本迭代需求計劃等。

愿望如此之美好，現實如此之貧瘠。

設計從落地到上線的過程想必每個設計師都有大把心得。在公司中實際的推進是非常難的，因為產品需求永遠都做不完，開發永遠在寫代碼，設計永遠需要將先完成業務需求設計為前提。所以如何將設計規范的內容插進項目中是個最關鍵的點。

存在問題，根據項目的時間安排和產品迭代安排，我們試圖將不同優先級組件的內容分配到不同的產品迭代中。實際卻證明這非常的理想化。在這個過程中我們遇到非常多的問題：

• 沒資源：產品的功能需求非常多，項目那么多，開發根本沒有時間來做視覺規范的內容。
• 風險大：即使只是修改一兩個組件的內容，在開發過程中卻涉及到幾十個頁面的修改，導致整個 APP 的不穩定性以及每次修改都會涉及到巨大且重復的測試資源。
• 感知弱：組件開發完成上線以后，不像頁面，新功能等可明顯讓大家感知到它的變化，規范性的內容都是系統性的量變和體驗上的感知，單點的結果成就感是比較低的。

解決方案：

APP 在建立的時候沒有規范性，所以現在想要規范所有的內容就是一個非常巨大的工程。就像沒辦法一口吃掉一整塊蛋糕一樣。

• 拆分：大目標拆分成小目標，根據迭代來實現部分組件先后上線策略。我們將一整塊蛋糕再切成 8 塊，發現還是有點大，那么再繼續切，切成 12 塊，24 塊。細化到每個組件以及每個涉及到更改的頁面。
• 克制：保持克制是對邊界的一個限定。設計者在保持克制的狀態下去做一個更好的決策。米莊為了降低改動的風險，盡量和線上的元素保持一致。創新和趨勢設計固然很好，但是在環境允許下，先保持克制完成目標為第一原則。
• 強調：體驗層的確是靠感知來體現它的精髓，而在推進的過程中，讓整個團隊在每個需求評審的過程中都對視覺規范有感知和重視，人人都增加參與感。

我們的核心組件在產品迭代中完成上線以后，將剩余的組件規劃至開發的重構版本中進行開發。減少資源的重復使用，以及最大化降低對 APP 的影響。我們衡量了利弊之后，決定此次規范的設計對于樣式的修改減少到最少，保持和線上內容的一致性。很多時候我們設計師對于設計趨勢是很敏感以及非常想要去創新的，但是基于現狀下保持對樣式的克制完成基礎體系的搭建這個核心目的，是最重要的事。

如何驅動業務

MIZ Design 的設計資產中設計價值觀是貫徹整個產品的迭代發展，是產品持續迭代的指明燈。設計原則是團隊成員建立設計的標準指導規范；設計資源庫貫徹設計師、開發和產品，實現產品迭代。我們也非常愿意分享這個過程，希望對大家建立設計規范整個流程有所幫助。

1. 設計價值觀 – 指導設計

When your values are clear to you,making decisions becomes easier.──Roy Disney

當你認清自己的價值觀和行為準則后，決策就輕而易舉了。價值觀是指明燈，貫徹整個產品系統。我們根據米莊品牌的特性，以及業務場景的需求來定義 APP 的設計價值觀，指導 MIZ Design 的設計語言的建立。

品牌特性

米莊的品牌理念在于科技金融，小額惠普，以簡單可靠的價值觀來驅動業務增長。

業務場景

米莊作為金融工具類產品，功能操作場景不算復雜，強調一致性的用戶體驗和安全規律的操作路徑。這也體現了產品對于不同頁面元素之間的相互關聯性和一致專業性的要求。

用戶調研

結合我們進行的用戶調研報告，米莊產品的核心用戶對我們產品的需求是賺取零花錢居多，也就是利益的獲取。所以針對明確的用戶目標，我們對于整個產品的設計需要以產品可操作性、性為第一原則，呈現的視覺層以安全可靠，清晰明確為風格導向。

從以上三個方向，我們概括了設計價值觀核心的三點：

• 自然：自然和諧，有序有趣。
• 信任：真實明確，安全可靠。
• 效率：輕量，操作便捷。

2. 設計原則 – 規范邊界

格式塔心理學

心理學的完形法則：相似、相近、封閉、簡單。

MIZ Design 的設計原則參考了格式塔心理學，取人和萬物交流的過程中，大腦最基礎的一些精神反射和行為操作，格式塔心理學的理論主張研究意識和行為，強調經驗和行為的整體性，這也符合了米莊的設計價值觀里關于效率和自然的定義。所以我們參考此心理學來幫助團隊順暢地溝通，減少信息不對稱以及學習成本，作為協作的基礎。

第一性原理

• 找到一個簡單的、基本的道理；
• 非常嚴格地按照這個道理行事。

埃隆·馬斯克非常推崇的思維模式是 「First principle thinking」，也就是「第一性原理」。它是一種演繹法思維，自上而下來看，就是從原理出發，一步步往前推演，直到找出適合該問題的解決方法。自下而上反推，那么它的原則便是從結果出發，把事物分解成最基本的組成，看透事物的本質，從源頭解決問題。這和原子設計理論也非常有相通性。巴菲特的伙伴查理·芒格也是第一性原理的積極實踐者，他將此原理視為科學界和商界非常古老的一條守則。

奧卡姆剃刀原理

Entities should not be multiplied unnecessarily.

如無必要，勿增實體。

• 簡化組織結構
• 關注核心價值

奧卡姆剃刀定律是由英國奧卡姆的威廉所提出來的。他提出「切勿浪費較多東西去做，用較少的東西同樣可以做好的事情」，也叫簡約法則，是一種迅速決策和判斷認知行之有效的工具之一?？梢院唵卫斫鉃楸３质挛锏暮唵涡?。在各個學科，各個研究領域都有發展。這個原則至少可以追溯到亞里士多德，他寫到：「Nature operates in the shortest way possible」，自然作為一個穩定的，持續自我生長的系統，發展原則是盡量保持簡約之道。

3. 設計資產 – 業務賦能

設計資產層面，我們輸出的內容包含了以下兩大部分：

• MIZ UI KIT_3.0 LIBRARY
• MIZ UI KIT 說明文檔

MIZ UI KIT_3.0 LIBRARY：

• 字體系統
• 調色板1.0
• 組件庫
• 樣式庫

MIZ UI KIT 說明文檔：

• 組件說明文檔
• 設計過程說明文檔

開發層面 – 溝通，減少重復

基于 UI kit 創建的組件庫，幫助他們在最終產品中保持代碼的一致性和復用性。并且設計語言作為一種工具，是整個團隊順暢溝通的最重要的語言。所以我們確保我們的設計語言，是能夠讓開發，產品都懂，并在第一時間執行的。既然是語言，那么每個元素都會有自己的名字。每個組件，甚至每個組件中不同屬性的元素我們也賦予它名字。

無名萬物之始，有名萬物之母。──《道德經》

我們的祖先發明語言文字的過程，其實就是一個給萬事萬物命名的過程。而名字是連接人和世界的渠道。名字也是主觀的，因此它有情感溫度，也會有文化偏見和個人信息資產的反應。所以我們需要給設計系統中的每一種組件都給予屬于它的名字，才能讓它成為一種專屬于你們產品的特殊語言。

場景：

開發：#000和#00000000分別替換成什么顏色？

設計師：#000，替換成 black-1

開發：那#00000000呢？

設計師：一臉茫然，這 2 個不是一個顏色嗎？

慣性思維，色值在設計師眼中，對應的是一種色彩，而在開發眼中只是一堆數字。將心比心，當你扔給開發一個色值的時候他們只是一個難過的問號；而當你給他們具體的一個顏色的名字，他們能馬上對應到這個名字，那么就是順暢的。

所以當我們給顏色命名以后，溝通就變成了以下這樣：

設計師：#ff5600 換成 orange-2。

開發：好的。修改完成。

設計師：#ff3450 全部替換成 blue-2。

開發：好的，替換完成。

設計師：這次我們品牌升級，orange-2 的色值更改為 #ff5666。

開發：好的。全局修改完成。

雖然修改的過程比較辛苦，但是結果是好的。從此設計師掌握了話語權。當然，開發也很高興。

不單單是色彩，我們對字體、icon 以及間距等也定義了尺寸。給抽象事物以不同的命名來賦予它意義，也能讓使用者使用它產生價值。

設計層面 – 輸出，快樂傳承

設計師們可以更加便捷地創建、分享、定義設計界面的內容。此外，在設計傳承方面，也能讓我們更好地將設計原則傳遞給新人。

場景：

設計師 a：此次版本迭代涉及到優惠券頁面的優惠，這個頁面的字體和顏色有規范嗎？

設計師 b：有的。請參照設計規范。

不同設計師在接到需求開始設計以后會擔心：怕風格有差別，怕頁面不統一。辛苦做好頁面以后發現和別的設計師同時做的差別很大，也不符合產品整體品牌調性，陷入循環改稿中。此時設計規范就是迭代的明燈，天上的北斗七星，指引方向讓你不偏離終點。

同步更新：設計資產的目標用戶，除了團隊中的前端開發，那么最大受益者其實就是設計師們。設計系統的一大優點便是修改設計系統中任何一個原子，整個系統所有這個原子都能感知到。這便是設計系統的可持續性、統一性，也是設計系統的基礎。

△ 組件庫中的任何修改，會同步到所有使用該庫的文檔中

自定義內容：組件中的內容都可自定義進行修改。

解放重復生產力

Here’s the simple truth: you can’t innovate on products without first innovating the way you build them. ──Alex Schleifer

這句話的道理和我們的設計原則中第一性原理相通，從原理出發，一步步往前推演，直到找出適合該問題的解決方法。這和在構建設計系統的時候是一個道理。學習從元認知能力開始，而組件一個系統，從元件開始。埃隆·馬斯克從組成汽車的發電機開始思考，創辦了特斯拉；從底層元素的創新開始，才會有產品整體性的創新。

最后補充一下結構圖：

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

響應式已經成為網頁設計的主流，目前已很多網站能兼容手機端 ，但是唯有 dashboard 的界面是相當難在移動端顯示，特別是數據復雜、內容較多的后臺數據，是很難直接展示到移動端的。

今天我們分享一系列 dashboard UI 設計作品，主要展示一些用戶數據、圖表的可視化組合設計。這些作品界面布局合理，層級分明，設計美觀，對要做這類 UI 的同學有很好的參考價值。

從收集的這些 Dashboard 界面來看，它的展示形式和PC 端有很大的區別，移動端的后臺只能顯示少量或簡化版的數據。比如 PC 一個頁面的功能，在移動端可以分開1-2個頁面來區分，或者使用類似 Tab 的形式來展現。

如果是手機 WEB 端可以用響應式來解決，以節省成本，但這樣通常交互并不十分友好，如果時間和成本允許的話，建議產品和交互人員策劃新的后臺版本。

藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

 排行榜干貨集合。

藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

在整體設計流程中，用戶故事可以說是點亮應用絕對目標的那一點星光。該片文章的作者將給我們講解為什么哪怕是小范圍的采用用戶故事也能給整體UI設計流程帶來巨大的好處。

一支設計團隊坐下來討論為一家新客戶所設計的應用的第一輪模型情況。隨著團隊成員不斷提出想法，我們發現大家對于這個應用是什么？其功能應該是什么樣有著截然不同的看法。后來，會議迅速變成了“誰對誰錯”而不是“什么對什么錯”的爭論。大家紛紛為自己的設計辯護，但沒有一個人站在用戶角度說話。聽著耳熟嗎？正是在這種時刻，我們迫切需要描繪用戶故事。

今時今日，很多UI/UX專業人士都開始意識到自己工作的環境進入了Agile狀態。Agile開發（和設計）流程需要快速推進，相應地，我們也需要能夠實現快速、協作的工具。這個聽起來像是個矛盾，但實際上確實有很多工具能夠幫助我們在不增加項目時間的情況下有效合作。用戶故事就是針對“Agile法”的工具，在運用到UI設計流程時，其能夠為后續的設計階段提供堅定的基石。簡約版的用戶故事操作起來幾乎不用時間，但卻能對保證項目按軌道運行帶來奇跡般的效果。

我們的UI設計團隊會在流程中運用用戶故事，而在運用過程中我們發現，用戶故事幫我們做到了三件事。

1.   用戶故事可以讓產品以用戶為核心。

2.   用戶故事可以促進團隊成員之間的合作。

3.   用戶故事可以防止出現功能蔓延以及設計死胡同。

什么是用戶故事？

從根本上說，用戶故事的用途是描述用戶通過使用軟件產品想要實現的任務。用戶故事起源于Agile和Scrum開發策略，但是對于設計師來說，用戶故事主要用來提醒用戶目標以及對各個界面設計進行整理和排序。

一個用戶故事就是簡單的一句話?？梢杂眠@句作為模板：“作為用戶我需要（基本用戶目標）”。因為故事都很簡短而且有針對性，所以需要多個不同的故事來覆蓋所有可能的用戶案例。事實上，我們會想辦法把每個故事進行細化。

舉個例子，一個用戶故事剛開始時是：

“作為用戶我需要創建一個新帳戶?！?

但是新建帳戶的過程中又涉及到哪些步驟呢？用戶需要提供用戶名、密碼以及其他相關信息。其中每個操作都需要有相對應的用戶故事，故事越具體，到后期對設計師和開發來說就會越方便。那么，“創建新帳戶”就可以進一步細化為：

“作為用戶我需要輸入一個新用戶名?！?br data-filtered="filtered" /> “作為用戶我需要輸入密碼?！?br data-filtered="filtered" /> “作為用戶我需要再次輸入密碼進行確認?！?br data-filtered="filtered" /> “作為用戶我需要提交信息，創建帳戶。”

這樣繼續下去，最后就會得到一大長串用戶故事，其中大部分都需要加入到最終產品內。

我們最近為Quiksilver服裝設計了一款iPad應用，可以讓銷售其貨物的店鋪跟蹤當前存活狀態，以便輕松下單訂新貨。就是這么一款看似非常簡單明了的應用，我們想出了266個用戶故事（剛開始時）。你們都沒想到細節能夠細到這種程度吧！

以用戶為中心

作為設計師，我在第一次和項目相關人員開會的時候就會開始考慮布局和配色方案。在聽他們說目標以及了解終端用戶情況的同時，我就能想象出這款應用應該是什么樣的。但關鍵在于不能本末倒置——我們要先確定用戶故事，讓用戶故事道出設計，而不能倒過來搞。

在對應用的所有用戶故事做完腦暴之后，我們會把故事放到Google的合作電子表格上，以便客戶在想到有其他用戶故事時隨時添加。在客戶和團隊感覺已經窮盡所有內容之后，我們會給每個故事一個編號。這些編號到項目后期會派上大用場，我們會用編號作為一個簡明的標簽來表示哪些故事需要在哪個時間段處理。

這個表格的功能不僅是提醒我們應用的功能，還能讓我們在整個流程中與用戶緊密相聯。每個用戶故事都是針對于我們終端用戶的，以便保證始終照顧到他們的需求。這一點在一個有關約會應用的項目中表現的尤其明顯。

關于這個應用，我在給“用戶資料”頁面做線框圖的時候，最開始以為需要添加一個“保存用戶”功能按鈕。但是，我不經意瞟了一眼“用戶資料”部分，突然想起來用戶故事中的一個細節：“作為用戶我需要收藏其他用戶?！?

把“保存”一詞改成“收藏”這個決定雖小但很關鍵，因為“保存”用戶聽起來冷冰冰的，而“收藏”則契合了用戶有關約會的心態。設計師容易陷入到技術的陷阱中，特別是在對功能投入了大量時間之后。而用戶故事可以提醒我們時刻以用戶體驗為核心，因為用戶體驗是最終決定應用性格的東西。

促進合作

UI設計通常涉及到的人不止一個。其中還可能包括客戶、設計師、程序員以及一大堆的其他職位工作人員，具體要取決于公司的規模大小。從很多方面說，這就類似于一隊人劃船。要贏得比賽，團隊的每個成員都要以相同的速度朝著相同的方向一齊劃槳。這并不是說所有人的意見都要始終統一，而是說所有人都要有統一的目標并且清楚自己在團隊中的角色。

雖然我們在CitrusBits所采用的流程遠算不上完美，但是我們卻發現用戶故事能夠保證船上的人勁都往一處使。以用戶故事為基準做出決策讓我們得以明確定義出應用的目標。這樣一來就大大降低了團隊合作時的障礙，因為我們用簡短、有針對性的詞句明確定義出了共同的目標。

另外，用戶故事還能讓身處不同地理位置的團隊更加輕松的合作。我們在為一家舊金山客戶開發一款問答類應用時，我們在海灣地區的團隊會時不常的和客戶碰面討論應用要求。他們寫出了用戶故事（但并沒有在項目期間進行其他修改）然后放到了Google Drive。而我們身處洛杉磯的團隊則可以在畫線框圖的同時隨時參考用戶故事，并進行必要的改動。要不是有了這個步驟，這個項目所花費的時間會長的很多，而且還會需要通過大量漫長的解釋工作來解決這些簡短用戶故事幾分鐘就能解決的問題。

防止出現功能蔓延以及設計死胡同

“功能蔓延”是一個UI設計中常見的詞。它是指相關人員會不自覺地不斷增加新功能，擴展項目范圍，這既包括硬件也包括軟件方面。

這幅漫畫完美地詮釋了功能蔓延。

當然，在項目進展期間我們是不反對更改要求的。但是，除非有明確的用戶故事告訴我們原因，我們會拒絕哪怕添加一個簡單的文本框。我們之所以在這方面這么強硬，是因為之前看到過有的項目超出控制、丟掉中心最后無法實現最初設定的目標。

舉個例子，不久之前，我們有個客戶忽略了用戶故事這回事。當時我們正在給一家處理保密資產的公司搭建應用，客戶想要做一款能夠管理員工之間通訊的應用。主要的通訊手段是一個使用文字信息和圖片的公司內部對話平臺（這一點我們都認可了），這個我們記錄到了用戶故事里。后來，客戶又要求增加視頻、語音信息和位置分享。為了保持我們“靈活”的形象，我們想辦法把這些內容加入了新的通訊系統，也因此擴大了項目范圍，推遲了時限，在做完了全部工作之后我們卻發現添加的內容其實對終端用戶沒用。

盡管新增的功能也很屌，但我們最開始的初衷是做一款盡量簡化通訊的應用以便促進團隊建設和協作，不讓他變成一個公司內部的Facebook。于是，我們又回到了用戶故事并重新提醒了客戶做應用的初衷，最后成功組織了功能蔓延，回到了正軌。多方面的實驗盡管能帶來很多很棒的成果，但是如果產品無法滿足根本要求，再精巧也沒意義。

通過這次教訓，我們在開發Quicksilver這個針對B2B公司的銷售類應用時嚴格遵照用戶故事開展流程。最后，最終產品一絲不茍地遵守了最初設計，這主要歸功于我們在前期積累了一套全面的用戶故事。以用戶故事為基石為后期節省了大量工作，同時也讓我們的工作更加有序、更加以用戶為中心。盡管產品的每次迭代都帶來了更多的用戶和客戶反饋，但產品理念的核心一直屹立不倒。

產品從最初設計到最終成品變化非常小。

每個用戶故事對于設計團隊和開發團隊來說都有自己的一套意義。時刻思考技術限制雖然說是好的，但是畢竟我們說的是“用戶故事”，不是“開發的故事”也不是“設計師的故事”。正因為我們通過用戶故事對用戶的觀點進行了排序整理，我們才能更輕松地了解所面臨的問題進而創造出一款真正有用的最終產品。

 藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

不要小看一個登錄界面，它內里包含很多細微的東西，除去外觀視覺，更多要注意的是交互的操作體驗，比如一些動畫、一些文案提示等細節都要注意，如果你是UI設計師，建議看看這次經驗文章，附上了大量案例，也許能助你未來更好的去設計一個用戶體驗友好的APP登錄界面。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

沒有用戶會拒絕任何產品的錦上添花，而功能性動效對于產品來講，在滿足功能效率的同時，能夠帶來更多額外的附加體驗，是一種相對比較容易引發體驗峰值的途徑，下面和大家介紹 功能性動效的定義和類型。

一、功能性動效的定義

功能性動效的主要類型有頁面空間轉換、視覺信息反饋、功能操作引導、品牌與趣味，本文就來談談這四種功能性動效在移動端的使用。

定義：功能性動效是一種嵌入 UI 設計中微妙的動畫，有著明確、合理的目標

功能性動效的主要類型：

頁面空間轉換；

視覺信息反饋；

功能操作引導；

品牌與趣味。

二、功能性動效的類型

類型 1 ：頁面空間轉換動效

1.1 主要作用

頁面空間轉換的動效，主要是為了讓用戶通過理解頁面中空間轉換的動效，了解到界面和元素之間的空間關系，并隨時感知到空間元素的變化。

告訴用戶對象和窗口的狀態是如何變化的，防止頁面轉換視盲，在空間上也能營造更好的印象。

1.2 使用場景

頁面空間轉換類動效，主要使用在輪播 banner／頁面切換/導航菜單切換。

1.3 優秀案例賞析

案例 (1) ：輪播 Banner 中的空間轉換動效

案例 (2) ：導航菜單切換

導航欄的的轉換是指 App 中導航菜單狀態的變換，有不同級菜單之間和同級菜單之間的轉換，解釋菜單之間的層級關系，讓用戶明白菜單轉換的過程中到底發生了什么，下一步操作具體如何去做。

類型 2 ：視覺信息反饋動效類型

具備良好用戶體驗的產品，都應該給用戶的每一個操作都提供反饋，無論成功與否，反饋會使用戶覺得自己與屏幕上的元素進行真實互動。即便隔著屏幕，也能讓用戶看起來是在直接操作，增加操作的可控性真實自然的體感。

2.1 主要作用

視覺信息反饋類動效主要是為了告訴用戶目前操作到哪里了，時時狀態怎么樣，緩解用戶對應用處理速度的量化感知。

具體表現為：

確認系統接收到用戶的操作；

確認（或拒絕）用戶的行為;

明確告知用戶當前操作的進度／狀態，緩解用戶的緊張／焦慮感。

2.2 使用場景

系統信息提示／狀態反饋／操作結果反饋／進度提示／加載提示。

2.3 優秀案例賞析

案例 (1)：系統提示反饋

系統反饋，當系統狀態發生重要的變化時，功能性動畫也可以用來提醒用戶，可以給用戶一個快速而有簡潔的一個反饋。例如：短信提示、來電提示。如下圖：

案例 (2) ：操作結果反饋

案例 (3) ：進度提示反饋

在進度條設計中，明確告知用戶當前的具體進度和狀態，讓用戶隨時隨地知道還需要等待多久，對當前操作環境是可控的，而不是讓用戶去猜，讓用戶對當前的操作環境不可控。例如：他當下操作的步驟；目前數據下載／狀態的具體執行進度等，讓用戶有心理預期。

類型 3 ：功能操作引導

當用戶第一次使用你的app的時候，如果沒有幫助的話，他們可能會不知道如何操作。 我們應該給用戶提供一些視覺提示來告訴他們哪些操作是可行的。

3.1 主要作用

功能性的動畫可以提示用戶去注意那些可以完成的操作，視覺提示可以給用戶告知即將發生的事情。

3.2 使用場景

新手引導/功能操作引導。

3.3 優秀案例賞析

案例 1 ：新手引導

案例 2 ：功能操作中的引導

下圖中的例子，是一個游戲里面的小例子，直接用動效完美詮釋了“手把手教導”，這樣用戶理解的成本就非常低，根本不用思考，按照引導去做就能完成任務。是一種非常清晰的解決問題的方式。

類型 4 ：品牌與趣味

4.1 主要作用

為了避免與市場上很多APP同質化，千篇一律的用戶體驗，品牌動畫可以成為一個產品的營銷工具，用來表現一家公司的品牌價值或者突出產品的優勢，同時給用戶一種愉快又難忘的用戶體驗。

4.1 使用場景

加載細節／動效速度感知／動效色彩的具體場景中使用。

4.3 優秀案例

案例（1）：Uber 啟動頁的打開加載動效

Uber 的打開動效不僅讓用戶體會到愉悅感，而且它的展開式動效還很好地“控制”了用戶雙眼的視覺焦點。如下圖：

案例（2）：輸入操作中的動效

下圖的例子是一個輸入賬號密碼操作時的動效，是動效帶來趣味體驗的典型案例：

當用戶輸入密碼的時候，這個動作其實是一個非常隱私的動作，所以現實生活中，自己輸密碼的時候，都會希望身邊的陌生人轉身／不要直接盯著看。

而下面的例子就把保護用戶隱私作為一種生理的本能，把這種生活中的習慣延續到界面細節當中，當用戶輸入密碼的時候，輸入框上面的貓頭鷹自覺的捂住了自己的眼睛，向用戶傳達系統的安全性之外，也和用戶進行了一次無聲的趣味互動，是一個很好的信息反饋的案例。

除了上面的賬號輸入案例，還有其他類似的動效例子。例如：很多結果輸入的反饋里，如果結果輸入錯誤，那么輸入框和文字則會來回晃動，同時輸入的文字／輸入框同時變紅。這個效果會讓我們聯想到日常生活中的擺手和搖頭，而這些都代表著“no”，是一種非常自然的動效交互邏輯。而正是這些小細節的使用，是打造良好用戶體驗的關鍵。

結語

其實，用戶比我們預想中更能注意到頁面中的細節，動效除了要幫助用戶快速找到他想要的東西，達到他想完成的任務，也是一種可以給用戶傳遞情感的交互元素。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

那如何縮短數據與用戶的距離？讓用戶一眼抓到重點？讓老板為你的匯報方案鼓掌？

本文通過連環15關，層層深入，傳你數據匹配圖形神功，讓數據可視化更。

無論數據總量和復雜程度如何，數據間的關系大多可分為三類：比較/構成/分布&聯系。

一、比較

基于分類/時間的數據對比，通常需用到比較型圖表。用戶通過圖表輕松識別最大/最小值，查看當前和過去的數據變動情況。

常見場景：哪個地區的收件量最多？今年的收入和去年相比如何……

1. 條目少 – 柱狀圖

比較條目較少時，如5個地區收件量的對比，可選用柱狀圖表示。

△ 柱狀圖

2. 條目多 – 條形圖

當條目較多，如大于12條，移動端上的柱狀圖會顯得擁擠不堪，更適合用條形圖。一般數據條目不超過30條，否則易帶來視覺和記憶負擔。

△ 條形圖

3. 看趨勢 – 折線圖

當X軸為連續數值（如時間）且注重變化趨勢時，則適用折線圖。

△ 折線圖

4. 擴大差異 – 南丁格爾玫瑰圖

除柱狀圖外，有無更新穎的表現方式呢？那就屬南丁格爾玫瑰圖了。

△ 南丁格爾玫瑰圖

由于扇形的半徑和面積是平方的關系，南丁格爾玫瑰圖會將數值之間的差異放大，適合對比大小相近的數值。它不適合對比差異較大的數值，因為數值過小的類目會難以觀察。

此外，因為圓有周期性，玫瑰圖也適于表示周期/時間概念，比如星期、月份。依然建議數據量不超過30條，超出可考慮條形圖。

5. 雙向 – 雙向條形圖

前面的例子都是單維度比較，當比較正反兩類甚至更多維度的數據時，可嘗試雙向條形圖，下圖為各大區的重點地區的收派件量的對比。

△ 雙向條形圖

用顏色區分大區，空心/實心區分收件量和派件量，既能整體比較大區，又能詳細對比地區的情況。

打怪升級，再加點難度。在雙向圖上再增加一個維度，如下表，比較5個地區的利潤及相應的收入和成本。請先思考一下，再下滑看推薦圖表。

△ 業務數據

△ 雙向條形圖（多維度）

通過圖形一眼就能看出深圳區的利潤低于廣州區，即使它的收入高于廣州區，但成本相對來說高于廣州區。

6. 目標達成 – 子彈圖

實際業務中，常要考察指標的達成情況，如收入達標情況及所處區間（優、良、差），如下表，你會怎么可視化呢？動手畫一畫吧！

△ 業務數據

△ 子彈圖

子彈圖，因為像子彈射后帶出的軌道。相較于儀表盤，它能夠在狹小的空間中表達豐富的數據信息，在信息傳遞上有更大的效能優勢。

若還要比較4個季度的收入情況，只需用不同顏色區分。如下圖，一眼便知第二季度表現較好，而第一季度則不佳。

△ 子彈圖

7. 性能 – 雷達圖

對于一些多維的性能數據，如綜合評價，常用雷達圖表示。指標得分接近圓心，說明處于較差狀態，應分析改進；指標得分接近外邊線，說明處于理想狀態。

△ 雷達圖

以上就是「比較」類的常用圖表，可歸納如下。

此表并非一成不變的「鐵表」，相互之間還會串聯交叉，大家還需靈活應用。

二、構成

部分相較于整體，一個整體被分成幾個部分。這類情況會用到構成型圖表，如五大區的收件量占比、公司利潤的來源構成等。

1. 單層 – 餅狀圖

第1關中，對比5個地區的收件量時用到了柱狀圖。若看占比情況，餅狀圖更合適。

△ 餅狀圖

如果變成17個地區，會怎樣？

像不像彩色七星瓢蟲？

所以餅圖分類一般不超過9個，超過建議用條形圖展示。

除餅圖外，環形圖（甜甜圈圖）亦可表示占比，其差異是將餅圖的中間區域挖空，在空心區域顯示文本信息，比如標題，優勢是其空間利用率更高。

△ 環形圖

2. 分層 – 環形圖、旭日圖

對于管理層而言，需先把握大局和重點。比如大區負責人需一眼看到重點地區及重點分部的情況（如下圖），如何展示？

△ 環形圖

△ 旭日圖

這個叫旭日圖，逐層下鉆看數據，大區的重點地區及相應分部的構成情況一目了然。

3. 累計趨勢 – 堆疊面積圖

接下來，看看數值構成隨時間變化的案例：第一大區（包含四個重點地區）近四年收入構成的趨勢要如何可視化？自己想一想，再下滑看推薦方案。

△ 業務數據

△ 堆疊面積圖

推薦方案是堆疊面積圖，可以展現分量（地區）對于總量（大區）的貢獻，并顯示總量（大區）的變化過程。需要說明的是，地區收入的起點并非從 y=0 開始，而是在下面的地區基礎上逐層疊加，最后組成一個整體。

4. 累計比較 – 堆疊柱狀圖

如果將上圖X軸的標簽文字（即年份）和圖例（即地區）互換（如下圖A），用來看每個地區近四年的收入構成，用哪個圖更合適？

△ 堆疊柱狀圖

是不是覺得都可以？那圖中 X1 有何含義？堆疊面積圖 A 方案和堆疊柱狀圖 B 方案都可以表現累加值。差別在于，堆疊面積圖的 x 軸是連續數據（如時間），堆疊柱狀圖的 x 軸是分類數據。此案例中的 x 軸是非連續的分類數據，因此用 B 方案更適合。

5. 累計增減 – 瀑布圖

若想表達兩個數據點間數量的演變過程，可使用瀑布圖。開始的一個值，在經過不斷的加減后，得到一個值。瀑布圖將這個過程圖示化，常用來展現財務分析中的收支情況。

△ 瀑布圖

以上就是「構成」類常用圖表，可歸納如下。

三、分布&聯系

通過分布&聯系型圖表能看到數據的分布情況，進而找到某些聯系，如相關性、異常值和數據集群。

常見使用場景：客戶的年齡段分布？單票成本與收件量的關系？

1. 兩個變量 – 散點圖

仍以業務為例，下圖為全國網點的單票成本/收入分布情況。

△ 散點圖

單單這樣看，可能看不出什么，如果加兩條平均線就不一樣了。

加了平均線，就知道哪些網點高于平均線，哪些低于平均線。但網點那么多，總不能逐個點擊查看是哪個大區的，給散點加上顏色后，就很有意義了。

通過此圖，可以看出哪些大區單票利潤較低，急需提升，比如廣泛聚集于右下角的第四大區，單票收入低于平均線，單票成本卻高于平均線。

2. 三個變量 – 氣泡圖

大家都知道，網點總利潤除了和單票利潤有關，還和體量（即收件量）有關，用散點的面積大小表示收件量，就變成了氣泡圖。

△ 氣泡圖

3. 結合地圖 – 熱力圖

氣泡圖與地圖結合可演變為熱力圖。通過熱力圖，能看到哪些網點收派件量較多，需進行資源調配。

△ 熱力圖

以上是 「分布&聯系」類的常用圖表，可歸納如下：

小結

當我們拿到數據后，先提煉關鍵信息，明確數據關系及主題，再選擇合適的圖表進行可視化。希望下圖能給各位一些參考（結合可視化專家 Andrew Abela 的圖表選擇指南，進行了簡化調整）。

數據可視化設計只要多練習、多總結，總有一天會得心應手。

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

醫療保健類產品設計、界面設計及交互設計靈感

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

今天將從醫療保健類產品開始延展到互動和交互界面。很多醫療產品的界面有可能是一個小屏幕，也有可能是非常大的屏幕。

產品

醫療類的產品我們選擇了一些可穿戴設備的概念設計。

Kingyo設計的Sange手表

Crux Product Design 和 Chris Pearce 設計的

Amazfit

Gra?ina Bo?kut?為盲人設計的可穿戴配件

交互

我們與不同設備的交互不斷變化，將語音用戶界面引入醫療行業將徹底改變人們對護理的看法。精細設計的語音助理能夠像人一樣，更貼心。

Michal Sambora設計的Alexa助理的界面

Gleb Kuznetsov?設計的ai智能語音助理

SELECTO設計的語音助理

界面

干凈，簡潔，充滿未來感，避免錯誤的發生。

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

在今天的 UI設計中，投影使用的范圍和頻次越來越高。打開手機APP，或是看追波上的練習稿，都可以看見無數投影使用的案例。

掌握好投影的使用，是必備的 UI 視覺設計基礎。投影遠沒有大家想象的那么簡單，即使軟件中可以設置的參數并不多，在我的教學過程中，很多學員始終沒辦法很好的應用投影來提升自己的設計質感。

所以，這篇文章就會詳細講解投影的正確設計方法。

一、投影的基本介紹

在了解投影和設計的關系前，我們要先知道投影是什么。用專業點的方式解釋，即：

投影指的是用一組光線將物體的形狀投射到一個平面上去，稱為「投影」。

有了光源，才有投影。光影是美術和攝影最核心的基礎。那么投影有什么特征呢，先看看下面的這張靜物攝影。

圖中有很清晰的向右延伸的投影。距離主體越遠的投影，也就越模糊，越淡。通過這樣的投影我們還可以很輕易的分析出，光源在左側，且物體是放置在地面上的。

投影可以帶給我們非常多隱藏的信息，而這些往往被我們所忽略。再看看下方的案例，當背景無法直觀的提供物體所處高度時，投影就能起到關鍵的作用。

在平面畫布中，投影的做法直接影響我們對元素的認識。 例如下圖中，投影可以讓我們了解按鈕本身是有厚度（遮擋了光線）或是離開了水平面處于懸浮狀態。

當然，投影除了對物理信息的暗示，還涉及到對視覺效果的表現。上面的白鞋投影很重，且輪廓清晰，這樣能塑造更強烈的沖突，增加鞋子的立體感。但是不是所有攝影都需要有這樣雕刻版的投影效果呢？答案是否定的，例如下面這張圖片。

主體物和背景色彩能很好的結合，創造出有趣歡快的視覺氛圍，所以只需要柔和的投影即可。在 UI 的設計中，對于陰投影參數的定義，也會直接影響我們畫面的視覺效果。

成熟的攝影作品，會根據對投影的需要再去調節打光的方式，這是個非常復雜而且繁瑣的過程，需要經年累月的學習。而在設計的過程中，創造投影卻非常容易，所以我們更該重視的是，如何正確的設計投影。

即先構思出元素的物理特性，再給予它正確美觀投影樣式。

二、UI設計中的投影

在進入了扁平化的設計環境后，投影有很長一段時間被抹除，因為大家認為那是擬物的遺毒，就怕設計里用到擬物元素顯得不夠時髦。

到了 Material Design 發布以后，谷歌在規范中增加了 Z 軸的概念，也就是為平面預設了立體的空間，設計元素可以定義與空間中水平面的距離。

下圖中，Z 軸數字越大，代表和水平面的距離越遠，上升得越多。而帶給我們這種感受的原因，就是投影的暗示，元素本身的坐標并沒有任何改變。

既然增加了投影，那么谷歌的專業設計團隊，肯定不會很隨意的制定其參數。當我們打開谷歌的官方 UI KITS 源文件進行查看時，就能發現其中的不同。

可以看見，元素疊加了多層的投影，這是違反新手對于投影定義的直覺的。原因在與，一般軟件中定義的投影，其深淺與元素的距離是線性等比的，而現實世界中，深淺與距離是非線性的函數關系。

在 UI設計師接觸的平面類軟件中，只有 PS 具備完美復現這種投影的能力，即控制投影的等高線。

而 Sketch、XD 這些軟件都不具備這樣的功能，且手機系統的投影渲染機制也是線性的，所以谷歌就通過使用 TopShadow、BottomShadow 疊加的方式，去模擬真實的投影效果，讓它們看起來更和諧自然，這就是多層投影的奧秘。

上面出現的投影都是黑白灰，但在現在流行的設計作品中，最常見的是應用了彩色的投影，攝影中也經常會應用彩色的投影渲染氛圍。

但是，投影中的這些彩色區域，并不完全都是投影，還包含了折射和漫反射的原理等。為了簡化，我們可以認為是光線穿透物體從而投射出帶有物體本身顏色的投影。就像撐起一把綠色的陽傘，傘下的人頭頂也會彌漫著草原的芬芳……

三、投影設計演示

在開始展示具體的設計案例前，我們要先明確一個原則，即：

優雅的投影是讓你感受到它的存在，但不會吸引你去關注它！

一般的設計軟件中，元素的陰影即是在元素的背后添加了一個相同輪廓的純色矢量圖形，我們可以通過 XY 軸移動它的位置，并使用模糊的參數來設置它的模糊度。

當元素的距離水平面越近，陰影距離元素也就越近，即 XY 軸越小，模糊也越小，如果離得遠則相反。

1. 常規投影類型

第一種投影的類型，即光源從元素的上方投射下來，可以參考谷歌提供的投影方案疊加兩層投影。第一層是 XY 軸坐標為0，只添加模糊的參數，透明度較低。第二層陰影使用相同的模糊參數，增加 Y 軸坐標，透明度較高。

在非 MD 設計中，它濃郁的投影參數會讓整個界面變「臟」，變擁擠。我們要做的是要降低投影的透明度，這樣才能讓投影的表現更自然舒適。要牢記的是，當使用純黑色做陰影時，透明度無論如何都不應該高于 20%，正常區間在 5%-15%。

既然知道陰影屬性的規律，我們還可以復制個矢量圖層做模糊效果也可以得到一樣的效果，這種方法可以支持我們設計出更真實的投影。即將 BottomShadow 獨立出來，縮小并向下移動。

如果想要得到彩色的投影，那么只要切換投影的色彩即可。值得注意的是，不同色彩的刺激程度不同，我們要憑感覺去調整它們的透明度。

如果感覺不得勁，陰影太少了，那么我們就讓元素的 Z 軸上升。

既然前面提到彩色投影是由于光線穿透了元素，那么當使用了漸變色或者是圖片的投影，我們在上一步復制出的那層投影，就可以不使用填充色，而是直接用漸變或者是原圖進行模糊和透明度調整。

2. 非常規投影類型

光有垂直于平面的關系，那么發揮想象力，我們還可以更改光與面的位置，如下圖所示。

在這個場景中，投影就作用在圖片下方的地面，只有地面處于透視狀態時，才能可以看見它的投影，所以，我們就可以得到下方的效果。

當然，我們還可以結合光源的類型，比如使用聚光燈等，那么陰影的輪廓就會發生變化。

我們甚至可以預設元素本身產生有一定的變形，如邊緣翹起，那么就會產生獨特的陰影類型。

我們可以從日常生活中的觀察將各種不同的投影形式引用進我們的設計中，讓我們的設計視覺更豐富有趣。

總結

學會正確的投影設計方式，并不是僅僅讓我們局限在對 UI 元素的設計上。它還能給我們帶來很多意想不到的幫助，例如做設計的包裝。

通過前面講解的知識點，上方展示案例中應用的陰影方式相信你們已經可以看出端倪了，如果使用基礎的陰影設置去創建展示的陰影，就會發現效果遠遠不如案例的高級，自然也難以帶給別人良好的視覺體驗。

最后，在項目中，想要將設計出來的陰影交付給開發，真正落地實現出來，無論安卓或是 iOS ，陰影的渲染和設計軟件的參數是不一致的，這就需要大家自己鉆研了。

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

提到Axure，這可是絕大多數PM童鞋靠著吃飯的家伙事兒。Axure被很多人定義為一個以交互見長的原型設計工具。很多初入坑甚至入坑甚久的PM為畫出炫酷的原型挖空了心思。我想這對Axure的初衷一定是有誤解。