“任何時候當(dāng)超過一個元素被展示，就會暗含一種人類的處世動機，一種強加的規(guī)則行事。如果不能在混亂中簡歷秩序，設(shè)計就會失去意義。”設(shè)計不是只憑感覺的自我任性表達(dá)，懂得并運用既定的成熟規(guī)則會讓你的設(shè)計更有價值。
今天推薦一本網(wǎng)頁設(shè)計經(jīng)典書籍——《秩序之美——網(wǎng)頁中的網(wǎng)格設(shè)計》，除了網(wǎng)頁設(shè)計師外，UI設(shè)計師、視覺設(shè)計師以及平面設(shè)計師都會從這本書中受益頗多。在閱讀并實踐本書的內(nèi)容后，不但可以開拓眼界，更能提升自己的設(shè)計水平。
看不見的秩序
怎樣的秩序？當(dāng)然是一種能準(zhǔn)確反映設(shè)計師世界觀的秩序。世界應(yīng)如何運轉(zhuǎn)，設(shè)計師有著自己獨特的見解和表達(dá)方式，由此創(chuàng)造出不同的秩序。它的力量微弱而有限，但世界的任何一個角落，都會受到影響。
2009年，著名的設(shè)計師、作家和設(shè)計思想家Ellen Lupton說：“要是說網(wǎng)格有限制，就等于說語言有限制或者排版有限制?！币虼?，我們可將網(wǎng)格想像成是創(chuàng)意的跳板。網(wǎng)格為設(shè)計師建立了一個基礎(chǔ)，使他們可為或大或小的問題找到解決方法，從而進(jìn)一步幫助讀者，用戶和觀眾找到全人類都在尋找的：混亂中的秩序感。
當(dāng)然，我們都在找尋不同種類的秩序，或者說我們都在以自己獨特的方式尋求秩序。尤其是設(shè)計師，與其他在視覺上受訓(xùn)較少的人相比，更是在尋找著不同的秩序。從專業(yè)的角度，我們告訴自己要善于發(fā)現(xiàn)視覺或變化的樣式：各個元素都對齊了嗎？它們的形狀、比例和紋理相似嗎？它們是否采用了相似的視覺處理方式？它們是否根據(jù)某種模式分類？甚至，在不能被立即察覺的元素間是否也存在連貫性？這就是當(dāng)我們評估一個設(shè)計，當(dāng)我們觀看一個網(wǎng)頁，或當(dāng)我們遵循個人經(jīng)驗點擊網(wǎng)站時所思考的事。
但是，大多數(shù)人傾向于不太嚴(yán)謹(jǐn)?shù)貙ふ抑刃?，至少在視覺領(lǐng)域是這樣。他們尋找的只是一種秩序感，而不一定是真正的秩序。他們有意識，或更多是下意識地問自己：各元素看起來是否有秩序感？它們是否遵循一些基本的邏輯規(guī)則？實際上，與其說人們在尋找有序感，不如說人們在試圖消除無序感。
當(dāng)然，網(wǎng)格是一種視覺有序系統(tǒng)。就像任何一種有序系統(tǒng)一樣，它在兩個層面上運作：首先是認(rèn)知層面，然后是應(yīng)用層面。也就是說，一個用戶先要感知到網(wǎng)格，然后他才能進(jìn)行使用。
數(shù)學(xué)公式
畢達(dá)哥拉斯是認(rèn)識黃金比例的第一人，黃金比例反映出兩個具有特定關(guān)系的數(shù)字（大約是1:1.618）之間的和諧。通常也被稱作黃金分割，它的精妙之處在于其復(fù)雜和富有挑戰(zhàn)性，在歷史上為一些最偉大的數(shù)學(xué)思想增添了無窮的魅力。自文藝復(fù)興或更早以來，黃金分割也已成為藝術(shù)家和建筑師的靈感來源。那些在建筑建造過程中使用黃金比例或在繪畫中運用黃金比例構(gòu)圖的人們發(fā)現(xiàn)了其無以倫比的價值，利用它能創(chuàng)造出從美學(xué)角度看令人愉悅的作品——歷史上一些最重要的著作就是這樣。
一般來說，斐波納契數(shù)列由0開始，然后是1。接下來的每一個數(shù)字都等于前兩個數(shù)字相加的總和，因此，數(shù)列的前幾個數(shù)字分別是：
0、1、1、2、3、5、8、13、21、34、55、等等
斐波納契數(shù)列中的每一個數(shù)字，如果除以其左邊相鄰的數(shù)字，所得的商將非常接近黃金分割的數(shù)值1.618，有時大一點，有時小一點。隨著數(shù)字增大，商也無限接近1.618。對設(shè)計師來說更有意思的是，當(dāng)斐波納契數(shù)列表現(xiàn)為對數(shù)螺旋線時，就立刻構(gòu)成了一個和諧而有邏輯的網(wǎng)格基礎(chǔ)。
由（根號2）矩形也可以形成一個非常相似的網(wǎng)格，人們有時會將矩形和黃金矩形弄混。將矩形平分，就會得到兩個和原矩形長寬比例相同的矩形。這對設(shè)計師來說很重要，因為這些矩形正是國際標(biāo)準(zhǔn)紙張尺寸（ISO216，以德國DIN476標(biāo)準(zhǔn)為基礎(chǔ)）的精髓所在。雖然這種紙張標(biāo)準(zhǔn)在美國的主流商貿(mào)中并未使用，但卻成功地廣泛應(yīng)用在歐洲以及許多其他的國家，它甚至被美國采用為官方文件格式。更為重要的是，這使紙張的制造、發(fā)行和使用都統(tǒng)一起來。當(dāng)它在一個國家通用時，對平面設(shè)計師的工作產(chǎn)生了深遠(yuǎn)的影響，它為設(shè)計帶來便利，并提供了一個標(biāo)準(zhǔn)，避免矛盾和爭端。
而所謂的三分規(guī)則就不那么科學(xué)了，其實也不算什么規(guī)則，只是一種數(shù)學(xué)方法。它源自于十八世紀(jì)或更早，為畫家、繪圖員、攝影師和平面設(shè)計師（但很少包括建筑師）提供了一種經(jīng)驗法則，幫助他們從美學(xué)的角度完成和諧的構(gòu)圖。三分規(guī)則主張將圖像在寬度和高度上各自等分成三列和三排，從而發(fā)掘出構(gòu)成的力量。這些橫線和豎線的交叉點將形成四個焦點，人眼將自然被其所吸引。三分規(guī)則認(rèn)為，通過將各個元素與這些橫豎線對齊，或?qū)⒃胤胖迷谶@些焦點上，就能使圖像散發(fā)出最大的魅力、活力或張力。
也許正因為其通俗易懂，在各種各樣的“美學(xué)公式”中，三分規(guī)則顯然是最有用的。它純粹，所以具有說服力，而它三等分圖像的簡單技巧也很容易識記。對比我們上面討論過的那些更為精妙復(fù)雜的數(shù)學(xué)方法，三分規(guī)則就顯得特別有意義。黃金分割、斐波納契數(shù)列和其他數(shù)學(xué)概念對網(wǎng)格概念的歷史發(fā)展所作出的貢獻(xiàn)是毋庸置疑的，但在多數(shù)常規(guī)情況下，它們固有的復(fù)雜性限制了其效用的發(fā)揮。
幸好，黃金比例——這些概念中對設(shè)計師來說最有價值的——并不需要學(xué)習(xí)到專家水平也能起作用。本書稍后將提供一些練習(xí)，包括黃金比例通常的應(yīng)用方法?，F(xiàn)在我們得出的關(guān)鍵結(jié)論就是：構(gòu)建網(wǎng)格運用的方法越簡單直接，搭建出的網(wǎng)格就會越有效。
網(wǎng)格設(shè)計流程
網(wǎng)格以解決問題為首要任務(wù)，美觀在其次。
網(wǎng)格可以顯著提升任何一個設(shè)計的美感，因此比起功能，設(shè)計師更容易專注于形式。但最成功的網(wǎng)格卻是以解決明確的問題為根本目的。不管是交流性的問題，組織性的問題，還是操作性的問題，網(wǎng)格通過完美地解決這些問題展現(xiàn)其魅力。
以下就是設(shè)計網(wǎng)格的主要步驟。
1． 進(jìn)行調(diào)查，明確要求
2． 畫線框圖
3． 設(shè)計預(yù)備
基本草圖
建立單元、欄、基線以及進(jìn)行計算
頁面草圖
4． 正式設(shè)計
5． 制作（編寫代碼）
調(diào)查并明確限制條件
設(shè)計師應(yīng)該找尋什么樣的限制條件呢？我將它們主要歸納為以下三種類別:
技術(shù)限制條件決定了設(shè)計的表達(dá)方式。主要包括客戶端的顯示器分辨率和型號（或說是客戶端網(wǎng)絡(luò)瀏覽器版本的“新舊程度”）這兩個主要的方面。以網(wǎng)站為介質(zhì)展示內(nèi)容的時候，由于技術(shù)問題的限制，會對設(shè)計師的設(shè)計流程的設(shè)計方法產(chǎn)生影響。這二者將依次影響設(shè)計師采用的設(shè)計方法。
商業(yè)限制條件決定了設(shè)計目的，不管是為了加強用戶瀏覽網(wǎng)頁的流暢度，或延長用戶在網(wǎng)頁上的停留時間，或提升廣告點擊率，或引導(dǎo)游客消費。這些目的對任何設(shè)計來說都是最重要的。設(shè)計師也應(yīng)該考慮品牌、定位和市場相關(guān)。最后，設(shè)計師應(yīng)該充分評估客戶公司實現(xiàn)自己設(shè)計的能力：網(wǎng)格設(shè)計完成后該由誰接手，他們有哪些能力。
內(nèi)容和排版限制條件決定了設(shè)計的內(nèi)容。它們決定了設(shè)計可能采用的不同形式，比如文章選用的字體、篇幅以及標(biāo)題和摘要的長度、引文、圖片和插入的內(nèi)容（比如視頻和交互元素）、數(shù)據(jù)表和圖表等。
設(shè)計問題越開放，限制條件越寬松，設(shè)計師就越難進(jìn)行跳躍性的深入思考——而跳躍式的思考正是偉大設(shè)計的標(biāo)志。不可更改的限制條件能刺激設(shè)計師進(jìn)行跳躍性的思考。不管是限定了尺寸，約束了技術(shù)，規(guī)定了廣告單元或設(shè)置了其他一些設(shè)計師必須解決的問題，比起讓他們根據(jù)自己的需要隨便修改，有一個強制的限制條件將對設(shè)計非常有益。
畫草圖
為了徹底解決設(shè)計問題，在紙上畫草圖是很有必要的，這對創(chuàng)建網(wǎng)格也特別有幫助。比起直接跳入設(shè)計階段甚至直接編程，快速并大致繪制出欄可能的組合方式以及各種版式將更簡單，而且可以節(jié)省大量時間，還能引導(dǎo)我們設(shè)計出更豐富更有創(chuàng)意的網(wǎng)格。
草圖的繪制不一定要局限于網(wǎng)格創(chuàng)建過程中的某個階段，或開始和結(jié)束于某個特定時間。記住這點也是很重要的——在整個項目的任何階段都可能要畫草圖，而草圖也可能要經(jīng)過多次繪制才能完工。不過，最好早點開始畫，這樣更多的想法就可以快速地展現(xiàn)出來。任何時候，在手邊準(zhǔn)備好一支鉛筆和一沓紙，無疑是設(shè)計師難能可貴的好習(xí)慣。
學(xué)習(xí)使用網(wǎng)格進(jìn)行設(shè)計，再沒有比親自實踐更好的方法。將所有的理論，史料和學(xué)習(xí)準(zhǔn)備付諸實踐。在這本書的后半部分集中講解了如何在設(shè)計網(wǎng)站的時候應(yīng)對各種實際的設(shè)計問題。當(dāng)然，并不存在標(biāo)準(zhǔn)網(wǎng)站或標(biāo)準(zhǔn)網(wǎng)頁設(shè)計問題。但是這本書后面講解的內(nèi)容結(jié)合了許多常見的網(wǎng)頁類型，包括博客、個人頁面和將五花八門的內(nèi)容融為一體的主頁。還舉例說明了許多不同的設(shè)計問題，展示出的常規(guī)設(shè)計方法對實際的網(wǎng)格設(shè)計非常有益。在考慮所有限制條件的前提下，構(gòu)建一個網(wǎng)格系統(tǒng)，并將其運用到網(wǎng)站的各種頁面中。
此書的精華部分即是后半部分，作者以實際項目實例來一步步引導(dǎo)讀者學(xué)習(xí)并思考網(wǎng)頁中的網(wǎng)格設(shè)計，將上述步驟流程運用其中，詳細(xì)介紹了網(wǎng)格設(shè)計成熟而經(jīng)典的設(shè)計模式，強烈建議大家認(rèn)真閱讀全書，邊讀邊思考，思考作者在設(shè)計網(wǎng)頁時的每一步驟，以及為什么這樣做，并將這些原則運用到自己的工作當(dāng)中，然而切記不可生搬硬套，設(shè)計師必須適應(yīng)并靈活改變這些原則，以便解決面臨的設(shè)計問題。我們可以從網(wǎng)格過去的發(fā)展學(xué)習(xí)到很多知識，而現(xiàn)在也有許多新的方法需要我們掌握。但最重要的是，設(shè)計師必須深深理解需要解決的問題，并為其創(chuàng)造出真正合適的解決方式。
以上內(nèi)容是對《秩序之美——網(wǎng)頁中的網(wǎng)格設(shè)計》核心內(nèi)容的整理和提煉，想要更進(jìn)一步學(xué)習(xí)，鼓勵大家去購買正版紙質(zhì)書籍，真正收獲知識的價值遠(yuǎn)遠(yuǎn)大于書籍本身的價格。
