每種類型的網(wǎng)格都有不同的用途，通過了解不同的網(wǎng)格類型幫助我們在設(shè)計(jì)的時(shí)候匹配最合適的網(wǎng)格。

1、 基線網(wǎng)格

基線網(wǎng)格是由等距水平線組成的密集網(wǎng)格，用于確定文本的位置?；€網(wǎng)格通常與分欄網(wǎng)格結(jié)合使用，以確保每列中的文本在界面上均勻?qū)R。

基線網(wǎng)格最簡單的示例是一張劃線紙，準(zhǔn)確清晰地展示設(shè)計(jì)元素的位置。

2、單欄網(wǎng)格

3、分欄網(wǎng)格

這是日常設(shè)計(jì)中最常使用的網(wǎng)格類型，將一個(gè)頁面拆分成多個(gè)垂直區(qū)域，然后將對象與之對齊。

報(bào)紙和雜志的排版設(shè)計(jì)、網(wǎng)頁和APP的設(shè)計(jì)都會(huì)廣泛使用分欄網(wǎng)格。

4、模塊化網(wǎng)格

5、像素網(wǎng)格

在用Photoshop作圖時(shí)，不斷放大畫布，會(huì)看到畫布上有密集的像素網(wǎng)格出現(xiàn)。

數(shù)字屏幕是由數(shù)百萬像素的微觀網(wǎng)格組成的，為了設(shè)計(jì)的準(zhǔn)確性，設(shè)計(jì)師需要逐個(gè)像素地編輯圖像，同時(shí)也練就了“像素眼”。小到一個(gè)icon，大到整個(gè)網(wǎng)頁，都可以借助像素網(wǎng)格來完成。

6、層級(jí)網(wǎng)格

層級(jí)網(wǎng)格是指按照內(nèi)容的重要性來組織界面元素，讓用戶能夠按照主次的層級(jí)順序?yàn)g覽界面。層級(jí)網(wǎng)格主要用在網(wǎng)頁設(shè)計(jì)中，形式比較自由形式，大多數(shù)是結(jié)合網(wǎng)頁的內(nèi)容來確定。

將界面中的內(nèi)容進(jìn)行優(yōu)先級(jí)排序，按照層級(jí)結(jié)構(gòu)清晰展示內(nèi)容的優(yōu)先級(jí)，為產(chǎn)品提效。

二、在UX/UI中使用網(wǎng)格的5個(gè)技巧

在工作中嘗試使用網(wǎng)格系統(tǒng)時(shí)，下面的關(guān)鍵要點(diǎn)能幫助我們實(shí)現(xiàn)有效、靈活的設(shè)計(jì)：

1、規(guī)劃網(wǎng)格與頁面的關(guān)系

2、不要只使用網(wǎng)格設(shè)計(jì)

當(dāng)接到一個(gè)全新的需求時(shí)，很多設(shè)計(jì)師習(xí)慣以常用的網(wǎng)格和欄寬作為標(biāo)準(zhǔn)開始設(shè)計(jì)。

3、保持設(shè)計(jì)元素在網(wǎng)格內(nèi)

網(wǎng)格中每一欄之間都會(huì)有間距作為分隔，當(dāng)頁面中的文本和圖形跨越多欄時(shí)，需要保持內(nèi)容在網(wǎng)格每一欄的邊緣，避免將元素放到間距的邊緣。

4、不要忘記基線對齊

確保基于列的設(shè)計(jì)中的所有文本遵循一致的基線，這樣可以大大改善頁面的和諧感和組織感。

5、考慮使用8pt網(wǎng)格進(jìn)行設(shè)計(jì)

我們的設(shè)計(jì)必須能保證在各種設(shè)備和屏幕分辨率下都能工作并且看起來很清晰。使用基數(shù)的倍數(shù)的尺寸和間距有助于使設(shè)計(jì)過渡清晰和系統(tǒng)化。

最后

以上是在UX/UI設(shè)計(jì)中常見的6種網(wǎng)格類型和5個(gè)技巧，希望通過這些內(nèi)容能讓你對網(wǎng)格系統(tǒng)的應(yīng)用有更深的認(rèn)識(shí)。

作者：Clippp

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》在UX/UI設(shè)計(jì)中使用網(wǎng)格系統(tǒng)的5個(gè)技巧

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(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.kadanni.com.cn )是一家專注而深入的界面設(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ì)公司