聊一聊原子設計對頁面造成的影響

聊一聊原子設計，對頁面造成的影響原子設計，我們在平時的評審過程當中，經常用到說：“你這個頁面沒有遵守原子設計理論”因此會有很多好伙伴很好奇，原子設計理論到底是什么，對于我們設計師又會造成什么影響？今天我們就來一起聊聊“圓子”。Phase1什么是原子設計丨理解原子設計的背景原子設計其實是一個非常早的設計理念，最早是由國外設計師BradFrost提出來的，創(chuàng)建它的起因是BradFrost在做網頁設計的過程中，發(fā)現整個頁面可以將其按照不同維度進行拆分。同時在化學當中的元素特性尋找到靈感，進而將網頁頁面當中層層嵌套的結構關系與化學當中的原子、分子進行類比，進而形成了原子設計理論。在原子設計理論當中，我們主要有

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