近年來好芭，Style Guide 逐漸發(fā)展衍變?yōu)?Design System燃箭，基于一套架構(gòu)嚴謹、規(guī)則統(tǒng)一的框架體系舍败，產(chǎn)品表現(xiàn)層面的設計可以逐漸實現(xiàn)模塊化運作招狸，從而大大提高設計效率。
而 Atomic Design（原子設計）是構(gòu)建 Design System 的核心指導理論邻薯。那么裙戏，以原子理論為依據(jù)構(gòu)建的設計體系有哪些？如何運用原子理論構(gòu)建自己的設計體系/組件庫呢厕诡？原子設計體系使用過程中累榜，又該如何規(guī)避常見的問題呢？本文將一一為你揭曉灵嫌。
一壹罚、什么是原子設計理論葛作？
在化學中，所有的物體都是由原子構(gòu)成猖凛，原子組合構(gòu)成分子赂蠢，分子組合構(gòu)成有機物，最終形成了宇宙萬物形病。
2013 年前端工程師 Brad Forst 將此理論運用在界面設計中客年，形成一套設計系統(tǒng)，包含 5 個層面：原子漠吻、分子量瓜、組織、模板途乃、頁面绍傲。
1. 原子
原子是最基本和最小顆粒度的單位，在界面中以「元素」的形式存在耍共，例如：顏色烫饼、文字、圖標试读、分割線等杠纵。
2. 分子
原子排列組合構(gòu)成了分子，在界面中多以「組件」的形式存在钩骇，例如：導航欄比藻、標簽欄、搜索框倘屹、按鈕银亲、彈窗等。
3. 組織
原子纽匙、分子排列組合構(gòu)成了組織务蝠，在界面中多以「模塊」的形式存在，例如：商品列表烛缔、內(nèi)容卡片馏段、入口模塊、瀑布流圖等践瓷。
4. 模板
原子毅弧、分子、組織排列組合構(gòu)成了模板当窗，在界面中也稱為「原型圖」，例如：電商展示原型寸宵、外賣點單原型崖面、店鋪詳情原型元咙、商戶管理原型等。
5. 頁面
模板填充了真實的內(nèi)容（圖片巫员、文字等）后形成頁面庶香，也就是常說的「視覺稿」，例如：商品列表頁简识、外賣點單頁赶掖、教育課程頁、資訊管理頁等七扰。
二奢赂、為什么要以原子理論作為指導？
1. 一致
原子設計理論以上文 5 個層面為基礎颈走，從原子到頁面的構(gòu)建過程中膳灶，充分發(fā)揮了設計元素的可復用性，避免重復生產(chǎn)立由，體現(xiàn)了一致性的設計原則轧钓。
2. 清晰
原子設計理論從抽象到具象、由局部到整體锐膜，層級分明毕箍，為設計師構(gòu)建組件庫提供了清晰的方法論指導，同時幫助團隊成員更好地理解設計體系的價值道盏。
3. 高效
隨著產(chǎn)品的不斷迭代而柑，以原子設計理論指導完成的設計體系，將會更加高效便捷地適應新的變化捞奕，你只需輕輕改變某些原子牺堰、分子的屬性或組合方式，便會迎來整個體系的同步更新颅围，易于擴展和維護伟葫。
4. 溝通順暢
原子設計理論不僅方便設計師思考頁面的整體性和統(tǒng)一性，也能讓前端工程師和產(chǎn)品經(jīng)理院促，清楚地了解產(chǎn)品框架層和表現(xiàn)層的邏輯結(jié)構(gòu)筏养，降低不必要的溝通和修改成本。
三常拓、以原子理論為依據(jù)構(gòu)建的設計體系
1. UX Power Tools
UX Power Tools 提供了構(gòu)建產(chǎn)品和應用程序所需的基本元素渐溶，包含了網(wǎng)頁端和移動端，均可響應原子級別的操作弄抬。除了基礎元素茎辐，這套體系還添加了各種常見的設計模式、工作流程和模板，讓設計師能專注于做更重要的事拖陆。
官網(wǎng)：https://www.uxpower.tools
2. Frames
Frames 使用了精致的組件和先進技術弛槐，并結(jié)合 Sketch 構(gòu)建了強大的 Web 設計系統(tǒng)，同樣能滿足修改原子依啰，全局同步更新的功能乎串，支持響應式布局。提供了近百個網(wǎng)頁模板速警，可以非常迅速地完成效果圖制作叹誉。
官網(wǎng)：http://framesforsketch.com
3. iOS Blueprint
Blueprint 是一款專注于 iOS 應用的響應式設計系統(tǒng)，包括嵌套符號闷旧、樣式和文本圖層长豁，可根據(jù)需求輕松進行擴展。除了基本的 Library 功能外鸠匀，它還提供了一些通用模板蕉斜，比如登錄、注冊頁等缀棍，開箱即用宅此。
官網(wǎng)：https://blueprint.rojcyk.com
4. Nested Symbols
這是一套免費的設計系統(tǒng)，它將按鈕爬范、輸入框父腕、下拉菜單、通知等控件青瀑，都制作成了嵌套符號璧亮，方便自定義和編輯。系統(tǒng)中的所有元素斥难，都是作者從他在 UI8.net 上排名第一的暢銷產(chǎn)品 Dashboard UI Kit 中挑選出來的枝嘶。
官網(wǎng)：https://janlosert.com
四、如何運用原子理論創(chuàng)建自己的組件庫哑诊？
原子設計理論最大的價值群扶，就是為設計體系/組件庫的構(gòu)建提供思路和方法，如果你不滿足于市場上現(xiàn)有的設計系統(tǒng)镀裤，我們還可以自己創(chuàng)建竞阐。下文我會簡單介紹如何使用 Sketch Library 功能實現(xiàn)組件庫的創(chuàng)建。
Sketch Library 功能簡介
一個 Library 本質(zhì)上就是一個 Sketch 文件暑劝，當你編輯了 Library 中的 Symbol骆莹，那么調(diào)用了該 Library 的其他 Sketch 文件便會收到更新提示，你可以對變更進行預覽担猛、對比和確認幕垦，使這些 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ù)設計規(guī)范猾漫，將不同字號的文字樣式逐一羅列出來点晴，例如：Large Title、Title 1悯周、Body 等粒督，按照 樣式名稱/顏色/對齊方式 的層級結(jié)構(gòu)，將文字賦予 Text Style禽翼，例如：Body/Blue/Left 等屠橄，可使用 Rename it 插件批量命名。重復這個操作闰挡，直到整理出所有的字體樣式锐墙。
利用 Sketch Styles Generator 插件 生成文本樣式庫，再使用 Shared Text Styles 插件 導出 .json 文件长酗，從不同的 Sketch 文件中導入 .json 文件溪北，便能實現(xiàn)共享文本樣式庫了。
第三步：定義 Icons
添加一個 Pages 并命名為 Guide - Icons花枫，用于定義圖標刻盐。
將圖標放置在 24*24px 的安全框內(nèi)，從定義好的顏色系統(tǒng)中選擇合適的 Symbol劳翰，調(diào)整到相同的尺寸后覆蓋在圖標之上敦锌，再把圖標設置成 Mask 蒙版，便能獲取到顏色了佳簸。這種 Symbol 嵌套的方式乙墙，有利于顏色的同步更新颖变。
將圖標轉(zhuǎn)換成 Symbol，在屬性面板中鎖定 Size听想，并把 Resizing 設為上下左右同時吸附腥刹，以確保圖標在使用時可以等比縮放。重復這個步驟汉买，直到整理出所有的圖標 Symbol衔峰。
第四步：加入 Library
使用快捷鍵「cmd+, 」打開 Preferences 面板，選擇「Libraries」標簽蛙粘，點擊「Add Library」按鈕添加剛才的 Sketch 文件垫卤，完成后就可以從其他的 Sketch 文件中，對此庫里的元素進行調(diào)用了出牧。
當你編輯了 Library 中的 Symbol穴肘，那么調(diào)用了該 Library 的其他 Sketch 文件便會收到更新提示：Library Update Available（Sketch 工具欄右上角），點擊后可以對變更進行預覽舔痕、對比和確認评抚，從而自動更新到最新版。
第五步：定義其他 Elements
根據(jù)以上對原子的定義和命名方式伯复，依次完成對其他原子慨代、分子和組織的定義，整個過程通過 Symbol 的不斷嵌套边翼，最終實現(xiàn) Library 體系的創(chuàng)建鱼响。
五、辯證地看待原子設計理論
在哲學中组底，真理分為絕對真理和相對真理丈积，絕對真理是不受任何限制的廣義的道理；相對真理是在特定條件下成立的有局限性的道理债鸡。原子設計理論就是一種相對真理江滨。
1. 適合用工程師思維
原子設計理論更偏向于工程師的思路和邏輯，遵守層級結(jié)構(gòu)思維厌均；而大部分設計師對組件庫的構(gòu)建和使用唬滑，偏向線性結(jié)構(gòu)或自然結(jié)構(gòu)思維，他們更希望快速發(fā)現(xiàn)棺弊、理解和調(diào)用組件晶密，而非一層一層地按照層級結(jié)構(gòu)選擇組件。
2. 適合制定基礎組件
某些時候模她，我們以原子設計理論規(guī)劃構(gòu)建組件庫時稻艰，會發(fā)現(xiàn)對組件的級別和復雜度有一定的要求。相對于復雜多變的“業(yè)務型組件”侈净，高頻復用的“基礎型組件”會顯得更加穩(wěn)定尊勿，適合封裝成通用組件納入設計體系僧凤。
3. 適合靈活運用理論
原子設計理論是一種相對真理，需要根據(jù)團隊元扔、項目的實際情況靈活運用躯保，切勿生搬硬套。比如：既要保證組件的效率和一致澎语，也要兼顧設計師的使用習慣途事；既要規(guī)范化常用組件的使用，也要考慮非常用組件的存在等等擅羞。
小結(jié)
- 原子設計理論包含 5 個層面：原子盯孙、分子、組織祟滴、模板、頁面歌溉；
- 原子設計體系的優(yōu)點：一致垄懂、清晰、高效痛垛、溝通順利草慧；
- 你可以使用已有的設計體系搭建產(chǎn)品，也可以根據(jù)項目需要匙头，自己創(chuàng)建漫谷；
- 創(chuàng)建 Library 組件庫過程中，注意元素的命名邏輯以及 Symbol 的嵌套蹂析；
- 根據(jù)實際情況靈活運用原子設計理論舔示，切勿生搬硬套。
本期分享的內(nèi)容就到這里电抚，大家對原子設計理論有什么看法惕稻？歡迎留言討論。你也可以關注我的公眾號「彭彭設計筆記」蝙叛，我會用簡練的文字俺祠，為你提煉最有價值的設計知識。
