UI中網(wǎng)格最佳實(shí)踐

1、網(wǎng)格系統(tǒng)，不用我多說了吧，每個(gè)設(shè)計(jì)師必備的核心硬實(shí)力。但還是有很多設(shè)計(jì)師半知半解，使用時(shí)云里霧里的。今天我們來解決這個(gè)問題，分享給你一些實(shí)用小妙招。記得先收藏，免得下次需要時(shí)找不到。為什么要掌握網(wǎng)格？網(wǎng)格系統(tǒng)對(duì)每個(gè)設(shè)計(jì)師來說，是必須要掌握的硬實(shí)力?？梢赃@么說，網(wǎng)格的運(yùn)用可以幫助我們塑造自身專業(yè)性，還可以讓設(shè)計(jì)排版更科學(xué)、邏輯性和秩序美。網(wǎng)格系統(tǒng)最主要的核心能力，可以給團(tuán)隊(duì)之間協(xié)作帶來默契與統(tǒng)一性；同時(shí)也是保證在協(xié)作時(shí)候，設(shè)計(jì)師之間減少溝通和決策成本。有了一定的規(guī)則約束后，大家都按照統(tǒng)一的規(guī)則去完成設(shè)計(jì)。所以現(xiàn)在知道網(wǎng)格系統(tǒng)的重要性了吧，那么下面繼續(xù)分享：使用網(wǎng)格間距系統(tǒng)的一些小技巧。如果想知道

2、如何定義網(wǎng)格，可以猛戳這里 HYPERLINK /s?_biz=MzAwNjM0MzIzNA=&mid=2650338883&idx=1&sn=8b1b9592803fb005778444b55287f418&chksm=8302896eb47500783f91559c5392e05c4aaf1188683a0566c09ca706f45814449d8c999c3190&scene=21 l wechat_redirect t _blank 很多大廠設(shè)計(jì)師，一直在堅(jiān)持使用的8點(diǎn)網(wǎng)格系統(tǒng)，是因?yàn)? 看完記得回來哦。多卡片間距如何解決？在使用網(wǎng)格系統(tǒng)過程中，很多設(shè)計(jì)師會(huì)遇到如下問題，我們先來看看

3、圖。在剛使用網(wǎng)格時(shí)，有些設(shè)計(jì)師遇到這種卡片式的布局，不知道如何正確使用間距，總是很糾結(jié)。以后遇到這種問題，幾乎90%的解決方案，就是間距相等原則。右側(cè)是修改后的效果，看上去視覺更舒適一些。下面來看一個(gè)實(shí)際線上案例上圖是天貓app截圖的，不知道是開發(fā)實(shí)現(xiàn)原因，還是設(shè)計(jì)師故意這樣去設(shè)計(jì)。右邊卡片是被我提取出來了，大家可以看下右側(cè)卡片，看著并不是十分舒服，太擁擠了。下圖，我把卡片內(nèi)間距調(diào)整相等后，整體視覺感受好很多了。卡片間距相等原則，規(guī)則就會(huì)少一些。能用最少規(guī)則完成設(shè)計(jì)，而且達(dá)到滿意的效果，那才是所有設(shè)計(jì)師該追求的目標(biāo)。卡片內(nèi)文案間距節(jié)奏在卡片內(nèi)做文案排版，可以有一套好用的公式，那就是外部間距統(tǒng)一，我們先看下圖。兩個(gè)卡片很明顯，右側(cè)卡片間距比左側(cè)舒服很多，那么到底怎么回事？繼續(xù)看下面。以后遇到這種卡片內(nèi)文案排版，同樣思路運(yùn)用相等原則。文案四周間距相等，標(biāo)題和內(nèi)容之間由于信息層級(jí)關(guān)系，間距可以比外間距小一些。這樣的好處是規(guī)則簡(jiǎn)單啊，效果也很好，遵循重復(fù)原則。所有的間距都必須遵循一個(gè)規(guī)則約束，比如某個(gè)數(shù)的增量，我這里使用的是8的增量。那么如果是大標(biāo)題帶有小標(biāo)題的情況，同時(shí)還有內(nèi)容信息，這種該如何處理？下面繼續(xù)看一張圖。如果遇到這種情況，思路其實(shí)也是一樣的，確保四周間距一致，中間由于層級(jí)關(guān)系，大標(biāo)題和副標(biāo)題肯定間距要小，這里繼續(xù)使用小間距8，標(biāo)題與下面內(nèi)容之間關(guān)系