當(dāng)你聽(tīng)到網(wǎng)格這一名詞時(shí)，首先會(huì)注意到什么?對(duì)于大多數(shù)設(shè)計(jì)師來(lái)說(shuō)，它通常是一個(gè)橫向的概念，但是，你不能忽視在網(wǎng)頁(yè)設(shè)計(jì)中還有列的概念。在考慮到網(wǎng)站設(shè)計(jì)和數(shù)字設(shè)計(jì)項(xiàng)目時(shí)尤其如此。

所以，我們?cè)趯?shí)際的設(shè)計(jì)過(guò)程中應(yīng)該如何考量垂直網(wǎng)格的布置和設(shè)計(jì)呢?在頁(yè)面上下之間創(chuàng)建一個(gè)統(tǒng)一或者說(shuō)和諧的流程在網(wǎng)站設(shè)計(jì)項(xiàng)目中是同樣重要的。我們有許多方法可以使用網(wǎng)格系統(tǒng)。

1.為什么要使用垂直網(wǎng)格?

如果你目前為止還沒(méi)有在你的網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目中考慮過(guò)垂直網(wǎng)格的話，你可能會(huì)想知道為什么這很重要。垂直網(wǎng)格有助于在頁(yè)面上實(shí)現(xiàn)垂直的節(jié)奏和和諧。

總所周知，網(wǎng)格可以有助于設(shè)計(jì)和制定設(shè)計(jì)規(guī)則，無(wú)論是打印項(xiàng)目還是數(shù)字化設(shè)計(jì)項(xiàng)目。這種結(jié)構(gòu)使你更容易繪制基礎(chǔ)框架，并為畫(huà)布上的文本和其他對(duì)象的間距，元素放置和尺寸調(diào)整提供了準(zhǔn)則。垂直網(wǎng)格還會(huì)在用戶滾動(dòng)頁(yè)面時(shí)為網(wǎng)站創(chuàng)建節(jié)奏模式和流(這在較小的設(shè)備上尤其重要)。

通過(guò)網(wǎng)格規(guī)劃的整體效果本身就是一個(gè)設(shè)計(jì)(如果你畫(huà)出來(lái))，通過(guò)線框圖，網(wǎng)站設(shè)計(jì)的風(fēng)格和內(nèi)容“流”已經(jīng)初見(jiàn)雛形。元素間距，過(guò)渡很容易看到和理解，設(shè)計(jì)的每個(gè)不同部分都感覺(jué)有目的性以及符合計(jì)劃的一部分。

看看上面的線框。你可以在草圖上畫(huà)線，以便看清每個(gè)元素在同一平面上排列。這個(gè)視覺(jué)流程正是你想要實(shí)現(xiàn)的。

2.文字網(wǎng)格

垂直網(wǎng)格在文字內(nèi)容方面尤為重要(尤其對(duì)于網(wǎng)站設(shè)計(jì)來(lái)說(shuō))。它可以通過(guò)多種方式在文本中創(chuàng)建統(tǒng)一的文本流。這一切都將歸結(jié)于你的基準(zhǔn)網(wǎng)格。

基線網(wǎng)格是指一組具有相等間隔的水平線的網(wǎng)格集——你可以把它想象成在小學(xué)時(shí)期使用的格式紙。字母的底部(基線)位于這些行上，因此文本行之間的間距相等，文本列也相互排列對(duì)齊。

以下是幾個(gè)在實(shí)際設(shè)計(jì)項(xiàng)目中的應(yīng)用：

· 創(chuàng)建兩列，并將你的類(lèi)型保留在基準(zhǔn)線上;

· 使用數(shù)學(xué)運(yùn)算將所有類(lèi)型對(duì)齊，而不考慮基準(zhǔn)的大小;

不過(guò)，基于上面的兩點(diǎn)，你應(yīng)該怎么做呢?它始于一些“排版上的數(shù)學(xué)規(guī)則”(這個(gè)概念與印刷或數(shù)字項(xiàng)目幾乎相同)。

· 選擇正文文本的字體和大小;

· 設(shè)置網(wǎng)格線或文本行之間的間距數(shù)量;

· 在設(shè)計(jì)中使用相同比例的其他間距;

· 你也可以以元素基準(zhǔn)作為基礎(chǔ)來(lái)倍數(shù)化的設(shè)置你的網(wǎng)格。舉個(gè)例子，如果你的內(nèi)容文本字號(hào)是16點(diǎn)，那么較大的文字可以是兩倍于行高的大小。

對(duì)于基線網(wǎng)格數(shù)學(xué)還有其他的作用。比如，它可以幫助你創(chuàng)建排版層次結(jié)構(gòu)，使得每個(gè)新級(jí)別的文本按其他級(jí)別的文本進(jìn)行堆疊。

3.屏幕或面板網(wǎng)格

垂直網(wǎng)格是逐頁(yè)網(wǎng)站設(shè)計(jì)的重要工具之一，例如具有視差滾動(dòng)功能的網(wǎng)站。每個(gè)頁(yè)面需要具有相同的尺寸，并具有相同的感覺(jué)，以便每個(gè)新頁(yè)面在感覺(jué)上能夠像是相同的故事和審美的連續(xù)部分。

大多數(shù)設(shè)計(jì)師通過(guò)顏色的變化或一點(diǎn)動(dòng)畫(huà)來(lái)做到這一點(diǎn)，使屏幕在每次滾動(dòng)都能“捕捉”到位。當(dāng)元素以好的垂直方向?qū)?zhǔn)時(shí)，每個(gè)屏幕都可以一次看到，而不是一半。這種垂直網(wǎng)格可以創(chuàng)造適當(dāng)?shù)暮椭C，并有助于可讀性和更理想的用戶體驗(yàn)。

這種網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格的框架以良好的垂直流動(dòng)作為基底。元素需要以與用戶滾動(dòng)相似的方式定位。類(lèi)型應(yīng)該類(lèi)似于列格式，字體和元素的大小和間距應(yīng)該一致。

這些小線索是保持用戶關(guān)注的線索，并創(chuàng)建從一大塊信息到下一個(gè)的視覺(jué)的理解和流程。

4.卡式網(wǎng)格

卡式網(wǎng)站設(shè)計(jì)是今年最受歡迎和趨勢(shì)元素之一，它們的工作原理其實(shí)就是根據(jù)垂直網(wǎng)格的概念。垂直網(wǎng)格可幫助你創(chuàng)建一個(gè)具有獨(dú)特感覺(jué)，適當(dāng)間距和舒適空間的卡片式設(shè)計(jì)，用于單個(gè)容器中的多個(gè)元素。

想想所有的使用帶有卡式網(wǎng)頁(yè)設(shè)計(jì)的網(wǎng)站對(duì)于垂直網(wǎng)格的應(yīng)用：

· 設(shè)計(jì)中卡之間的間距(移動(dòng)設(shè)備上每屏幕一張卡);

· 元素之間的內(nèi)部邊框間距，如圖像，文本或按鈕;

· 每個(gè)元素的大小;

· 文本層級(jí)和大小。

5.電商類(lèi)網(wǎng)格應(yīng)用

垂直(和橫向)網(wǎng)格是電子商務(wù)網(wǎng)站設(shè)計(jì)的一個(gè)受歡迎的選擇，因?yàn)榻M織流程不同。項(xiàng)目可以并排放置，以便用戶在進(jìn)行購(gòu)買(mǎi)之前進(jìn)行比較和選擇。

仔細(xì)觀察，你可能會(huì)發(fā)現(xiàn)網(wǎng)站框架的其余部分也遵循相同的垂直節(jié)奏。微妙的網(wǎng)格使網(wǎng)頁(yè)設(shè)計(jì)在整體上是舒適的，并通過(guò)良好的組織使購(gòu)物者更放心，信任以及希望購(gòu)買(mǎi)。

6.整體組織網(wǎng)格

使用網(wǎng)格作為你設(shè)計(jì)的輔助或基礎(chǔ)，并不意味著你的設(shè)計(jì)非得要有一個(gè)規(guī)整或者“純”網(wǎng)格的外觀。使用多個(gè)和一半的網(wǎng)格來(lái)創(chuàng)建和諧的元素的有趣的組合。

并且通過(guò)隨時(shí)打破網(wǎng)格，可以是設(shè)計(jì)在感覺(jué)上有一種重獲自由的感覺(jué)。有時(shí)你會(huì)遇到一種情況，即網(wǎng)格數(shù)據(jù)不正確，特別是在字號(hào)的大小改變時(shí)。記住，即使你使用的網(wǎng)格看起來(lái)很有趣，但是也會(huì)帶有一定破壞和諧與流動(dòng)的元素。這個(gè)就需要在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中不斷進(jìn)行視覺(jué)修正和調(diào)整以達(dá)到最好的效果。

總結(jié)

那么為什么垂直節(jié)奏和網(wǎng)格如此重要?當(dāng)談到文本時(shí)，它有助于讓用戶在閱讀時(shí)不會(huì)感覺(jué)到疲勞感。對(duì)于其他元素，它創(chuàng)造出一種獨(dú)特的和諧與流動(dòng)的感覺(jué)。

人們喜歡有組織的東西，并希望設(shè)計(jì)可以一目了然。良好的網(wǎng)格系統(tǒng)可以幫助你輕松實(shí)現(xiàn)這些。網(wǎng)格建立后，元素展示位置，大小和形狀更容易想像，因?yàn)槟憧梢詫⑵淙谌氲侥阋呀?jīng)繪制的框架中。

新聞名稱(chēng)：垂直網(wǎng)格在網(wǎng)頁(yè)設(shè)計(jì)中的運(yùn)用
網(wǎng)站路徑：http://www.rwnh.cn/news/162950.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、定制開(kāi)發(fā)、標(biāo)簽優(yōu)化、企業(yè)建站、虛擬主機(jī)、網(wǎng)站維護(hù)

廣告

聲明：本網(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)