網(wǎng)頁UI - 原子設(shè)計理論(上)

前言

原子設(shè)計理論并不是什么高大上的規(guī)則，它最早就是為了讓網(wǎng)頁設(shè)計師更容易理解網(wǎng)頁的構(gòu)成，后來慢慢延伸到UI設(shè)計當(dāng)中，它的基礎(chǔ)原理套用了宇宙中所蘊(yùn)涵的元素的概念，即宇宙中已知的物體分解后都可以分解為一組有限的原子。

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

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

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

什么是原子設(shè)計理論

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

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

許多領(lǐng)域，如工業(yè)設(shè)計和建筑設(shè)計，已經(jīng)開發(fā)出智能系統(tǒng)，用于制造極其復(fù)雜的物體，如汽車、飛機(jī)、輪船和大廈。這些智能系統(tǒng)的形成也參考了自然結(jié)構(gòu)等類似的結(jié)構(gòu)。因此我們可以在自然結(jié)構(gòu)等類似結(jié)構(gòu)中探尋，或許就能找到我們想要的答案。

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 就開始扯他的高中化學(xué)課，和高中化學(xué)老師了，這里就沒有什么參考價值了。

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

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

因?yàn)槲覀兪菑囊唤M相似并有限的模塊和元素進(jìn)行構(gòu)建的，所以我們可以應(yīng)用自然界中發(fā)生的相同過程來設(shè)計和開發(fā)我們的用戶界面。

原子設(shè)計理論五個層面

把原子設(shè)計理論帶入到用戶界面中，原子設(shè)計就會產(chǎn)生五個不同層面的組成方法，這些層面相互影響，以疊加組成的方式來創(chuàng)建界面的系統(tǒng)。原子設(shè)計理論會把這五個層面進(jìn)行劃分，分別是：

原子（元素、要素）

分子（組件）

組織（模塊）

模板（原型）

頁面（填充內(nèi)容）

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

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

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

模板

到了模板的層面，我們就應(yīng)該和化學(xué)說再見了。原子、分子和組織這樣一種有層次的結(jié)構(gòu)，可以幫助我們?nèi)?gòu)件設(shè)計系統(tǒng)中的組件，并實(shí)現(xiàn)組件化。但最終我們還要根據(jù)用戶需求、客戶需求和場景的變化，來幫助它們解決設(shè)計上的問題，并使原子設(shè)計更具有意義。

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

頁面

頁面層面是原子設(shè)計最具體的一個層面。所有模板整合在一起并形成頁面，為用戶提供具有代表性的內(nèi)容，并準(zhǔn)確描述用戶最終看到的內(nèi)容。頁面也是高保真圖，它能達(dá)到和實(shí)際頁面類似的效果，正因?yàn)樗咏趯?shí)際頁面，團(tuán)隊中大部分的人所耗的時間和精力，就是不斷地去修正它并完善它。

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

為什么要進(jìn)行原子設(shè)計

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

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

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

原子設(shè)計理論 - 總結(jié)

下面顯示了逐步完成設(shè)計原子設(shè)計的過程，對于每一個層面都有相應(yīng)的介紹。這五個不同的層面同時工作，以產(chǎn)生有效的用戶界面設(shè)計系統(tǒng)。概括總結(jié)原子設(shè)計理論：

原子：無法進(jìn)一步細(xì)分的UI元素，是界面的基本構(gòu)成要素；

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

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

模板：組件放置在布局中，并演示設(shè)計的基礎(chǔ)內(nèi)容結(jié)構(gòu)；

頁面：將真實(shí)的內(nèi)容應(yīng)用于模板，并闡明變化形式以演示最終的UI并測試設(shè)計系統(tǒng)的彈性。

作者：羅耀

本文由羅耀創(chuàng)作，僅為學(xué)習(xí)交流