近年來，Style Guide 逐漸發(fā)展衍變?yōu)?Design System，基于一套架構(gòu)嚴(yán)謹(jǐn)、規(guī)則統(tǒng)一的框架體系，產(chǎn)品表現(xiàn)層面的設(shè)計(jì)可以逐漸實(shí)現(xiàn)模塊化運(yùn)作，從而大大提高設(shè)計(jì)效率。

而 Atomic Design（原子設(shè)計(jì)）是構(gòu)建 Design System 的核心指導(dǎo)理論。那么，以原子理論為依據(jù)構(gòu)建的設(shè)計(jì)體系有哪些？如何運(yùn)用原子理論構(gòu)建自己的設(shè)計(jì)體系/組件庫呢？原子設(shè)計(jì)體系使用過程中，又該如何規(guī)避常見的問題呢？本文將一一為你揭曉。

一、什么是原子設(shè)計(jì)理論？

在化學(xué)中，所有的物體都是由原子構(gòu)成，原子組合構(gòu)成分子，分子組合構(gòu)成有機(jī)物，最終形成了宇宙萬物。

2013年前端工程師 Brad Forst 將此理論運(yùn)用在界面設(shè)計(jì)中，形成一套設(shè)計(jì)系統(tǒng)，包含5個層面：原子、分子、組織、模板、頁面。

1. 原子

原子是最基本和最小顆粒度的單位，在界面中以「元素」的形式存在，例如：顏色、文字、圖標(biāo)、分割線等。

2. 分子

原子排列組合構(gòu)成了分子，在界面中多以「組件」的形式存在，例如：導(dǎo)航欄、標(biāo)簽欄、搜索框、按鈕、彈窗等。

3. 組織

原子、分子排列組合構(gòu)成了組織，在界面中多以「模塊」的形式存在，例如：商品列表、內(nèi)容卡片、入口模塊、瀑布流圖等。

4. 模板

原子、分子、組織排列組合構(gòu)成了模板，在界面中也稱為「原型圖」，例如：電商展示原型、外賣點(diǎn)單原型、店鋪詳情原型、商戶管理原型等。

5. 頁面

模板填充了真實(shí)的內(nèi)容（圖片、文字等）后形成頁面，也就是常說的「視覺稿」，例如：商品列表頁、外賣點(diǎn)單頁、教育課程頁、資訊管理頁等。

二、為什么要以原子理論作為指導(dǎo)？

1. 一致

原子設(shè)計(jì)理論以上文5個層面為基礎(chǔ)，從原子到頁面的構(gòu)建過程中，充分發(fā)揮了設(shè)計(jì)元素的可復(fù)用性，避免重復(fù)生產(chǎn)，體現(xiàn)了一致性的設(shè)計(jì)原則。

2. 清晰

原子設(shè)計(jì)理論從抽象到具象、由局部到整體，層級分明，為設(shè)計(jì)師構(gòu)建組件庫提供了清晰的方法論指導(dǎo)，同時幫助團(tuán)隊(duì)成員更好地理解設(shè)計(jì)體系的價值。

3. 高效

隨著產(chǎn)品的不斷迭代，以原子設(shè)計(jì)理論指導(dǎo)完成的設(shè)計(jì)體系，將會更加高效便捷地適應(yīng)新的變化，你只需輕輕改變某些原子、分子的屬性或組合方式，便會迎來整個體系的同步更新，易于擴(kuò)展和維護(hù)。

4. 溝通順暢

原子設(shè)計(jì)理論不僅方便設(shè)計(jì)師思考頁面的整體性和統(tǒng)一性，也能讓前端工程師和產(chǎn)品經(jīng)理，清楚地了解產(chǎn)品框架層和表現(xiàn)層的邏輯結(jié)構(gòu)，降低不必要的溝通和修改成本。

三、以原子理論為依據(jù)構(gòu)建的設(shè)計(jì)體系

1. UX Power Tools

UX Power Tools 提供了構(gòu)建產(chǎn)品和應(yīng)用程序所需的基本元素，包含了網(wǎng)頁端和移動端，均可響應(yīng)原子級別的操作。除了基礎(chǔ)元素，這套體系還添加了各種常見的設(shè)計(jì)模式、工作流程和模板，讓設(shè)計(jì)師能專注于做更重要的事。

△ 官網(wǎng)：https://www.uxpower.tools

2. Frames

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

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

3. iOS Blueprint

Blueprint 是一款專注于 iOS 應(yīng)用的響應(yīng)式設(shè)計(jì)系統(tǒng)，包括嵌套符號、樣式和文本圖層，可根據(jù)需求輕松進(jìn)行擴(kuò)展。除了基本的 Library 功能外，它還提供了一些通用模板，比如登錄、注冊頁等，開箱即用。

△ 官網(wǎng)：https://blueprint.rojcyk.com

4. Nested Symbols

這是一套免費(fèi)的設(shè)計(jì)系統(tǒng)，它將按鈕、輸入框、下拉菜單、通知等控件，都制作成了嵌套符號，方便自定義和編輯。系統(tǒng)中的所有元素，都是作者從他在 UI8.net 上排名第一的暢銷產(chǎn)品 Dashboard UI Kit 中挑選出來的。

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

四、如何運(yùn)用原子理論創(chuàng)建自己的組件庫？

原子設(shè)計(jì)理論最大的價值，就是為設(shè)計(jì)體系/組件庫的構(gòu)建提供思路和方法，如果你不滿足于市場上現(xiàn)有的設(shè)計(jì)系統(tǒng)，我們還可以自己創(chuàng)建。下文我會簡單介紹如何使用 Sketch Library 功能實(shí)現(xiàn)組件庫的創(chuàng)建。

1. Sketch Library 功能簡介

一個 Library 本質(zhì)上就是一個 Sketch 文件，當(dāng)你編輯了 Library 中的 Symbol，那么調(diào)用了該 Library 的其他 Sketch 文件便會收到更新提示，你可以對變更進(jìn)行預(yù)覽、對比和確認(rèn)，使這些 Sketch 文件中所調(diào)用的 Symbol 自動更新到最新版。

第一步：定義 Colors

新建一個 Sketch 文件，將 Pages 命名為 Guide - Colors，用于定義顏色樣式。

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

第二步：定義 Fonts

添加一個 Pages 并命名為 Guide - Fonts，用于定義文字樣式。

根據(jù)設(shè)計(jì)規(guī)范，將不同字號的文字樣式逐一羅列出來，例如：Large Title、Title 1、Body 等，按照「樣式名稱/顏色/對齊方式」的層級結(jié)構(gòu)，將文字賦予 Text Style，例如：Body/Blue/Left 等，可使用 Rename it 插件批量命名。重復(fù)這個操作，直到整理出所有的字體樣式。

利用 Sketch Styles Generator 插件，生成文本樣式庫，再使用 Shared Text Styles 插件導(dǎo)出 .json 文件，從不同的 Sketch 文件中導(dǎo)入 .json 文件，便能實(shí)現(xiàn)共享文本樣式庫了。

第三步：定義 Icons

添加一個 Pages 并命名為 Guide - Icons，用于定義圖標(biāo)。

將圖標(biāo)放置在 24*24px 的安全框內(nèi)，從定義好的顏色系統(tǒng)中選擇合適的 Symbol，調(diào)整到相同的尺寸后覆蓋在圖標(biāo)之上，再把圖標(biāo)設(shè)置成 Mask 蒙版，便能獲取到顏色了。這種 Symbol 嵌套的方式，有利于顏色的同步更新。

將圖標(biāo)轉(zhuǎn)換成 Symbol，在屬性面板中鎖定 Size，并把 Resizing 設(shè)為上下左右同時吸附，以確保圖標(biāo)在使用時可以等比縮放。重復(fù)這個步驟，直到整理出所有的圖標(biāo) Symbol。

第四步：加入 Library

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

當(dāng)你編輯了 Library 中的 Symbol，那么調(diào)用了該 Library 的其他 Sketch 文件便會收到更新提示：Library Update Available（Sketch 工具欄右上角），點(diǎn)擊后可以對變更進(jìn)行預(yù)覽、對比和確認(rèn)，從而自動更新到最新版。

第五步：定義其他 Elements

根據(jù)以上對原子的定義和命名方式，依次完成對其他原子、分子和組織的定義，整個過程通過 Symbol 的不斷嵌套，最終實(shí)現(xiàn) Library 體系的創(chuàng)建。

五、辯證地看待原子設(shè)計(jì)理論

在哲學(xué)中，真理分為絕對真理和相對真理，絕對真理是不受任何限制的廣義的道理；相對真理是在特定條件下成立的有局限性的道理。原子設(shè)計(jì)理論就是一種相對真理。

1. 適合用工程師思維

原子設(shè)計(jì)理論更偏向于工程師的思路和邏輯，遵守層級結(jié)構(gòu)思維；而大部分設(shè)計(jì)師對組件庫的構(gòu)建和使用，偏向線性結(jié)構(gòu)或自然結(jié)構(gòu)思維，他們更希望快速發(fā)現(xiàn)、理解和調(diào)用組件，而非一層一層地按照層級結(jié)構(gòu)選擇組件。

2. 適合制定基礎(chǔ)組件

某些時候，我們以原子設(shè)計(jì)理論規(guī)劃構(gòu)建組件庫時，會發(fā)現(xiàn)對組件的級別和復(fù)雜度有一定的要求。相對于復(fù)雜多變的「業(yè)務(wù)型組件」，高頻復(fù)用的「基礎(chǔ)型組件」會顯得更加穩(wěn)定，適合封裝成通用組件納入設(shè)計(jì)體系。

3. 適合靈活運(yùn)用理論

原子設(shè)計(jì)理論是一種相對真理，需要根據(jù)團(tuán)隊(duì)、項(xiàng)目的實(shí)際情況靈活運(yùn)用，切勿生搬硬套。比如：既要保證組件的效率和一致，也要兼顧設(shè)計(jì)師的使用習(xí)慣；既要規(guī)范化常用組件的使用，也要考慮非常用組件的存在等等。

小結(jié)

• 原子設(shè)計(jì)理論包含5個層面：原子、分子、組織、模板、頁面；
• 原子設(shè)計(jì)體系的優(yōu)點(diǎn)：一致、清晰、高效、溝通順利；
• 你可以使用已有的設(shè)計(jì)體系搭建產(chǎn)品，也可以根據(jù)項(xiàng)目需要，自己創(chuàng)建；
• 創(chuàng)建 Library 組件庫過程中，注意元素的命名邏輯以及 Symbol 的嵌套；
• 根據(jù)實(shí)際情況靈活運(yùn)用原子設(shè)計(jì)理論，切勿生搬硬套。

歡迎關(guān)注作者的微信公眾號：「彭彭設(shè)計(jì)筆記」

「設(shè)計(jì)系統(tǒng)如何實(shí)現(xiàn)」

• 《實(shí)用全面！教你用Sketch Libraries構(gòu)建組件庫/設(shè)計(jì)體系》
• 《大公司如何做設(shè)計(jì)系統(tǒng)？24 個 Sketch 組件庫源文件合集下載》
• 《大型的視覺設(shè)計(jì)系統(tǒng)都是怎么設(shè)計(jì)出來的？》