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

時間：2023-09-27 06:36:02 | 來源：網(wǎng)站運營

時間：2023-09-27 06:36:02 來源：網(wǎng)站運營

網(wǎng)頁設(shè)計中柵格的應(yīng)用：以下內(nèi)容由摹客團隊翻譯整理，僅供學(xué)習(xí)交流，摹客是設(shè)計+協(xié)作一站式云平臺，從產(chǎn)品、設(shè)計到開發(fā)，摹客來解決。




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

主題

文章中我們會介紹以下的主題：

● 網(wǎng)格是什么

● 術(shù)語

● 三分法則

● 12列柵格

● 重點突出

● 局限性

● 腦圖

什么是柵格？

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







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

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

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

術(shù)語

單元列

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







水槽

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




欄

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

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




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

區(qū)域

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







三分法則

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




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

另一個重要的基礎(chǔ)便是，并非所有人都以相同的視覺方式來感知世界。 我們都不同。 當(dāng)我們看世界時，我們不是機器，也不會全都去硬生生重復(fù)數(shù)字比例精確而帶來美感， 以Reddit為例。 他們看起來像是會去在意“神奇交叉點“嗎？

我不否認(rèn)當(dāng)你的圖片或設(shè)計在適合三分法則的情況下，它是一個很好的準(zhǔn)則，或者至少可以是，但是我認(rèn)為無需太重視這些法則。設(shè)計中，只要有道理就可以打破規(guī)則。相信自己的直覺，以自己在設(shè)計中學(xué)到的技巧和經(jīng)驗作為基準(zhǔn)，做你覺得對的事情。用尼采的話來說，就是設(shè)計中的“沒有什么是真的，一切都被允許” 。哲學(xué)上，這個立場是否正確可以被一直討論下去 — 也應(yīng)如此。但是在設(shè)計中，它代表著一種堅定探索你的創(chuàng)造力的準(zhǔn)則，并且在探索中，沒有任何“神奇交叉點”能限制你。

自由發(fā)揮，打破規(guī)則，找點樂子，如果你很幸運的話，說不定還會找到一套全新的網(wǎng)頁設(shè)計準(zhǔn)則！

黃金分割（神圣比例）？

趁著我們在討論設(shè)計中“神奇”的事物，讓我對另一個相關(guān)的話題也展開一下：長期以來，人們一直認(rèn)為使用黃金比例（“神圣”比例）會給人眼帶來一些特殊，令人愉悅的感覺。但目前為止，也有了不少的實驗以充分的理由質(zhì)疑這些現(xiàn)代化之前的假設(shè)。




這個問題的裁決還在進行中，而且看樣子可能會持續(xù)很長時間，但是它不應(yīng)該使我們放棄以開放的態(tài)度來質(zhì)疑這些傳承下來的假設(shè)。我們應(yīng)該在思維上超越這些“神圣”的東西?；蛟S因為黃金比例在自然界重復(fù)率很高，一段時間內(nèi)認(rèn)定它是美的標(biāo)準(zhǔn)是合理的?？墒窃捳f回來，在沒有確鑿的科學(xué)依據(jù)之前，就它本身依然很難形成決定性的標(biāo)準(zhǔn)。黃金比例也許是美的標(biāo)準(zhǔn)，也許不是，但是我不希望它僅僅因此而成為一種理所當(dāng)然，甚至形成設(shè)計的基礎(chǔ)。

十二列柵格

現(xiàn)在回到更具體范圍來，我想通過一個非常通用的網(wǎng)格使用方法來幫助你形成你的第一個布局構(gòu)建體系。十二列柵格是個很好的助手。




為什么十二列柵格那么方便？ 對于初學(xué)者來說，這個柵格可以同時被作為三，四和六列柵格使用，所以它足夠靈活，處理各種不同的內(nèi)容材料的時候游刃有余。 最重要的是，使用中你可以將它以對稱的形式和不對稱的形式來使用 -- 這樣的可能性為設(shè)計提供了很多選擇，無論你選擇使用傳統(tǒng)的，安全的布局還是超出簡單對稱的動態(tài)布局。

讓我們看一下使用了這個柵格的高靈活度的幾種布局:

四列柵格

四列網(wǎng)格的主要優(yōu)點是它很簡單，它有很強的平衡界面能力以及可靠性。 這個例子里面每個柵格跨越三個列。 它的缺點是過于對稱的特點有時候讓它看起來有些無聊。




常見的設(shè)計的需求會有一個主要部分排版需要強調(diào)的內(nèi)容，然后一個側(cè)欄來放置次要內(nèi)容。 在下面的第一個示例中，你可以看到第一列用于品牌宣傳，中間兩列用于主要內(nèi)容，而最后一列用于不太需要突出顯示的內(nèi)容。

三列柵格

這個柵格的每欄都包含了4列，由于它是一個不對稱的網(wǎng)格，因此涉及的方面更多一些，所以使用中，需要用更加聰明的方式在設(shè)計中找到平衡點。 像這樣的不對稱布局通常被認(rèn)為更活躍，更熟練的技術(shù)運用。當(dāng)然這個說法可以而且應(yīng)該受到質(zhì)疑！




六列柵格

文中的例子里，這個六列柵格每欄跨越兩個單元列，這使它比三列柵格更有挑戰(zhàn)性一些。

它將三列柵格中每一列另外拆分為兩列。 六列柵格給設(shè)計帶來更多選擇和機會，讓你可以更方便地微調(diào)較小的細(xì)節(jié)。如果你需要設(shè)計一個內(nèi)容非常豐富并且需要存放大量信息的網(wǎng)頁，六列柵格是個明智的起點。 但由于它是個更有難度的網(wǎng)格，我不建議在第一個項目就開始使用它。




組合

設(shè)計中，你還可以考慮合并使用不同的柵格。組合也是十二欄柵格作為一個界面輔助系統(tǒng)非常方便的原因。 它能輕松地將三，四和六列的柵格整齊地組合在一起。

重點

平衡而簡單的布局通常比過于復(fù)雜的布局更讓人舒適。 對立面是，設(shè)計中需要注意不要太過安全，否則設(shè)計可能會顯得無聊。 為了強調(diào)某些內(nèi)容，可以嘗試讓它脫離柵格或通過大小來實現(xiàn)突顯（例如，通過合并列）。 這樣可以有效地引起用戶的興趣并在主要設(shè)計元素中形成更好的層次結(jié)構(gòu)。




通過讓某些特定元素脫離柵格的方式來實現(xiàn)重點的突出，要么會讓你的設(shè)計非常出彩，但是不夠高明的使用則會讓設(shè)計看起來很笨拙。 Wallpaper在突破四列柵格的表現(xiàn)方面做得非常出色，并且也很有力地強調(diào)出了他們希望用戶觀看的視頻。

但是過多地破壞柵格的節(jié)奏會導(dǎo)致布局看起來殘破，不完整，或過分強調(diào)了太多零碎的內(nèi)容。因此在使用這個方式的時候需要小心，以免內(nèi)容不明確，用戶無法記住重點信息。

局限性

關(guān)于柵格經(jīng)常出現(xiàn)的問題之一，便是在設(shè)計中，什么時候才應(yīng)該使用柵格，答案是： 所有時候！ 選擇柵格永遠(yuǎn)都是個好決定，因為它們有助于保持設(shè)計平衡，層次結(jié)構(gòu)，頁面整齊和一致性。

總是有一個爭論，認(rèn)為柵格限制了設(shè)計。 柵格雖然會形成限制，但是這種限制是一件好事，因為它實際上可以促進創(chuàng)造力的發(fā)生，還能用有建設(shè)性的方式指導(dǎo)設(shè)計決策。 所以，這樣的限制事實上是當(dāng)你開始一個項目時很好的起點。當(dāng)你有了外界設(shè)計限制時（例如客戶提供給你的廣告的大小尺寸）時，便同時有了一個柵格來圍繞它進行設(shè)計。 你對柵格的選擇可以也應(yīng)該要考慮到這些限制。

在下面《華爾街日報》的示例中，可以看到標(biāo)記綠色的廣告尺寸是設(shè)計師通過柵格的協(xié)助來做的設(shè)計決定。

腦圖

使用柵格很成功的情況下，它應(yīng)該也會幫助你構(gòu)建網(wǎng)站和它包含的各個頁面的思維模型。 這同時也意味著同一個網(wǎng)站的各個頁面的結(jié)構(gòu)不應(yīng)完全不同—— 調(diào)整每個頁面使其有共同點來實現(xiàn)一致性應(yīng)作為設(shè)計計劃的一部分。

讓我們再來看一些Etsy成功解決此問題的示例。 但是這次，我們集中討論柵格如何滿足其對不同的內(nèi)容需求，以及在需要的時候如何將它們逐頁地混合在一起。 我認(rèn)為他們在保持某種一致性方面做得非常出色。這種一致性創(chuàng)造了統(tǒng)一的印象，還將頁面整齊地綁在一起。這樣一來，用戶在瀏覽的時候，全程都有指引，并且也明白對不熟悉的頁面應(yīng)該有什么樣期望。 他們的思維導(dǎo)圖是健全的，因此不會出現(xiàn)任何結(jié)構(gòu)上的意外來破壞用戶體驗。

他們?yōu)轫撁鎰?chuàng)造了一個很好的節(jié)奏，加上簡潔的重復(fù)使用，他們的柵格看起來很優(yōu)雅大方。

最后的想法

總體而言，系統(tǒng)地規(guī)劃內(nèi)容排版是整篇文章主題的關(guān)鍵。 要將各種形式的內(nèi)容捆綁在一起，一致的柵格是最有效的工具。統(tǒng)一的柵格會建立一個強軸，這個強軸會引導(dǎo)用戶的眼睛和動作（例如視覺錨點），將你設(shè)計的各個部分綁定在一起并產(chǎn)生凝聚力，建立更牢固的關(guān)系。 保持設(shè)計的簡單！ 讓你的設(shè)計更易于構(gòu)建和維護。

學(xué)習(xí)工具，但不受限于某種工具。摹客，為企業(yè)團隊提供原型設(shè)計和全流程的設(shè)計協(xié)作。

作者：Ed Wassermann
地址： https://webdesign.tutsplus.com/articles/a-comprehensive-introduction-to-grids-in-web-design--cms-26521