UI界面設(shè)計(jì)怎么留白（1）——《野路子設(shè)計(jì)小講堂》

同行們！大家好，時(shí)隔近一個(gè)月我來(lái)更新啦！⊙﹏⊙b汗

最近事情多了起來(lái)，打亂了分享計(jì)劃，但仔細(xì)回想一下，會(huì)發(fā)現(xiàn)有好多不重要的事情占有了大部分的時(shí)間，接下來(lái)會(huì)規(guī)劃好自己的時(shí)間，做一個(gè)時(shí)間管理者。

還是老話，我是《野路子設(shè)計(jì)小講堂》的小福，寫這篇文章的初衷是分享給剛?cè)胄械拿刃乱恍?shí)際工作中的方法，希望能融入你們的工作當(dāng)中去。

PS：留白這個(gè)內(nèi)容有點(diǎn)多，我拆開(kāi)來(lái)講方便你消化。

以上介紹，不想看直接略過(guò)！———————————————————————————————

剛?cè)胄械拿刃?，在接到UI設(shè)計(jì)任務(wù)的時(shí)候，往往對(duì)于界面兩邊留白有一點(diǎn)懵，到底留多少合適呢？有沒(méi)夠相關(guān)的規(guī)范呢？

先不管留白具體規(guī)范，我們留白是為了什么？

創(chuàng)造空間感  畫面留白可極大增加畫面的空間感，留白越大空間感越強(qiáng)；

突出視覺(jué)焦點(diǎn)  用戶在快速瀏覽頁(yè)面的時(shí)候，頁(yè)面信息滿屏都是，毫無(wú)焦點(diǎn)，瞬間就會(huì)刷過(guò)去，并不記得當(dāng)時(shí)看到了什么，無(wú)法獲得關(guān)注；

提高理解能力  常見(jiàn)例子在文字閱讀中，段落之間留有一定的空白，并在段落左右也留有空白，給用戶一定的時(shí)間消化之前閱讀到的內(nèi)容；舉個(gè)反例自己體會(huì)：會(huì)員電子協(xié)議、保險(xiǎn)合約；

呼吸的空間  你可以想象身在節(jié)日的火車站、景區(qū)，是不是感覺(jué)周圍很擁擠，呼吸不順暢，同樣用戶在閱讀界面的時(shí)候，如果畫面過(guò)于擁擠，“填鴨式”的輸出內(nèi)容，閱讀非常不順暢，這個(gè)界面就被直接關(guān)閉了；

既然是講給萌新的，下面講下我所使用的常見(jiàn)規(guī)范

【PC端】

整個(gè)頁(yè)面的屏占比60%~75%，這樣前端在開(kāi)發(fā)的時(shí)候，不同屏幕左右可以直接留白，不至于突然換個(gè)大屏幕，直接滿屏都是，看的人頭大。

有時(shí)候網(wǎng)站Banner為了更惹人注意會(huì)做通屏，也就是banner寬度占屏幕寬度100%。

獨(dú)白：80%屏占比，在4K屏上會(huì)感覺(jué)滿臉都是畫面和內(nèi)容，視覺(jué)感非常難受。60%~75%之間會(huì)好很多，建議60%或70%取整數(shù)。Banner這種可以考慮通屏。

【移動(dòng)端】

如界面需展示信息量大（例如：電商、直播等），以IOS為例左右間距為：12pt；

如果頁(yè)面以插畫為主切偏幼稚方向（兒童、IM及時(shí)通訊等），以IOS為例左右間距為：16pt；

PS：pt*2=750設(shè)計(jì)稿，pt*3=414設(shè)計(jì)稿。

內(nèi)心獨(dú)白：講真的仔細(xì)看其實(shí)看不出來(lái)什么，畢竟不是所有人都是設(shè)計(jì)師眼。

使用以上方法足以應(yīng)對(duì)絕大多數(shù)工作內(nèi)容，除非你們領(lǐng)導(dǎo)們另有安排。

下面教你們一個(gè)實(shí)際工作中的技巧，可以加快工作效率，頁(yè)面上又沒(méi)有大量的輔助線。

在PS內(nèi)，按著“Shift+↑和↓箭頭”，按一下實(shí)移動(dòng)10px，單獨(dú)按“↑和↓箭頭”，按一下移動(dòng)1px。在設(shè)置模塊間的留白時(shí)候盡量以10為基準(zhǔn)，這樣可加快輸出設(shè)計(jì)稿。

再也不用滿屏輔助線了~~

其他文章

iPhone-UI規(guī)范篇——野路子設(shè)計(jì)小講堂

Androdi-UI規(guī)范篇——野路子設(shè)計(jì)小講堂

IOS、安卓設(shè)計(jì)轉(zhuǎn)稿秘籍——如何做到不同平臺(tái)上相似度95%以上呢？

Powered by Froala Editor