文章中我們會(huì)介紹以下的主題：
● 網(wǎng)格是什么
● 術(shù)語(yǔ)
● 三分法則
● 12列柵格
● 重點(diǎn)突出
● 局限性
● 腦圖
什么是柵格？
柵格組成了一個(gè)基本結(jié)構(gòu)，這個(gè)結(jié)構(gòu)可以被理解成設(shè)計(jì)的“骨架”。 通過輔助線條來(lái)編排和放置設(shè)計(jì)中的各個(gè)設(shè)計(jì)元素。 這樣做可以使設(shè)計(jì)稿有體系地聯(lián)系在一起，同時(shí)也保持設(shè)計(jì)的一致性與合理性。
柵格可幫助你輕松將界面上的元素對(duì)齊，有效實(shí)現(xiàn)一致性。 設(shè)計(jì)中，有時(shí)候，僅靠感覺和大致方向來(lái)猜測(cè)布局的效果可能不會(huì)太理想。所以正確使用網(wǎng)格，會(huì)讓設(shè)計(jì)顯得有條理，結(jié)構(gòu)合理，整潔并且思考周到。
一個(gè)整潔對(duì)齊的界面很多時(shí)候都不應(yīng)該引起用戶的注意。少即是多， less is more。 界面設(shè)計(jì)中，嘗試過于革新的手段反而會(huì)分散用戶對(duì)特定內(nèi)容的注意力，從而影響用戶的理解。因此，不要炫耀設(shè)計(jì)技巧有多么精妙，確保用戶注意力和內(nèi)容的簡(jiǎn)明才應(yīng)該是重點(diǎn)。
如果說(shuō)還有什么比過度炫技效果更糟糕的一點(diǎn)，可能是使用完全不符合常規(guī)布局的基礎(chǔ)規(guī)則。一個(gè)沒有對(duì)齊的界面很容易給用戶留下草率的印象，這樣的印象可能會(huì)使用戶難以對(duì)你的產(chǎn)品專業(yè)度建立起信任 —— 當(dāng)然，除非不對(duì)齊是你為了創(chuàng)作嘗試而專門做的決定。
術(shù)語(yǔ)
單元列
單元列是每個(gè)柵格的基本構(gòu)建塊。 一個(gè)柵格由多個(gè)單元列構(gòu)成。 下面的BBC示例就是一個(gè)由12個(gè)列柵格。 一個(gè)紫色矩形框代表一個(gè)單元列。
水槽
下圖上的黃色細(xì)條矩形表示將各個(gè)單元列分開的裝訂線。 水槽是制造微小空白空間的一種形式，為柵格提供一些的呼吸空間。
欄
有了之前的鋪墊，我們就可以了解一些更有趣的內(nèi)容了。 多個(gè)單元列和裝訂線一起便形成了一欄，這些欄實(shí)際上是從策略的角度將內(nèi)容材料放置在其中的容器。這些欄看起來(lái)似乎很禁錮，事實(shí)上在有調(diào)理的約束下設(shè)計(jì)會(huì)產(chǎn)生更多自由的空間。約束條件可以幫助你決策元素放置的位置，同時(shí)還能使這個(gè)過程容易并且快捷。
在下面的示例中，你會(huì)看到三種不同的欄在布局上起作用。 每個(gè)欄的大小分別受著制約，或是為了適用不同形式的內(nèi)容，或是形成強(qiáng)調(diào)作用來(lái)裁定。
就像例子中呈現(xiàn)的，布局中有很多方式來(lái)混合不同形式的內(nèi)容和設(shè)計(jì)元素。通過排列這些欄，界面上可以形成堅(jiān)固的結(jié)構(gòu)。另一方面，良好的對(duì)齊又讓設(shè)計(jì)產(chǎn)生了一致性和有序性。 這些益處單是通過設(shè)置幾個(gè)單元列和一些視覺約束就能輕松實(shí)現(xiàn)，是否讓你覺得事半功倍呢？
區(qū)域
不同的內(nèi)容欄排在一起就形成了一個(gè)區(qū)域。這些區(qū)域又將整個(gè)頁(yè)面水平劃分。讓頁(yè)面上所有的區(qū)域都等高是個(gè)挺好的保持整潔的辦法，雖然在現(xiàn)實(shí)設(shè)計(jì)中并不是這么容易實(shí)現(xiàn)。所以，如果等高的區(qū)域既可行又契合你的設(shè)計(jì)要求，那自然是再好不過。但是要是不能實(shí)現(xiàn)的話，就將目光放在宏觀一些的設(shè)計(jì)要求上吧。
三分法則
“三分法則”就是通過使用一個(gè)簡(jiǎn)易柵格，來(lái)確保在界面加入元素的時(shí)候會(huì)放置在某個(gè)三等分的行上。這樣的布局會(huì)更看起來(lái)更使人愉快， 比如在攝影當(dāng)中，三分法則就是個(gè)十分常用的方法。但是，盡管這個(gè)方式可能是一個(gè)很好的設(shè)計(jì)起點(diǎn)，也通常能夠幫你做出正確的選擇，我還是建議你在具體情況下具體分析它是否是最合適的解決辦法。
人們有時(shí)候高談闊論三分法則中的“神奇交叉點(diǎn)”可以如此這般提升你的設(shè)計(jì)，但我更建議理性地對(duì)待這個(gè)說(shuō)法。說(shuō)三分法則是一個(gè)長(zhǎng)青不敗的設(shè)計(jì)“法則”是件容易的事情， 尤其這一法則也非常容易去遵循。但是事實(shí)上，無(wú)論是從數(shù)學(xué)的角度還是人類對(duì)“美”的認(rèn)知來(lái)講，三分法則都沒有什么特別之處，而且也絕對(duì)不是神奇的。
另一個(gè)重要的基礎(chǔ)便是，并非所有人都以相同的視覺方式來(lái)感知世界。 我們都不同。 當(dāng)我們看世界時(shí)，我們不是機(jī)器，也不會(huì)全都去硬生生重復(fù)數(shù)字比例精確而帶來(lái)美感， 以Reddit為例。 他們看起來(lái)像是會(huì)去在意“神奇交叉點(diǎn)“嗎？
我不否認(rèn)當(dāng)你的圖片或設(shè)計(jì)在適合三分法則的情況下，它是一個(gè)很好的準(zhǔn)則，或者至少可以是，但是我認(rèn)為無(wú)需太重視這些法則。設(shè)計(jì)中，只要有道理就可以打破規(guī)則。相信自己的直覺，以自己在設(shè)計(jì)中學(xué)到的技巧和經(jīng)驗(yàn)作為基準(zhǔn)，做你覺得對(duì)的事情。用尼采的話來(lái)說(shuō)，就是設(shè)計(jì)中的“沒有什么是真的，一切都被允許” 。哲學(xué)上，這個(gè)立場(chǎng)是否正確可以被一直討論下去 — 也應(yīng)如此。但是在設(shè)計(jì)中，它代表著一種堅(jiān)定探索你的創(chuàng)造力的準(zhǔn)則，并且在探索中，沒有任何“神奇交叉點(diǎn)”能限制你。
自由發(fā)揮，打破規(guī)則，找點(diǎn)樂子，如果你很幸運(yùn)的話，說(shuō)不定還會(huì)找到一套全新的網(wǎng)頁(yè)設(shè)計(jì)準(zhǔn)則！
黃金分割（神圣比例）？
趁著我們?cè)谟懻撛O(shè)計(jì)中“神奇”的事物，讓我對(duì)另一個(gè)相關(guān)的話題也展開一下：長(zhǎng)期以來(lái)，人們一直認(rèn)為使用黃金比例（“神圣”比例）會(huì)給人眼帶來(lái)一些特殊，令人愉悅的感覺。但目前為止，也有了不少的實(shí)驗(yàn)以充分的理由質(zhì)疑這些現(xiàn)代化之前的假設(shè)。
這個(gè)問題的裁決還在進(jìn)行中，而且看樣子可能會(huì)持續(xù)很長(zhǎng)時(shí)間，但是它不應(yīng)該使我們放棄以開放的態(tài)度來(lái)質(zhì)疑這些傳承下來(lái)的假設(shè)。我們應(yīng)該在思維上超越這些“神圣”的東西?；蛟S因?yàn)辄S金比例在自然界重復(fù)率很高，一段時(shí)間內(nèi)認(rèn)定它是美的標(biāo)準(zhǔn)是合理的?？墒窃捳f(shuō)回來(lái)，在沒有確鑿的科學(xué)依據(jù)之前，就它本身依然很難形成決定性的標(biāo)準(zhǔn)。黃金比例也許是美的標(biāo)準(zhǔn)，也許不是，但是我不希望它僅僅因此而成為一種理所當(dāng)然，甚至形成設(shè)計(jì)的基礎(chǔ)。
十二列柵格
現(xiàn)在回到更具體范圍來(lái)，我想通過一個(gè)非常通用的網(wǎng)格使用方法來(lái)幫助你形成你的第一個(gè)布局構(gòu)建體系。十二列柵格是個(gè)很好的助手。
為什么十二列柵格那么方便？ 對(duì)于初學(xué)者來(lái)說(shuō)，這個(gè)柵格可以同時(shí)被作為三，四和六列柵格使用，所以它足夠靈活，處理各種不同的內(nèi)容材料的時(shí)候游刃有余。 最重要的是，使用中你可以將它以對(duì)稱的形式和不對(duì)稱的形式來(lái)使用 — 這樣的可能性為設(shè)計(jì)提供了很多選擇，無(wú)論你選擇使用傳統(tǒng)的，安全的布局還是超出簡(jiǎn)單對(duì)稱的動(dòng)態(tài)布局。
讓我們看一下使用了這個(gè)柵格的高靈活度的幾種布局：
四列柵格
四列網(wǎng)格的主要優(yōu)點(diǎn)是它很簡(jiǎn)單，它有很強(qiáng)的平衡界面能力以及可靠性。 這個(gè)例子里面每個(gè)柵格跨越三個(gè)列。 它的缺點(diǎn)是過于對(duì)稱的特點(diǎn)有時(shí)候讓它看起來(lái)有些無(wú)聊。
常見的設(shè)計(jì)的需求會(huì)有一個(gè)主要部分排版需要強(qiáng)調(diào)的內(nèi)容，然后一個(gè)側(cè)欄來(lái)放置次要內(nèi)容。 在下面的第一個(gè)示例中，你可以看到第一列用于品牌宣傳，中間兩列用于主要內(nèi)容，而最后一列用于不太需要突出顯示的內(nèi)容。
三列柵格
這個(gè)柵格的每欄都包含了4列，由于它是一個(gè)不對(duì)稱的網(wǎng)格，因此涉及的方面更多一些，所以使用中，需要用更加聰明的方式在設(shè)計(jì)中找到平衡點(diǎn)。 像這樣的不對(duì)稱布局通常被認(rèn)為更活躍，更熟練的技術(shù)運(yùn)用。當(dāng)然這個(gè)說(shuō)法可以而且應(yīng)該受到質(zhì)疑！
六列柵格
文中的例子里，這個(gè)六列柵格每欄跨越兩個(gè)單元列，這使它比三列柵格更有挑戰(zhàn)性一些。
它將三列柵格中每一列另外拆分為兩列。 六列柵格給設(shè)計(jì)帶來(lái)更多選擇和機(jī)會(huì)，讓你可以更方便地微調(diào)較小的細(xì)節(jié)。如果你需要設(shè)計(jì)一個(gè)內(nèi)容非常豐富并且需要存放大量信息的網(wǎng)頁(yè)，六列柵格是個(gè)明智的起點(diǎn)。 但由于它是個(gè)更有難度的網(wǎng)格，我不建議在第一個(gè)項(xiàng)目就開始使用它。
組合
設(shè)計(jì)中，你還可以考慮合并使用不同的柵格。組合也是十二欄柵格作為一個(gè)界面輔助系統(tǒng)非常方便的原因。 它能輕松地將三，四和六列的柵格整齊地組合在一起。
重點(diǎn)
平衡而簡(jiǎn)單的布局通常比過于復(fù)雜的布局更讓人舒適。 對(duì)立面是，設(shè)計(jì)中需要注意不要太過安全，否則設(shè)計(jì)可能會(huì)顯得無(wú)聊。 為了強(qiáng)調(diào)某些內(nèi)容，可以嘗試讓它脫離柵格或通過大小來(lái)實(shí)現(xiàn)突顯（例如，通過合并列）。 這樣可以有效地引起用戶的興趣并在主要設(shè)計(jì)元素中形成更好的層次結(jié)構(gòu)。
通過讓某些特定元素脫離柵格的方式來(lái)實(shí)現(xiàn)重點(diǎn)的突出，要么會(huì)讓你的設(shè)計(jì)非常出彩，但是不夠高明的使用則會(huì)讓設(shè)計(jì)看起來(lái)很笨拙。 Wallpaper在突破四列柵格的表現(xiàn)方面做得非常出色，并且也很有力地強(qiáng)調(diào)出了他們希望用戶觀看的視頻。
但是過多地破壞柵格的節(jié)奏會(huì)導(dǎo)致布局看起來(lái)殘破，不完整，或過分強(qiáng)調(diào)了太多零碎的內(nèi)容。因此在使用這個(gè)方式的時(shí)候需要小心，以免內(nèi)容不明確，用戶無(wú)法記住重點(diǎn)信息。
局限性
關(guān)于柵格經(jīng)常出現(xiàn)的問題之一，便是在設(shè)計(jì)中，什么時(shí)候才應(yīng)該使用柵格，答案是： 所有時(shí)候！ 選擇柵格永遠(yuǎn)都是個(gè)好決定，因?yàn)樗鼈冇兄诒３衷O(shè)計(jì)平衡，層次結(jié)構(gòu)，頁(yè)面整齊和一致性。
總是有一個(gè)爭(zhēng)論，認(rèn)為柵格限制了設(shè)計(jì)。 柵格雖然會(huì)形成限制，但是這種限制是一件好事，因?yàn)樗鼘?shí)際上可以促進(jìn)創(chuàng)造力的發(fā)生，還能用有建設(shè)性的方式指導(dǎo)設(shè)計(jì)決策。 所以，這樣的限制事實(shí)上是當(dāng)你開始一個(gè)項(xiàng)目時(shí)很好的起點(diǎn)。當(dāng)你有了外界設(shè)計(jì)限制時(shí)（例如客戶提供給你的廣告的大小尺寸）時(shí)，便同時(shí)有了一個(gè)柵格來(lái)圍繞它進(jìn)行設(shè)計(jì)。 你對(duì)柵格的選擇可以也應(yīng)該要考慮到這些限制。
在下面《華爾街日?qǐng)?bào)》的示例中，可以看到標(biāo)記綠色的廣告尺寸是設(shè)計(jì)師通過柵格的協(xié)助來(lái)做的設(shè)計(jì)決定。
腦圖
使用柵格很成功的情況下，它應(yīng)該也會(huì)幫助你構(gòu)建網(wǎng)站和它包含的各個(gè)頁(yè)面的思維模型。 這同時(shí)也意味著同一個(gè)網(wǎng)站的各個(gè)頁(yè)面的結(jié)構(gòu)不應(yīng)完全不同—— 調(diào)整每個(gè)頁(yè)面使其有共同點(diǎn)來(lái)實(shí)現(xiàn)一致性應(yīng)作為設(shè)計(jì)計(jì)劃的一部分。
讓我們?cè)賮?lái)看一些Etsy成功解決此問題的示例。 但是這次，我們集中討論柵格如何滿足其對(duì)不同的內(nèi)容需求，以及在需要的時(shí)候如何將它們逐頁(yè)地混合在一起。 我認(rèn)為他們?cè)诒３帜撤N一致性方面做得非常出色。這種一致性創(chuàng)造了統(tǒng)一的印象，還將頁(yè)面整齊地綁在一起。這樣一來(lái)，用戶在瀏覽的時(shí)候，全程都有指引，并且也明白對(duì)不熟悉的頁(yè)面應(yīng)該有什么樣期望。 他們的思維導(dǎo)圖是健全的，因此不會(huì)出現(xiàn)任何結(jié)構(gòu)上的意外來(lái)破壞用戶體驗(yàn)。
他們?yōu)轫?yè)面創(chuàng)造了一個(gè)很好的節(jié)奏，加上簡(jiǎn)潔的重復(fù)使用，他們的柵格看起來(lái)很優(yōu)雅大方。
最后的想法
總體而言，系統(tǒng)地規(guī)劃內(nèi)容排版是整篇文章主題的關(guān)鍵。 要將各種形式的內(nèi)容捆綁在一起，一致的柵格是最有效的工具。統(tǒng)一的柵格會(huì)建立一個(gè)強(qiáng)軸，這個(gè)強(qiáng)軸會(huì)引導(dǎo)用戶的眼睛和動(dòng)作（例如視覺錨點(diǎn)），將你設(shè)計(jì)的各個(gè)部分綁定在一起并產(chǎn)生凝聚力，建立更牢固的關(guān)系。 保持設(shè)計(jì)的簡(jiǎn)單！ 讓你的設(shè)計(jì)更易于構(gòu)建和維護(hù)。
來(lái)源：摹客
]]>