近年來(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)毛秘、分割線等。
2. 分子
原子排列組合構(gòu)成了分子粘舟，在界面中多以「組件」的形式存在熔脂，例如：導(dǎo)航欄、標(biāo)簽欄柑肴、搜索框霞揉、按鈕、彈窗等晰骑。
3. 組織
原子适秩、分子排列組合構(gòu)成了組織，在界面中多以「模塊」的形式存在硕舆，例如：商品列表秽荞、內(nèi)容卡片、入口模塊抚官、瀑布流圖等扬跋。
4. 模板
原子、分子凌节、組織排列組合構(gòu)成了模板钦听，在界面中也稱為「原型圖」，例如：電商展示原型倍奢、外賣(mài)點(diǎn)單原型朴上、店鋪詳情原型、商戶管理原型等卒煞。
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ì)師能專注于做更重要的事剃氧。
△ 官網(wǎng)：www.uxpower.tools
2. Frames
Frames 使用了精致的組件和先進(jìn)技術(shù)，并結(jié)合 Sketch 構(gòu)建了強(qiáng)大的 Web 設(shè)計(jì)系統(tǒng)阻星，同樣能滿足修改原子朋鞍，全局同步更新的功能，支持響應(yīng)式布局妥箕。提供了近百個(gè)網(wǎng)頁(yè)模板滥酥，可以非常迅速地完成效果圖制作。
△ 官網(wǎng)：framesforsketch.com
3. iOS Blueprint
Blueprint 是一款專注于 iOS 應(yīng)用的響應(yīng)式設(shè)計(jì)系統(tǒng)畦幢，包括嵌套符號(hào)坎吻、樣式和文本圖層，可根據(jù)需求輕松進(jìn)行擴(kuò)展宇葱。除了基本的 Library 功能外瘦真，它還提供了一些通用模板，比如登錄黍瞧、注冊(cè)頁(yè)等诸尽，開(kāi)箱即用。
△ 官網(wǎng)：blueprint.rojcyk.com
4. Nested Symbols
這是一套免費(fèi)的設(shè)計(jì)系統(tǒng)印颤，它將按鈕您机、輸入框、下拉菜單、通知等控件际看，都制作成了嵌套符號(hào)咸产，方便自定義和編輯。系統(tǒng)中的所有元素仲闽，都是作者從他在 UI8.net 上排名第一的暢銷產(chǎn)品 Dashboard UI Kit 中挑選出來(lái)的锐朴。
△ 官網(wǎng)：janlosert.com
四、如何運(yùn)用原子理論創(chuàng)建自己的組件庫(kù)蔼囊？
原子設(shè)計(jì)理論最大的價(jià)值，就是為設(shè)計(jì)體系/組件庫(kù)的構(gòu)建提供思路和方法衣迷，如果你不滿足于市場(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í)分類俏扩，例如：Color/Status糜工；再添加二級(jí)分類，例如：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 等，按照「樣式名稱/顏色/對(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)建和使用，偏向線性結(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ì)理論，切勿生搬硬套岛杀。
歡迎關(guān)注作者的微信公眾號(hào)：「彭彭設(shè)計(jì)筆記」
原文鏈接：今年很火的原子設(shè)計(jì)理論阔拳，幫你做了一份全面的精華總結(jié)！ - 設(shè)計(jì) - 掘金
