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

主題

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

?網(wǎng)格

?術(shù)語(yǔ)

?三分法

?12單位網(wǎng)格

?強(qiáng)調(diào)

?限制

?心理地圖

網(wǎng)格？

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

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

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

術(shù)語(yǔ)

單元

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

欄距

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

欄

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

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

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

領(lǐng)域

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

三分法

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

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

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

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

去瘋狂，打破規(guī)則，玩的開(kāi)心，如果你幸運(yùn)，會(huì)找到新的疆界！

黃金比例？

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

我猜在這些問(wèn)題上最后答案依然很遠(yuǎn)，而且可能會(huì)很長(zhǎng)一段時(shí)間，但是什么都不應(yīng)該妨礙我們保持開(kāi)放的心態(tài)來(lái)質(zhì)疑這些傳遞的假設(shè)。 我們真的應(yīng)該超越魔法思維。有一段時(shí)間，對(duì)我而言，“黃金分割”可能對(duì)我們?nèi)祟?lèi)來(lái)說(shuō)是非常愉快的，因?yàn)樵谧匀唤缰形覀兒芎玫乇凰鼑?但是再說(shuō)一遍，令人信服的證據(jù)將會(huì)很好。也許不是，但這不是我想要的理由和依據(jù)。

十二單位網(wǎng)格

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

為什么十二個(gè)單位方便？對(duì)于初學(xué)者來(lái)說(shuō)，因?yàn)樗鼈兒芎玫卮蚱屏巳?、四和六列，它們足夠靈活，可以很容易地處理各種內(nèi)容。最重要的是，你可以使它們對(duì)稱(chēng)或不對(duì)稱(chēng)，這為你提供了很多選項(xiàng)，無(wú)論是播放安全還是創(chuàng)建一些超越簡(jiǎn)單對(duì)稱(chēng)的動(dòng)態(tài)布局。

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

四欄網(wǎng)格

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

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

三欄網(wǎng)格

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

六欄網(wǎng)格

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

組合

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

強(qiáng)調(diào)

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

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

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

限制

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

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

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

心理地圖

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

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

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

最后的想法

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

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

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

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

廣告

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