今日和大家分享新手知識前，先讓我們一起回到高中化學課（跳）
在化學世界裡，原子(Atom)為最小的單位，原子與原子結合會形成分子(Molecules)，分子又能組合成有機體(Organisms)，再進而構築成宇宙萬物。
​
想像一下由各種小元件（components）所組成的使用者介面 （UI），套用以上原子和分子變化過程，在介面設計上是不是就可以更系統化來建構設計規範呢～🤔

－

什麼是原子設計？
「萬物皆由原子所組成。」
原子設計最初是由設計師 Brad Frost 於 2013 年提出，為了讓開發人員更能理解網頁組成，進而發展成「使用者介面」的設計能夠結構化。
分解成更小、更簡單的元件，讓設計變得更具管理和可控性，通常分為：原子、分子、有機體、模板、頁面。
​
原子 Atom
單一可工作的「原子」元件，通常單獨使用時並無太大用處，但非常適合出現在設計元件庫中，可以一目了然地查看所有元件樣式。
​
分子 Molecules
是「原子」組成的結果，也是建構設計系統的基礎，過程如同在鼓勵專注做好一件事情的思維，再複雜的事物其實也是由簡單的元素組合而成。
​
有機體 Organisms
由「原子」及「分子」組成，可形成相對獨立的元件，透過不同「有機體」組合，可以看到網頁或介面變得越來越具體。
​
模板 Templates
此階段不再使用化學名詞代稱，而是進入頁面設計的框架。將各類「有機體」進行排版，透過不斷調整及組合有意識地建構設計系統。
​
頁面 Pages
「頁面」是模板的最終型態，具高保真度的視覺，也是模板資訊的具體產出。同時也讓我們確認及測試設計系統是否有效性的呈現內容結果。

－

原子設計的好處
❶ 一致性：將設計元素拆解為最小單位，確保每個元素都有一致的樣式和行為。
➋ 效率性：重複利用的特性可以減少發想規劃的時間，同時也能提高整個團隊的效率。
➌ 方便協作：基礎元件庫讓不同的設計師可以獨立作業，減少了協作過程中的問題。
❹ 簡化維護：對設計系統進行維護變得更加容易。
​
結語
原子設計為製作設計系統提供清晰且具邏輯性的創建方法，通過抽象到具體的過程減少了設計師及開發人員間不必要的溝通成本，更能讓團隊或客戶理解設計的脈絡，是值得嘗試的設計思考模式！
​
💬 你也嘗試過原子設計的思考模式嗎？歡迎一起聊聊對原子設計的想法喲！
​
Via｜Atomic Design by Brad Frost
#WebCrack新手村 #網站趨勢WebCRACK