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

新聞 2023-05-27編輯：深圳網(wǎng)站建設(shè)閱讀（）標(biāo)簽： 柵格 網(wǎng)頁設(shè)計

深圳網(wǎng)站建設(shè)公司 幫助企業(yè)提升網(wǎng)站形象,彰顯公司實力,PC+手機+微信+小程序
【模板網(wǎng)站的價格】國際域名+阿里1G空間+備案 一條龍服務(wù)
【定制網(wǎng)站的功能】SEO精準(zhǔn)營銷系統(tǒng)+城市分站+W3C標(biāo)準(zhǔn)
【營銷網(wǎng)站的效果】重長尾，重優(yōu)化，提權(quán)重，擴收錄，提排名
【量身訂制的設(shè)計】據(jù)據(jù)需求量身定制。設(shè)計到滿意為止
【專屬VIP的服務(wù)】24RX365 為您提供1對1的專屬VIP服務(wù)

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

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

　　● 網(wǎng)格是什么

　　● 術(shù)語

　　● 三分法則

　　● 12列柵格

　　● 重點突出

　　● 局限性

　　● 腦圖

　　什么是網(wǎng)頁設(shè)計與制作的柵格?

　　柵格組成了一個基本結(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個列柵格。 一個紫色矩形框代表一個單元列。

　　水槽

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

　　欄

　　有了之前的鋪墊，我們就可以了解一些更有趣的內(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é)的角度還是人類對“美”的認知來講，三分法則都沒有什么特別之處，而且也絕對不是神奇的。

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

　　我不否認當(dāng)你的圖片或設(shè)計在適合三分法則的情況下，它是一個很好的準(zhǔ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)的話題也展開一下：長期以來，人們一直認為使用黃金比例(“神圣”比例)會給人眼帶來一些特殊，令人愉悅的感覺。但目前為止，也有了不少的實驗以充分的理由質(zhì)疑這些現(xiàn)代化之前的假設(shè)。

　　這個問題的裁決還在進行中，而且看樣子可能會持續(xù)很長時間，但是它不應(yīng)該使我們放棄以開放的態(tài)度來質(zhì)疑這些傳承下來的假設(shè)。我們應(yīng)該在思維上超越這些“神圣”的東西。或許因為黃金比例在自然界重復(fù)率很高，一段時間內(nèi)認定它是美的標(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)建體系。十二列柵格是個很好的助手。

　　為什么十二列柵格那么方便? 對于網(wǎng)頁設(shè)計與制作初學(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è)計中找到平衡點。 像這樣的不對稱布局通常被認為更活躍，更熟練的技術(shù)運用。當(dāng)然這個說法可以而且應(yīng)該受到質(zhì)疑!

　　六列柵格

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

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

　　組合

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

　　重點

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

　　Breaking out of the grid to create emphasis can either massively improve your design by highlighting essential pieces, or it can look really, well, dumb. Wallpaper did a great job at breaking out from the four columns and heavily emphasize the video they want you to watch.

　　通過讓某些特定元素脫離柵格的方式來實現(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)該使用柵格，答案是： 所有時候! 選擇柵格永遠都是個好決定，因為它們有助于保持設(shè)計平衡，層次結(jié)構(gòu)，頁面整齊和一致性。

　　總是有一個爭論，認為柵格限制了設(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)容需求，以及在需要的時候如何將它們逐頁地混合在一起。 我認為他們在保持某種一致性方面做得非常出色。這種一致性創(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)建和維護。

• 上一章：怎樣制作設(shè)計出顛覆式的網(wǎng)頁
• 下一章：設(shè)計網(wǎng)站你應(yīng)該了解的幾個點