互動設計工具之“原子設計方法論”
編輯導語：在自然界中，物品是按原子-分子-材料-結構-物品構成的，一級一級從基礎到複雜，而在設計中，也有對應的設計方法——原子方法論。本文作者結合案例，分析了原子方法論在設計中的應用，一起來看一下吧。
一、自然界的啟發
在化學反應上，保持化學性質的最小單位是分子，化學變化中的最小單位是原子。由於絕大多數人造物品基本都是從原子級別出發經過一系列化學物理反應制得物品，所以從這個角度來說，物品的構成從小到大依次可分為為：原子-分子-材料-結構-物品。
在生物學上也有類似的層級概念：細胞-組織-器官-系統-生物體。
類似的結構在自然中隨處可見，可以說整個宇宙最根本的結構便是這樣一級一級從基礎到複雜的。
就像下圖所示，由2個氫原子和1個氧原子組成2份水分子。
扯遠了，那麼在設計中是否有對應的結構或者方法論呢？有的，那就是今天要介紹給大家的設計工具——原子方法論。
原子設計借鑑了剛剛提到的看待事物組成的方式，並將其應用在數字產品中。例如我們看的介面是由一些基本的元素組成，如按鈕、圖示、標籤、文字、輸入框等。從構建一個類似的小模組開始，我們可以應用類似自然中這種一級一級的過程來設計和開發我們的使用者介面。
原子設計由五個不同的階段組成，分別是：
看看像不像前文提到的“原子-分子-材料-結構-物品”人造物的組成結構，只不過這裡演變成了非實體的使用者介面結構。
原子設計由原子、分子、有機體、模板和頁面共同協作以創造出更有效的使用者介面系統的一種設計方法。
原子設計不是一個線性的過程，它更像是一個心理模型，來幫助我們把使用者介面看作是一個連貫的整體，同時也是一些元素的集合。
這五個階段的每一個階段都會在我們的介面設計系統層級中扮演重要角色，現在，讓我們更深入的瞭解每一個階段。
1. 原子
我們使用者介面的“原子”就是那些構成我們使用者介面的基本構件了 。這些原子包括了基本的HTML元素，例如表單標籤、輸入框、按鈕和其他基本不能拆解的元素。
除了具象的元素，色彩、字型等抽象概念也是原子。
2. 分子
分子就像是一個由UI元素組成的相對簡單的組織。例如，一個表單標籤、搜尋框和按鈕共同打造一了個搜尋表單分子。
將元素組裝為簡單的功能組，由此形成一個簡單、便攜、可重複使用的元件，可應用到多個需要重複使用的地方。
建立簡單的元件可幫助UI設計人員和開發人員提高效率減少混亂。
相似而又不一致的功能組隨意使用，會大大增加介面的複雜性，會使得介面變得無比難用。因此，建立簡單的元件分子使設計更規範，開發更有效率，測試更容易，並促進整個流程比較好地達成設計目的與實現效果的一致性。
3. 有機體（組織）
現在我們有簡單、功能強大且可重複使用的元件，我們可以把它放在更進一步的結構中。
logo+主導航列表+搜尋表單分子=標題欄有機體。
有機體就是由多個分子、原子構成的模組。形成一些具有特定功能的集合體，比如承載各類資訊的卡片、列表等等。
4. 模板
模板是頁面級別的物件，它將元件放置在佈局中，在這裡我們可以通俗理解為線框圖，它展示了頁面的底層結構。
以上的三個層面僅僅屬於相互割裂的個體，它們不足以支撐一個頁面，就像一堆器官胡亂堆在一起是無法組織成一個有機的系統的。但是當我們基於產品及使用者的需求，將多個有機體進行恰當的組合形成“模板”後，產品便開始有了雛形，而這個模板就是互動設計師所繪製的原型圖。
從使用者體驗五要素上來說，它屬於框架層。
模板所存在的意義就是幫助設計師專注在功能、內容的佈局排版，搭建一個抽象化的產品模型為最後一步做鋪墊。
請注意，模板不是頁面最終呈現給使用者的成品。
所以在這一步，我們並不知道具體的填充內容是什麼，因為不能保證內容一直就是一成不變的，但是根據業務需要，我們在這個階段可以限定內容的合理區間，比如影象元素的大小和文字長度的變化。
因此設計框架時候，必須將合理的餘量考慮進去，來動態地設計頁面的底層結構，保證系統的彈性與相容。
比如商品標題文字長度最大支援兩階或不超過16個字，超過了模板的承受最大值就要把多餘文字進行省略用“…”代替。
又比如購物車列表中一個商品都沒有和有100個商品的展示；不同的許可權導致不同的使用者看到的同類元素或元件有所不同；同一個遊戲框架下不同遊戲的導航欄元素不同，有的是按時間結束，有的是按輪次結束，那麼導航欄上就分別顯示“倒計時”和“輪次計數”；在自適應頁面中，頁面寬窄不同，內容卡片顯示的文字資訊長度也有多寡區別等等。
這裡就不繼續舉例了。
5. 頁面
將實際內容（圖片、文章等）套在模板上，頁面就是模板的具體實現。
這裡可以通俗地理解為真實的高保真原型或者實際效果圖了。
在此階段，作為互動設計師我們主要幹兩件事：驗證模板、最佳化視覺傳遞資訊。
進一步驗證模板的彈性，如果有問題再返回上一階段繼續最佳化。
確定頁面調性，檢視視覺效果是否準確地向用戶傳達資訊，調整視覺上的強弱對比來引導使用者行為，來達到設計目的。
二、原子方法論優點
1. 一致性
由於將頁面分解成單一元素，不論在哪一個頁面，基礎元素元件都會保持一致，使得設計在視覺上更為和諧。不但保證了使用者經驗一致性，也保證了開發和測試對設計的理解一致性。
2. 靈活性&效率
原子設計方法還有個強大的地方就是可以節約大量的時間，使你更靈活地將精力用在創造力上。根據專案需求和時間進度，可以自由選擇顆粒度切入到原子設計的某一個層級開始。
如果我們想要一個大量的重複頁面，可以從模板和頁面開始設計，創造多種可以複用的模板；如果我們想要更多創造性，建議從原子和分子開始，從最基礎的地方發揮創意。
另外，原子設計可以節約我們在大量重複性頁面或元件上反覆除錯花費的時間，將節約下來的時間用在更具創意的事情上，如正確的使用者流、品牌標識、使用者反饋分析、開發創新的解決方案和進行相關的情感設計……
3. 更少的元件，更高效的維護
對基礎元素的歸類整理，實際上可以減少許多重複又類似的設計，而且大大減少元件的數目，根據奧卡姆剃刀原則：如無必要勿增實體，大量應用可通用替代的元件，維護起來也很方便，減少開發和測試理解上的偏差。
圖片來源於網上
三、案例
1. 國外FEVO網站改版，快速產生多套設計方案
此設計目的是要用最少資源達到目的，減少開發成本，這時我們可以利用原子設計，歸納元素建立原子庫。透過組織原子建立視覺層次，突出重點，保持一致性。
圖片來源於網上
由於將網頁拆解成元素，可以更方便重複使用、創造不同的視覺效果。最後設計師設計了四種模板，客戶可以選擇相對的顏色體系決定要表達的品牌調性。
1）現代簡潔版，高濃度的扁平色彩產生有活力、精神的視覺效果：
圖片來源於網上
2）金色漸變+深色底創造出高貴的形象，適合奢侈品牌等場景：
圖片來源於網上
3）利用女性柔和的低飽和度撞色搭配，適合婚禮策劃、女性服裝春夏活動：
圖片來源於網上
2. vivo官網APP首頁改版
透過對有機體的基本構成——原子分子，進行歸類、最佳化、重組，解決老版產品的容器樣式混亂、無效資訊多、資訊不全的問題。
1）統一了首頁所有 Banner 的規格、元素組成、文案排版，包括頭部 Banner / 新品 Banner / 穿插 Banner。
圖片來源於網上
2）統一了資訊架構的邏輯，文案限制在 3 階之內，提供了「組合型」和「橫排型」兩種形式，對應不同的場景。
圖片來源於網上
組合型容器提供 2 種規格，擁有同樣的資訊量，根據業務需求自由組合。
圖片來源於網上
3）統一使用上圖下文的資訊架構，可隨場景進行不同形式的拓展。
圖片來源於網上
最終形成了簡約但又非常靈活的卡片有機體，促使新的模板和頁面能夠適應當和未來較長時間的業務發展需求。
四、元件庫
其實這種分級和模組化的思想，已經出現在各大廠的元件庫了，比如螞蟻的Ant Design，谷歌的Material Design，前端程式碼中也一樣有類似的元件庫，比如基於vue的element-ui。
1. Material Design
Android早期特點就是：自由奔放，開發者可以任意上傳自己的應用，而不必透過稽核；開發者可以隨意按照自己的想法設計應用，Google方面不予任何限制，結果就是使用者體驗非常混亂。
Google I/O 2014上正式釋出了Material Design，該設計系統結合卡片式設計、現實世界裡紙張的隱喻，旨在統一不同平臺、裝置的設計語言，讓使用者在不同平臺上也有連貫的體驗。
2. Ant Design
一套企業級 UI 設計語言和 React 元件庫。
Ant Design 源自螞蟻金服體驗技術部的後臺產品開發，經過大量的專案實踐和總結，抽象出的一套企業級的互動視覺規範，統一後臺專案的前端 UI 設計，遮蔽各種不必要的設計差異和前端實現成本，解放設計和前端開發資源。
元件部分是Ant Design最大的亮點， 豐富的元件提供了覆蓋大部分應用場景的能力。大量的元件可以靈活地應用到後臺產品中，實現非常豐富又一致的功能體驗。
3. element-ui
另外，在前端程式開發中，為避免重複造輪子，提高開發效率和一致性，許多為程式設計師定製的元件庫也很受歡迎。
比如element-ui，是由餓了麼前端團隊推出的一套為開發者、設計師和產品經理準備的基於Vue。js的桌面元件庫，整個ui風格簡約很實用，同時也極大的提高了開發者的效率，是一個非常受歡迎的元件庫。
五、最後
原子設計方法論在現實世界應用非常廣泛，從自然組成到人造物品到網際網路應用，甚至以後的VR、智慧車載系統等智慧化場景中，都有很好的前景和適應性。
尤其是對於那種產品線很多，但又想統一設計原則和設計語言的公司非常有效。
當然這只是諸多設計方法論中的一種，根據實際需求和場景綜合運用各種方法達到最好的效果才是最重要的。
參考：
原子設計原文 https：//atomicdesign。bradfrost。com/table-of-contents/
原子設計翻譯專欄https：//www。zhihu。com/column/atomicdesign
Atomic Design原子設計|構建科學規範的設計系統https：//www。w3cplus。com/css/atomic-design。html
原子設計方法論！值得一學的設計思維模式http：//www。woshipm。com/pd/5170845。html
一篇文章搞懂原子設計http：//www。woshipm。com/ucd/4309333。html
大廠實戰！vivo官網APP首頁改版設計過程覆盤http：//www。woshipm。com/pd/5361939。html
本文由 @style12689 原創釋出於人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議
