如果你從來沒有在設(shè)計中使用網(wǎng)格，那么這篇文章就是為你而寫。在其中，你將學(xué)習(xí)基本的術(shù)語、理論，并將通過真實網(wǎng)站的例子了解如何在環(huán)境中使用網(wǎng)格。

主題

在本指南中，我們將介紹相當(dāng)多的內(nèi)容，其中包括

?網(wǎng)格

?術(shù)語

?三分法

?12單位網(wǎng)格

?強調(diào)

?限制

?心理地圖

網(wǎng)格？

網(wǎng)格可以為你的設(shè)計創(chuàng)建一個基本結(jié)構(gòu)，一個骨架。它們由“看不見”的線條組成，你的設(shè)計元素就放置在上面。這樣做可以把設(shè)計元素在一個整體的系統(tǒng)中聯(lián)系在一起，并且合理地支持你的構(gòu)圖。

網(wǎng)格可以幫助你不費力氣地實現(xiàn)有效的對齊和一致性。依靠直覺的即興并不能很好地擴展。如果執(zhí)行正確，你的設(shè)計將顯得周到、有組織性、整潔且結(jié)構(gòu)合理。

優(yōu)秀的對齊，像許多設(shè)計一樣，應(yīng)該幾乎被用戶忽視。少即是多。在用戶的主要目標(biāo)是搜索特定內(nèi)容并快速消化時你最好不要假聰明，冒險分散他們的注意力。 你的焦點應(yīng)該是 - 不通過你的設(shè)計技巧炫耀設(shè)計的美麗。甚至更糟糕的是，創(chuàng)造出新的不同方向的焦點。 這樣的設(shè)計很可能導(dǎo)致用戶缺乏信任 - 除非缺乏一致性，就是為了創(chuàng)造性的原因而進(jìn)行的目標(biāo)。

術(shù)語

單元

單位是每個網(wǎng)格的基本構(gòu)建塊。多個單位構(gòu)成整體網(wǎng)格。在下面的 BBC 的例子中，你會看到一個 12 個單位的網(wǎng)格。紫色條紋分別代表一個單位。

欄距

下圖中的窄黃色條紋代表分隔每個單位的欄距。欄距是較小空白的形態(tài)，給網(wǎng)格一些呼吸的空間。

欄

現(xiàn)在變得更有趣了。多個單位和欄距一起形成欄，這些欄是有效地將內(nèi)容置于其中的容器。最初似乎不是這種情況，但在這樣的限制內(nèi)工作可以解放。制約因素可以做出關(guān)于放置內(nèi)容的位置更容易和更快速的決策。

在下面的示例中，你可以在工作中看到三個不同的欄。每個欄的大小適合特定形式的內(nèi)容或重點。

你可以看到，你可以選擇混合不同形式的內(nèi)容和設(shè)計元素。你還可以觀察到，這些欄組成了一個堅固的結(jié)構(gòu)，通過對齊來實現(xiàn)呼吸感的一致性和排序。設(shè)置幾條線和一些約束是一筆劃算的支出，不是嗎？

領(lǐng)域

內(nèi)容欄的形式是頁面的橫向劃分的領(lǐng)域。堅持等高的欄來減少你的頁面不是一個壞主意。在實踐中，并不總是直接實現(xiàn)。如果你的欄最終達(dá)到相同的高度，它適用于你的設(shè)計，很好，如果不是，就繼續(xù)，在下一個地方實現(xiàn)等高。

三分法

“三分法”使用迷你網(wǎng)格，意味著當(dāng)將內(nèi)容放置在將內(nèi)容分成三分之一的某些行上時，結(jié)果將更加令人滿意。 例如，這是攝影中經(jīng)常使用的方法。雖然這可能是一個很好的起點，經(jīng)常讓你大致正確，但我建議像捕捉一粒鹽一樣來放置【譯者注，大意是要更細(xì)致更精確】。

當(dāng)人們談?wù)搼?yīng)該幫助你放置設(shè)計元素在“神奇交叉點”時，我呼吁你深呼吸，考慮出錯的可能性。特別是因為遵循這個“規(guī)則”就像喝冷飲一樣簡單，特別是因為這個“規(guī)則”并不難，但是這并不是以數(shù)學(xué)或生物學(xué)的特別的任何方式，而且絕對不神奇。

不要忘記，我們并不是全都以同樣的方式感知世界。我們完全不同。 我們不是機器，在看世界時堅持一些數(shù)學(xué)上精確的視點?？纯?Reddit 的例子。它看起來像是在關(guān)注神奇的交叉點嗎？

是的，三分法是一個很好的指導(dǎo)方針 - 或者至少可以適合“對齊”圖像、設(shè)計或其他任何東西，但不要太嚴(yán)肅。只要有意義，就打破規(guī)則。在你的設(shè)計工作中，使用指導(dǎo)方針和技術(shù)，并跟隨你的直覺。在設(shè)計上 “存在即合理” - 引用一些不在上下文的尼采的話。在哲學(xué)上，這可以被認(rèn)為是死亡，但在設(shè)計上，這代表了一個堅定的指導(dǎo)，探索你的創(chuàng)造力沒有“神奇”的限制。

去瘋狂，打破規(guī)則，玩的開心，如果你幸運，會找到新的疆界！

黃金比例？

雖然我們處于設(shè)計中的魔法世界，讓我對一些相關(guān)的事情持續(xù)一秒鐘：人們一直認(rèn)為，使用黃金比例的“神圣”比例會產(chǎn)生一些特別的，神圣的和令人愉快的成果。有一些實驗，有很好的理由質(zhì)疑這些“前現(xiàn)代”的假設(shè)。

我猜在這些問題上最后答案依然很遠(yuǎn)，而且可能會很長一段時間，但是什么都不應(yīng)該妨礙我們保持開放的心態(tài)來質(zhì)疑這些傳遞的假設(shè)。 我們真的應(yīng)該超越魔法思維。有一段時間，對我而言，“黃金分割”可能對我們?nèi)祟悂碚f是非常愉快的，因為在自然界中我們很好地被它包圍著。 但是再說一遍，令人信服的證據(jù)將會很好。也許不是，但這不是我想要的理由和依據(jù)。

十二單位網(wǎng)格

回到更實際的領(lǐng)域。我想討論一個非常萬能的網(wǎng)格，讓你開始一些具體的工作，使用第一個優(yōu)秀的系統(tǒng)來構(gòu)建你的布局。十二個單位格是你的朋友。

為什么十二個單位方便？對于初學(xué)者來說，因為它們很好地打破了三、四和六列，它們足夠靈活，可以很容易地處理各種內(nèi)容。最重要的是，你可以使它們對稱或不對稱，這為你提供了很多選項，無論是播放安全還是創(chuàng)建一些超越簡單對稱的動態(tài)布局。

我們來看幾個使用這個網(wǎng)格提供的靈活性的布局。

四欄網(wǎng)格

四列網(wǎng)格的主要優(yōu)點在于它的簡單性、平衡性，且非常可靠。這里的每一列都有三個單位。另一方面，它非常對稱，看起來有點無聊。

通常，你需要一個主要部分的強調(diào)內(nèi)容，然后側(cè)邊欄的次要關(guān)注。在下面的第一個例子中，你可以看到第一列用于品牌宣傳，中間兩列是主要內(nèi)容，而最后一列是針對不需要突出顯示的內(nèi)容。

三欄網(wǎng)格

使用這個網(wǎng)格，每列跨越四個單位。由于這是一個不對稱的網(wǎng)格，所以多了一點變化，你需要更精明地找到你的設(shè)計中的平衡。 像這樣的不對稱布局通常被認(rèn)為更加活躍，更加巧妙。當(dāng)然可以而且應(yīng)該有所爭議！

六欄網(wǎng)格

在這個例子中，每列跨兩個單位，使事情比三列網(wǎng)格更具挑戰(zhàn)性。它將三列網(wǎng)格的每列分成兩列。六列網(wǎng)格為你提供了更多的選擇和機會來調(diào)整較小的細(xì)節(jié)。如果你在內(nèi)容豐富的網(wǎng)站上工作，需要放置大量信息，則六列網(wǎng)格可能是實驗的明智起點。既然它可能是一個先進(jìn)的網(wǎng)格，我也許不會建議你在第一個項目上開始使用它。

組合

你也可以在你的設(shè)計中組合網(wǎng)格，這就是為什么十二個單位網(wǎng)格系統(tǒng)非常方便。它很容易讓你整合三，四和六列的塊。

強調(diào)

平衡和簡單的布局通常比過于復(fù)雜的布局更舒適。另一方面，你必須小心，不要玩得太安全，所有的時間和風(fēng)險看起來無聊。 為了強調(diào)，你可以通過組合多個列來脫離網(wǎng)格或突出顯示某些設(shè)計元素的大小。這可以創(chuàng)建視覺興趣，并在你的主要設(shè)計元素中建立更好的層次結(jié)構(gòu)。

打破網(wǎng)格來創(chuàng)造重點可以大大提高你的設(shè)計，突出重要的部分，或者它可以看起來真的很愚蠢。壁紙從四列中突破出色，并強調(diào)他們想要觀看的視頻。

但是，你需要小心，打破網(wǎng)格的節(jié)奏太頻繁，導(dǎo)致布局看起來很壞，或過分強調(diào)太多的部分，所以沒有什么可以突出。

限制

經(jīng)常出現(xiàn)的一個問題是什么時候在設(shè)計中使用網(wǎng)格？總是！網(wǎng)格是實現(xiàn)平衡、層次結(jié)構(gòu)、對齊和一致性的好方法。

總是有爭論認(rèn)為網(wǎng)格限制了設(shè)計工作。但是，這是一件好事，因為網(wǎng)格實際上可以促進(jìn)你的創(chuàng)造力，并以建設(shè)性的方式指導(dǎo)你的決策。這樣的限制可以成為你工作的良好起點。所以當(dāng)你有常數(shù)，比如客戶給你的廣告的大小，你有一個起點，圍繞它來構(gòu)建你的設(shè)計。你的網(wǎng)格的大小可以并且應(yīng)該注意這樣的限制。

在“華爾街日報”的下面的例子中，你可以看到，以綠色標(biāo)記的廣告尺寸決定了設(shè)計決策，來構(gòu)建具有此維度的網(wǎng)格的一部分。

心理地圖

如果你的成功，你的網(wǎng)格將有助于建立你的網(wǎng)站及其各個頁面的心理模型。這也意味著你的頁面的結(jié)構(gòu)不應(yīng)該完全不同 - 調(diào)整到每個頁面的可用性的共同特征應(yīng)該是你的計劃的一部分。

讓我們再來看看 Etsy 如何成功解決這個問題的幾個例子。只有這個時候，讓我們關(guān)注他們的網(wǎng)格如何支持他們不同的內(nèi)容需求，以及如何將它們從一頁到另一個組合起來。在我看來，他們做了一個很好的工作，保持一定的一致性，創(chuàng)造出一個統(tǒng)一的印象，把頁面整齊地捆綁在一起。因此，它們引導(dǎo)用戶通過內(nèi)容，并且用戶知道期望什么。他們的心理地圖是完整的，沒有可能會在結(jié)構(gòu)上破壞用戶體驗的驚喜。

他們?yōu)樗麄兊木W(wǎng)頁創(chuàng)造了一個很好的節(jié)奏，他們的網(wǎng)格看起來很優(yōu)雅，因為他們看起來很簡單。

最后的想法

總體來說，系統(tǒng)地對齊內(nèi)容是從整個話題的關(guān)鍵。沒有什么比一致的網(wǎng)格線更能有效地將各種形式的內(nèi)容捆綁在一起了。 創(chuàng)建一個強大的軸線，用戶可以跟隨方向和引導(dǎo)他們的眼睛和動作，如視覺錨。 這通常更強的關(guān)系，將你的工作綁定在一起，并創(chuàng)造凝聚力。把事情簡單化！你的設(shè)計將更容易維護和建立。

創(chuàng)新互聯(lián)專業(yè)從事成都網(wǎng)站建設(shè)，重慶網(wǎng)站設(shè)計，成都網(wǎng)站制作

文章標(biāo)題：網(wǎng)頁設(shè)計中網(wǎng)格的綜合介紹_成都網(wǎng)站建設(shè)_創(chuàng)新互聯(lián)
網(wǎng)站URL：http://jinyejixie.com/news0/221500.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項目有網(wǎng)站建設(shè)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)