- 相關推薦
網頁設計深究之從原子到頁面
對于一個資深的網頁設計者來說，一個網頁可以被拆分為一個個原子。那么從原子到網頁又有怎樣的歷程呢?
在創(chuàng)造設計系統(tǒng)這方面目前已經有很多討論，大多都只是停留在關注建立顏色，排版，網格，結構及類似元素這部分。這種思維方式固然重要，但我對此興趣不是很大，畢竟到最后這些都會變得較為主觀。最近，我更為感興趣的是設計界面的組成元素以及如何以一個更條理清晰的思路組建設計系統(tǒng)。
在尋找靈感和概念類比中，我總是會回到化學領域。主要的思考是一切物質(不論是固體，液體，氣體，簡單的，復雜的)都是由原子所構成，這些原子結合在一起形成分子，然后組合為更復雜的組織，最終創(chuàng)造出我們所熟知的宇宙萬物。
同樣的，界面也是由更小的部件組成。這意味著，我們可以把界面打散成基本的模塊，并以此入手搭建界面。這就是原子化設計的要點。
什么是原子化設計?
原子化設計是一套創(chuàng)建設計系統(tǒng)的方法。具體分為五個層面：
原子(Atoms)
分子(Molecules)
有機組織(Organisms)
模板(Templates)
頁面(Pages)
下面讓我們來更詳細的探討每個部分!
原子
原子是物質最基本的構建模塊。對于網頁界面來說，原子部分就是我們的HTML標簽，比如表單標簽(label)，輸入框(input)或者一個按鈕(button)。
原子當然也包括更多抽象的元素比如調色板，字體乃至界面中更無形的部分比如動畫。
就如同原子在自然界中也是如此，它們是相當?shù)某橄螅瑔为毝圆⒉皇悄敲从杏�。然而，它們很適合放在一個模式庫的語境中進行引用，這樣你可以容易的看到全局樣式的展示。
分子
當我們把多個原子組合在一起，事情就變得更有意思和可感了。分子是一堆原子以化學鍵的形式捆綁在一起，并且它還是組成化合物的最小基本單位。這些分子體現(xiàn)出各自的屬性并作為我們設計系統(tǒng)的骨干。
舉個例子，一個表單標簽，輸入框或者一個按鈕單獨的情況并不能完成一個用戶功能，但是把它們組合在一起形成一個表單后，現(xiàn)在它們能共同完成一個任務比如搜索。
從原子構建一個分子可以促進“做一件事并做好”的精神。盡管有時候分子可能會比較復雜，從經驗法則來說它們應該是可以被復用的相對簡單的原子組合。
有機組織
分子給了我們一些能建造的塊塊，現(xiàn)在我們能把這些合在一起去建造一個有機的組織了。組織是由一組分子聯(lián)合起來所形成的相對復雜，獨立的界面功能塊。
我們的工作變得越來越有形和具體了。一個用戶可能不會對設計系統(tǒng)的分子層面感興趣，但到了有機組織的層面，我們可以看到最終的界面就要呼之欲出了。
有機組織可以包括不同的分子形式。比如，一個標題部分就可以包含很多“分子”，像是logo設計，基本的頁面導航，搜索欄，和一系列社會媒體板塊。但對于一個以推出產品為目的的系統(tǒng)來說可能意味著很多相同分子(可能包括產品圖片，名稱和價格)的不斷重復。
從分子到有機組織的建造過程有助于激發(fā)創(chuàng)造脫機的，便攜的和可重復使用的部件。
模板
在模板層面，我們需要打破和化學的類比關系，并進入一種便于用戶理解的語言。模板包含大部分縫合在一起的為形成最終頁面的有機組織。也就是在這個階段我們開始看到最終設計的慢慢形成。
模板是非常具體而有形的，它的存在給所有相關的抽象的分子和組織提供了一個很好的平臺。它同樣能讓用戶看到最終設計所在的位置。根據(jù)我對這個原子化設計方法的經驗，模板的生命是從HTML 線框圖開始的，但同時隨著時間的推進它最終要變成一個可交付的東西。匹茲堡的Bearded工作室也是這樣。他們的設計始于灰度，構圖很少，但逐漸變得清晰直到最終的設計。
頁面
頁面實際上是模板的例證。在這里，占位符的位置被真正有代表性的內容取代，這些有代表性的內容將給用戶呈現(xiàn)一個最終版精確的界面。
頁面層面是最逼真準確的層面，因為它們是可感的，而且通常是人們在瀏覽過程中花時間最多的。對設計者來說頁面層面也是非常重要的因為我們在這個層面上可以檢測整個設計系統(tǒng)的效用。
反過來，重新審視并調整之前的分子，有機組織和模板部分也能使我們有一個更好的設計。
頁面同樣是能檢測模板有哪些變動的地方。比如，你可能竭力想表達一個50字符標題的樣子，但也想看看450字符是什么樣。你也想看看當用戶購物車里有一件商品或是十件商品時的界面是什么樣子。這些具體的例子影響到我們如何重新思考之前構建的元素。
【網頁設計深究之從原子到頁面】相關文章：
頁面設計與制作需要的幾點技巧11-17
網站頁面如何設計更輕03-23
網頁設計基礎03-08
網頁設計課程03-08
網頁設計的步驟06-16
網頁設計配色技巧03-07
網頁設計制作要領02-27
網頁字體設計的技巧03-18
網頁版式設計構成11-15