2022-12-11 分類(lèi): 網(wǎng)站建設(shè)
如果你從來(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://m.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)
猜你還喜歡下面的內(nèi)容