什麼是網頁設計的"原子設計”?

banq發表於2022-06-29

Brad Frost開發了 "原子設計 "方法論,旨在指導人們如何更有意地建立介面設計系統,並使其具有清晰的層次結構。

這種方法被稱為 "原子設計",因為它是基於化學原理和對物質本質的研究。我們很多人都熟悉的元素週期表,代表了構成宇宙的固定的 "原子元素 "集合。這些成分作為我們周圍一切事物的基礎。

這種對較小的元素(或原子)和較大的物體(或分子)之間關係的理解,與設計世界和我們利用的各種元素相似,可以很好地構建我們的設計。原子設計意味著創造一個可以組合在一起的系統,以創造我們可以反覆使用的元素和模板。

原子
我們系統的基本構件是原子。顏色方案、字型、個別元素(如標題、段落、搜尋輸入和按鈕),以及其他任何與其他原子混合形成分子的東西。

分子
我們用原子組裝的位元被稱為分子。雖然它們需要原子,但分子更像是我們最終將用於建造的樂高積木碎片。分子本質上是一個原子的集合,它可以被連線起來以執行某種任務。

單獨無用的元件,如一個表格標籤、一個搜尋輸入和一個提交按鈕,組合在一起形成一個表格,可用於提供評論或制定搜尋引擎搜尋。

生物體
我們可以通過混合分子來創造更復雜但可重複的產品元件。網站上的使用者體驗和最終結果的複雜性都受到開發者組合分子的方式的影響。徽標、搜尋欄和主要導航是有機體的幾個例子。

相似和不相似的分子型別都可以構成一個有機體。徽標影像、主要導航列表和搜尋表單是可以構成一個標題生物體的幾個元件的例子。這些有機體幾乎在我們探索的每一個頁面上都普遍存在。

模板
模板是一個有機體的集合,當它們組合在一起時,就形成了一個頁面佈局。由於模板的存在,構成版面的所有元件都可以被分配。參與構建一個介面的元素最終都有一個結構。由於我們的目標是定義 "模板 "一詞,我們可以說明,它們可以被認為是可以為原子、分子和生物體提供背景的聚合體。

頁面
原子設計的最後一個階段。即使你可能不會為每個場景都規劃出頁面,但在整個設計階段做一些變化是很有用的。隨著你的資料變化,不同的資料細節或語言可能會對你的模板設計產生影響。你可以對這些差異進行測試,並通過延伸到頁面層面對你的模板進行全域性修改。

製作使用者介面的設計系統的概念正在被稱為 "原子設計 "的過程所完全改變。它將每個使用者介面元素分割成基本的和聚合的元件,從化學中獲得靈感,讓它們以各種不同的、越來越精細的形式聚集在一起,直到在可用性方面產生一個最佳結果。

 

相關文章