聊一聊原子設計，對頁面造成的影響
原子設計能夠指導我們?nèi)ヂ涞卦O計系統(tǒng)，去設計頁面。本篇文章，作者解釋了原子設計定理中物種類型的具體定義，以及說明了原子設計為什么在B端設計當中如此重要，還有原子對于頁面設計造成的影響。相信看完文章后，你會對原子設計有了新的理解。
原子設計，我們在平時的評審過程當中，經(jīng)常用到說：“你這個頁面沒有遵守原子設計理論”
因此會有很多好伙伴很好奇，原子設計理論到底是什么，對于我們設計師又會造成什么影響?今天我們就來一起聊聊 “圓子”。
Phase 1 什么是原子設計丨理解原子設計的背景
原子設計其實是一個非常早的設計理念，最早是由國外設計師 Brad Frost 提出來的，創(chuàng)建它的起因是 Brad Frost 在做網(wǎng)頁設計的過程中，發(fā)現(xiàn)整個頁面可以將其按照不同維度進行拆分。同時在化學當中的元素特性尋找到靈感，進而將網(wǎng)頁頁面當中層層嵌套的結(jié)構(gòu)關(guān)系 與化學當中的原子、分子進行類比，進而形成了原子設計理論。
在原子設計理論當中，我們主要有 原子、分子、組織、模塊、頁面，這五種不同的類型，它們的關(guān)系由大到小，層層嵌套，而這種關(guān)系，就如同我們?nèi)シ治鰡栴}[1]，希望能夠通過一層一層的分析，去尋找設計當中的靈感。
我們先來了解一下這五種類型的具體定義：
01. 原子丨頁面當中的基礎元素
在整個頁面設計當中，我們把原子看作是設計頁面中最為基礎的元素單位�？梢岳斫鉃轫撁娈斨械娜我鈨�(nèi)容，都是由它組成。
在實際使用原子設計的理論過程中，我們可以將頁面當中的：顏色、文字、圖標、投影、按鈕、分割線、容器，看作為我們的原子。
(這里沒有將按鈕等小型組件歸納在內(nèi)，是因為為了后續(xù)與 Figma 當中 Style 保持一致，理念層面的東西，不用過于糾結(jié) : )
也正是因為它是我們頁面當中的基礎，導致我們在制作項目的初期，只要開始動手繪制頁面，我們就需要將頁面當中的原子進行設定，這樣才能能夠保證風格統(tǒng)一。
原子設計在 Figma 當中也會有體現(xiàn)，因為頁面設計會有很多基礎樣式，因此我們可以通過設定它的基礎 Style ，進而去限制頁面當中的原子內(nèi)容。
其中包含：顏色、文字、投影、分割線 都能夠在里面進行設定，因此這里對于 Figma 的贊美，我們就盡量克制，總之對于 原子的限制，主要就是我們在頁面當中，所有元素都要包含有原子的 Style 才行。
02. 分子丨多個原子的組合
分子是由多個原子組合而成，兩個原子即可組成一個分子。其實就是將原子，按照不同的組件需求進行搭建，進而形成一個個分子。在我們對分子的理解當中，可以把按鈕、輸入框、下拉菜單、Tooltips、Popover、Popoverconfirm… 理解為是我們的分子。
它們的特點是：
首先內(nèi)容不會過大，導致占據(jù)太多頁面;
組件較為獨立，就是一個簡單的傳入輸入再傳出，不會特別復雜。
其實分子就可以和大多數(shù)基礎組件進行對應，因此也就意味著我們在建立好 Figma Style 過后就需要去定義不同的組件內(nèi)容。
當我們有了這樣一個思路過后，我們在分析一個組件時，你能夠快速知道我究竟要設計什么內(nèi)容。比如現(xiàn)在我們需要設計一個Popoverconfirm 氣泡確認框，可以思考一下一共包含有哪些原子?[2]
03. 組織丨復雜的界面組件
組織是界面當中相對復雜的部件，因為需要在各個頁面進行復用，將其抽象為組織，來進行使用。比如常見的：高級表單、穿梭框、表頭分組、導航菜單……
在實際的工作當中，組織與分子容易混淆，但我們可以這樣來理解：分子通常是較小的元素單位;組織是頁面復雜，同時邏輯復雜的較大元素單位。
比如以這個頁面為例，你可以發(fā)現(xiàn)頁面當中每一個模塊，我們都可以將其歸納為一個組織來進行設計，正是有了一個一個的組織，我們的頁面規(guī)則才會變得更加規(guī)整，也通過這樣，就能夠?qū)⒍鄠�組織進行復用，從而快速設計復用性的頁面。
04. 模板丨頁面當中固定
模板是將分子、組織放置在頁面當中，通過固定頁面的結(jié)構(gòu)與設計模式，最終形成模板。通常這類結(jié)構(gòu)與模式，都可以為頁面的原型，它的意義在于復用，設計師通過專注頁面的布局結(jié)構(gòu)，找到系統(tǒng)當中能夠快速復用的結(jié)構(gòu)形式，同時模板的存在，也能夠幫助團隊內(nèi)部進行高效溝通，這樣能保證方案能夠又快又好的實現(xiàn)。
05. 頁面丨頁面的最終產(chǎn)出
頁面其實是模板的“高保真”，它填充了頁面當中真實的數(shù)據(jù)內(nèi)容，重點是將原型信息替換為有代表性的真實內(nèi)容，讓頁面能被用戶快速感知。
在頁面階段主要是以視覺出發(fā)，目的也是通過你的頁面，能夠讓所有人快速知道最終實現(xiàn)出來的效果究竟如何，并且了解真實內(nèi)容填充以后，我們的模板、組織、分子 能否應對目前的內(nèi)容量。
在頁面當中，我們還需要限制具體的內(nèi)容量，比如在下方的頁面當中，我們就需要分析內(nèi)容的具體數(shù)值，進而去書寫設計備注，讓我們設計頁面時，知道究竟有哪些局限。
Phase 2 優(yōu)點丨原子設計為什么如此重要
我們了解完原子設計的定理過后再來分析一下：原子設計為什么在B端設計當中如此重要?
01. 構(gòu)建設計系統(tǒng)的基礎
因為隨著 B 端行業(yè)當中產(chǎn)品的火爆，越來越多的企業(yè)產(chǎn)品線擴大，開始需要設計系統(tǒng)來提升開發(fā)與設計的工作效率(理論上)，因此想通過設計系統(tǒng)對產(chǎn)品設計規(guī)范。而制作設計師系統(tǒng)就必須要了解原子設計理論，因為它能夠幫助我們一步一步的去搭建整個系統(tǒng)，這樣能夠避免當你在開始搭建系統(tǒng)時，造成的各種問題：
頁面不統(tǒng)一，設計系統(tǒng)之間的頁面差距過大，因此沒辦法查看對應的頁面信息
過于相似，很多企業(yè)的設計系統(tǒng)總給人似曾相識的感覺，這種情況，我們能夠在 定義原子與分子的時候盡可能避免
因此了解它的基礎構(gòu)成后，能夠有一套核心理論指導你們進行實操。
02. 幫助我們分析頁面
很多同學拿到一個頁面，通常會被視覺元素所干擾：比如這張圖片好不好看?這個圖標畫得怎么樣?讓我們沒辦法聚焦到某一個維度分析。
而原子設計理論當中，我們便可以從五個維度進行整理，比如以下圖為例，在去分析的時候給人的感覺是，頁面很丑，但具體丑在哪里，我們只能夠抽象的去說出 1-2 點，不能夠?qū)⑵浜w完整。
那我們通過原子設計理論分析，就可以得出：
a.原子：在原子層面，頁面的所有的元素風格沒有統(tǒng)一，查看對應的顏色畫板當中發(fā)現(xiàn)，在整個頁面里面一共用到 XX 種顏色，很明顯不符合我們頁面的設計思想。
b.分子：在一個 圖例當中，出現(xiàn)了兩種完全不同大小的字體，沒辦法將其統(tǒng)一呈現(xiàn)，因此在圖表的模塊當中，顯然不太合理。
c.組織：頁面不同的模塊之間，差距過大，導致組織與組織之間，整體設計不太協(xié)調(diào)。
d.模板：在同一個區(qū)域當中，出現(xiàn) 4 個工作臺 字段，明顯在原型設計的過程當中缺乏規(guī)劃，沒有經(jīng)過思考。
e.頁面：頁面高保真視覺…… emmm~ 一言難盡~
03. 快速產(chǎn)品迭代
原子設計能夠幫助產(chǎn)品進行快速迭代，無論是交互還是視覺，我們都可以通過原子實現(xiàn)頁面的快速調(diào)整，進而讓產(chǎn)品快速迭代。在日常的 B 端工作當中，主要有兩類迭代需求：換膚、視覺提升。
換膚可以完全基于 Figma 當中的 Style 快速完成，這其實就是在調(diào)整原子設計理論當中的 顏色原子 來快速實現(xiàn)。
視覺提升則主要針對 顏色、圖標、圓角、投影 等多個視覺元素的調(diào)整，進而實現(xiàn)頁面的整體提升。
Phase 3 缺點丨原子對于頁面設計造成的影響
這里談影響，主要是去聊聊關(guān)于原子設計這個理論，究竟會有哪些缺點?
01. 限制過多，鐐銬跳舞
我常說 B 端設計就是帶著鐐銬跳舞，其實同樣嚴格的原子設計理論也會有兩面性，一方面它是能夠保證我們的設計下限會更高，同樣的它也局限了我們的設計上限。
在一個頁面，設計規(guī)范當中已經(jīng)對于這里的信息有了明確的規(guī)定，所以我們再去做設計的時候，考慮的只能夠?qū)⑦@些信息，按照已有的規(guī)定來進行實現(xiàn)。
因此在對創(chuàng)意型設計的時候，他確實會限制我們的，思想活躍度。
舉一個例子，比如在一個業(yè)務組件當中，本身已經(jīng)就有了 很多通用的組件，那我還需要業(yè)務組件嗎?這就是一個典型的弊端，這也就導致所有的頁面總是由統(tǒng)一的這些內(nèi)容構(gòu)成，看起來更加的模板、不好用。
關(guān)于原子，大家不用過于神秘化，其實就是一個將復雜的事物分析簡單的一種方式，只不過我們在設計的過程當中會經(jīng)常用到罷了。
來源：人人都是產(chǎn)品經(jīng)理
以上是關(guān)于用戶增長師的相關(guān)信息，以供大家查看了解。想要了解更多用戶增長師信息，第一時間了解用戶增長師相關(guān)資訊，敬請關(guān)注唯學網(wǎng)用戶增長師欄目，如有任何疑問也可在線留言，小編會為您在第一時間解答!
