什麼是網頁設計的"原子設計”?
Brad Frost開發了 "原子設計 "方法論,旨在指導人們如何更有意地建立介面設計系統,並使其具有清晰的層次結構。
這種方法被稱為 "原子設計",因為它是基於化學原理和對物質本質的研究。我們很多人都熟悉的元素週期表,代表了構成宇宙的固定的 "原子元素 "集合。這些成分作為我們周圍一切事物的基礎。
這種對較小的元素(或原子)和較大的物體(或分子)之間關係的理解,與設計世界和我們利用的各種元素相似,可以很好地構建我們的設計。原子設計意味著創造一個可以組合在一起的系統,以創造我們可以反覆使用的元素和模板。
原子
我們系統的基本構件是原子。顏色方案、字型、個別元素(如標題、段落、搜尋輸入和按鈕),以及其他任何與其他原子混合形成分子的東西。
分子
我們用原子組裝的位元被稱為分子。雖然它們需要原子,但分子更像是我們最終將用於建造的樂高積木碎片。分子本質上是一個原子的集合,它可以被連線起來以執行某種任務。
單獨無用的元件,如一個表格標籤、一個搜尋輸入和一個提交按鈕,組合在一起形成一個表格,可用於提供評論或制定搜尋引擎搜尋。
生物體
我們可以通過混合分子來創造更復雜但可重複的產品元件。網站上的使用者體驗和最終結果的複雜性都受到開發者組合分子的方式的影響。徽標、搜尋欄和主要導航是有機體的幾個例子。
相似和不相似的分子型別都可以構成一個有機體。徽標影像、主要導航列表和搜尋表單是可以構成一個標題生物體的幾個元件的例子。這些有機體幾乎在我們探索的每一個頁面上都普遍存在。
模板
模板是一個有機體的集合,當它們組合在一起時,就形成了一個頁面佈局。由於模板的存在,構成版面的所有元件都可以被分配。參與構建一個介面的元素最終都有一個結構。由於我們的目標是定義 "模板 "一詞,我們可以說明,它們可以被認為是可以為原子、分子和生物體提供背景的聚合體。
頁面
原子設計的最後一個階段。即使你可能不會為每個場景都規劃出頁面,但在整個設計階段做一些變化是很有用的。隨著你的資料變化,不同的資料細節或語言可能會對你的模板設計產生影響。你可以對這些差異進行測試,並通過延伸到頁面層面對你的模板進行全域性修改。
製作使用者介面的設計系統的概念正在被稱為 "原子設計 "的過程所完全改變。它將每個使用者介面元素分割成基本的和聚合的元件,從化學中獲得靈感,讓它們以各種不同的、越來越精細的形式聚集在一起,直到在可用性方面產生一個最佳結果。
相關文章
- HTML在網頁設計中是什麼作用?HTML網頁
- 網頁設計需要學什麼?網頁
- UI設計是什麼_UI設計學什麼?UI
- 什麼是設計模式設計模式
- 網頁設計入門應該學什麼?網站設計八步驟分享網頁網站
- UI設計和平面設計區別是什麼?UI
- .NET的併發程式設計(TPL程式設計)是什麼?程式設計
- 什麼是AOP程式設計?程式設計
- 什麼是設計模式?為什麼要使用設計模式?有什麼好處?設計模式
- 程式設計師的悲哀是什麼?程式設計師
- 安全設計的含義是什麼?
- 什麼是真正的架構設計?架構
- 什麼是DDD領域驅動設計的戰略設計?
- 什麼是DDD領域驅動設計的戰術設計?
- 【1024程式設計師節】程式設計師,你學程式設計的初衷是什麼?程式設計師
- 什麼是前奏設計 2/2
- 什麼是前奏設計 1/2
- 電腦程式設計是什麼?程式設計
- 什麼是程式設計?大道之行也,“程式設計”為公程式設計
- 網頁設計內容網頁中關於圖片預覽的設計網頁
- 什麼是程式設計裡的 backoff pattern程式設計
- [譯] 設計作品集網站的真正角色是什麼?網站
- 網站建設怎麼樣做?網頁設計趨勢網站網頁
- JavaScript網頁設計案例JavaScript網頁
- 使用 rem 設計網頁REM網頁
- Bioware的設計總監James Ohlen談什麼是好的設計環境
- 網站的設計需要注意什麼?網站
- 什麼是反應式程式設計?程式設計
- python UDP程式設計是什麼意思?PythonUDP程式設計
- HelloCode:什麼是少兒程式設計程式設計
- 酷酷的黑白網頁設計作品網頁
- 網頁設計的技巧總結網頁
- 網頁設計的基本規範網頁
- 漫畫 | 程式設計師的悲哀是什麼?程式設計師
- 設計模式的數學定義是什麼?設計模式
- 網頁設計有難題?12款網頁設計模板給你靈感!網頁
- photoshop網頁設計教程網站網頁網站
- 網站建設網頁設計小技巧分享網站網頁