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