編輯導(dǎo)讀：一些設(shè)計(jì)師在設(shè)計(jì)產(chǎn)品時(shí)會(huì)用借鑒別的大廠的設(shè)計(jì)系統(tǒng)，對(duì)自己的產(chǎn)品進(jìn)行拆解，這樣的做法只是知其然不知其所以然。原子設(shè)計(jì)理論的出現(xiàn)就是為了幫助設(shè)計(jì)師去搭建屬于自己的設(shè)計(jì)系統(tǒng)，在國(guó)內(nèi)大廠中應(yīng)用比較廣泛。本文從七個(gè)方面對(duì)原子設(shè)計(jì)理念展開深入分析，希望對(duì)你有幫助。

“我們不設(shè)計(jì)頁面，我們?cè)O(shè)計(jì)構(gòu)成元素的系統(tǒng)。”——Stephen Hay

一、前言介紹

原子設(shè)計(jì)理論并不是什么高大上的規(guī)則。

隨著網(wǎng)頁設(shè)計(jì)的持續(xù)發(fā)展，我們認(rèn)識(shí)到開發(fā)設(shè)計(jì)系統(tǒng)（design system）的重要性，它最早就是為了讓網(wǎng)頁設(shè)計(jì)師更容易理解網(wǎng)頁的構(gòu)成，后來才延伸到UI設(shè)計(jì)當(dāng)中。

簡(jiǎn)單來說，當(dāng)公司的業(yè)務(wù)產(chǎn)品逐漸擴(kuò)大時(shí)，我們需要制定一套完整的設(shè)計(jì)系統(tǒng)，提升設(shè)計(jì)和開發(fā)的協(xié)作效率，統(tǒng)一所有設(shè)計(jì)師的輸出物。

開始設(shè)計(jì)系統(tǒng)的制定時(shí)，大部分設(shè)計(jì)師可能都會(huì)先去網(wǎng)上找到大廠現(xiàn)成的設(shè)計(jì)系統(tǒng)，當(dāng)拿到他們的成品的時(shí)候，會(huì)把自己的產(chǎn)品進(jìn)行拆解和借鑒。這的確能快速解決問題，但是如果不理解其中的組織規(guī)則和邏輯，只是借鑒他們現(xiàn)成的設(shè)計(jì)系統(tǒng)，只能了解個(gè)大概，知其然而不知其所以然。

因此，原子設(shè)計(jì)理論的出現(xiàn)就是為了幫助我們?nèi)ゴ罱ㄔO(shè)計(jì)系統(tǒng)，這套理論已經(jīng)逐漸被國(guó)外一些大廠應(yīng)用于創(chuàng)建統(tǒng)一和富有層次的設(shè)計(jì)系統(tǒng)。

原子是所有事物的基本構(gòu)成物質(zhì)，每一個(gè)化學(xué)元素都具有不同的性質(zhì)，并且它們一旦被分解就會(huì)失去其意義。

分子是由兩個(gè)或兩個(gè)以上的原子通過化學(xué)鍵結(jié)合在一起的，這些原子的組合具有自己獨(dú)特的性質(zhì)，并且相較于原子來說，更具實(shí)際意義和可操作性。

有機(jī)體是由分子有機(jī)地組合在一起的，這些相對(duì)復(fù)雜的結(jié)構(gòu)可以從單細(xì)胞生物一直到像人類這樣難以置信的復(fù)雜生物體。

宇宙中的物質(zhì)都可以被分解成為原子元素。

碰巧的是，我們的界面就是由一些基本的元素組成的。Josh Duck的“HTML元素周期表”完美闡述了我們所有的網(wǎng)站、APP、企業(yè)內(nèi)部網(wǎng)、hoobadyboops等等是如何由相同的HTML元素組成的。

△Josh Duck的“HTML元素周期表”

接下來和大家細(xì)聊一下什么是原子設(shè)計(jì)；原子設(shè)計(jì)到底好在哪里；為什么要有設(shè)計(jì)系統(tǒng)；以及該如何利用原子理論創(chuàng)建自己的項(xiàng)目組件庫。

二、什么是原子設(shè)計(jì)

原子設(shè)計(jì)（Atomic Design）理念最早是由國(guó)外網(wǎng)頁設(shè)計(jì)師Brad Frost提出的，他從化學(xué)元素周期表中得到啟發(fā)，發(fā)現(xiàn)原子結(jié)合在一起，可以形成分子，進(jìn)一步形成組織，從科學(xué)的角度來講，在宇宙中的所有事物都是由一組有序的原子組成。

Brad將這個(gè)概念應(yīng)用到界面設(shè)計(jì)中，仔細(xì)觀察后我們不難發(fā)現(xiàn)，界面其實(shí)就是由一些基本的元素組成，文字，顏色和圖標(biāo)等都是一個(gè)個(gè)原子。

通過原子設(shè)計(jì)，我們可以把界面看作是一個(gè)連貫的整體，同時(shí)也是一些元素的集合，每個(gè)元素都不盡相同，互相結(jié)合產(chǎn)生更多層次和結(jié)構(gòu)，模塊之間相互統(tǒng)一。說到底，原子設(shè)計(jì)其實(shí)是一種設(shè)計(jì)方法論，它由原子、分子、組織、模塊和頁面共同協(xié)作，由此創(chuàng)作出統(tǒng)一和富有層次的設(shè)計(jì)系統(tǒng)。

簡(jiǎn)單來說：原子結(jié)合在一起，形成分子，進(jìn)一步結(jié)合形成的生物體。原子理論意味著在已知宇宙中的所有事物都可以分解為一組有限的原子元素。

原子設(shè)計(jì)是一種方法，由五個(gè)不同的階段一起工作，以更慎重和更具層次的方式創(chuàng)建界面設(shè)計(jì)系統(tǒng)。從而創(chuàng)造出更有效的用戶界面系統(tǒng)的一種設(shè)計(jì)方法。

它的五個(gè)不同階段是：

1. 原子(Atoms)：為頁面構(gòu)成的基本元素，例如標(biāo)簽、輸入框、文字、顏色等；
2. 分子(Molecules)：由原子構(gòu)成的簡(jiǎn)單UI元素，例如按鈕；
3. 組織(Organisms)：相對(duì)分子而言，較為復(fù)雜的構(gòu)成物，由原子及分子所組成；
4. 模板(Templates)：以頁面為基礎(chǔ)的架構(gòu)，將以上元素進(jìn)行排版；
5. 頁面(Pages)：將實(shí)際內(nèi)容（圖片、文章等）放置在特定模板內(nèi)；

原子設(shè)計(jì)不是一個(gè)線性的過程， 它更像是一個(gè)心理模型，來幫助我們把用戶界面看作是一個(gè)連貫的整體，同時(shí)也是一些元素的集合。這五個(gè)階段的每一個(gè)階段都會(huì)在我們的界面設(shè)計(jì)系統(tǒng)層級(jí)中扮演重要角色。下面，讓我們更深入的了解每一個(gè)階段哦～

1. 原子

如果原子是物質(zhì)的基礎(chǔ)組成部分，那么我們用戶界面的“原子”就是那些構(gòu)成我們用戶界面的基本構(gòu)件了 。在界面中以「元素」的形式存在，例如：顏色、文字、圖標(biāo)、分割線等。

在團(tuán)隊(duì)開始新項(xiàng)目時(shí)，為了保證各個(gè)頁面具有統(tǒng)一的設(shè)計(jì)風(fēng)格，我們會(huì)制定一套簡(jiǎn)易的視覺規(guī)范，在關(guān)鍵的設(shè)計(jì)元素上，各個(gè)設(shè)計(jì)師達(dá)成一致，這樣就能很大程度保證不同頁面的風(fēng)格統(tǒng)一，并在這個(gè)基礎(chǔ)上去探索更有創(chuàng)新意義的設(shè)計(jì)方案。

在模式庫中，原子一目了然地展示了所有的基本樣式，當(dāng)你回來繼續(xù)開發(fā)和維護(hù)你的設(shè)計(jì)系統(tǒng)時(shí)，這是一份很有用的設(shè)計(jì)參考指南。

2. 分子

分子是原子組合建立的元素，兩個(gè)原子即可組成一個(gè)分子。

在界面中，分子就像是一個(gè)由UI元素組成的相對(duì)簡(jiǎn)單的組織。例如，搜索框里的文字和圖標(biāo)共同打造一了個(gè)搜索表單分子。

以按鈕為例，它的組成元素包含了文字、色塊、圖標(biāo)和柵格。合并后，這些抽象的原子從毫無關(guān)聯(lián)到又一個(gè)共同的目的，圖標(biāo)和文字互相配合傳達(dá)意義，顏色定義了按鈕的特性，柵格為按鈕定義了一個(gè)尺寸和規(guī)范。

將單個(gè)元素組裝為簡(jiǎn)單的功能組是我們一直以來構(gòu)建用戶界面的方式，可幫助UI設(shè)計(jì)人員和開發(fā)人員堅(jiān)持單一職責(zé)原則，這種方式簡(jiǎn)單且復(fù)用性高，可以保證界面具有良好的可用性。

以界面設(shè)計(jì)中的表單為例，表單是一個(gè)非常常見的設(shè)計(jì)元素，一個(gè)表單分子是由文字、圖標(biāo)和線條原子組成。這些原子合并后，得到的是一個(gè)可以應(yīng)用在任何信息展示或者功能入口的組合。

3. 組織

組織是由分子或原子或其它有機(jī)體組成的相對(duì)復(fù)雜的UI部分 。這些組織組成了界面的不同部分。

通過結(jié)合分子和原子，我們可以構(gòu)建更復(fù)雜和可擴(kuò)展性的模塊，這個(gè)稱之為組織，其實(shí)也可以稱之為組件，這些組件組成了界面的不同部分。同樣以表單為例，一個(gè)表單我們可以通過數(shù)量的組合，以及間距的調(diào)整，元素的增減，在界面中表達(dá)不同的場(chǎng)景和含義。從建立分子到建立更精細(xì)的組件，這為設(shè)計(jì)師和開發(fā)人員提供了重要的內(nèi)容構(gòu)建思路。

組件在解放設(shè)計(jì)師生產(chǎn)力方面有著重要的作用，我們可以把界面中常見的組件進(jìn)行分類整理，如搜索、表單、圖片和卡片等，這些常用組件基本能滿足日常的設(shè)計(jì)需求。

以Aribnb為例，他們主要分為3類：卡片、表單和內(nèi)容。

每個(gè)標(biāo)簽內(nèi)容的設(shè)計(jì)形式盡量都保持統(tǒng)一，因此負(fù)責(zé)不同內(nèi)容模塊的設(shè)計(jì)師只要選擇同一個(gè)組件就能完成頁面的設(shè)計(jì)。在短時(shí)間內(nèi)就可以完成頁面超多的復(fù)雜項(xiàng)目，極大的提升了團(tuán)隊(duì)的設(shè)計(jì)效率。

在網(wǎng)頁端最典型的例子就是網(wǎng)站導(dǎo)航，搜索表單，我們幾乎訪問的每個(gè)網(wǎng)站都會(huì)看到這些類型的組件。

4. 模板

原子，分子和組織的這種語言有助于我們有意識(shí)地構(gòu)造設(shè)計(jì)系統(tǒng)的組件。但是，最終我們必須采用一個(gè)更適合描述我們最終產(chǎn)出的語言，這樣才好匯報(bào)給老板、客戶和同事，簡(jiǎn)單來說就是說人話。

模版的本質(zhì)就是線框圖，在這一步我們基本可以看到一個(gè)產(chǎn)品的形態(tài)。我們可以不斷調(diào)整組件和分子組合在一起的效果來嘗試不同的方案，找到一個(gè)相對(duì)合適的方案。

模版的意義就在于可以專注于頁面的內(nèi)容結(jié)構(gòu)布局，而不是頁面的最終內(nèi)容，此時(shí)模版內(nèi)容是隨時(shí)可以調(diào)整的，嘗試不同的方案，在多個(gè)模版中進(jìn)行對(duì)比，在這個(gè)階段改動(dòng)和溝通保證了最低成本。因此，模版在設(shè)計(jì)系統(tǒng)承載的作用就是保證設(shè)計(jì)方案在原型階段的多樣性。

模板是頁面級(jí)別的對(duì)象，它將組件放置在布局中，并顯示設(shè)計(jì)的底層內(nèi)容結(jié)構(gòu)。在設(shè)計(jì)一個(gè)有效的設(shè)計(jì)系統(tǒng)時(shí)，必須在布局的環(huán)境中展示組件的外觀和功能，以證明這些部件組成了一個(gè)功能良好的整體。

模板的另一個(gè)重要特征是它們專注于頁面的底層內(nèi)容結(jié)構(gòu)，而不是頁面的最終內(nèi)容。

設(shè)計(jì)系統(tǒng)必須考慮內(nèi)容的動(dòng)態(tài)性質(zhì)，因此，把例如標(biāo)題和文字段落的圖像大小和字符長(zhǎng)度此類組件的重要屬性說清楚是很有幫助的。

5. 頁面

頁面是模板的具體實(shí)例，填充了真實(shí)的內(nèi)容（圖片、文字等）后形成頁面，也就是常說的「視覺稿」，將占位符替換為有代表性的真是內(nèi)容，使設(shè)計(jì)系統(tǒng)有了生命。在模版的基礎(chǔ)上進(jìn)行優(yōu)化和完善就形成了頁面最終的視覺方案。

頁面階段是原子設(shè)計(jì)中最具體的階段，由于一些眾所周知的原因這個(gè)階段非常重要。別忘了，這可是用戶在訪問你的界面時(shí)會(huì)實(shí)際看到和交互的內(nèi)容。

除了演示用戶所看到的最終界面之外， 頁面對(duì)于測(cè)試底層設(shè)計(jì)系統(tǒng)的有效性是必不可少的 。在頁面階段，我們可以看到當(dāng)將真實(shí)內(nèi)容應(yīng)用于設(shè)計(jì)系統(tǒng)時(shí)，所有這些模式如何運(yùn)作。

所有的一切看起來都很棒嗎？如果答案是否定的，那么我們可以回過頭去修改我們的分子、生物體和模板，以更好地滿足我們內(nèi)容的需求。

頁面還提供了一個(gè)表達(dá)模板變量的地方，這對(duì)建立強(qiáng)大而可靠的設(shè)計(jì)系統(tǒng)至關(guān)重要。以下是模板變量的幾個(gè)例子：

1. 用戶在其購物車中有一個(gè)商品，另一個(gè)用戶在其購物車中有十個(gè)商品。
2. 網(wǎng)頁APP的儀表板通常顯示最近的活動(dòng)，但是該部分對(duì)于首次使用的用戶是禁用的。
3. 一篇文章標(biāo)題可能是40個(gè)字符長(zhǎng)，而另一篇文章標(biāo)題可能是100個(gè)字符長(zhǎng)。

在所有這些例子中，底層的模板是相同的，但用戶界面將會(huì)隨著內(nèi)容的動(dòng)態(tài)性質(zhì)而改變。這些變化直接影響了底層分子，有機(jī)體和模板的構(gòu)建方式。因此，創(chuàng)建解釋這些變量的頁面有助于我們建立更具彈性的設(shè)計(jì)系統(tǒng)。

這就是原子設(shè)計(jì)！這五個(gè)不同的階段同時(shí)協(xié)同工作，以產(chǎn)生有效的用戶界面設(shè)計(jì)系統(tǒng)。

總結(jié)：

• 原子是最基礎(chǔ)的UI元素，并且是可以用作界面的元素構(gòu)建塊；
• 分子是用于形成相對(duì)簡(jiǎn)單的UI組件的原子集合；
• 組織是形成界面各個(gè)部分的相對(duì)復(fù)雜的部件；
• 模板將組件放置在布局中，并演示設(shè)計(jì)的底層內(nèi)容結(jié)構(gòu)；
• 頁面將真實(shí)內(nèi)容應(yīng)用于模板，設(shè)計(jì)出視覺稿，并最終成為開發(fā)落地的依據(jù)；

三、為何要用原子設(shè)計(jì)作為理論指導(dǎo)

原子設(shè)計(jì)為制作設(shè)計(jì)系統(tǒng)提供了清晰的方法。客戶和團(tuán)隊(duì)成員通過實(shí)際的設(shè)計(jì)流程與步驟，能更好的去理解設(shè)計(jì)系統(tǒng)的概念。

原子設(shè)計(jì)使我們能夠從抽象的設(shè)計(jì)中過渡到具體的設(shè)計(jì)中來，因此我們可以對(duì)一個(gè)設(shè)計(jì)系統(tǒng)進(jìn)行一致性和可伸縮性等類似特性的控制。

通過模塊化的設(shè)計(jì)系統(tǒng)調(diào)動(dòng)組件，可以使我們開發(fā)新的產(chǎn)品時(shí)，從開始就可以對(duì)產(chǎn)品進(jìn)行嚴(yán)格的把控與一定程度上的控制，進(jìn)而規(guī)避了事后風(fēng)險(xiǎn)。

開發(fā)之前不確定好系統(tǒng)模塊化，毫無邏輯的去開發(fā)，開發(fā)到一半發(fā)現(xiàn)功能與需求對(duì)不上等問題逐漸產(chǎn)生，會(huì)導(dǎo)致產(chǎn)品的延期、人員成本的浪費(fèi)、資金成本的增加，產(chǎn)品的迭代率的下降、進(jìn)而影響市場(chǎng)先機(jī)與市場(chǎng)占有率。

原子化設(shè)計(jì)與原來的樣式庫設(shè)計(jì)思路不一樣，原子化設(shè)計(jì)從抽象到具象，從元素到組件，讓設(shè)計(jì)師從底層開始思考，對(duì)整個(gè)設(shè)計(jì)會(huì)有更清晰的理解。同時(shí)也能讓設(shè)計(jì)更加統(tǒng)一，在新增組件的時(shí)候更謹(jǐn)慎。

原子設(shè)計(jì)的原理可以最大程度保證任何一個(gè)設(shè)計(jì)組件的構(gòu)成與開發(fā)構(gòu)建組件一一對(duì)應(yīng)。

同時(shí)應(yīng)用原子設(shè)計(jì)的設(shè)計(jì)軟件（e.g., Sketch, Figma)可以給新設(shè)計(jì)師足夠的自由滿足需求變通，并且可以保證同一個(gè)設(shè)計(jì)組件的更新會(huì)覆蓋到任何一個(gè)使用這個(gè)組件的設(shè)計(jì)中。

原子設(shè)計(jì)為我們提供了一些關(guān)鍵的見解，幫助我們創(chuàng)建更有效、更深思熟慮的UI設(shè)計(jì)系統(tǒng)。

四、如何創(chuàng)建設(shè)計(jì)系統(tǒng)

如果產(chǎn)品規(guī)模小只需要1，2個(gè)設(shè)計(jì)師，大概率是前期不需要大費(fèi)周章搞一個(gè)需要開發(fā)配合的設(shè)計(jì)系統(tǒng)，可以只利用Sketch或者Figma做一個(gè)像貼紙一樣的設(shè)計(jì)組件庫。

但是功能多了怎么辦，公司來新人了，當(dāng)新設(shè)計(jì)師產(chǎn)出后就會(huì)發(fā)現(xiàn)與原設(shè)計(jì)師設(shè)計(jì)的風(fēng)格不一樣，慢慢發(fā)現(xiàn)整體設(shè)計(jì)風(fēng)格不統(tǒng)一了，只靠一個(gè)簡(jiǎn)單的組件庫很難能滿足新功能需求，新功能貼紙上沒有設(shè)計(jì)或者設(shè)計(jì)需要變通，又或者是新設(shè)計(jì)師忙著交工忘記檢查自己新組件和已有組件的異同。

這時(shí)候就會(huì)需要一個(gè)設(shè)計(jì)師領(lǐng)頭去重新整理設(shè)計(jì)系統(tǒng)，走查發(fā)現(xiàn)同一個(gè)正文所用的十幾個(gè)不同字號(hào)，又或者是十幾個(gè)透明度不同的灰黑色字體，所有組件跟現(xiàn)有上線產(chǎn)品對(duì)比整理好后一并交給開發(fā)，開發(fā)再一一整理代碼庫。

設(shè)計(jì)系統(tǒng)（Design Systems）對(duì)于很多年輕設(shè)計(jì)師可能十個(gè)新名詞，但是設(shè)計(jì)規(guī)范和組件等我們應(yīng)該還是有一定認(rèn)知的。在設(shè)計(jì)的過程中，我們會(huì)被其影響。

在我們?nèi)粘Ｋ褂玫腁PP產(chǎn)品中，如Apple、Google、Airbnb、Uber、滴滴等，他們的產(chǎn)品體驗(yàn)非常流暢，用戶使用產(chǎn)品時(shí)能夠高效地滿足需求，在其良好的體驗(yàn)背后都有著一套強(qiáng)大的設(shè)計(jì)系統(tǒng)做支撐。

1. 為什么需要設(shè)計(jì)系統(tǒng)

1）團(tuán)隊(duì)協(xié)作，體驗(yàn)一致

以滴滴為例，雖然只是一個(gè)簡(jiǎn)單的打車應(yīng)用，但是其旗下的業(yè)務(wù)卻很多，快出、出租車、順風(fēng)車等，每個(gè)業(yè)務(wù)都由不同的團(tuán)隊(duì)和設(shè)計(jì)師負(fù)責(zé)。

可以想象如果沒有設(shè)計(jì)系統(tǒng)，任由各模塊設(shè)計(jì)師自由發(fā)揮，風(fēng)格各異，出來的結(jié)果可想而知。而有了設(shè)計(jì)系統(tǒng)的幫助，就會(huì)感覺界面風(fēng)格非常統(tǒng)一，感覺是出自同一個(gè)設(shè)計(jì)師之手，可見其設(shè)計(jì)系統(tǒng)的功勞不小。

2）系統(tǒng)的管理多樣性

在設(shè)計(jì)過程中，我們會(huì)發(fā)現(xiàn)過程中，我們會(huì)發(fā)現(xiàn)每個(gè)業(yè)務(wù)的形態(tài)都是基于不同的場(chǎng)景，因?yàn)閳?chǎng)景的多樣性，在表現(xiàn)上就會(huì)催生出不同的樣式。

如果每個(gè)業(yè)務(wù)都用一種樣式表達(dá)，久而久之當(dāng)業(yè)務(wù)增長(zhǎng)過快時(shí)，我們現(xiàn)有的設(shè)計(jì)模式就會(huì)難以滿足。

Airbnb的設(shè)計(jì)方式就是非常值得參考的一個(gè)案例，從最開始是提供民宿，到后來新增的餐館服務(wù)，你會(huì)發(fā)現(xiàn)房源和餐館都用了同一套圖文信息結(jié)構(gòu)，只是在內(nèi)容的細(xì)節(jié)上有一些不同，這樣可以降低設(shè)計(jì)的難度。

設(shè)計(jì)師不用為每個(gè)場(chǎng)景思考一個(gè)設(shè)計(jì)模式而煩惱。同時(shí)，用戶在瀏覽不同場(chǎng)景的內(nèi)同時(shí)，在相互切換中也不會(huì)產(chǎn)生為違和感，一切都是很自然的操作。

3）幫助產(chǎn)品成長(zhǎng)，避免一次性設(shè)計(jì)

互聯(lián)網(wǎng)產(chǎn)品的成長(zhǎng)模式是一種漸進(jìn)式迭代，在產(chǎn)品初期的主要訴求是快速上線，等到產(chǎn)品上線獲取一定的用戶，證明它可以活下去時(shí)再逐步完善，增加更多的功能。每一次的迭代都是站在我們之前的思考之上，每一次的優(yōu)化都會(huì)讓我們的設(shè)計(jì)更進(jìn)一步，這是我們期望達(dá)到的結(jié)果。

以Uber為例，新版本繼承了黑色按鈕的設(shè)計(jì)，并和地圖進(jìn)行了結(jié)合，地圖的配色和舊版本相比也變得生動(dòng)了，這種改變并不是一蹴而就，而是建立在原有版本之上。

• 一致性（Consistency）：由于分解界面成單一元素，不論在哪一個(gè)頁面，UI元素的互動(dòng)性是相同的，例如顏色變化、字體的排序、以及反饋。不但讓使用者體驗(yàn)相同，在視覺上更為和諧。
• 效率（Efficiency）：由于建立了組件庫，一旦要更改某一個(gè)元素，可以馬上施行、應(yīng)用。
• 跨部門的共通語言（Collaboration）：不僅方便設(shè)計(jì)師思考頁面的和諧性，也可以讓工程師、測(cè)試檢驗(yàn)清楚頁面的邏輯架構(gòu)及變化，減少不必要的來回溝通

在此，順便淺談下設(shè)計(jì)系統(tǒng)。

通常，設(shè)計(jì)系統(tǒng)包含的內(nèi)容由設(shè)計(jì)原則、設(shè)計(jì)語言和組件庫，這是一個(gè)整體的概念。

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

設(shè)計(jì)原則是一個(gè)產(chǎn)品的核心設(shè)計(jì)理念，設(shè)計(jì)的本質(zhì)就是解決問題，在制定設(shè)計(jì)原則時(shí)要建立在這個(gè)中心思想之上。

這些問題也許是一個(gè)業(yè)務(wù)形態(tài)，例如打車的場(chǎng)景，也許是一個(gè)設(shè)計(jì)形式，如表單。

設(shè)計(jì)形式又很多，我們應(yīng)該如何選擇呢？相對(duì)合理的方法就是建立一個(gè)規(guī)則，所有的問題和形式都想這個(gè)規(guī)則靠攏，減少不確定性，這就是設(shè)計(jì)原則的出發(fā)點(diǎn)。因此我們可以理解為，設(shè)計(jì)原則就是一系列的規(guī)則，是我們?cè)O(shè)計(jì)過程中要遵循的中心思想。

例如：蘋果把審美作為第一要素存在于設(shè)計(jì)原則中，它的產(chǎn)品往往也是品味的代名詞，看看它的設(shè)計(jì)原則就知道了：

• 審美的完整性
• 一致性
• 直接操作
• 即使的反饋
• 隱喻
• 用戶可控
  

△ 官網(wǎng)：https://developer.apple.com/design/

再來看看Material Design，Google對(duì)其定義是一個(gè)完整統(tǒng)一的系統(tǒng)，結(jié)合了理論、資源和工具的數(shù)字體驗(yàn)產(chǎn)品，相比而言它的設(shè)計(jì)原則就是更加獨(dú)特，這是它的設(shè)計(jì)原則：

• 材料是一種隱喻
• 大膽/圖形/強(qiáng)調(diào)/
• 運(yùn)動(dòng)賦予意義
• 靈活的基礎(chǔ)
• 跨平臺(tái)

△ 官網(wǎng)：https://material.io/design

由此可以看出，和iOS相比，Material Design的設(shè)計(jì)原則更加的抽象，因?yàn)樗麚碛幸粋€(gè)獨(dú)特的設(shè)計(jì)世界觀，用還原的方法和物理方法呈現(xiàn)出它的本質(zhì)，通過抽象的視覺卡片傳遞出設(shè)計(jì)的目的和原則。

3. 設(shè)計(jì)語言

在建立設(shè)計(jì)原則后，下一步就是制定一套設(shè)計(jì)語言規(guī)范，設(shè)計(jì)規(guī)范是設(shè)計(jì)系統(tǒng)的表現(xiàn)層，面向的對(duì)象是團(tuán)隊(duì)設(shè)計(jì)師和開發(fā)者，他能幫助設(shè)計(jì)師的設(shè)計(jì)輸出保持風(fēng)格統(tǒng)一。同樣也能幫助開發(fā)者高度還原設(shè)計(jì)。非常有利于設(shè)計(jì)師和開發(fā)者的協(xié)作。這套規(guī)范包含的有：字體、顏色、圖標(biāo)和柵格。

4. 組件化設(shè)計(jì)

組件化設(shè)計(jì)主要作用有兩點(diǎn)，一是保證多人協(xié)作效率，組件化設(shè)計(jì)可以快速完成一個(gè)簡(jiǎn)單頁面的設(shè)計(jì)，提升設(shè)計(jì)效率；二是保持產(chǎn)品體驗(yàn)的統(tǒng)一性。

同時(shí)，組件化設(shè)計(jì)環(huán)節(jié)在設(shè)計(jì)系統(tǒng)中是一個(gè)相對(duì)重要的工作，需要有一個(gè)全局觀，要有較強(qiáng)的設(shè)計(jì)水平和溝通協(xié)作能力，這樣，組件化的落地才會(huì)得到很好的推進(jìn)。

五、那些以原子理論構(gòu)件的設(shè)計(jì)系統(tǒng)

在多屏?xí)r代，我們時(shí)時(shí)刻刻都在設(shè)計(jì)產(chǎn)品界面，需適配多系統(tǒng)，其中很重要的一點(diǎn)是如何在多系統(tǒng)之間保持體驗(yàn)一致性，很多人想到的就是規(guī)范，要想做一套嚴(yán)謹(jǐn)邏輯好，靈活的設(shè)計(jì)規(guī)范，那么原子設(shè)計(jì)可以幫助我們來很好的實(shí)現(xiàn)它，它在構(gòu)建設(shè)計(jì)系統(tǒng)中算是比較科學(xué)的一種方法，國(guó)外很多設(shè)計(jì)團(tuán)隊(duì)都在使用這樣的設(shè)計(jì)方法。比如以下這幾個(gè)團(tuán)隊(duì)：

1. Airbnb

Airbnb設(shè)計(jì)副總裁Alex Schleifer在IXDC2017國(guó)際體驗(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)下載。

△ 官網(wǎng)：https://airbnb.design/events/when-we-use-systems/

2. Frames

Frames 使用了精致的組件和先進(jìn)技術(shù)，并結(jié)合 Sketch 構(gòu)建了強(qiáng)大的 Web 設(shè)計(jì)系統(tǒng)，同樣能滿足修改原子，全局同步更新的功能，支持響應(yīng)式布局。提供了近百個(gè)網(wǎng)頁模板，可以非常迅速地完成效果圖制作。

△ 官網(wǎng)：>http://framesforsketch.com

3. Nested Symbols

這是一套免費(fèi)的設(shè)計(jì)系統(tǒng)，它將按鈕、輸入框、下拉菜單、通知等控件，都制作成了嵌套符號(hào)，方便自定義和編輯。

△ 官網(wǎng)：https://www.janlosert.com/

六、如何利用原子理論創(chuàng)建自己的組件庫

原子設(shè)計(jì)理論最大的價(jià)值，就是為設(shè)計(jì)體系/組件庫的構(gòu)建提供思路和方法，如果你不滿足于市場(chǎng)上現(xiàn)有的設(shè)計(jì)系統(tǒng)，我們還可以自己創(chuàng)建。因此我們首先要為產(chǎn)品設(shè)計(jì)出一個(gè)獨(dú)特的視覺語言作為起點(diǎn)。這個(gè)視覺語言一定要有力度、易于擴(kuò)展，必須能在所有地方奏效！

接下來就以 Sketch Library 功能來實(shí)現(xiàn)組件庫的創(chuàng)建。

1. 第一步：定義顏色（color）

將顏色添加 Main、Text、Status 等一級(jí)分類，例如：Color/Status；再添加二級(jí)分類，例如：Color/Status/Success 等，命名需使用「 / 」 符號(hào)區(qū)分層級(jí)結(jié)構(gòu)。定義好顏色和命名后，將每個(gè)顏色轉(zhuǎn)換成 Symbol，便可統(tǒng)一調(diào)用。

2. 第二步：定義字體（font）

根據(jù)設(shè)計(jì)規(guī)范，將不同字號(hào)的文字樣式羅列出來，例如：Title 1、Body、Body2 等，按照「樣式名稱/顏色/對(duì)齊方式」的層級(jí)結(jié)構(gòu)，將文字賦予 Text Style，整理出所有的字體樣式。

3. 第三步：定義圖標(biāo)（icon）

將圖標(biāo)放置在 24*24px 大小畫板內(nèi)，從定義好的顏色系統(tǒng)中選擇合適的 Symbol，這樣替換圖標(biāo)顏色時(shí)直接選定義好的顏色就可以了。在屬性面板中鎖定尺寸（size）大小，并把調(diào)整尺寸（Resizing） 設(shè)為上下左右同時(shí)吸附，以確保圖標(biāo)在使用時(shí)可以等比縮放。

4. 第四步：加入其他元素（Elements）

根據(jù)以上對(duì)原子的定義和命名方式，依次完成對(duì)其他原子、分子和組織的定義，例如：按鈕、表單、空狀態(tài)等，整個(gè)過程都是通過 Symbol 的不斷嵌套，最終實(shí)現(xiàn)組件庫的創(chuàng)建。

5. 第五步：加入組件庫

使用快捷鍵「cmd+, 」打開 Preferences 面板，選擇「Libraries」（組件庫）標(biāo)簽，點(diǎn)擊「Add Library」（添加組件庫）按鈕添加剛才的 Sketch 文件，完成后就可以從其他的 Sketch 文件中，對(duì)此庫里的元素進(jìn)行調(diào)用了。

七、原子理論總結(jié)

寫在最后，原子設(shè)計(jì)是一套具有科學(xué)嚴(yán)謹(jǐn)?shù)膭?chuàng)建設(shè)計(jì)系統(tǒng)的方法論，是一個(gè)構(gòu)建UI系統(tǒng)的心理模型。

原子設(shè)計(jì)使我們可以將我們的界面UI細(xì)分為原子元素，并通過這些元素組合在一起形成最終的界面。

原子作為整個(gè)理論最基礎(chǔ)的元素，當(dāng)我們改變其中的原子時(shí)，整個(gè)體系都會(huì)發(fā)生變化。

原子的設(shè)計(jì)概念和sketch中的“符號(hào)”有異曲同工之妙，當(dāng)我們改變其中一個(gè)元素時(shí)，其他所有包含這個(gè)元素的頁面都會(huì)發(fā)生變化，可以保證整個(gè)系統(tǒng)的一致性和層次感。

原子設(shè)計(jì)為界面元素提供了應(yīng)用規(guī)則和組織原理，這套方法論對(duì)于設(shè)計(jì)系統(tǒng)建立、團(tuán)隊(duì)協(xié)作、產(chǎn)品迭代都具有非常重要的指導(dǎo)意義。

拓展閱讀：

經(jīng)常有同學(xué)問ios設(shè)計(jì)規(guī)范，安卓設(shè)計(jì)規(guī)范在哪看這類問題，最后，來推薦一些大平臺(tái)的設(shè)計(jì)網(wǎng)站，上文出現(xiàn)過的下面就不重復(fù)了。我們耳熟能詳?shù)膬?yōu)秀設(shè)計(jì)都是來自于這些世界頂級(jí)互聯(lián)網(wǎng)公司，說真的，審美這東西還真是人家說了算～

反正看看又不要錢，都去康康唄～

Google Design：

谷歌設(shè)計(jì)中心，它非常全面的展示了谷歌的設(shè)計(jì)工作和概念。包括Material Design在內(nèi)的所有關(guān)于設(shè)計(jì)、體驗(yàn)、產(chǎn)品等互聯(lián)網(wǎng)領(lǐng)域的探索。

△ 網(wǎng)址：https://design.google/

Fluent Design：

微軟基于Windows10的設(shè)計(jì)語言，包括人機(jī)界面布局、控件、樣式及資源下載。

△ 網(wǎng)址：https://www.microsoft.com/design/fluent/#/

IBM Design Language：

IBM設(shè)計(jì)語言是偉大設(shè)計(jì)的代名詞，他將人們的需求轉(zhuǎn)化成精心打造的產(chǎn)品。在這里可以學(xué)習(xí)IBM設(shè)計(jì)團(tuán)隊(duì)一用戶為中心設(shè)計(jì)的新思維方式。

△ 網(wǎng)址：https://www.ibm.com/design/

Facebook Design：

臉書設(shè)計(jì)官網(wǎng)，在國(guó)內(nèi)，我們常?？吹侥槙脑O(shè)計(jì)文章被翻成中文為中國(guó)設(shè)計(jì)師所學(xué)習(xí)

△ 網(wǎng)址：https://facebook.design/

Uber Design：

作為全球第一家即使打車應(yīng)用，優(yōu)步其超前的設(shè)計(jì)理念和優(yōu)秀的用戶體驗(yàn)成為同類產(chǎn)品競(jìng)相模仿的對(duì)象。

△ 網(wǎng)址：https://www.uber.deign.com/

Ant Design：

螞蟻金服設(shè)計(jì)平臺(tái)是阿里旗下子公司，基于螞蟻金服生態(tài)系統(tǒng)的跨設(shè)計(jì)與開發(fā)的體驗(yàn)解決方案。

△ 網(wǎng)址：https://design.alipay.com/

參考資料：

《原子設(shè)計(jì)》官網(wǎng)

Airbnb 設(shè)計(jì)規(guī)范

Apple 設(shè)計(jì)規(guī)范

Material Design設(shè)計(jì)規(guī)范

Google及其他

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

題圖來自 Unsplash，基于CC0協(xié)議