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