網(wǎng)頁設(shè)計(jì)中柵格的應(yīng)用

2022-02-18 點(diǎn)擊量：

如果你曾經(jīng)有過關(guān)于設(shè)計(jì)中網(wǎng)格的運(yùn)用的疑問， 這篇文章就是為你量身定做的。文章中，我們不僅會(huì)介紹基礎(chǔ)的理論和術(shù)語，還會(huì)通過真實(shí)的網(wǎng)站例子分析幫助你快速學(xué)習(xí)到網(wǎng)格在實(shí)際運(yùn)用中的技巧。

文章中我們會(huì)介紹以下的主題：

●    網(wǎng)格是什么

●    術(shù)語

●    三分法則

●    12列柵格

●    重點(diǎn)突出

●    局限性

●    腦圖

什么是柵格？

柵格組成了一個(gè)基本結(jié)構(gòu)，這個(gè)結(jié)構(gòu)可以被理解成設(shè)計(jì)的“骨架”。 通過輔助線條來編排和放置設(shè)計(jì)中的各個(gè)設(shè)計(jì)元素。 這樣做可以使設(shè)計(jì)稿有體系地聯(lián)系在一起，同時(shí)也保持設(shè)計(jì)的一致性與合理性。

BBC

柵格可幫助你輕松將界面上的元素對齊，有效實(shí)現(xiàn)一致性。 設(shè)計(jì)中，有時(shí)候，僅靠感覺和大致方向來猜測布局的效果可能不會(huì)太理想。所以正確使用網(wǎng)格，會(huì)讓設(shè)計(jì)顯得有條理，結(jié)構(gòu)合理，整潔并且思考周到。 

一個(gè)整潔對齊的界面很多時(shí)候都不應(yīng)該引起用戶的注意。少即是多， less is more。 界面設(shè)計(jì)中，嘗試過于革新的手段反而會(huì)分散用戶對特定內(nèi)容的注意力，從而影響用戶的理解。因此，不要炫耀設(shè)計(jì)技巧有多么精妙，確保用戶注意力和內(nèi)容的簡明才應(yīng)該是重點(diǎn)。

如果說還有什么比過度炫技效果更糟糕的一點(diǎn)，可能是使用完全不符合常規(guī)布局的基礎(chǔ)規(guī)則。一個(gè)沒有對齊的界面很容易給用戶留下草率的印象，這樣的印象可能會(huì)使用戶難以對你的產(chǎn)品專業(yè)度建立起信任 —— 當(dāng)然，除非不對齊是你為了創(chuàng)作嘗試而專門做的決定。 

術(shù)語

單元列

單元列是每個(gè)柵格的基本構(gòu)建塊。 一個(gè)柵格由多個(gè)單元列構(gòu)成。 下面的BBC示例就是一個(gè)由12個(gè)列柵格。 一個(gè)紫色矩形框代表一個(gè)單元列。

水槽 

下圖上的黃色細(xì)條矩形表示將各個(gè)單元列分開的裝訂線。 水槽是制造微小空白空間的一種形式，為柵格提供一些的呼吸空間。

欄

有了之前的鋪墊，我們就可以了解一些更有趣的內(nèi)容了。 多個(gè)單元列和裝訂線一起便形成了一欄，這些欄實(shí)際上是從策略的角度將內(nèi)容材料放置在其中的容器。這些欄看起來似乎很禁錮，事實(shí)上在有調(diào)理的約束下設(shè)計(jì)會(huì)產(chǎn)生更多自由的空間。約束條件可以幫助你決策元素放置的位置，同時(shí)還能使這個(gè)過程容易并且快捷。

在下面的示例中，你會(huì)看到三種不同的欄在布局上起作用。 每個(gè)欄的大小分別受著制約，或是為了適用不同形式的內(nèi)容，或是形成強(qiáng)調(diào)作用來裁定。

就像例子中呈現(xiàn)的，布局中有很多方式來混合不同形式的內(nèi)容和設(shè)計(jì)元素。通過排列這些欄，界面上可以形成堅(jiān)固的結(jié)構(gòu)。另一方面，良好的對齊又讓設(shè)計(jì)產(chǎn)生了一致性和有序性。  這些益處單是通過設(shè)置幾個(gè)單元列和一些視覺約束就能輕松實(shí)現(xiàn)，是否讓你覺得事半功倍呢？

區(qū)域

不同的內(nèi)容欄排在一起就形成了一個(gè)區(qū)域。這些區(qū)域又將整個(gè)頁面水平劃分。讓頁面上所有的區(qū)域都等高是個(gè)挺好的保持整潔的辦法，雖然在現(xiàn)實(shí)設(shè)計(jì)中并不是這么容易實(shí)現(xiàn)。所以，如果等高的區(qū)域既可行又契合你的設(shè)計(jì)要求，那自然是再好不過。但是要是不能實(shí)現(xiàn)的話，就將目光放在宏觀一些的設(shè)計(jì)要求上吧。

三分法則 

“三分法則”就是通過使用一個(gè)簡易柵格，來確保在界面加入元素的時(shí)候會(huì)放置在某個(gè)三等分的行上。這樣的布局會(huì)更看起來更使人愉快， 比如在攝影當(dāng)中，三分法則就是個(gè)十分常用的方法。但是，盡管這個(gè)方式可能是一個(gè)很好的設(shè)計(jì)起點(diǎn)，也通常能夠幫你做出正確的選擇，我還是建議你在具體情況下具體分析它是否是最合適的解決辦法。

人們有時(shí)候高談闊論三分法則中的“神奇交叉點(diǎn)”可以如此這般提升你的設(shè)計(jì)，但我更建議理性地對待這個(gè)說法。說三分法則是一個(gè)長青不敗的設(shè)計(jì)“法則”是件容易的事情， 尤其這一法則也非常容易去遵循。但是事實(shí)上，無論是從數(shù)學(xué)的角度還是人類對“美”的認(rèn)知來講，三分法則都沒有什么特別之處，而且也絕對不是神奇的。