大家好，這里是設(shè)計(jì)夾，今天為大家分享的是「網(wǎng)格系統(tǒng)」。
網(wǎng)格是設(shè)計(jì)中組織布局的系統(tǒng)。互聯(lián)網(wǎng)之前，平面設(shè)計(jì)師對(duì)印刷材料(書籍、雜志或海報(bào))使用網(wǎng)格布局?，F(xiàn)在，UX/ui設(shè)計(jì)師仍然廣泛使用網(wǎng)格布局，因?yàn)樗鼈兪墙缑嬖O(shè)計(jì)(網(wǎng)頁(yè)、移動(dòng)APP)的基礎(chǔ)結(jié)構(gòu)。
網(wǎng)格不僅能直觀地組織設(shè)計(jì)元素，還能作為一種工具，通過(guò)增強(qiáng)可讀性、明確信息架構(gòu)和提供響應(yīng)性設(shè)計(jì)框架來(lái)改善用戶體驗(yàn)～
六種網(wǎng)格類型
每種類型的網(wǎng)格都有不同的用途，通過(guò)了解不同的網(wǎng)格類型幫助我們?cè)谠O(shè)計(jì)的時(shí)候匹配最合適的網(wǎng)格。
1) 基線網(wǎng)格
基線網(wǎng)格是由等距水平線組成的密集網(wǎng)格，用于確定文本的位置?；€網(wǎng)格通常與分欄網(wǎng)格結(jié)合使用，以確保每列中的文本在界面上均勻?qū)R。
基線網(wǎng)格最簡(jiǎn)單的示例是一張劃線紙，準(zhǔn)確清晰地展示設(shè)計(jì)元素的位置。
2) 單欄網(wǎng)格
單欄網(wǎng)格是最基礎(chǔ)的形式，用來(lái)確定文本在頁(yè)面中的位置，多用于書籍、雜志等以文字為主的版面設(shè)計(jì)中。
3) 分欄網(wǎng)格
這是日常設(shè)計(jì)中最常使用的網(wǎng)格類型，將一個(gè)頁(yè)面拆分成多個(gè)垂直區(qū)域，然后將對(duì)象與之對(duì)齊。
報(bào)紙和雜志的排版設(shè)計(jì)、網(wǎng)頁(yè)和APP的設(shè)計(jì)都會(huì)廣泛使用分欄網(wǎng)格。
4) 模塊化網(wǎng)格
模塊化網(wǎng)格是柱狀網(wǎng)格的擴(kuò)展，采用垂直方向的列并添加水平的行。相交的行和列創(chuàng)建模塊，可用于管理內(nèi)容較為復(fù)雜的界面或者海報(bào)設(shè)計(jì)。
5) 像素網(wǎng)格
在用Photoshop作圖時(shí)，不斷放大畫布，會(huì)看到畫布上有密集的像素網(wǎng)格出現(xiàn)。
數(shù)字屏幕是由數(shù)百萬(wàn)像素的微觀網(wǎng)格組成的，為了設(shè)計(jì)的準(zhǔn)確性，設(shè)計(jì)師需要逐個(gè)像素地編輯圖像，同時(shí)也練就了像素眼。小到一個(gè)icon，大到整個(gè)網(wǎng)頁(yè)，都可以借助像素網(wǎng)格來(lái)完成。
6) 層級(jí)網(wǎng)格
層級(jí)網(wǎng)格是指按照內(nèi)容的重要性來(lái)組織界面元素，讓用戶能夠按照主次的層級(jí)順序?yàn)g覽界面。層級(jí)網(wǎng)格主要用在網(wǎng)頁(yè)設(shè)計(jì)中，形式比較自由形式，大多數(shù)是結(jié)合網(wǎng)頁(yè)的內(nèi)容來(lá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)格與頁(yè)面的關(guān)系
在《平面設(shè)計(jì)網(wǎng)格系統(tǒng)》這本書中，作者強(qiáng)調(diào)網(wǎng)格在頁(yè)面中的位置以及頁(yè)邊距的設(shè)置對(duì)網(wǎng)格的功能和美感有很大影響。合適的頁(yè)間距和留白會(huì)讓頁(yè)面看起來(lái)更舒服。
2) 不要只使用網(wǎng)格設(shè)計(jì)
當(dāng)接到一個(gè)全新的需求時(shí)，很多設(shè)計(jì)師習(xí)慣以常用的網(wǎng)格和欄寬作為標(biāo)準(zhǔn)開始設(shè)計(jì)。
雖然常用的網(wǎng)格系統(tǒng)設(shè)計(jì)起來(lái)更熟悉，但花時(shí)間弄清楚當(dāng)前的項(xiàng)目實(shí)際需要什么樣的網(wǎng)格，以及是否有其他需要考慮的因素也同樣重要。這樣做能夠避免我們被困在一套網(wǎng)格標(biāo)準(zhǔn)中，限制設(shè)計(jì)的發(fā)揮。
3) 保持設(shè)計(jì)元素在網(wǎng)格內(nèi)
網(wǎng)格中每一欄之間都會(huì)有間距作為分隔，當(dāng)頁(yè)面中的文本和圖形跨越多欄時(shí)，需要保持內(nèi)容在網(wǎng)格每一欄的邊緣，避免將元素放到間距的邊緣。
4) 不要忘記基線對(duì)齊
確?；诹械脑O(shè)計(jì)中的所有文本遵循一致的基線，這樣可以大大改善頁(yè)面的和諧感和組織感。
在數(shù)字設(shè)計(jì)項(xiàng)目中，基線對(duì)齊很容易被忽視，但它可以很好地平衡設(shè)計(jì)，對(duì)齊后頁(yè)面會(huì)有更舒服的視覺效果。
5) 考慮使用8pt網(wǎng)格進(jìn)行設(shè)計(jì)
我們的設(shè)計(jì)必須能保證在各種設(shè)備和屏幕分辨率下都能工作并且看起來(lái)很清晰。使用基數(shù)的倍數(shù)的尺寸和間距有助于使設(shè)計(jì)過(guò)渡清晰和系統(tǒng)化。
現(xiàn)在通常使用8pt網(wǎng)格，這樣無(wú)論是矢量設(shè)計(jì)還是基于像素的設(shè)計(jì)，都可以在視網(wǎng)膜屏幕上完美縮放。
最后
以上是在UX/UI設(shè)計(jì)中常見的6種網(wǎng)格類型和5個(gè)技巧，希望通過(guò)這些內(nèi)容能讓你對(duì)網(wǎng)格系統(tǒng)的應(yīng)用有更深的認(rèn)識(shí)。
看完覺得寫得好的，不防打賞一元，以支持藍(lán)海情報(bào)網(wǎng)揭秘更多好的項(xiàng)目。
感謝您的支持，我會(huì)繼續(xù)努力的!
打開支付寶掃一掃，即可進(jìn)行掃碼打賞哦
手機(jī)直接保存圖片,掃一掃識(shí)別二維碼,即可進(jìn)行掃碼打賞哦
