平時(shí)很喜歡一些干凈的設(shè)計(jì)，讓人感覺很舒服，閱讀內(nèi)容也清晰，很多設(shè)計(jì)師在設(shè)計(jì)時(shí)，經(jīng)常細(xì)節(jié)過多，會顯得累贅，有時(shí)候設(shè)計(jì)也需要用到英文，但只專注到了字體選擇，卻忽略了英文其他細(xì)節(jié)，今天和大家分享下，如何讓你的設(shè)計(jì)更加利索干凈!
1.調(diào)整行間距
行間距大家都知道，但是具體如何設(shè)定值很多人不知道，一般我常用規(guī)則是 +4 ，比如文字大小是12PX，那么行間距就是16，以此類推文字是14，那么行間距就是18。
▲ 上圖是之前設(shè)計(jì)的一套規(guī)范的字行間距規(guī)則，供大家參考。
除了+4的規(guī)律你也可以運(yùn)用黃金比例，文字大小X1.414，文字大小X1.616(1.414和1.616是黃金值)取四舍五入，得出以下字體間距規(guī)則。
很多人要問，我如何判斷界面里面用多大的行間距呢?道理很簡單，就是看你們內(nèi)容，如果你們app內(nèi)容需要很豐富，你可以行間距小一些讓屏幕展示更多內(nèi)容，可以運(yùn)用+4的原則，目前淘寶天貓是這個(gè)原則，如果你頁面內(nèi)容更加留白大一些閱讀舒服一些，可以運(yùn)用黃金比例的行間距，比如新聞閱讀軟件，需要大量留白來調(diào)整呼吸感!
▲ Yahoo News因?yàn)槲淖謨?nèi)容信息比較多，所以需要頁面信息量豐富，所以在行間距上用的類似固定+4的原則，讓頁面看起來更加清爽。
▲ 相反Airbnb頁面節(jié)奏大家感覺更舒服一些，因?yàn)樗w的行間距比較大，留白比較舒服，給人很優(yōu)雅，清爽的感覺，他們在很多設(shè)計(jì)細(xì)節(jié)上都沒有遵循iOS規(guī)范，而去打破重組，比如列表高度，列表的圖標(biāo)大小等。
2.調(diào)整字間距
除了行間距，字間距同樣很重要，特別是英文頁面時(shí)候，同樣的內(nèi)容，字間距，和行間距不合適，看起來界面就會相差很多，有的看著很舒服，有的看起來說不出來哪里不對。
▲ 這2個(gè)頁面，左邊: (字母和字母的字間距: 0 ，行間距：20)；右邊: (字母和字母的字間距: 0.2 ，行間距：22)
上面左邊的頁面字母和字母之前距離非常的緊密，句子和句子之間的行間距也很近，導(dǎo)致閱讀起來很密集，不夠舒服，相反右邊通過加大行間距和字間距，使得內(nèi)容沒有那么滿，字母和字母之間的間距，行與行之間的間隔，使得整個(gè)設(shè)計(jì)節(jié)奏得到了一些舒緩!
需要注意的是:不要給太大的字間距，有時(shí)候過大也會讓讀者不舒服。
3.減少線
▲ 同樣一個(gè)結(jié)構(gòu)，Airbnb對于商品單元處理就比ebay看起來要干凈清爽一些，原因在于ebay上面線條太多，可能和他們整體視覺語言有關(guān)，線多了就沒有純色看著清爽干凈。
▲ 再看亞馬遜的設(shè)計(jì)，以及韓國29cm對于細(xì)節(jié)的處理，29cm去除一切線條，讓設(shè)計(jì)更加清爽利索，而亞馬遜線條很多，雖然很好的起到的信息分割作業(yè)，但是就不夠清爽利落。
▲ 同樣一個(gè)設(shè)計(jì)，上面的采用線條的處理，下面的采用去掉線條用色塊來處理，哪個(gè)看起來更加干凈，當(dāng)然是下面的!
所以在一個(gè)設(shè)計(jì)里面減少線條，或者讓線條最少化，是讓UI設(shè)計(jì)看起來干凈的一種很重要的方法，通過間距來分割信息，加強(qiáng)內(nèi)容和內(nèi)容之間的間距，這樣做，用戶也是可以很清晰的區(qū)分信息層級。
需要注意的是：優(yōu)先保證內(nèi)容清晰，如果有些地方一定要用到線條，一定要使用它。
▲ 在Facebook新版本視覺風(fēng)格中，很明顯發(fā)現(xiàn)去線條的設(shè)計(jì)技法,左側(cè)是改版前，右側(cè)是改版后，很明顯facebook減少了線的運(yùn)用。
▲ 去掉線條后整個(gè)設(shè)計(jì)并沒有影響層級，相反更加清晰。
4.留白
▲ 頁面放松和呼吸感在UI中非常重要，在左側(cè)的設(shè)計(jì)中，元素之間的距離特別小，都擠在一個(gè)空間里面，非常的滿。
右邊的界面，很好的運(yùn)用了版式，和空間感，有足夠的空間讓元素之間去呼吸讓用戶感覺舒服。
▲ 這個(gè)案例里面，左邊的內(nèi)容很密集，留白雖然有，但是不明顯，右邊運(yùn)用了大的灰色留白來區(qū)分信息的內(nèi)容，所以右側(cè)看起來更加舒適。
▲ Facebook的卡片設(shè)計(jì)同樣也是采用粗的間距來作為信息的區(qū)分，讓頁面看起來更加的層次分明，利索干凈。
▲ 同樣左側(cè)的頁面雖然運(yùn)用了去線，每個(gè)內(nèi)容和內(nèi)容直接的間距留白有了，但是信息密集不清晰，右側(cè)的就很清晰，通過頭像作為紐帶來區(qū)分信息，讓每行的內(nèi)容更加清晰可見。
5運(yùn)用卡片
▲ 在清晰度層面，使用卡片是幫助內(nèi)容信息反饋的很好一種視覺形式，同時(shí)也讓信息更加明確哪塊是哪塊。
▲ 卡片化設(shè)計(jì)在移動端讓設(shè)計(jì)更加干凈利落，是經(jīng)常運(yùn)用到的設(shè)計(jì)點(diǎn)。
總結(jié)
今天分享的幾個(gè)小技巧點(diǎn)，其實(shí)是我們每天做設(shè)計(jì)中遇見的，需要靈活的多學(xué)多用，同時(shí)我們每天看到的一些好的設(shè)計(jì)，記得去留意分析，為什么別的設(shè)計(jì)好，別人設(shè)計(jì)看起來那么干凈，畢加索說過：好的設(shè)計(jì)師借鑒，偉大的設(shè)計(jì)師偷。
- 1.加強(qiáng)行間距，+4原則或黃金比例
- 2.加大字間距: 0.1或0.2勿過大
- 3.減少線條，如非得已使用線
- 4.合理留白，拉開信息層級
- 5.運(yùn)用卡片，更好整合信息
原文地址：我們的設(shè)計(jì)日記（公眾號）
作者：sky
轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》5個(gè)設(shè)計(jì)小技巧，越早會越好
文章來源：站酷 作者：陳皮Celia
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( bouu.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ù)