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