編輯導(dǎo)讀：原子設(shè)計(jì)是一種方法論，由原子、分子、組織、模板和頁(yè)面共同協(xié)作以創(chuàng)造出更有效的用戶界面系統(tǒng)的一種設(shè)計(jì)方法。本文作者圍繞原子設(shè)計(jì)，展開(kāi)了五個(gè)維度的分析，希望對(duì)你有幫助。

自決定以寫作的方式來(lái)分享設(shè)計(jì)經(jīng)驗(yàn)后，我陸續(xù)發(fā)表了一些設(shè)計(jì)提效類的知識(shí)。但遺憾的是大部分局限在“器”、“術(shù)”的范圍中，“道”、“法”這類更高緯度的方法很少提及。直到我接觸到了原子設(shè)計(jì)，在實(shí)際了解并運(yùn)用之后，我驚喜得發(fā)現(xiàn)，它對(duì)一次性設(shè)計(jì)的解決力度近乎完美。

什么是一次性設(shè)計(jì)？

一次性設(shè)計(jì)就是，我今天投入成本完成了一個(gè)界面或者營(yíng)銷需求，但也只是完成了這個(gè)需求而已，今后再碰到類似的需求依然吃癟，還得重新投入一輪成本。這種設(shè)計(jì)就好像一次性的碗筷，用后即扔，非常非常得低效，它不僅沒(méi)有辦法復(fù)用，而且無(wú)體系、非模塊的處理方式非常摧殘?jiān)O(shè)計(jì)師的精力。這是導(dǎo)致很多朋友淪為作圖機(jī)器的罪魁禍?zhǔn)字弧?/p>

原子設(shè)計(jì)這門學(xué)問(wèn)覆蓋面極為龐大，我不想用一篇沒(méi)營(yíng)養(yǎng)的文章草草了事，那樣對(duì)自己、對(duì)大家都沒(méi)什么實(shí)際意義上的幫助。目前的計(jì)劃是將它分為幾類。今天先主要搬出理論，后續(xù)的實(shí)踐我會(huì)結(jié)合實(shí)際案例來(lái)進(jìn)行分享！

01 從原子到萬(wàn)物

當(dāng)存在兩個(gè)氫原子和一個(gè)氧原子時(shí)，它們通過(guò)共價(jià)鍵便構(gòu)成了一個(gè)水分子H2O。而如果這個(gè)水分子數(shù)量達(dá)到1.67×10^21個(gè)時(shí)，則構(gòu)成了一滴水滴。

世界一切萬(wàn)物都如此構(gòu)成。原子組成分子，分子組成有機(jī)物，有機(jī)物構(gòu)成生命。

網(wǎng)頁(yè)設(shè)計(jì)師Brad Frost由此獲取到了靈感，既然萬(wàn)物都是由化學(xué)元素周期表的原子們構(gòu)成，那么我們?cè)O(shè)計(jì)的網(wǎng)頁(yè)呢？

Brad在2013年基于化學(xué)領(lǐng)域的原子理論，結(jié)合設(shè)計(jì)領(lǐng)域的知識(shí)創(chuàng)建了一套非常非常經(jīng)典的學(xué)說(shuō)。它就是原子設(shè)計(jì)（Atomic Design）。

1. 原子設(shè)計(jì)

Brad列出了五點(diǎn)層級(jí)來(lái)作為這套理論的核心支撐：

1. Atoms原子
2. Molecules分子
3. Organisms有機(jī)體（組織）
4. Templates模板
5. Pages頁(yè)面

1）原子

原子是構(gòu)成設(shè)計(jì)所有元素的最小單元。比如顏色、文字、輸入框、圖標(biāo)等等，它們?cè)诮缑嬖O(shè)計(jì)這個(gè)維度上都沒(méi)辦法細(xì)分的，并且本身不具備獨(dú)有的功能。我們?cè)诮缑嬷锌梢噪S意改變顏色、或者輸入框的尺寸，但對(duì)于整體不會(huì)產(chǎn)生任何的影響。

2）分子

按鈕或者顏色本身并不會(huì)產(chǎn)生任何作用，但是當(dāng)原子按照某種既定規(guī)律進(jìn)行組合之后就可以成為一個(gè)組件，從而被賦予了獨(dú)有的功能。比如搜索框、表單、日期選擇器、反饋類組件等等。這些分子都是由文字、圖標(biāo)、輸入框等原子構(gòu)成而來(lái)的。

3）有機(jī)體（組織）

Organisms翻譯過(guò)來(lái)是有機(jī)體，不過(guò)這里參考了其他前輩的翻譯，將其翻譯為組織能夠更好得幫助理解。

組織映射到界面設(shè)計(jì)中其實(shí)就是由多個(gè)分子、原子構(gòu)成的模塊。比如承載各類信息的卡片、列表等等。

4）模板

模板層面基本就和產(chǎn)品掛鉤了。以上的三個(gè)層面僅僅屬于相互割裂的個(gè)體，它們不足以支撐一個(gè)頁(yè)面。但是當(dāng)我們基于產(chǎn)品及用戶的需求，將多個(gè)有機(jī)體進(jìn)行恰當(dāng)?shù)慕M合形成“模板”后，產(chǎn)品便開(kāi)始有了雛形。而這個(gè)模板就是交互設(shè)計(jì)師所繪制的原型圖。

從用戶體驗(yàn)五要素上來(lái)說(shuō)，它屬于框架層。模板所存在的意義就是幫助設(shè)計(jì)師專注在功能、內(nèi)容的布局排版，搭建一個(gè)抽象化的產(chǎn)品模型為最后一步做鋪墊。

5）界面

界面即我們最終需要產(chǎn)出的高保真視覺(jué)稿，它是對(duì)模板具象化的結(jié)果，對(duì)應(yīng)著體驗(yàn)五要素中的表現(xiàn)層。

一方面設(shè)計(jì)師使用真實(shí)圖片、文案代替了模板中的占位符，另一方面通過(guò)各類合理的視覺(jué)表達(dá)來(lái)高效得為用戶傳達(dá)信息或者調(diào)性。這一步在拋開(kāi)視覺(jué)還原度的條件下基本就算是產(chǎn)品的最終形態(tài)了。

而下面我講的原子設(shè)計(jì)系統(tǒng)便是基于這個(gè)方法論而構(gòu)建，它貫穿了我們所有的設(shè)計(jì)過(guò)程以及后續(xù)的產(chǎn)品迭代。

02 軟件危機(jī)

在講解原子設(shè)計(jì)系統(tǒng)之前，我先為各位講一個(gè)互聯(lián)網(wǎng)歷史中真實(shí)存在的一個(gè)事件——軟件危機(jī)（Software crisis）。

20世紀(jì)60年代，計(jì)算機(jī)的發(fā)展速度遠(yuǎn)遠(yuǎn)超過(guò)了軟件研發(fā)的速度。可是當(dāng)時(shí)的匯編語(yǔ)言是面向機(jī)器的，開(kāi)發(fā)們只能針對(duì)特定的計(jì)算機(jī)編寫，導(dǎo)致代碼沒(méi)辦法復(fù)用，也極難維護(hù)。

這就好比我希望你能夠?yàn)槲业能婈?duì)量產(chǎn)罐頭，但是你卻只能精雕細(xì)琢一款米其林三星的法式鵝肝。這跟當(dāng)時(shí)規(guī)模化生產(chǎn)的市場(chǎng)需求完全是背道而馳的。

這一連串的問(wèn)題在1968年的NATO軟件工程會(huì)議上被首次定義為軟件危機(jī)。在會(huì)議中，Douglas McIlroy提出了組件式開(kāi)發(fā)的概念及解決思路，旨在解決代碼低效無(wú)法擴(kuò)展復(fù)用的弊病。這個(gè)超前的思路可謂是天降甘霖一般，在當(dāng)時(shí)促成一大批優(yōu)秀語(yǔ)言的誕生（我們當(dāng)年的C語(yǔ)言就是在這個(gè)背景下橫空出世的），幫助開(kāi)發(fā)將代碼復(fù)用到各個(gè)場(chǎng)景，極大幅得提升了開(kāi)發(fā)的效率！

而在半個(gè)世紀(jì)后的今天，我們的設(shè)計(jì)領(lǐng)域出現(xiàn)了同樣的問(wèn)題——

1. 設(shè)計(jì)不統(tǒng)一

很多頁(yè)面曾使用了相似的顏色、組件，而不是固定的一個(gè)，如今而它們散落在各個(gè)項(xiàng)目的設(shè)計(jì)稿中，變得難以管理和維護(hù)。

2. 設(shè)計(jì)低效

由于沒(méi)有一套提前搭建好的系統(tǒng)，導(dǎo)致每次進(jìn)行新的需求時(shí)都難以復(fù)用之前的東西。而且在進(jìn)行不同尺寸的響應(yīng)式適配時(shí)需要耗費(fèi)大量的精力進(jìn)行組件的更改。有時(shí)候甚至為減少工作量直接讓開(kāi)發(fā)按原型圖進(jìn)行布局，最后再進(jìn)行把關(guān)。

3. 多設(shè)計(jì)師問(wèn)題

公司存在多位設(shè)計(jì)師時(shí)，通常是每個(gè)設(shè)計(jì)師單獨(dú)負(fù)責(zé)一部分業(yè)務(wù)，但是由于沒(méi)有一套約定俗成的規(guī)則進(jìn)行約束，導(dǎo)致每個(gè)設(shè)計(jì)師的產(chǎn)出物不像來(lái)自一個(gè)產(chǎn)品。

4. 開(kāi)發(fā)低效

開(kāi)發(fā)的低效來(lái)源于設(shè)計(jì)的隨意。每次一有新的樣式或組件都得重寫一套，無(wú)法直接復(fù)用之前已有的東西，導(dǎo)致了大量無(wú)意義的重復(fù)勞動(dòng)。

我們的設(shè)計(jì)方式僅僅局限在解決單一問(wèn)題的場(chǎng)景中，而忽略了更多未來(lái)將會(huì)出現(xiàn)的更多業(yè)務(wù)。導(dǎo)致我們的設(shè)計(jì)不成體系，無(wú)法模塊化和規(guī)模化。這些設(shè)計(jì)產(chǎn)物即我開(kāi)頭所講的“一次性設(shè)計(jì)”。

而且，有時(shí)候設(shè)計(jì)師花費(fèi)大量時(shí)間產(chǎn)出設(shè)計(jì)稿的功夫，開(kāi)發(fā)可能早就使用第三方組件搭建出一個(gè)模板了。

我們一直在說(shuō)設(shè)計(jì)師和開(kāi)發(fā)之間仿佛有一道看不見(jiàn)的墻，那道墻一半是語(yǔ)言，一半則是組件化思維。

而將組件化思維踐行到我們?cè)O(shè)計(jì)領(lǐng)域中的便是原子設(shè)計(jì)系統(tǒng)，它基于原子設(shè)計(jì)方法論，將原子、分子、有機(jī)體作為一個(gè)個(gè)可復(fù)用的組件進(jìn)行有序得拼裝，來(lái)幫助設(shè)計(jì)師快速得搭建產(chǎn)品，大幅提升生產(chǎn)效率。

03 原子設(shè)計(jì)系統(tǒng)的優(yōu)勢(shì)

1. 一致性

首先，原子設(shè)計(jì)系統(tǒng)相當(dāng)于為設(shè)計(jì)師制定了一套標(biāo)準(zhǔn)化的規(guī)則。所有的設(shè)計(jì)工作全部基于這個(gè)規(guī)則展開(kāi)，這也就基本完全避免了多需求、多設(shè)計(jì)師協(xié)作時(shí)產(chǎn)生的不一致的問(wèn)題。最后的產(chǎn)品也可以帶來(lái)更加一致的體驗(yàn)。

2. 效率

不像一次性設(shè)計(jì)那樣，原子設(shè)計(jì)系統(tǒng)中的樣式及組件本身可以無(wú)限復(fù)用，在設(shè)計(jì)師接收新的需求、項(xiàng)目時(shí)只需要直接調(diào)用即可迅速得搭建好模板，再進(jìn)行視覺(jué)的填充即可，節(jié)省了大量重復(fù)的設(shè)計(jì)工作。并且這個(gè)良好的習(xí)慣也可以避免過(guò)多無(wú)法復(fù)用的設(shè)計(jì)影響到下游開(kāi)發(fā)的效率，避免重復(fù)造輪子。也降低了不必要的溝通成本。

3. 易于擴(kuò)展維護(hù)

當(dāng)后期產(chǎn)品優(yōu)化迭代時(shí)，我們僅需要在系統(tǒng)中改動(dòng)原子、分子或者有機(jī)體的屬性即可實(shí)現(xiàn)全局同步更新，非常易于擴(kuò)展維護(hù)。

04 大廠們的原子設(shè)計(jì)系統(tǒng)

在相當(dāng)長(zhǎng)的一段時(shí)間內(nèi)，混亂和無(wú)序是Android在界面設(shè)計(jì)中的代名詞，當(dāng)時(shí)由工程師為主導(dǎo)的Android可謂是一片無(wú)人管理的荒野，任何人都可以在上面建造自己想要的東西。直到2014年，Google I/O大會(huì)上發(fā)布了Material Design，這成為了Google真正意義上的首次設(shè)計(jì)革命。

如果說(shuō)誰(shuí)是原子設(shè)計(jì)系統(tǒng)最偉大、最經(jīng)典的先行者，那么Material Design當(dāng)之無(wú)愧。它不僅僅為開(kāi)發(fā)者和設(shè)計(jì)師提供了一整套組件庫(kù)，還制定了Material Design獨(dú)有的設(shè)計(jì)原則和設(shè)計(jì)語(yǔ)言，形成了一塊相當(dāng)龐大而有序的設(shè)計(jì)體系。

而2016年由螞蟻金服團(tuán)隊(duì)所發(fā)布的Antdesign，則是國(guó)內(nèi)使用原子設(shè)計(jì)而搭建的首個(gè)設(shè)計(jì)系統(tǒng)。它最大的亮點(diǎn)應(yīng)該是詳盡提供了開(kāi)箱即用的組件框架，并且覆蓋了絕大部分的應(yīng)用場(chǎng)景。對(duì)于當(dāng)時(shí)中后臺(tái)設(shè)計(jì)慘不忍睹沒(méi)眼看的產(chǎn)品來(lái)說(shuō)堪稱是一片綠洲。

當(dāng)然，其他很多優(yōu)秀的公司也都使用了原子設(shè)計(jì)來(lái)構(gòu)建自己的設(shè)計(jì)系統(tǒng)，比如Uber，Primer等等。

05 設(shè)計(jì)系統(tǒng)包括哪些？

設(shè)計(jì)系統(tǒng)通常由設(shè)計(jì)原則、設(shè)計(jì)語(yǔ)言和組件庫(kù)組成。

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

設(shè)計(jì)原則即這一套設(shè)計(jì)系統(tǒng)所遵循的法則。不論是顏色、圓角、按鈕還是圖標(biāo)等等，它們的制定都需要圍繞這個(gè)設(shè)計(jì)原則展開(kāi)執(zhí)行。

它所存在的意義就是為接下來(lái)的所有設(shè)計(jì)提供了方向，同時(shí)傳遞平臺(tái)的品牌、儀式感。

比如我們所熟知的Material Design，就用了材質(zhì)隱喻、大膽生動(dòng)有意義和具有意義的動(dòng)畫來(lái)作為它的設(shè)計(jì)原則。

蘋果的設(shè)計(jì)原則為創(chuàng)意審美的重要性、隱喻的價(jià)值、易用性原則和及時(shí)的反饋。將審美作為原則的第一要義，也象征著蘋果本身的對(duì)美的追求。

螞蟻的AntDesign就是將自然、確定性、意義性和生長(zhǎng)性作為它的設(shè)計(jì)價(jià)值觀。

2. 設(shè)計(jì)語(yǔ)言

我們常說(shuō)的設(shè)計(jì)語(yǔ)言，即在秉承設(shè)計(jì)原則、以及業(yè)務(wù)調(diào)性的基礎(chǔ)上，所提前制定的一系列設(shè)計(jì)策略。業(yè)務(wù)調(diào)性需要我們基于業(yè)務(wù)背景去衍生出一系列關(guān)鍵詞來(lái)給業(yè)務(wù)定性。比如金融產(chǎn)品涉及資金的流轉(zhuǎn)操作，所以安全就可以作為其中一個(gè)關(guān)鍵詞。而針對(duì)年輕大學(xué)生的校園社交產(chǎn)品就可以使用年輕作為其中一個(gè)關(guān)鍵詞。

之后，我們基于這些關(guān)鍵詞進(jìn)行更加具象的映射，然后搭建情緒版來(lái)分析、推導(dǎo)出最終的形、色、字、構(gòu)、質(zhì)的視覺(jué)風(fēng)格。這些視覺(jué)風(fēng)格匯總起來(lái)即可作為一套設(shè)計(jì)語(yǔ)言。這部分不在此篇討論范圍內(nèi)，所以先簡(jiǎn)單帶過(guò)，不細(xì)講。

3. 組件庫(kù)

組件庫(kù)，你可以理解成一個(gè)塞滿各色各樣組件的倉(cāng)庫(kù)。比如錄入類組件的輸入框、表單、單選框、多選框等，比如反饋類組件的警告提示、對(duì)話框、進(jìn)度條等等。antDesign提供了一整套的組件庫(kù)方案，覆蓋了絕大部分的業(yè)務(wù)場(chǎng)景，我們?cè)诖罱ㄗ约医M件庫(kù)時(shí)可以將其作為一個(gè)很好的參考！

如果說(shuō)設(shè)計(jì)語(yǔ)言解決的是樣式復(fù)用問(wèn)題，那么組件庫(kù)解決的就是組件復(fù)用問(wèn)題。

想想，如果缺乏一套統(tǒng)一完善的組件庫(kù)，很容易出現(xiàn)一個(gè)產(chǎn)品中呈現(xiàn)五花八門的表單、搜索框等組件的災(zāi)難。而且對(duì)內(nèi)也會(huì)降低設(shè)計(jì)和開(kāi)發(fā)搭建頁(yè)面的效率。

組件庫(kù)的搭建通常是利用sketch中的symbol功能，同時(shí)結(jié)合智能布局和彈性布局功能來(lái)實(shí)現(xiàn)組件的動(dòng)態(tài)響應(yīng)。sketch的具體搭建流程較為復(fù)雜，這里不在討論范圍內(nèi)，同樣在之后的文章分享出來(lái)。

06 最后

簡(jiǎn)單回顧總結(jié)一下。

原子設(shè)計(jì)包括了原子、分子、組織、模板和界面五類層級(jí)。

原子是構(gòu)成設(shè)計(jì)所有元素的最小單元；

分子是由多個(gè)原子按既定規(guī)律組合而成，被賦予獨(dú)有的功能；組織是由分子、原子構(gòu)成的模塊；

模板就是原型圖，界面就是高保真視覺(jué)稿。

原子設(shè)計(jì)系統(tǒng)包括了設(shè)計(jì)原則、設(shè)計(jì)語(yǔ)言和組件庫(kù)。這方面案例可以多瞅瞅Material Design和antDesign，兩個(gè)非常經(jīng)典的設(shè)計(jì)系統(tǒng)。

原子設(shè)計(jì)基本的理論部分到此結(jié)束，但愿今天的文章能夠幫助到你。

作者：Andrewchen；微信公眾號(hào)：轉(zhuǎn)行人的設(shè)計(jì)筆記

本文由 @Andrewchen 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于CC0協(xié)議。