網頁UI - 原子設計理論(上)

前言

原子設計理論并不是什么高大上的規則，它最早就是為了讓網頁設計師更容易理解網頁的構成，后來慢慢延伸到UI設計當中，它的基礎原理套用了宇宙中所蘊涵的元素的概念，即宇宙中已知的物體分解后都可以分解為一組有限的原子。

這里的宇宙中的“物質的最小單位是原子”，這一理論是由英國化學家/物理學家約翰·道爾頓提出的，繼承古希臘原子論和牛頓微粒說，提出的原子論?；瘜W元素由不可分的微粒（原子）構成的，它在一切化學變化中是不可再分的最小單位。這應該也是我們教科書中寫到的。

最小的單位用物理術語是“基本粒子”，指人們認知的構成物質的最小/最基本的單位，是組成各種各樣物體的基礎。而最新研究表明，比原子還小的還有夸克和希格斯玻色子（上帝粒子），自從夸克理論被提出后，人們意識到基本粒子也有比較復雜的結構，而不是以前認知中的只有原子。從此大家開始對基本粒子避而不談了。

我說這些基礎概念的目的是為了給分形理論做鋪墊，這會對“分形理論”的概念產生一定的影響。分形理論目前在UI設計圈還沒有被提及，我覺得它的構成要比原子設計理論更契合UI設計的構成，所以我才想通過自己的理解把這些知識傳遞給大家。

什么是原子設計理論

我本人探究問題喜歡尋找本源，因此我就去查了一下原子設計理論提出者 Brad Frost 寫的書，書名是《Atomic Design》，書中第二章有提到原子設計理論的由來，但我英文不好，只能通過自己的理解去做解釋。下面會提供原文，給大家一定的參考。

我的理解：我試圖尋找一種使用戶界面系統化的方法，并在各行各業和其他領域中尋找靈感。相對于我們所處的這個復雜的世界，如自然構成的復雜、人體結構的復雜、社會結構的復雜等等，某個領域制定系統化的方法就顯得容易了很多，因此我們可以從這些世界構成中學習、剖析、研究并把這些知識轉化并加以利用。

許多領域，如工業設計和建筑設計，已經開發出智能系統，用于制造極其復雜的物體，如汽車、飛機、輪船和大廈。這些智能系統的形成也參考了自然結構等類似的結構。因此我們可以在自然結構等類似結構中探尋，或許就能找到我們想要的答案。

Brad Frost 原話：My search for a methodology to craft interface design systems led me to look for inspiration in other fields and industries. Given this amazingly complex world we’ve created, it seemed only natural that other fields would have tackled similar problems we could learn from and appropriate. As it turns out, loads of other fields such as industrial design and architecture have developed smart modular systems for manufacturing immensely complex objects like airplanes, ships, and skyscrapers.

書籍下面 Brad Frost 就開始扯他的高中化學課，和高中化學老師了，這里就沒有什么參考價值了。

前面我講了如何將宇宙中的所有物質分解為一組有限的原子元素。這樣的規則與我們的代碼結構不謀而合，我們的代碼可以分解為一組相似的有限元素。Josh Duck的HTML元素周期表很好地闡明了我們所有的網站頁面，HTML5頁面，以及其他所有內容都是如何由相同的HTML元素組成的。 

Josh Duck是個程序員，他利用HTML代碼與元素周期表的共性，做出了一個以元素周期表為形式的HTML標識。網站是：joshduck.com 大家有興趣可以看一下。

因為我們是從一組相似并有限的模塊和元素進行構建的，所以我們可以應用自然界中發生的相同過程來設計和開發我們的用戶界面。

原子設計理論五個層面

把原子設計理論帶入到用戶界面中，原子設計就會產生五個不同層面的組成方法，這些層面相互影響，以疊加組成的方式來創建界面的系統。原子設計理論會把這五個層面進行劃分，分別是：

原子（元素、要素）

分子（組件）

組織（模塊）

模板（原型）

頁面（填充內容）

接下來一個個解釋它們的含義。

在《Atomic Design》的書中把這部分的知識定義為“生物體”，由于生物體的概念相對比較難理解，這里只簡要概述一下它。分子為我們提供了一些基礎的物質構成，如蛋白質、核酸 (DNA、RNA等)、糖類，這些常見的生物大分子構成了生物體。

生物體的概念影射到用戶界面的構成中，元素和要素（原子）結合起來構成組件（分子），組件組合起來構成組織（生物體）。組織在用戶界面中以模塊的形式存在，例如網頁的導航欄、產品信息、焦點圖、關于我們模塊；App的卡片、列表、瀑布流等。

模板

到了模板的層面，我們就應該和化學說再見了。原子、分子和組織這樣一種有層次的結構，可以幫助我們去構件設計系統中的組件，并實現組件化。但最終我們還要根據用戶需求、客戶需求和場景的變化，來幫助它們解決設計上的問題，并使原子設計更具有意義。

模板可以使“組織”組合在一起形成產品頁面的原型，產品原型可以概括的說是整個產品面市之前的一個框架設計。在這里我們可以看到設計整合在一起，并呈現出實際頁面架構和布局。模板的特征就是專注于頁面的基礎內容結構，而不是頁面的最終內容。

頁面

頁面層面是原子設計最具體的一個層面。所有模板整合在一起并形成頁面，為用戶提供具有代表性的內容，并準確描述用戶最終看到的內容。頁面也是高保真圖，它能達到和實際頁面類似的效果，正因為它更接近于實際頁面，團隊中大部分的人所耗的時間和精力，就是不斷地去修正它并完善它。

當模板填充上了實際用戶需要的內容，如圖片、圖標、文字后，就會逐漸形成頁面，當內容全部填充完后就會形成高保真圖。這里的高保真圖可不是視覺稿，視覺稿只是基于UI設計層面，而高保真圖是在產品和業務層面綜合考慮的，包含完整的產品交互邏輯、頁面流轉、實際內容和界面設計等。比視覺稿更有邏輯，更準確，更接近于實際業務層面。

為什么要進行原子設計

原子設計為制作設計系統提供了清晰的方法?？蛻艉蛨F隊成員通過實際的設計流程與步驟，能更好的去理解設計系統的概念。原子設計使我們能夠從抽象的設計中過渡到具體的設計中來，因此我們可以對一個設計系統進行一致性和可伸縮性等類似特性的控制。

通過模塊化的設計系統調動組件，可以使我們開發新的產品時，從開始就可以對產品進行嚴格的把控與一定程度上的控制，進而規避了事后風險。開發之前什么都不確定好，毫無邏輯的去開發，開發到一半發現功能與需求對不上等問題逐漸產生，會導致產品的延期、人員成本的浪費、人員能動性降低、資金成本的增加，產品的迭代率的下降、進而影響市場先機與市場占有率。

在開發新的產品或項目之前就應該確定好目標和方向，這很像德國人的思維，在軟件開發之前把一切都策劃好，之后根據之前策劃的步驟一步步去實施，如果中途發現哪里有弊端不會進行修改，要嚴格按照之前定制好的標準一步步執行，前期的項目規劃尤為的重要。用中國人的設計思維去理解德國人這樣的設計思維會覺得非常的愚蠢，但實際這樣做效率更高，溝通成本低、產出率高，質量控制更好，品質也更高。

原子設計理論 - 總結

下面顯示了逐步完成設計原子設計的過程，對于每一個層面都有相應的介紹。這五個不同的層面同時工作，以產生有效的用戶界面設計系統。概括總結原子設計理論：

原子：無法進一步細分的UI元素，是界面的基本構成要素；

分子：形成相對簡單的UI組件的原子的集合；

組織：形成界面離散部分的相對復雜的組件；

模板：組件放置在布局中，并演示設計的基礎內容結構；

頁面：將真實的內容應用于模板，并闡明變化形式以演示最終的UI并測試設計系統的彈性。

作者：羅耀

本文由羅耀創作，僅為學習交流