原子設計作為指導設計實踐的理論基礎，是一種分層思考的思維模式。靈活運用原子設計，能有效提升對頁面及產品的整體把控能力。

　　什么是原子設計？

　　原子設計是創建設計系統的理論方法，分為原子、分子、組織、模板、頁面五個層次。從最基礎的原子開始，原子構成分子，分子組成組織，相互協作以創造出更有效的頁面。

　　●原子(Atoms)：為頁面構成的基本元素，例如標簽、輸入框、文字、顏色等；

　　●分子(Molecules)：由原子構成的簡單UI元素，例如按鈕；

　　●組織(Organisms)：相對分子而言，較為復雜的構成物，由原子及分子所組成；

　　●模板(Templates)：以頁面為基礎的架構，將以上元素進行排版；

　　●頁面(Pages)：將實際內容(圖片、文章等)放置在特定模板內；

　　原子設計借鑒了化學中看待事物的方式，并將其應用在數字產品中。例如我們看的界面是由一些基本的元素組成，文字，顏色和圖標等都是一個個原子。

　　原子設計是一種思維模式，并不特指某一種設計風格或框架。通過原子設計理論，將產品和頁面聯系為一個有機的整體，其中的每個小元素都發揮著至關重要的作用。

　　原子設計方法論：從原子到產品

　　原子設計有特定的框架，方便幫助設計師組織思路并在設計過程中作為指導。

　　1. 原子

　　原子指化學反應不可再分的基本微粒，雖然基礎但會對分子和個體的形成產生很大的影響。

　　同理在設計中，原子是構成設計的最基礎的元素，可以是一個 icon、一種字體…本身不具備特有的功能但這些基礎元素同樣值得重視。

　　2. 分子

　　分子由原子構成，以一定的次序和排列方式結合成分子。回到設計中，多個設計元素組合在一起，也會創造出一種新東西——具有明確功能性的組件。

　　原子設計強大的地方在于，可以為分子(組件)的創造分配時間，以確保組件具有明確的意義和功能。

　　3. 組織

　　不同的分子組合形成組織，在設計中各種不同的組件組合在一起，形成一個完整的功能模塊，例如在首頁輪播圖模塊，有圖像、文字等元素，還有按鈕、導航箭頭等組件。

　　利用組織這個概念能幫助設計師建立模塊化意識，對頁面結構有更深入的理解。

　　4. 模板

　　通過元素、組件和功能模塊的相互關聯，從而得到產品的模板即產品框架，也可以理解為產品的低保真線框圖。

　　在這個階段，產品的信息架構和可視化的層次結構變得非常重要。產品頁面、搜索結果頁、主頁等都有各自的模板，會顯示內容的結構和基本的原型，方便后期使用。

　　5. 頁面

　　在模板基礎上，繼續添加需要的細節，最終會形成完整的頁面，即產品的高保真原型。

　　這個階段中需要注意的是，頁面中所有的占位符盡可能提供真實的內容——真實的圖像、真實的文案。

　　對于完成的頁面，我們可以利用原子設計的靈活性來調整和優化頁面設計。

　　比如當有某些地方的設計沒有達到預期，可以靈活調整頁面中的某個分子或組織模塊來實現想要的效果。

　　原子設計的優勢

　　1. 靈活性和適應性

　　原子設計是在設計過程中構建事物的方式，但它并不限制對環境變化做出反應的自由。

　　通過為產品中的每種類型的內容創建組件和模式，獲得一個靈活的系統。模板為產品的一致性提供了一定的支撐，后期既可以按這些模板原型快速設計，也可以根據需求靈活調整。

　　原子設計相當于將設計內容納入到一個模式里，組成的頁面不僅擁有準確的內容，并能以最好的樣式展現出來。

　　2. 系統模式

　　原子設計鼓勵設計師投入時間和精力來創建整個系統，以便在產品設計的最后階段，能夠以一種高效的方式靈活地完成設計工作。

　　3. 更少的組件，更高效的開發

　　利用原子設計可以確保在項目過程中組件的數量會受到一定的控制，避免團隊重復設計同一個組件的多個版本或提供樣式差不多的副本。

　　控制 UI 組件的數量，帶來的好處之一就是開發的效率會變得更高。有了以原子設計方法為基礎的理論架構，設計過程的每個環節會緊緊串聯在一起，避免混亂。

　　最后

　　原子設計成為一種用戶體驗設計方法，以全新的方式帶領大家設計每一個元素、組件以及頁面，通過這樣的方法論有助于設計師構建一個完整的設計系統。

　　更多關于UI培訓的問題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項目實操的話可以點擊咨詢課程顧問，獲取試聽資格來試聽我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門到精通。

　　注：本文部分文字和圖片來源于網絡，如有侵權，請聯系刪除。版權歸原作者所有!