手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

Bs界面設(shè)計(jì)之十:B端設(shè)計(jì)基礎(chǔ)指南:網(wǎng)格系統(tǒng)

2022-6-14    博博


網(wǎng)格的歷史


說(shuō)到網(wǎng)格的應(yīng)用,我們可以追溯到很遠(yuǎn)。古埃及人在他們的雕刻和繪畫(huà)中描繪的人物遵循了一個(gè)規(guī)則,將比例標(biāo)準(zhǔn)定為人的拳頭,一個(gè)站立的人物從地面到頭頂測(cè)量為 18 個(gè)拳頭。

B端設(shè)計(jì)基礎(chǔ)指南:網(wǎng)格系統(tǒng)

公元 1040 年,首次在中國(guó)出現(xiàn)活字印刷,主要采用的是泥活字。在西方,金屬活字印刷術(shù)在 1450 年左右出現(xiàn),而古騰堡圣經(jīng)在 1455 年左右的發(fā)行將是出版界的第一個(gè)重大里程碑。金屬類型的文字更加充分利用了網(wǎng)格。

B端設(shè)計(jì)基礎(chǔ)指南:網(wǎng)格系統(tǒng)

到了 1917 年,網(wǎng)格在荷蘭風(fēng)格派運(yùn)動(dòng)中最為明顯,由藝術(shù)家 Theo van Doesburg 和 Piet Mondrian 領(lǐng)導(dǎo)。他們將畫(huà)布限制在相交的垂直和水平線條和原色上。

B端設(shè)計(jì)基礎(chǔ)指南:網(wǎng)格系統(tǒng)

1919 年,德國(guó)的包豪斯學(xué)校成立,他們主張的簡(jiǎn)潔實(shí)用的設(shè)計(jì)理念同樣用到了網(wǎng)格的概念。像著名的包豪斯國(guó)際象棋,它的棋子都是正方形和長(zhǎng)方形等簡(jiǎn)單的幾何形體,可以緊密地組合在一起,以便緊湊地存放。

B端設(shè)計(jì)基礎(chǔ)指南:網(wǎng)格系統(tǒng)

1950 年代,一種嶄新的平面設(shè)計(jì)風(fēng)格終于在瑞士形成。這種風(fēng)格的設(shè)計(jì),力圖通過(guò)簡(jiǎn)單的網(wǎng)絡(luò)結(jié)構(gòu)和近乎標(biāo)準(zhǔn)化的排版方式,達(dá)到設(shè)計(jì)上的統(tǒng)一性。這種風(fēng)格一直到現(xiàn)在影響了很多網(wǎng)頁(yè)和平面設(shè)計(jì)師。

B端設(shè)計(jì)基礎(chǔ)指南:網(wǎng)格系統(tǒng)

隨著第二次世界大戰(zhàn)的結(jié)束,一種新的消費(fèi)主義出現(xiàn)了。經(jīng)濟(jì)快速發(fā)展,廣告業(yè)的繁榮逐漸興起。保羅·蘭德作為美國(guó)第一個(gè)應(yīng)用瑞士平面設(shè)計(jì)風(fēng)格商業(yè)藝術(shù)家,他以企業(yè)品牌標(biāo)志設(shè)計(jì)及商業(yè)廣告設(shè)計(jì)而聞名,網(wǎng)格在這種新的廣告形式中發(fā)揮了重要作用。

今天我們要聊的是關(guān)于網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)格系統(tǒng)。說(shuō)起來(lái)很簡(jiǎn)單,但其實(shí)里面包含了很多復(fù)雜的概念。網(wǎng)頁(yè)設(shè)計(jì)的第一步就是如何進(jìn)行布局。標(biāo)題、導(dǎo)航、按鈕放在哪?每個(gè)元素之間的間距是多少?這些都離不開(kāi)頁(yè)面布局。作為網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ),頁(yè)面布局可以極大地影響用戶閱讀的流暢度和直觀度。在聊頁(yè)面布局前,我們需要先普及一些概念。

B端設(shè)計(jì)基礎(chǔ)指南:網(wǎng)格系統(tǒng)


頁(yè)面布局


頁(yè)面布局是網(wǎng)頁(yè)上所有視覺(jué)元素的排列。通過(guò)頁(yè)面元素的有序排列,可以建立元素間的關(guān)系,從而更好地引導(dǎo)用戶體驗(yàn)。作為網(wǎng)頁(yè)設(shè)計(jì)的關(guān)鍵組成部分,布局決定了頁(yè)面哪些元素最受關(guān)注,以及頁(yè)面的視覺(jué)整體平衡??傊粋€(gè)好的頁(yè)面布局可以將用戶的注意力引向正確的方向。先將他們吸引到最重要的元素上,然后按照重要性順序閱讀余下部分。


網(wǎng)格的作用及概念


要實(shí)現(xiàn)良好的頁(yè)面布局,最好的辦法就是應(yīng)用網(wǎng)格系統(tǒng)。網(wǎng)格是設(shè)計(jì)的骨架,可以幫助我們對(duì)齊,有序組織頁(yè)面內(nèi)容。通過(guò)正確使用網(wǎng)格,我們不會(huì)隨意地把元素放到頁(yè)面里,而是明確地知道將這些元素放到哪些合理的位置上,有助于提高設(shè)計(jì)效率和設(shè)計(jì)質(zhì)量。無(wú)論是 PC 端還是移動(dòng)端設(shè)計(jì),通過(guò)網(wǎng)格都將對(duì)我們做出有指導(dǎo)性的設(shè)計(jì)決策并為用戶創(chuàng)造更好的體驗(yàn)。

網(wǎng)格由幾個(gè)部分組成,分別是 Column (列)、Gutter (槽)和 Margin (邊距)。它們?cè)谝黄饦?gòu)成了屏幕的水平寬度。

接下來(lái)通過(guò)幾個(gè)圖例來(lái)詳細(xì)解釋下。

B端設(shè)計(jì)基礎(chǔ)指南:網(wǎng)格系統(tǒng)

列(Column)是跨越內(nèi)容區(qū)域的垂直部分。在網(wǎng)頁(yè)設(shè)計(jì)中列越多,網(wǎng)格就越靈活。列的寬度由設(shè)計(jì)師自己來(lái)決定,傳統(tǒng)做法是在 PC 端網(wǎng)頁(yè)上使用 12 個(gè),Pad 端使用 8 個(gè),移動(dòng)端使用 4 個(gè)。列寬一般定義為 60~80px。列寬是影響實(shí)際內(nèi)容寬度的關(guān)鍵因素。

B端設(shè)計(jì)基礎(chǔ)指南:網(wǎng)格系統(tǒng)

槽(Gutter)是列與列之間的間隙。槽的作用是將每個(gè)模塊的內(nèi)容進(jìn)行縱向分割。較寬的槽更適合較大的屏幕設(shè)備,可以通過(guò)更寬的槽去拉開(kāi)頁(yè)面的間距,使頁(yè)面信息展示的更加舒展。

B端設(shè)計(jì)基礎(chǔ)指南:網(wǎng)格系統(tǒng)

邊距(Margin)是內(nèi)容與屏幕左右邊緣之間的空間。更寬的邊距更適合更大的屏幕,因?yàn)樗鼈儠?huì)在內(nèi)容的周邊創(chuàng)建更多的空白。

B端設(shè)計(jì)基礎(chǔ)指南:網(wǎng)格系統(tǒng)

介紹了以上 3 個(gè)概念,我們可以利用 8pt 網(wǎng)格系統(tǒng)來(lái)對(duì)頁(yè)面進(jìn)行分割。8pt 網(wǎng)格系統(tǒng),使用 8 的增量來(lái)調(diào)整頁(yè)面元素的大小和間距。也就是說(shuō),頁(yè)面中的高度或?qū)挾?、邊距或填充都?8 的倍數(shù)。


8pt 網(wǎng)格介紹


有沒(méi)有想過(guò)我們?cè)谧鲆苿?dòng)端界面設(shè)計(jì)的時(shí)候?yàn)槭裁催x用特別小的畫(huà)板,但我們的顯示設(shè)備卻非常大?

比如,我們用 375×812 的尺寸來(lái)進(jìn)行設(shè)計(jì) iphone X,但其實(shí) iphone X 的實(shí)際尺寸是 1125×2436,是我們?cè)O(shè)計(jì)尺寸的 3 倍。

B端設(shè)計(jì)基礎(chǔ)指南:網(wǎng)格系統(tǒng)

B端設(shè)計(jì)基礎(chǔ)指南:網(wǎng)格系統(tǒng)

因?yàn)樵O(shè)計(jì)尺寸會(huì)以 2 倍或 3 倍的像素進(jìn)行渲染,比如 iphoneX 就是以 3 倍尺寸進(jìn)行渲染,iphone8 或 iphoneXR 會(huì)以兩倍尺寸進(jìn)行渲染。所以我們?cè)谶M(jìn)行設(shè)計(jì)的時(shí)候可以采用 1 倍最小尺寸進(jìn)行設(shè)計(jì),以適配到不同設(shè)備的不同尺寸。因此,1pt 可以分別轉(zhuǎn)換為 @1x(1 倍尺寸)、@2x(2 倍)和 @3x(3 倍)大小的 1px、4px 或 9px。

B端設(shè)計(jì)基礎(chǔ)指南:網(wǎng)格系統(tǒng)

所以我們?cè)O(shè)計(jì)一個(gè) 16pt 的圖標(biāo),導(dǎo)出@2x 或者@3x 的尺寸應(yīng)該是 32px、48px


為什么一定要用 8pt?


使用偶數(shù)來(lái)調(diào)整元素大小或元素間的間距可以很好的適配到各種尺寸的屏幕。比如在@1.5x 尺寸下,如果用奇數(shù)來(lái)定義元素尺寸或間距,就很容易出現(xiàn)半個(gè)像素的情況。5px 在 1 倍尺寸中導(dǎo)出為 1.5 倍尺寸就容易出現(xiàn)半格像素的情況。之所以選擇 8,也是因?yàn)榇蟛糠值钠聊怀叽缡强梢员?8 整除的,這樣就很容易適配。此外在 PC 端沒(méi)有使用 2 或 4,是因?yàn)槠漕w粒度太小,不便于設(shè)計(jì)師進(jìn)行操作;用 8 的倍數(shù)來(lái)設(shè)計(jì)還有一個(gè)好處就是避免我們?cè)谠O(shè)計(jì)中過(guò)于糾結(jié)。

B端設(shè)計(jì)基礎(chǔ)指南:網(wǎng)格系統(tǒng)


文本如何設(shè)置?


基于 8pt 網(wǎng)格的排版系統(tǒng)。字體的大小可以設(shè)計(jì)成不同的尺寸,但它們的行高要盡量是 8 的倍數(shù)。

B端設(shè)計(jì)基礎(chǔ)指南:網(wǎng)格系統(tǒng)

B端設(shè)計(jì)基礎(chǔ)指南:網(wǎng)格系統(tǒng)

在網(wǎng)頁(yè)端設(shè)計(jì)時(shí),很少會(huì)遇到幾倍尺寸的輸出,所以通常情況下都以像素為單位,這樣的話就是 8px 的倍增。我們就可以把間距或者元素定義成以 8 的倍增不同尺寸。

例如:

small = 8px
medium = 16px
large = 24px
x-large = 32px
……


頁(yè)面布局類型


普及了上述概念后,我們一起進(jìn)一步了解下頁(yè)面的布局,頁(yè)面布局大體分為幾類:固定布局、流動(dòng)布局、自適應(yīng)布局、響應(yīng)式布局。

固定布局,顧名思義就是頁(yè)面的整體寬度是固定的,不會(huì)隨著瀏覽器的拉伸變化而變化。這種頁(yè)面相對(duì)死板單一,但對(duì)于設(shè)計(jì)師來(lái)講相對(duì)容易設(shè)計(jì),也易于開(kāi)發(fā)。

B端設(shè)計(jì)基礎(chǔ)指南:網(wǎng)格系統(tǒng)

流動(dòng)布局,它會(huì)隨著瀏覽器窗口的大小而變化,但是它變化的邏輯是以模塊的百分比來(lái)定義的。無(wú)論瀏覽器的寬度是多少,流動(dòng)布局都會(huì)填滿頁(yè)面的寬度。其次流動(dòng)布局不需要像響應(yīng)式布局那么多樣性的變化。它在極大或極小的頁(yè)面寬度上會(huì)存在一些缺點(diǎn)。比如頁(yè)面很寬,內(nèi)容可能會(huì)被拉伸得太長(zhǎng),單個(gè)文字段落可能會(huì)在單行上貫穿頁(yè)面。相反,小屏幕上的多列布局也可能對(duì)內(nèi)容來(lái)說(shuō)過(guò)于擁擠。

B端設(shè)計(jì)基礎(chǔ)指南:網(wǎng)格系統(tǒng)

自適應(yīng)布局可以理解為是固定布局的一個(gè)升級(jí)版,舉個(gè)例子,當(dāng)頁(yè)面內(nèi)容為 960px,此時(shí)頁(yè)面無(wú)論再往多寬拉伸,頁(yè)面內(nèi)容始終顯示 960 寬度。如果縮小寬度到一個(gè)臨界值時(shí),比如 960px 以內(nèi),頁(yè)面就會(huì)縮小到它的第二個(gè)寬度,假設(shè)是 640,以此類推。這個(gè)臨界值我們稱之為斷點(diǎn)。

B端設(shè)計(jì)基礎(chǔ)指南:網(wǎng)格系統(tǒng)

響應(yīng)式布局結(jié)合了流動(dòng)布局和自適應(yīng)布局。隨著瀏覽器寬度的增加或減少,響應(yīng)式布局將像流動(dòng)布局一樣進(jìn)行變化。同時(shí),如果瀏覽器寬度超出了某個(gè)臨界點(diǎn),也就是斷點(diǎn),那么頁(yè)面布局也會(huì)發(fā)生改變。通常,響應(yīng)式布局是為了能夠兼容網(wǎng)頁(yè)端、平板端和移動(dòng)端等不同設(shè)備進(jìn)行設(shè)計(jì)的,這樣會(huì)給用戶帶來(lái)更好的瀏覽體驗(yàn)。

B端設(shè)計(jì)基礎(chǔ)指南:網(wǎng)格系統(tǒng)

最后用圖例展示下如何利用網(wǎng)格系統(tǒng)在網(wǎng)頁(yè)設(shè)計(jì)上進(jìn)行頁(yè)面布局。

B端設(shè)計(jì)基礎(chǔ)指南:網(wǎng)格系統(tǒng)

在 figma 上的設(shè)置如圖:

B端設(shè)計(jì)基礎(chǔ)指南:網(wǎng)格系統(tǒng)

我們可以設(shè)置好列數(shù),定義好列寬和槽寬來(lái)決定頁(yè)面的實(shí)際寬度。

在網(wǎng)頁(yè)設(shè)計(jì)上使用網(wǎng)格系統(tǒng)淺層價(jià)值是為了讓頁(yè)面布局有章可循,使頁(yè)面看起來(lái)更加統(tǒng)一,深層價(jià)值其實(shí)是為了做自適應(yīng)布局,讓頁(yè)面在不同寬度下適配到不同的設(shè)備上。

這里我也創(chuàng)建了 4 種不同尺寸的網(wǎng)頁(yè)端網(wǎng)格系統(tǒng),供大家參考,大家也可以根據(jù)自己的實(shí)際情況去建立自己的網(wǎng)格。

B端設(shè)計(jì)基礎(chǔ)指南:網(wǎng)格系統(tǒng)

https://www.figma.com/community/file/1076073453929437640/8pt-web-grid

最后推薦一款 sketch 智能布局網(wǎng)格的插件,喜歡的同學(xué)附件進(jìn)行下載。

B端設(shè)計(jì)基礎(chǔ)指南:網(wǎng)格系統(tǒng)

切記,在實(shí)際項(xiàng)目中,盡可能靈活的使用網(wǎng)格,不必拘泥于 8pt 的單位,但盡量保持在偶數(shù)范圍。

參考文獻(xiàn):

分享本文至:

日歷

鏈接

個(gè)人資料

存檔