近年來(lái)，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ì)體系/組件庫(kù)呢？原子設(shè)計(jì)體系使用過(guò)程中，又該如何規(guī)避常見(jiàn)的問(wèn)題呢？本文將一一為你揭曉。

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

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

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

1. 原子

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

2. 分子

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

3. 組織

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

4. 模板

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

5. 頁(yè)面

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

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

1. 一致

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

2. 清晰

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

3. 高效

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

4. 溝通順暢

原子設(shè)計(jì)理論不僅方便設(shè)計(jì)師思考頁(yè)面的整體性和統(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è)端和移動(dòng)端，均可響應(yīng)原子級(jí)別的操作。除了基礎(chǔ)元素，這套體系還添加了各種常見(jiàn)的設(shè)計(jì)模式、工作流程和模板，讓設(shè)計(jì)師能專(zhuān)注于做更重要的事。

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

2. Frames

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

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

3. iOS Blueprint

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

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

4. Nested Symbols

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

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

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

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

1. Sketch Library 功能簡(jiǎn)介

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

第一步：定義 Colors

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

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

第二步：定義 Fonts

添加一個(gè) Pages 并命名為 Guide – Fonts，用于定義文字樣式。

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

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

第三步：定義 Icons

添加一個(gè) 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è)為上下左右同時(shí)吸附，以確保圖標(biāo)在使用時(shí)可以等比縮放。重復(fù)這個(gè)步驟，直到整理出所有的圖標(biāo) Symbol。

第四步：加入 Library

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

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

第五步：定義其他 Elements

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

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

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

1. 適合用工程師思維

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

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

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

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

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

小結(jié)

原子設(shè)計(jì)理論包含5個(gè)層面：原子、分子、組織、模板、頁(yè)面；

原子設(shè)計(jì)體系的優(yōu)點(diǎn)：一致、清晰、高效、溝通順利；

你可以使用已有的設(shè)計(jì)體系搭建產(chǎn)品，也可以根據(jù)項(xiàng)目需要，自己創(chuàng)建；

創(chuàng)建 Library 組件庫(kù)過(guò)程中，注意元素的命名邏輯以及 Symbol 的嵌套；

根據(jù)實(shí)際情況靈活運(yùn)用原子設(shè)計(jì)理論，切勿生搬硬套。

原作者的微信公眾號(hào)：「彭彭設(shè)計(jì)筆記」