🤔為什麼要寫這篇小記?
我們在生活中時常可以看到借鏡其他學科所發展的新學問,近幾年常聽到的「原子習慣」、「原子設計」就是從化學延伸出來,不同學科的概念往往能激起本學科的不同的做事方式。
今天我們來說說「原子設計(Atomic Design)[¹]」,這是2013年由設計師Brad Frost 提出來的新概念,目的是要讓設計「使用者介面(User Interface, 簡稱UI)」能夠結構化。
過去設計師使用的設計系統(Design System) 強調的是顏色(color), 排版(typography), 格線(grids), 組織(texture)…等應該怎麼設計,雖然設各個元素有其設計方法,但最後的成品總是有點偏向設計師的主觀經驗。
Brad Frost 思考到:設計應該也有一定的邏輯與結構才對呀!最後他在「化學」中找到了解答,那就是「原子設計(Atomic Design)」。
🤔原子設計是什麼東西?
知名的 UI 流程設計教授 Stephen Hay 曾說:
We’re not designing pages, we’re designing systems of components.
這句話很好地體現出「原子設計」的精神。那麼「原子設計」到底是怎麼來的呢?
原子設計的提出人 — Brad Frost 從化學元素週期表中體悟到:
化學中最小的元素是原子(Atom),原子與原子結合會形成分子(Molecules),分子又能組合成有機體(Organisms)、有機體再構築成與宇宙萬物。軟體的使用者介面(UI)也是由各種小元件組成(components),就像是堆積木一樣。
原子設計中總共有5個項目,下方依序介紹。
原子 (Atoms)
介面上最基礎的積木,套用到網頁設計上就是HTML標籤,例如 label, input, button…等。除此之外,如調色盤(color palettes), 字體(fonts), 動畫(animations)也都算是原子的範疇。
原子常出現在設計元件庫(Library)中,但通常一個原子是沒什麼用的。
分子 (Molecules)
如果我們將原子與原子組合起來就會形成分子,分子通常帶有自己的屬性,成為設計系統的基礎。例如我們組合上方提到的 Label, Input, Button原子,可以成為一個有用的搜尋功能。
分子可以很複雜,但畢竟還是由單純的原子組合而成。將原子組合成分子的過程其實是在鼓勵設計師:
只做一件事情而且把它做好(do one thing and do it well)。
再複雜的事情,其實也是由簡單的元素組合而成。
有機物 (Organisms)
分子就像是一個個已經拼好的小積木模塊,我們可以自由組裝這些模塊並使其變成有機物。
有機物更複雜,在介面上是相對獨立的區塊,例如下方是常見的導覽區塊 (Navigation Section)。
實際上客戶可能對分子沒什麼興趣,它們太破碎了。但有機物已經開始有一點最終畫面的影子,下方的例子是各家網路公司的「導覽區塊」,通常位於網頁的最上方:
值得留意的是,有機體可能包含類似的分子,但卻有不同的功能。舉例來說,一個標題有機體(masthead organism)包含了:
- Logo
- 主要導覽列
- 搜尋欄位
- 許多的社群連結
而一個產品區塊(product grid)也可能包含相同/類似的分子,例如:
- 產品標題
- 產品圖片
- 搜尋欄位
- 許多的社群連結
這邊的核心精神是:
盡量從「分子」組建成「有機體」, 讓「分子」可以被重複利用。
模板 (Templates)
在這個階段我們不再使用化學的名詞,也終於可以看到傳統上設計師產出的成品。「模板」由非常多的「有機體」組合而成,例如下方:
在軟體產品開發流程中,Wireframe(線框圖)就屬於Template(模板)的一個範例。當然在不了解原子設計之前,一個網頁上的元件應該怎麼擺幾乎都是憑設計師經驗,想當然沒設計經驗的人畫出的Wireframe,使用者體驗也不會好到哪去…
頁面 (Pages)
頁面(Pages)是將模板(Templates)進一步美化,以下方的範例來說,Placeholder(提示區塊)都換上真實的圖片。
頁面(Pages)也可以讓我們用來測試模板(Templates)的有效性,例如一個有40字元的標題 vs 一個有340字元的標題,其模板(Templates)就可能長得不一樣。
在沒有模板(Templates)的概念下,產品團隊可能花了過多的時間在 Page(頁面) 內容的呈現,但可能問題可能是出在模板(Templates)的排版上。
🤔 小結:為什麼要用原子設計?
原子設計之所以在UI設計中流行,是因為:
- 有一套邏輯清楚、步驟明確的設計方法學,可以讓團隊成員、老闆、客戶看到成品完成的階段性成果。
- 讓設計作品具有一致性與可擴充性,因為我們是在對元素進行不同的「排列組合」。
如果你對有哪些「UI 原子」,可以繼續閱讀下方文章:
[¹]原文連結:https://bradfrost.com/blog/post/atomic-web-design/
我是朱騏,一個渴求新知、熱愛學習的產品經理。也是一個喜歡研究各種生產力工具、熱愛將專案管理知識應用在魔術學習上的魔術愛好者。如果有任何疑問、想聽的主題,歡迎留言給我 📒你會看到這篇文章是因為我在進行365天寫作挑戰,詳情可參考《365天寫作挑戰第二季,關於寫作的新想法》。如果想給我一點鼓勵,請給我 1–10 個拍手;
如果覺得文章對你有幫助,請給我 10–40 個拍手;
如果你覺得文章寫的不錯,請給我40+ 個拍手讓我知道 👏🏻如果有任何想閱讀的主題請留言分享給我。 最後,謝謝你的閱讀!喜歡我的文章,可以點擊下方「Follow」我~| LinkedIn @ Chi Chu 歡迎交流