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

如何讓你的設(shè)計(jì)看起來更有說服力?試試網(wǎng)格系統(tǒng)!

2022-8-23    seo達(dá)人


一、網(wǎng)格系統(tǒng)的組成

在深入了解網(wǎng)格的類型和使用準(zhǔn)則前,讓我們先來了解一下網(wǎng)格系統(tǒng)中涉及到的一些基本概念,比如列數(shù)、內(nèi)邊距、外邊距等等。

1、列

圖片

列(Column)是網(wǎng)格的基礎(chǔ),用來表示內(nèi)容放置的區(qū)域。每一列的寬度以百分比而不是固定的數(shù)值來衡量,這樣面對不同的屏幕尺寸,可以更靈活地進(jìn)行設(shè)計(jì)。

日常設(shè)計(jì)中,最常使用的是12列等寬的網(wǎng)格系統(tǒng),適用于大多數(shù)的頁面和布局設(shè)計(jì)中。

2、內(nèi)間距

圖片

內(nèi)間距(Gutter/Padding)是指每列之間的距離,也被叫做水槽。內(nèi)間距能為頁面提供呼吸空間,避免內(nèi)容之間過于擁擠。

3、外邊距

圖片

邊距(Margins)是列與邊框之間的距離,邊距繞過內(nèi)容有上、下、左、右四個(gè)方向,在設(shè)計(jì)中我們可以針對每一側(cè)設(shè)定和更改邊距。

4、字段或模塊

圖片

字段或模塊是行和列的交集。這些模塊是頁面的基礎(chǔ),所有設(shè)計(jì)元素都將適合網(wǎng)格中矩形卡片創(chuàng)建的這些空間單元。

5、界面設(shè)計(jì)與網(wǎng)格

如果說網(wǎng)格在過去對于印刷必不可少,那么今天網(wǎng)格在數(shù)字世界中仍是不可或缺的。

圖片

網(wǎng)格成為開發(fā)數(shù)字產(chǎn)品的關(guān)鍵工具,為在所有設(shè)備上提供最佳的用戶體驗(yàn)。因此,無論屏幕大小如何,設(shè)計(jì)師都必須能夠在每個(gè)屏幕上通過最佳的方式組織內(nèi)容。

 

二、如何在設(shè)計(jì)中使用網(wǎng)格系統(tǒng)?

網(wǎng)格是具有列、內(nèi)間距和外邊距的結(jié)構(gòu)系統(tǒng),其目的是幫助設(shè)計(jì)師組織界面的內(nèi)容。

內(nèi)間距的距離越窄,越會向用戶傳達(dá)「這些內(nèi)容屬于同一組」的感覺。

圖片

同理,內(nèi)間距越寬,看起來越像是不同類型的內(nèi)容。

圖片

需要注意的是,內(nèi)間距的距離不要太寬,或者比每一列的寬度還寬,容易導(dǎo)致內(nèi)容之間的留白過大,造成視覺瀏覽上的不連貫。

圖片

此外,外邊距的間距遵循與內(nèi)間距相同的規(guī)則??梢造`活調(diào)整外邊距,以便在內(nèi)容和屏幕之間留出合適的間隔。

圖片

圖片

和內(nèi)間距一樣,屏幕中的外邊距也不能太寬,這樣會壓縮頁面中內(nèi)容的展示空間,會讓頁面看起來很局促。

圖片

 

三、使用網(wǎng)格設(shè)計(jì)的四條準(zhǔn)則

網(wǎng)格的使用看起來很直觀,但在UX或UI項(xiàng)目中使用網(wǎng)格系統(tǒng)仍有一些需要注意的規(guī)則。

1、將元素集中在每一列中

上面說到,在設(shè)計(jì)中常用到的是12列網(wǎng)格系統(tǒng)。那么12列網(wǎng)格為什么被廣泛使用呢?主要原因在于12列網(wǎng)格更方便擴(kuò)展不同的布局形式。

圖片

▲ 12列網(wǎng)格可以一行排列兩個(gè)內(nèi)容,各占6列網(wǎng)格;一行排列三個(gè)內(nèi)容,各站四個(gè)網(wǎng)格;一行排列四個(gè)內(nèi)容,各占3列網(wǎng)格;一行排列六個(gè)內(nèi)容,各占2列網(wǎng)格。

基本上,常用到的頁面布局形式在12列網(wǎng)格中都可以實(shí)現(xiàn)。

圖片

▲ 在每個(gè)內(nèi)容之間留出足夠的內(nèi)邊距。這里需要注意的是,內(nèi)容的兩側(cè)要與每一列的邊緣重合,而不是與內(nèi)邊距重合。

圖片

▲ 當(dāng)內(nèi)容居中顯示時(shí),要始終在邊緣留出一點(diǎn)空間,防止頁面被內(nèi)容填充的過于擁擠。

2、不要將列數(shù)作為內(nèi)容填充

在網(wǎng)格系統(tǒng)下,設(shè)計(jì)應(yīng)該填充整個(gè)內(nèi)容的寬度,這樣會讓界面看起來更規(guī)范。

圖片

不要讓左右兩列沒有填充內(nèi)容,讓列數(shù)作為填充,這樣會導(dǎo)致頁面的外邊距不統(tǒng)一,增加后期的開發(fā)成本。

圖片

3、可以嘗試脫離網(wǎng)格

在設(shè)計(jì)中,使用從網(wǎng)格中溢出的圖像或元素也是可以的。

圖片

例如我們想填充一個(gè)全尺寸的背景色或者圖像,只需將圖像拉到網(wǎng)格之外就可以。在網(wǎng)格和邊距的示意下,開發(fā)人員也能夠快速理解界面的尺寸信息。

4、注意內(nèi)容之間的間距

在網(wǎng)格上放置不同的元素時(shí),確保元素之間的左右間距、上下間距都是一致的,這樣會讓整個(gè)界面看起來更規(guī)范。

圖片

 

最后

除了能夠改善設(shè)計(jì)、減輕用戶認(rèn)知負(fù)擔(dān)外,網(wǎng)格系統(tǒng)還能提升設(shè)計(jì)效率。有了網(wǎng)格我們可以快速衡量元素的間距、邊距的精度,簡化設(shè)計(jì)過程。

另外,在規(guī)范的網(wǎng)格系統(tǒng)中,界面布局或內(nèi)容上的修改也會變得更容易。

慢慢來比較快,希望對你有幫助!


作者:Clippp

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》如何讓你的設(shè)計(jì)看起來更有說服力?試試網(wǎng)格系統(tǒng)!

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)www.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



分享本文至:

日歷

鏈接

個(gè)人資料

存檔