如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

為什么要構(gòu)建 MIZ Design？

1. 背景

隨著米莊 APP 用戶的增長，以及 APP 不停的迭代，我們在設(shè)計(jì)上積累了越來越多的債務(wù)。越來越多的新頁面，新功能，以及不同的組件，都是由不同的設(shè)計(jì)師來設(shè)計(jì)，前端也是由不同的開發(fā)來實(shí)現(xiàn)，這直接導(dǎo)致了整個(gè) APP 越來越臃腫無序，視覺和交互體驗(yàn)不一致，且團(tuán)隊(duì)溝通成本高，重復(fù)勞動(dòng)力大，輸出效率低，迭代速度慢。

2. 現(xiàn)狀

開發(fā)層面

• 代碼混亂不統(tǒng)一
• 沒有可控性和可持續(xù)性

場景：

設(shè)計(jì)師：涉及到這個(gè)組件的頁面都改一下吧。

開發(fā)：改不了，每個(gè)頁面都是單獨(dú)寫的，改起來非常麻煩，耗時(shí)間耗資源耗人力。

設(shè)計(jì)師：為什么同樣的組件要單獨(dú)寫？

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

設(shè)計(jì)師：……

那怎么辦？不改也得改呀?？偛荒芤恢绷糁@些大大小小的毛病，不解決問題會(huì)越來越嚴(yán)重。

代碼混亂，遺留了非常多的開發(fā)層面代碼不一致的問題，后期迭代的過程中如果不統(tǒng)一，也會(huì)使整個(gè)系統(tǒng)失去可控性。

設(shè)計(jì)師層面

• 時(shí)間和精力的重復(fù)浪費(fèi)
• 產(chǎn)品體驗(yàn)和風(fēng)格的混亂

場景 1：

設(shè)計(jì)師 A：這個(gè)頁面是誰做的？源文件有嗎？

設(shè)計(jì)師 B：不知道哎。以前的設(shè)計(jì)師做的。去庫里找一下吧。

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

場景 2：

開會(huì)：為什么這個(gè)項(xiàng)目的頁面和以前的風(fēng)格差很多？

設(shè)計(jì)師 A：現(xiàn)在流行的就是這個(gè)風(fēng)格呀，多好看。

設(shè)計(jì)師 B：雖然設(shè)計(jì)每年都有流行趨勢，但還是要和產(chǎn)品品牌風(fēng)格相結(jié)合。

一個(gè)項(xiàng)目兩個(gè)設(shè)計(jì)師負(fù)責(zé)，設(shè)計(jì)出來的頁面控件：按鈕，列表，輸入框，色彩，視覺風(fēng)格完全不一致。在 2 個(gè)設(shè)計(jì)師完成設(shè)計(jì)以后，還需要整合在一起重新修改，效率很低。并且每次頁面中的元素，開發(fā)需要根據(jù)不同業(yè)務(wù)中的不同設(shè)計(jì)師的「創(chuàng)意」來進(jìn)行人肉修改。

當(dāng)我們開始設(shè)計(jì)新的頁面，功能需求點(diǎn)優(yōu)化的時(shí)候，這個(gè)問題變得更加嚴(yán)重。同時(shí)，因?yàn)闆]有一個(gè)統(tǒng)一的基礎(chǔ)設(shè)計(jì)規(guī)范原則，設(shè)計(jì)師在設(shè)計(jì)項(xiàng)目的時(shí)候，在設(shè)計(jì)決策和討論中花費(fèi)了大量時(shí)間，會(huì)存在大量的重復(fù)勞動(dòng)。同時(shí)由于產(chǎn)品的界面和交互缺乏一致性和可預(yù)測性，用戶體驗(yàn)也受到了影響。整個(gè)產(chǎn)品也會(huì)在風(fēng)格定位上不統(tǒng)一，沒有確定產(chǎn)品風(fēng)格特質(zhì)的情況下越來越模糊，失去自身品牌該有的特性。

產(chǎn)品迭代，基本上是基于新功能的開發(fā)設(shè)計(jì)迭代，新的功能、新的頁面不斷的增加，對于設(shè)計(jì)師而言，有設(shè)計(jì)規(guī)范的原則做基礎(chǔ)設(shè)計(jì)框架，更容易延續(xù) APP 統(tǒng)一的設(shè)計(jì)風(fēng)格，不至于被不同的需求，不同的設(shè)計(jì)趨勢以及蠢蠢欲動(dòng)的新的設(shè)計(jì)靈感牽著鼻子走，導(dǎo)致越做越亂，無章可循。

一個(gè) APP 就像自己的孩子一樣，從一個(gè)嗷嗷待哺的嬰兒逐漸長大成人。設(shè)計(jì)系統(tǒng)就好比一個(gè)人的生物系統(tǒng)，是整個(gè)生物體的基礎(chǔ)。如果對此系統(tǒng)不維護(hù)，那么此系統(tǒng)將會(huì)隨著時(shí)間的增長越來越脆弱以及呈現(xiàn)不可逆的現(xiàn)象。那么如果維護(hù)好一個(gè)設(shè)計(jì)系統(tǒng)，骨骼會(huì)在成長中呈現(xiàn)規(guī)律清晰的生長模式，會(huì)隨著業(yè)務(wù)的生長而生長，可控制、可更新，使生物體健康的發(fā)展然后去完成它的使命。

什么是設(shè)計(jì)規(guī)范？

Design System 最開始是 Guide 演化而來，Guide 是一套可指導(dǎo)、可延續(xù)、可擴(kuò)展、可統(tǒng)一的、可區(qū)分的視覺指引手冊，指導(dǎo)相關(guān)設(shè)計(jì)結(jié)構(gòu)完成統(tǒng)一性與對外區(qū)分性。具象層，它是一種設(shè)計(jì)方法；抽象層，它是一種思考模型。

最近幾年，「Design System」這個(gè)詞非?；?。下面介紹紅遍全球設(shè)計(jì)界的兩大設(shè)計(jì)規(guī)范網(wǎng)紅。

1. Material Design

谷歌在 2014 年的 Google I/O 上推出了 Material Design，它的目標(biāo)是創(chuàng)造一個(gè)將經(jīng)典的設(shè)計(jì)原則和科技、創(chuàng)新相結(jié)合的設(shè)計(jì)語言，并且在不同設(shè)備上提供一致的體驗(yàn)底層系統(tǒng)，并同時(shí)支持觸摸、語音、鼠標(biāo)、鍵盤等輸入方式。

一經(jīng)發(fā)布就紅遍了全球設(shè)計(jì)界。新穎的設(shè)計(jì)理念，清晰明確的設(shè)計(jì)原則，詳細(xì)的設(shè)計(jì)規(guī)范，使之成為完美的安卓端標(biāo)準(zhǔn)設(shè)計(jì)規(guī)范。也給設(shè)計(jì)界的設(shè)計(jì)師們提供了非常好的參考，很多設(shè)計(jì)師也根據(jù) Material Design 設(shè)計(jì)原則延展出更多的創(chuàng)新設(shè)計(jì)可能性，制作了各家的設(shè)計(jì)規(guī)范。

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

設(shè)計(jì)價(jià)值觀

• Create：創(chuàng)造一個(gè)將經(jīng)典的設(shè)計(jì)原則和科技、創(chuàng)新相結(jié)合的設(shè)計(jì)語言。
• Unify：開發(fā)一套統(tǒng)一的底層系統(tǒng)，保持各端一致的用戶體驗(yàn)。
• Customize：靈活多變的視覺語言，讓各家自成一派，形成獨(dú)特鮮明的品牌風(fēng)格。

設(shè)計(jì)原則

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

大膽，圖形，鮮明：Material Design 基于印刷設(shè)計(jì)的指導(dǎo)原則，字體、柵格、留白、顏色等元素都以創(chuàng)造層次、意義和焦點(diǎn)為基礎(chǔ)來讓用戶沉浸在設(shè)計(jì)體驗(yàn)中。

動(dòng)效賦予意義：微妙順暢地反饋和過渡性的動(dòng)作效果，引起用戶的注意力并使之保持持續(xù)關(guān)注。當(dāng)元素出現(xiàn)在一個(gè)界面中的時(shí)候，元素之間的互動(dòng)重塑了環(huán)境。

基礎(chǔ)靈活：Material Design 同樣旨在實(shí)現(xiàn)品牌價(jià)值的傳遞。結(jié)合了基礎(chǔ)的代碼、組件和元素，可表達(dá)不同的品牌需求。

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

2. iOS Human Interface Guidelines

iOS 的人機(jī)規(guī)范指南，保持了蘋果一貫的風(fēng)格。雖然沒有 Material Design 規(guī)范那么細(xì)致全面，但是核心的設(shè)計(jì)原則在每個(gè)組件的設(shè)計(jì)說明中都有滲透。作為 iOS 系統(tǒng)的設(shè)計(jì)基礎(chǔ)，建議每個(gè)設(shè)計(jì)師都需要仔細(xì)研究。

iOS 設(shè)計(jì)價(jià)值觀

• Clarity：系統(tǒng)中所有的文字、圖標(biāo)、圖像以及各個(gè)元素都清晰可見，語意表達(dá)準(zhǔn)確，功能驅(qū)動(dòng)設(shè)計(jì)。
• Deference：順應(yīng)用戶的行為，流暢的動(dòng)效和清晰美觀的界面，使用戶沉浸在順暢的交互中，不去打擾用戶。
• Depth：清晰的視覺層級(jí)和流暢的動(dòng)效，同樣提供了系統(tǒng)清晰的層次感，使其富有活力且易于用戶理解。

iOS 設(shè)計(jì)原則

Aesthetic Integrity 整體美感：整體美感不僅僅包括美觀的 APP 界面，還包括流暢的交互體驗(yàn)，產(chǎn)品功能和用戶行為的有效結(jié)合。比如當(dāng)一款工具類 APP 主要是幫助用戶完成一項(xiàng)任務(wù)時(shí)，設(shè)計(jì)師應(yīng)關(guān)注于用戶操作本身的行為路徑，和產(chǎn)品功能相結(jié)合來幫助用戶完成目標(biāo)，使用戶聚焦功能本身。而如果是一款游戲，那么需要提供非常有吸引力的界面，在鼓勵(lì)引導(dǎo)用戶探索的同時(shí)也有非常棒的操作體驗(yàn)。

Consistency 一致性：一個(gè)保持了一致性原則的 APP，通過使用標(biāo)準(zhǔn)的控件、熟悉的 icon、標(biāo)準(zhǔn)的文字規(guī)范、統(tǒng)一的組件俗語來實(shí)現(xiàn)一個(gè)擁有標(biāo)準(zhǔn)化范例的系統(tǒng)。這個(gè)系統(tǒng)提供的特性和交互行為也符合用戶的心智模型和預(yù)期。

Direct Manipulation 直接操作：讓用戶在屏幕上直接對內(nèi)容進(jìn)行操作的交互行為，可以鼓勵(lì)用戶和系統(tǒng)進(jìn)行交互并且更易于理解。當(dāng)用戶翻轉(zhuǎn)屏幕或者使用手勢直接與屏幕交互時(shí)，他們會(huì)感知到直接操作的行為，并且能立即得到操作結(jié)果。

Feedback 反饋：反饋能夠響應(yīng)操作，呈現(xiàn)結(jié)果，使用戶獲得信息。手機(jī)中內(nèi)置的 iOS 應(yīng)用程序?yàn)橛脩舻拿恳粋€(gè)動(dòng)作提供可感知的反饋。交互元素在點(diǎn)擊時(shí)會(huì)凸顯被高亮顯示，進(jìn)度指示器顯示了需要長時(shí)間運(yùn)行的操作進(jìn)度、動(dòng)效和聲音，使用戶能夠更清晰地感知交互行為的結(jié)果并作出響應(yīng)。

Metaphors 隱喻：當(dāng)一個(gè) APP 的虛擬對象和操作路徑與用戶本身所熟悉的心智模型一致時(shí)，不管它是來自于真實(shí)世界還是數(shù)字世界，用戶都能很快上手。隱喻之所以有效果，是因?yàn)橛脩艉推聊淮嬖谖锢砩系慕换?。用戶可以通過移動(dòng)分層視圖來顯示手機(jī)上被遮擋的內(nèi)容；拽拖并且滑動(dòng)對象，切換開關(guān)，移動(dòng)滑塊，滾動(dòng)數(shù)值選擇器，用戶甚至可以通過翻轉(zhuǎn)手勢來翻閱手機(jī)上的雜志和文章。

User Control 用戶控制：在 iOS 系統(tǒng)中，用戶是主導(dǎo)者，而不是 APP。APP 可以提供行動(dòng)建議，給予警告提示，但是不應(yīng)該替用戶做選擇。優(yōu)秀的 APP 始終會(huì)在用戶主導(dǎo)和用戶不想要出現(xiàn)的結(jié)果中保持平衡。一個(gè) APP 應(yīng)該始終讓用戶感知到在他的掌控之中。交互的元素給用戶熟悉感并且可預(yù)期；對有破壞性的操作可確認(rèn)；對錯(cuò)誤操作可取消，即使是在進(jìn)行中的行為也可中斷。

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

3. Airbnb DLS

在 2016 年，由工程師和設(shè)計(jì)師組成的團(tuán)隊(duì)創(chuàng)建了 Airbnb 的設(shè)計(jì)語言系統(tǒng) （DLS）的第一個(gè)版本，其目標(biāo)是創(chuàng)建一致的體驗(yàn)和跨平臺(tái)的統(tǒng)一。DLS 包含了一套內(nèi)部和第三方工具，由共享原則和模式定義的組件的集合。這允許使用跨設(shè)計(jì)、工程和其他學(xué)科的共享詞匯表進(jìn)行快速迭代。DLS 的結(jié)構(gòu)簡單而連貫，簡化了團(tuán)隊(duì)之間的溝通。并制定了以下幾條原則來指導(dǎo) DLS 的設(shè)計(jì)：

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

ADS 開源庫

Airbnb 設(shè)計(jì)副總裁 Alex Schleifer 在 IXDC 2017 國際體驗(yàn)設(shè)計(jì)大會(huì)上分享了這一創(chuàng)新的 React Sketch APP 管理設(shè)計(jì)系統(tǒng)，這是為 Airbnb 的設(shè)計(jì)系統(tǒng)而設(shè)計(jì)的，其實(shí)就是個(gè)實(shí)時(shí)更新的代碼數(shù)據(jù)庫，可以實(shí)時(shí)查詢 Sketch 數(shù)據(jù)和代碼，也可以下載圖標(biāo)、設(shè)計(jì)模塊，所有工程師和設(shè)計(jì)師都可以免費(fèi)下載?？吹竭@個(gè)，我想完美共享庫也許并不是那么的遙遠(yuǎn)。

Airbnb 團(tuán)隊(duì)在設(shè)計(jì) DLS 過程中，也是通過原子組件的方式來構(gòu)建整個(gè)框架，我覺得他們對于設(shè)計(jì)系統(tǒng)的理解非常對：「一個(gè)統(tǒng)一的設(shè)計(jì)語言不應(yīng)該只是一組靜態(tài)的規(guī)則和原子組件構(gòu)成，它應(yīng)該是一個(gè)可持續(xù)發(fā)展的系統(tǒng)。」所以在構(gòu)建好底層的設(shè)計(jì)語言之后，可持續(xù)性、可發(fā)展性，是維護(hù)并讓設(shè)計(jì)系統(tǒng)產(chǎn)生價(jià)值的重點(diǎn)。

4. Ant Design

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

設(shè)計(jì)價(jià)值觀

自然，讓人機(jī)交互行為更自然。

自然規(guī)律運(yùn)用到設(shè)計(jì)中，自然界的方方面面都會(huì)對用戶行為產(chǎn)生深遠(yuǎn)影響，設(shè)計(jì)者應(yīng)該從其中汲取靈感，并運(yùn)用到當(dāng)下的設(shè)計(jì)工作中。螞蟻金服已做了部分探索，并將追求「自然」作為未來持之以恒的方向。

自然的人機(jī)交互核心：節(jié)能。既要節(jié)省身體運(yùn)動(dòng)的體力，更要節(jié)省大腦思考的腦力。

那么如何在設(shè)計(jì)中體現(xiàn)呢？

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

確定，保持克制、對象設(shè)計(jì)方法、模塊化。

設(shè)計(jì)者需要做出更好的設(shè)計(jì)決策，給予研發(fā)團(tuán)隊(duì)一種高確定性、低熵值的研發(fā)狀態(tài)。同時(shí)，不同設(shè)計(jì)者在充分理解業(yè)務(wù)訴求后，基于 Ant Design 體系都會(huì)有相同且符合當(dāng)前業(yè)務(wù)特性的設(shè)計(jì)產(chǎn)出。

給予用戶確定感，結(jié)合 Ant Design 的三個(gè)關(guān)鍵點(diǎn)，可以總結(jié)為邊界和規(guī)則 2 個(gè)方面：

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

構(gòu)建米莊設(shè)計(jì)系統(tǒng)的目標(biāo)是什么？

構(gòu)建米莊設(shè)計(jì)系統(tǒng)的目標(biāo)是什么？

• 輕量
• 一致

意義

有了規(guī)范和控件庫，設(shè)計(jì)師在接受需求的時(shí)候，可以減少設(shè)計(jì)成本，提高設(shè)計(jì)效率，尤其是在用于快速迭代產(chǎn)品的階段，通過大量的標(biāo)準(zhǔn)化組件即可實(shí)現(xiàn)縮短設(shè)計(jì)周期的效果，并且設(shè)計(jì)師可以更專注于深耕體驗(yàn)和細(xì)節(jié)，同時(shí)能保證高質(zhì)量的輸出。

構(gòu)建一個(gè)設(shè)計(jì)系統(tǒng)來支撐產(chǎn)品的所有業(yè)務(wù)線，解決團(tuán)隊(duì)協(xié)作一致性問題，產(chǎn)品的周期性更新問題，解決不同的設(shè)計(jì)師和工程師規(guī)范性輸出 UI 的問題，最終從設(shè)計(jì)驅(qū)動(dòng)商業(yè)的層面上，解決用戶體驗(yàn)一致性，迭代開發(fā)的問題。

如何來構(gòu)建設(shè)計(jì)系統(tǒng)？

1. 項(xiàng)目啟動(dòng)基礎(chǔ)三要素

時(shí)間

APP 進(jìn)入穩(wěn)定發(fā)展階段，也完成了基礎(chǔ)功能的開發(fā)，在業(yè)務(wù)穩(wěn)定發(fā)展的前提下，構(gòu)建已有 APP 的整體框架，規(guī)范前端開發(fā)和設(shè)計(jì)流程是個(gè)好時(shí)機(jī)。在產(chǎn)品發(fā)展到穩(wěn)定階段、參與的人越來越多時(shí)，對整個(gè) APP 的頁面整理是非常有必要的。也為了后續(xù)快速發(fā)展的業(yè)務(wù)起到完整系統(tǒng)地支撐能力。

人力

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

場景

所以在項(xiàng)目開始之前，便需要和整個(gè)團(tuán)隊(duì)統(tǒng)一目標(biāo)意義：視覺規(guī)范的建立，除了保障統(tǒng)一的用戶體驗(yàn)和認(rèn)知，還能夠通過工程師代碼層面的組件化提高開發(fā)、設(shè)計(jì)效率。整個(gè)設(shè)計(jì)系統(tǒng)的開發(fā)，從設(shè)計(jì)到落地，需要產(chǎn)品、設(shè)計(jì)和前端的全力支持。

2. 項(xiàng)目啟動(dòng)基礎(chǔ)框架

雞生蛋問題

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

原子理論

在學(xué)習(xí)其他公司如何搭建設(shè)計(jì)系統(tǒng)的時(shí)候，我們了解到了 Brad Frost 的原子設(shè)計(jì)理論。他提出了原子設(shè)計(jì)原則，并且在他的文章中有一句非常出名的引用：

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

概念

2013 年網(wǎng)頁設(shè)計(jì)師 Brad Frost 從化學(xué)中受到啟發(fā)：原子（Atoms）結(jié)合在一起，形成分子（Molecures），進(jìn)一步結(jié)合形成了生物體（Organisms）。于是提出了原子設(shè)計(jì)方法論，由原子、分子、組織、模板和頁面共同協(xié)作以創(chuàng)造出更有效的用戶界面系統(tǒng)的一種設(shè)計(jì)方法。

原子設(shè)計(jì)的五個(gè)階段

原子（Atoms）：符號(hào)，為頁面構(gòu)成的基本元素。例如顏色、字體，或是一個(gè)圖標(biāo)等。

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

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

模板（Templates）：原型，將以上元素進(jìn)行排版，顯示設(shè)計(jì)的底層內(nèi)容結(jié)構(gòu)，在 UI 設(shè)計(jì)中對應(yīng)的是原型圖層級(jí)。

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

特點(diǎn)：

• 一致：組件可復(fù)用性高，減少重復(fù)設(shè)計(jì)開發(fā)成本，體現(xiàn)一致性原則。
• 清晰：原子理論提出來的層級(jí)結(jié)構(gòu)偏向于結(jié)構(gòu)思維，層層遞進(jìn)，邏輯清晰，使構(gòu)建的所有頁面形成一個(gè)系統(tǒng)。
• 效率：系統(tǒng)化的構(gòu)建方式，易于拓展和維護(hù)，不僅方便設(shè)計(jì)師思考頁面的和諧性，也可以讓工程師、品質(zhì)檢驗(yàn)清楚頁面的邏輯架構(gòu)及變化，降低溝通成本。

從 Brad Frost 的原子設(shè)計(jì)理論得到啟發(fā)，將我們 APP 產(chǎn)品的所有頁面都整理了出來，我們歸納出了組成這些頁面的常用組件。這個(gè)詳盡的庫幫助我們以一種更合理的方式構(gòu)建了一個(gè)設(shè)計(jì)系統(tǒng)的底層框架。

這個(gè)理論提出來以后就產(chǎn)生了非常大的轟動(dòng)。并且至此以后 Atomic Design（原子設(shè)計(jì)）成為了構(gòu)建 Design System 的核心指導(dǎo)理論。

Sketch工具

Brad Frost 在 2014 年提出來：「使用 Sketch 的 Atomic Design 是產(chǎn)品設(shè)計(jì)的未來?！刮覀兛梢允褂?Sketch Library 功能實(shí)現(xiàn)組件庫的創(chuàng)建。而組件庫的底層邏輯就是原子設(shè)計(jì)理論。Sketch 中的 symbols、textstyles、color styles、Layer style ，來構(gòu)建組件和樣式。

Text style：Text Style 用于設(shè)置文字規(guī)范，在一個(gè)系統(tǒng)中包含大量的文本樣式，并且擁有不同的文本屬性。使用字體樣式來管理一個(gè)系統(tǒng)中的字體樣式，可使之便于管理和修改，保持系統(tǒng)的可持續(xù)性和可用性。并且可單獨(dú)輸出字體樣式系統(tǒng)進(jìn)行團(tuán)隊(duì)之間，不同項(xiàng)目之間的共享。

Layer Style：可編輯元素的各種樣式，比如用于制作顏色規(guī)范，涵蓋填充顏色、描邊顏色、內(nèi)外陰影、模糊效果等內(nèi)容。可使元素保持一致的圖層樣式。

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

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

3. 實(shí)施項(xiàng)目計(jì)劃

在確定了原則和工具之后，我們?yōu)樵O(shè)計(jì)系統(tǒng)項(xiàng)目制定了完整的項(xiàng)目計(jì)劃，因?yàn)樯婕暗缴暇€和設(shè)計(jì)兩大塊，所以項(xiàng)目也是分設(shè)計(jì)線和落地線，兩條線既有關(guān)聯(lián)性，又是相對獨(dú)立和分離的。組件設(shè)計(jì)完成以后才可上線落地，因推動(dòng)落地的過程是需要整個(gè)設(shè)計(jì)開發(fā)團(tuán)隊(duì)的，不管是從時(shí)間還是人力上的資源協(xié)調(diào)和配合，所以落地線需要更加靈活。

設(shè)計(jì)階段 – 設(shè)計(jì)線

目標(biāo)結(jié)果 – 設(shè)計(jì)資產(chǎn)

設(shè)計(jì)階段，我們所產(chǎn)出的設(shè)計(jì)資產(chǎn)包括設(shè)計(jì)價(jià)值觀，設(shè)計(jì)指導(dǎo)原則，以及設(shè)計(jì)模式（解決方案）。

展開實(shí)施 – 任務(wù)細(xì)分

確定了設(shè)計(jì)資產(chǎn)以后，我們將設(shè)計(jì)資產(chǎn)進(jìn)行細(xì)分。整理規(guī)范的內(nèi)容并對每個(gè)組件進(jìn)行優(yōu)先級(jí)的確定。整理規(guī)范內(nèi)容的過程也是一個(gè)逐漸完善的過程，第一次整理可能并不完善，但是沒有關(guān)系，先把基礎(chǔ)框架和內(nèi)容整理好，后續(xù)在設(shè)計(jì)過程中有遺漏的再進(jìn)行添加。

內(nèi)容整理好以后，我們會(huì)發(fā)現(xiàn)一套規(guī)范里內(nèi)容非常多，所以需要根據(jù)項(xiàng)目時(shí)間來安排所有內(nèi)容的優(yōu)先級(jí)和分工。根據(jù)我們的設(shè)計(jì)系統(tǒng)的底層邏輯，所以我們將核心組件建設(shè)放在第一階段，比如字體、顏色、icon 等。構(gòu)建了基礎(chǔ)元件以后再來搭建模塊，最后再根據(jù)不同場景來確定樣式。至于分工，最好整個(gè)設(shè)計(jì)團(tuán)隊(duì)的人員都可參與，互相分擔(dān)工作量以達(dá)到工作效率最大化。

整體內(nèi)容確定以后，因每個(gè)組件的整理有規(guī)范可循，所以我們針對每個(gè)組件的設(shè)計(jì)過程也確定了單個(gè)組件的設(shè)計(jì)流程。

過程跟進(jìn) – 關(guān)鍵節(jié)點(diǎn)

在設(shè)計(jì)過程中，我們也需要對關(guān)鍵時(shí)間節(jié)點(diǎn)的項(xiàng)目整體進(jìn)程和結(jié)果輸出總結(jié)。此階段是和上線的項(xiàng)目節(jié)點(diǎn)重合的關(guān)鍵點(diǎn)，設(shè)計(jì)輸出的內(nèi)容會(huì)和上線過程有非常多的磨合，一個(gè)組件的落地還需要不停的和開發(fā)溝通，收集反饋意見，并且進(jìn)行調(diào)整修改，記錄解決問題。

執(zhí)行復(fù)盤 – 結(jié)果驗(yàn)證

在每個(gè)組件的設(shè)計(jì)過程中，我們都會(huì)反復(fù)完善每個(gè)組件的內(nèi)容，包括設(shè)計(jì)原則、交互細(xì)節(jié)以及應(yīng)用場景等。反復(fù)去驗(yàn)證組件的可行性。并且對階段性完成的設(shè)計(jì)結(jié)果進(jìn)行復(fù)盤和分享，進(jìn)一步來驗(yàn)證設(shè)計(jì)方案的可行性。規(guī)范需要不停地優(yōu)化創(chuàng)新，才能讓它的可持續(xù)性特性發(fā)揮至最大。

上線階段 – 落地線

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

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

愿望如此之美好，現(xiàn)實(shí)如此之貧瘠。

設(shè)計(jì)從落地到上線的過程想必每個(gè)設(shè)計(jì)師都有大把心得。在公司中實(shí)際的推進(jìn)是非常難的，因?yàn)楫a(chǎn)品需求永遠(yuǎn)都做不完，開發(fā)永遠(yuǎn)在寫代碼，設(shè)計(jì)永遠(yuǎn)需要將先完成業(yè)務(wù)需求設(shè)計(jì)為前提。所以如何將設(shè)計(jì)規(guī)范的內(nèi)容插進(jìn)項(xiàng)目中是個(gè)最關(guān)鍵的點(diǎn)。

存在問題，根據(jù)項(xiàng)目的時(shí)間安排和產(chǎn)品迭代安排，我們試圖將不同優(yōu)先級(jí)組件的內(nèi)容分配到不同的產(chǎn)品迭代中。實(shí)際卻證明這非常的理想化。在這個(gè)過程中我們遇到非常多的問題：

• 沒資源：產(chǎn)品的功能需求非常多，項(xiàng)目那么多，開發(fā)根本沒有時(shí)間來做視覺規(guī)范的內(nèi)容。
• 風(fēng)險(xiǎn)大：即使只是修改一兩個(gè)組件的內(nèi)容，在開發(fā)過程中卻涉及到幾十個(gè)頁面的修改，導(dǎo)致整個(gè) APP 的不穩(wěn)定性以及每次修改都會(huì)涉及到巨大且重復(fù)的測試資源。
• 感知弱：組件開發(fā)完成上線以后，不像頁面，新功能等可明顯讓大家感知到它的變化，規(guī)范性的內(nèi)容都是系統(tǒng)性的量變和體驗(yàn)上的感知，單點(diǎn)的結(jié)果成就感是比較低的。

解決方案：

APP 在建立的時(shí)候沒有規(guī)范性，所以現(xiàn)在想要規(guī)范所有的內(nèi)容就是一個(gè)非常巨大的工程。就像沒辦法一口吃掉一整塊蛋糕一樣。

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

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

如何驅(qū)動(dòng)業(yè)務(wù)

MIZ Design 的設(shè)計(jì)資產(chǎn)中設(shè)計(jì)價(jià)值觀是貫徹整個(gè)產(chǎn)品的迭代發(fā)展，是產(chǎn)品持續(xù)迭代的指明燈。設(shè)計(jì)原則是團(tuán)隊(duì)成員建立設(shè)計(jì)的標(biāo)準(zhǔn)指導(dǎo)規(guī)范；設(shè)計(jì)資源庫貫徹設(shè)計(jì)師、開發(fā)和產(chǎn)品，實(shí)現(xiàn)產(chǎn)品迭代。我們也非常愿意分享這個(gè)過程，希望對大家建立設(shè)計(jì)規(guī)范整個(gè)流程有所幫助。

1. 設(shè)計(jì)價(jià)值觀 – 指導(dǎo)設(shè)計(jì)

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

當(dāng)你認(rèn)清自己的價(jià)值觀和行為準(zhǔn)則后，決策就輕而易舉了。價(jià)值觀是指明燈，貫徹整個(gè)產(chǎn)品系統(tǒng)。我們根據(jù)米莊品牌的特性，以及業(yè)務(wù)場景的需求來定義 APP 的設(shè)計(jì)價(jià)值觀，指導(dǎo) MIZ Design 的設(shè)計(jì)語言的建立。

品牌特性

米莊的品牌理念在于科技金融，小額惠普，以簡單可靠的價(jià)值觀來驅(qū)動(dòng)業(yè)務(wù)增長。

業(yè)務(wù)場景

米莊作為金融工具類產(chǎn)品，功能操作場景不算復(fù)雜，強(qiáng)調(diào)一致性的用戶體驗(yàn)和安全規(guī)律的操作路徑。這也體現(xiàn)了產(chǎn)品對于不同頁面元素之間的相互關(guān)聯(lián)性和一致專業(yè)性的要求。

用戶調(diào)研

結(jié)合我們進(jìn)行的用戶調(diào)研報(bào)告，米莊產(chǎn)品的核心用戶對我們產(chǎn)品的需求是賺取零花錢居多，也就是利益的獲取。所以針對明確的用戶目標(biāo)，我們對于整個(gè)產(chǎn)品的設(shè)計(jì)需要以產(chǎn)品可操作性、性為第一原則，呈現(xiàn)的視覺層以安全可靠，清晰明確為風(fēng)格導(dǎo)向。

從以上三個(gè)方向，我們概括了設(shè)計(jì)價(jià)值觀核心的三點(diǎn)：

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

2. 設(shè)計(jì)原則 – 規(guī)范邊界

格式塔心理學(xué)

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

MIZ Design 的設(shè)計(jì)原則參考了格式塔心理學(xué)，取人和萬物交流的過程中，大腦最基礎(chǔ)的一些精神反射和行為操作，格式塔心理學(xué)的理論主張研究意識(shí)和行為，強(qiáng)調(diào)經(jīng)驗(yàn)和行為的整體性，這也符合了米莊的設(shè)計(jì)價(jià)值觀里關(guān)于效率和自然的定義。所以我們參考此心理學(xué)來幫助團(tuán)隊(duì)順暢地溝通，減少信息不對稱以及學(xué)習(xí)成本，作為協(xié)作的基礎(chǔ)。

第一性原理

• 找到一個(gè)簡單的、基本的道理；
• 非常嚴(yán)格地按照這個(gè)道理行事。

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

奧卡姆剃刀原理

Entities should not be multiplied unnecessarily.

如無必要，勿增實(shí)體。

• 簡化組織結(jié)構(gòu)
• 關(guān)注核心價(jià)值

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

3. 設(shè)計(jì)資產(chǎn) – 業(yè)務(wù)賦能

設(shè)計(jì)資產(chǎn)層面，我們輸出的內(nèi)容包含了以下兩大部分：

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

MIZ UI KIT_3.0 LIBRARY：

• 字體系統(tǒng)
• 調(diào)色板1.0
• 組件庫
• 樣式庫

MIZ UI KIT 說明文檔：

• 組件說明文檔
• 設(shè)計(jì)過程說明文檔

開發(fā)層面 – 溝通，減少重復(fù)

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

無名萬物之始，有名萬物之母。──《道德經(jīng)》

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

場景：

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

設(shè)計(jì)師：#000，替換成 black-1

開發(fā)：那#00000000呢？

設(shè)計(jì)師：一臉茫然，這 2 個(gè)不是一個(gè)顏色嗎？

慣性思維，色值在設(shè)計(jì)師眼中，對應(yīng)的是一種色彩，而在開發(fā)眼中只是一堆數(shù)字。將心比心，當(dāng)你扔給開發(fā)一個(gè)色值的時(shí)候他們只是一個(gè)難過的問號(hào)；而當(dāng)你給他們具體的一個(gè)顏色的名字，他們能馬上對應(yīng)到這個(gè)名字，那么就是順暢的。

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

設(shè)計(jì)師：#ff5600 換成 orange-2。

開發(fā)：好的。修改完成。

設(shè)計(jì)師：#ff3450 全部替換成 blue-2。

開發(fā)：好的，替換完成。

設(shè)計(jì)師：這次我們品牌升級(jí)，orange-2 的色值更改為 #ff5666。

開發(fā)：好的。全局修改完成。

雖然修改的過程比較辛苦，但是結(jié)果是好的。從此設(shè)計(jì)師掌握了話語權(quán)。當(dāng)然，開發(fā)也很高興。

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

設(shè)計(jì)層面 – 輸出，快樂傳承

設(shè)計(jì)師們可以更加便捷地創(chuàng)建、分享、定義設(shè)計(jì)界面的內(nèi)容。此外，在設(shè)計(jì)傳承方面，也能讓我們更好地將設(shè)計(jì)原則傳遞給新人。

場景：

設(shè)計(jì)師 a：此次版本迭代涉及到優(yōu)惠券頁面的優(yōu)惠，這個(gè)頁面的字體和顏色有規(guī)范嗎？

設(shè)計(jì)師 b：有的。請參照設(shè)計(jì)規(guī)范。

不同設(shè)計(jì)師在接到需求開始設(shè)計(jì)以后會(huì)擔(dān)心：怕風(fēng)格有差別，怕頁面不統(tǒng)一。辛苦做好頁面以后發(fā)現(xiàn)和別的設(shè)計(jì)師同時(shí)做的差別很大，也不符合產(chǎn)品整體品牌調(diào)性，陷入循環(huán)改稿中。此時(shí)設(shè)計(jì)規(guī)范就是迭代的明燈，天上的北斗七星，指引方向讓你不偏離終點(diǎn)。

同步更新：設(shè)計(jì)資產(chǎn)的目標(biāo)用戶，除了團(tuán)隊(duì)中的前端開發(fā)，那么最大受益者其實(shí)就是設(shè)計(jì)師們。設(shè)計(jì)系統(tǒng)的一大優(yōu)點(diǎn)便是修改設(shè)計(jì)系統(tǒng)中任何一個(gè)原子，整個(gè)系統(tǒng)所有這個(gè)原子都能感知到。這便是設(shè)計(jì)系統(tǒng)的可持續(xù)性、統(tǒng)一性，也是設(shè)計(jì)系統(tǒng)的基礎(chǔ)。

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

自定義內(nèi)容：組件中的內(nèi)容都可自定義進(jìn)行修改。

解放重復(fù)生產(chǎn)力

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

這句話的道理和我們的設(shè)計(jì)原則中第一性原理相通，從原理出發(fā)，一步步往前推演，直到找出適合該問題的解決方法。這和在構(gòu)建設(shè)計(jì)系統(tǒng)的時(shí)候是一個(gè)道理。學(xué)習(xí)從元認(rèn)知能力開始，而組件一個(gè)系統(tǒng)，從元件開始。埃隆·馬斯克從組成汽車的發(fā)電機(jī)開始思考，創(chuàng)辦了特斯拉；從底層元素的創(chuàng)新開始，才會(huì)有產(chǎn)品整體性的創(chuàng)新。

最后補(bǔ)充一下結(jié)構(gòu)圖：

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。