?前言?
UI設(shè)計(jì)由三大元素組成成箫，即色彩、圖形析藕、文字凳厢，其中圖形與文字的排版方式是建立視覺層級(jí)的重要元素竞慢。
兩者結(jié)合的媒介就是間距，合理的間距能給用戶帶來筹煮，具有美感且舒適的視覺體驗(yàn)，本期我們就聊一聊UI設(shè)計(jì)中間距那點(diǎn)事本冲。
?文字與間距?
文字是UI設(shè)計(jì)中最重要的信息傳遞元素劫扒，文字的排版看似容易其實(shí)并不簡(jiǎn)單，因?yàn)槲淖值膶傩员姸喙导ⅲ热缱痔?hào)湾戳、字間距广料、行高艾杏、段落等等。
很多設(shè)計(jì)師對(duì)文字屬性很了解购桑，也能夠合理運(yùn)用，但總會(huì)卡在開發(fā)環(huán)節(jié)其兴，花費(fèi)很長(zhǎng)時(shí)間驗(yàn)收，最終還是得不到理想效果榴徐。
下面我們從根上去認(rèn)識(shí)文字匀归，對(duì)文字中能夠影響排版間距的屬性，一一解析穆端，并且了解開發(fā)邏輯，正確與他們對(duì)接体啰。
文字-行高
字體設(shè)計(jì)師，為了能滿足文字行間距的合理展示柒莉，通常會(huì)給字體設(shè)定一定的行高沽翔。
行高就是在設(shè)計(jì)軟件中選中文字后，上下外邊框高度仅偎，字體的行高沒有標(biāo)準(zhǔn)橘沥，不同的字體一般默認(rèn)行高也不一樣。
也就是因?yàn)樽煮w的行高座咆，讓UI設(shè)計(jì)師對(duì)文字與其他元素的間距設(shè)定寝并，有不同的見解腹备。
上圖都是30px的間距，但因?yàn)樽煮w行高不同镀岛，A友驮、B兩個(gè)方案的實(shí)際視覺間距不同。
認(rèn)同A方案合理的設(shè)計(jì)師走越，理由是文字最好設(shè)置一定的行高耻瑟，不然折行時(shí)視覺上沒有行間距，很擁擠喳整，不得不再設(shè)置行高，最終30px的間距還是有間隙搬素。
認(rèn)同B方案的設(shè)計(jì)師魏保，理由是UI設(shè)計(jì)本身對(duì)幾個(gè)像素的差距就很敏感，視覺上做不到統(tǒng)一猪杭，就是不合理妥衣。
兩者的表述都對(duì)戒傻，但也確實(shí)都有一定的弊端，下面給大家介紹兩個(gè)解決方案需纳。
可以確定的是，為了滿足文字折行后的閱讀性體驗(yàn)兵扬，最好帶有一定的行高，這樣也會(huì)利于與開發(fā)對(duì)接津坑。
第一種：
首先說一下UI設(shè)計(jì)中傲霸，間距設(shè)定的一個(gè)理念，間距設(shè)定一般要設(shè)定一個(gè)最小柵格基數(shù)昙啄，如4、5耿币、6韧拒、8為間距設(shè)定的起始數(shù)值。
然后頁(yè)面中蹈集，接下來所有的間距設(shè)定雇初，都得是這個(gè)數(shù)值的倍數(shù)。（這點(diǎn)后面會(huì)詳細(xì)講解）
在一個(gè)帶有文字的設(shè)計(jì)組件中靖诗，若設(shè)計(jì)思路上要呈現(xiàn)視覺統(tǒng)一的間距，那可以算出字號(hào)與行高的間隙鄙才，然后減去相對(duì)應(yīng)的柵格數(shù)值促绵，使其視覺上接近統(tǒng)一的間距。
下圖所示浓冒，設(shè)計(jì)思路上想呈現(xiàn)一個(gè)30px的統(tǒng)一間距尖坤，那就可以減去一個(gè)最小柵格數(shù)值。
若最小柵格數(shù)值是6px慢味，最終給出的間距就是24px，視覺距離呈現(xiàn)的就是接近30px的距離或油。
這種方式也是我一直以來用的方法，好處就是沒有打破間距設(shè)定的原則罐脊。
設(shè)計(jì)的間距與開發(fā)看到的間距蜕琴，都是有規(guī)律的柵格系統(tǒng)間距。
唯一有點(diǎn)不完美的地方就是上炎，實(shí)際距離有時(shí)還會(huì)有一點(diǎn)小誤差雏搂，但其實(shí)在視覺上也完全可以忽略掉了烧董。
第二種：
第二種方式就是精益求精铐尚，不考慮間距的柵格系統(tǒng)原則，算出字號(hào)與行高的間隙诲祸，間距上準(zhǔn)確減去而昨，保證沒有一丁點(diǎn)的誤差。
我找了一下這樣的產(chǎn)品歌憨，發(fā)現(xiàn)iOS端的滴滴APP中务嫡，有個(gè)模塊是這樣的設(shè)計(jì)理念。
上圖案例中心铃，字號(hào)36px，行高44px，文字上下的間隙就是4px暮顺。
所以設(shè)置距離26px秀存，加上行高間隙正好是30px或链，得到統(tǒng)一的間距效果档押。
這種方式有一個(gè)小小的弊端，就是開發(fā)感受不到間距的規(guī)則令宿，最終設(shè)計(jì)驗(yàn)收時(shí)可能會(huì)耗費(fèi)更多的時(shí)間粒没。
特殊情況：
另外有一種情況，就不能刻意去追求文字的視覺對(duì)齊癞松，除非是平面設(shè)計(jì)，因?yàn)殚_發(fā)的邏輯也不會(huì)去支持這樣做硕勿。
上圖中錯(cuò)誤的方式是因?yàn)榉慵祝_發(fā)寫這個(gè)卡片，會(huì)寫成一個(gè)容積俗稱盒子软能，內(nèi)容都會(huì)放在盒子里面举畸，就算內(nèi)容過多，也是向下進(jìn)行擴(kuò)展適配抄沮。
開發(fā)對(duì)接-關(guān)于行高（重點(diǎn)內(nèi)容）
字體行高的間隙有了解決方法叛买，接下來是與開發(fā)的對(duì)接，這也是最關(guān)鍵的一個(gè)環(huán)節(jié)率挣，設(shè)計(jì)的再好，最終不能很好的落地捶箱，也是白搭。
UI設(shè)計(jì)師在設(shè)計(jì)驗(yàn)收iOS端時(shí)荠锭，可能會(huì)遇到這樣的問題晨川，設(shè)計(jì)與開發(fā)都用了同樣的間距參數(shù)，但最終呈現(xiàn)的間距還是不一樣共虑。
原因就是看蚜，同樣的蘋方字體，iOS端開發(fā)的默認(rèn)字體行高供炎，與設(shè)計(jì)軟件中的字體默認(rèn)行高不一樣。
比如在Sketch軟件中42號(hào)字的蘋方字體默認(rèn)行高是59惨奕，但是iOS開發(fā)軟件中默認(rèn)是52竭钝。
如果開發(fā)不手動(dòng)調(diào)整字的行高，就會(huì)出現(xiàn)與設(shè)計(jì)的偏差卧波。
根據(jù)我的調(diào)研庇茫，iOS開發(fā)工程師，若不是特殊情況查坪，基本不會(huì)去改默認(rèn)行高參數(shù)宁炫。
下面我們列舉一下，設(shè)計(jì)常用蘋方字號(hào)的默認(rèn)行高羔巢，與iOS開發(fā)默認(rèn)行高的數(shù)值對(duì)比，從中找一下規(guī)律启摄。
上圖中可以得出，字號(hào)越大，設(shè)計(jì)默認(rèn)行高與iOS開發(fā)默認(rèn)行高差距越大威创。
所以設(shè)計(jì)上最好把默認(rèn)行高改成與開發(fā)一樣的默認(rèn)行高谎懦，這樣才能保障，開發(fā)不手動(dòng)調(diào)整行高下界拦，是一致的。
iOS開發(fā)字號(hào)默認(rèn)行高有一定的規(guī)律截碴，隨著字號(hào)的增加蛉威，行高會(huì)在字號(hào)基礎(chǔ)上+4、+6哲虾、+8择示、+10以偶數(shù)遞增。
雖有規(guī)律但也不容易形成記憶汪诉，推薦一個(gè)公式剪菱。
用字號(hào)除10后乘以2，再加上字號(hào)旗们，就是iOS開發(fā)的默認(rèn)行高构灸，公式如下：
有公式可能還不夠便捷岸梨，再給大家推薦一款Sketch行高修復(fù)插件稠氮，Auto Fix iOS Text Line Height for Mac 。
這款插件是專門針對(duì)iOS字體行高修復(fù)赃份，使其與開發(fā)默認(rèn)行高保持一致奢米。（公眾號(hào)后臺(tái)回復(fù)666可獲取）
關(guān)于安卓
安卓系統(tǒng) Material Design 使用的字體谒拴，中文是思源黑體涉波，英文是Roboto。
因?yàn)榘沧肯到y(tǒng)開源苍日，不同的安卓手機(jī)廠商大多會(huì)更換字體窗声。
比如小米手機(jī)MIUI系統(tǒng)中英文都使用Misans字體，所以安卓文字行高沒有一個(gè)標(biāo)準(zhǔn)豆茫。
安卓開發(fā)與iOS開發(fā)還有個(gè)不同點(diǎn)是屋摇，安卓開發(fā)使用什么字體，行高就是字體本身的默認(rèn)行高炮温。
思源黑體行高默認(rèn)和字號(hào)大小一樣柒啤，Roboto行高接近蘋方字體行高。
如果設(shè)計(jì)稿按安卓規(guī)范設(shè)計(jì)担巩，那思源黑體最好設(shè)置成與蘋方字體一樣的行高涛癌，然后安卓工程師手動(dòng)去調(diào)整送火，iOS開發(fā)工程師所見即所得先匪。
字體修復(fù)后使用經(jīng)驗(yàn)
關(guān)于修復(fù)后字體的使用方式，分享一些經(jīng)驗(yàn)坚俗，UI設(shè)計(jì)中使用文字的頻率很高岸裙，有標(biāo)題、副標(biāo)題、正文激涤、輔助文字等倦踢，字號(hào)都有所不同。
當(dāng)在設(shè)計(jì)中辱挥，確定這些文字字號(hào)后晤碘，做一次行高的修復(fù)，然后把這些文字創(chuàng)建成字符樣式园爷，每次用時(shí)從字符樣式庫(kù)里面選擇即可。
最后說一下求厕，特殊情況結(jié)合自身產(chǎn)品風(fēng)格扰楼，去定義文字行高是完全沒有問題的，開發(fā)可以根據(jù)設(shè)計(jì)的定義的行高進(jìn)行調(diào)整项栏。
文字-段落
在有段落的文案中蹬竖，很多設(shè)計(jì)師為了方便荤牍，直接給一個(gè)回車鍵的段落間距庆冕，這樣是萬(wàn)萬(wàn)不可取的访递。
一個(gè)回車鍵的間距，就是一行字的行高拷姿，通常這個(gè)間距都比較大响巢，就算設(shè)計(jì)風(fēng)格需要這么大的間距，那一定也要手動(dòng)去設(shè)置段落踪古。
段落數(shù)值的設(shè)定伏穆，一般情況要大于文字行高的一半，比如文字行高為42枕扫，那段落最好大于21烟瞧，這樣段落間距加上文字行高，整體就是≥1.5倍参滴。
為什么是≥1.5倍卵洗？原因是文字的行間距，一般大于1.5倍視覺上是比較舒適过蹂，例如字號(hào)是30酷勺，那行高設(shè)置為45，形成1.5倍的間距脆诉。
文字-字間距
字間距是字與字之間的間距，默認(rèn)一般為0不做設(shè)定亏狰，特殊設(shè)計(jì)風(fēng)格以外。
有一種情況促脉，當(dāng)一段左對(duì)齊文字中存在標(biāo)點(diǎn)或數(shù)字英文字母時(shí)策州，那末尾可能不夠一個(gè)字符的空間够挂，就會(huì)出現(xiàn)末尾留白的情況。
出現(xiàn)這種參差不齊的情況孽糖，確實(shí)不那么美觀梭姓，但在UI設(shè)計(jì)中實(shí)屬正常嫩码。
不用刻意去設(shè)置成左右水平對(duì)齊，這樣雖整齊铡恕，但因?yàn)椴煌淖珠g距會(huì)影響閱讀體驗(yàn)丢间。
文字-字號(hào)
不同字號(hào)間距設(shè)定有一個(gè)原則，當(dāng)字號(hào)越大時(shí)诀艰，字與其他元素間距也就需要相對(duì)越大饮六。
字號(hào)越大說明級(jí)別越高，級(jí)別越高從信息層級(jí)上來講绿满，就需要較大的間距來呈現(xiàn)窟扑。
這是客觀上的一個(gè)原則漏健，文字越大蔫浆，就需要更多的留白去承托茎毁，就像文字的行高，字號(hào)越大文字的行高增加的倍數(shù)也就越大谭溉。
?如何定義間距橡卤？?
間距是UI設(shè)計(jì)中建立信息層級(jí)、提升閱讀體驗(yàn)柜与、表達(dá)元素之間的關(guān)系嵌灰、表現(xiàn)重要信息的重要方式。
定義合理的間距其實(shí)非常有學(xué)問迁匠，打開京東驹溃、淘寶你會(huì)發(fā)現(xiàn)元素之間的間距非常緊湊，打開愛彼迎亡哄、蔚來又會(huì)發(fā)現(xiàn)元素之間較為寬松布疙，這是為什么？
其實(shí)就是他們的設(shè)計(jì)語(yǔ)言不同拣挪，致使展示出的形態(tài)也就各異俱诸，而間距就是表現(xiàn)設(shè)計(jì)語(yǔ)言的其中一種方式。
在UI設(shè)計(jì)中赶诊，間距的設(shè)定一般會(huì)選擇一個(gè)最小柵格基數(shù)舔痪，如4、5夺英、6滋捶、8等數(shù)值，之后頁(yè)面中重窟，所有的間距都要以载萌，最小柵格基數(shù)的倍數(shù)呈現(xiàn)。
谷歌推出的設(shè)計(jì)語(yǔ)言 Material Design 推薦柵格系統(tǒng)的最小基數(shù)是8dp巡扇，一切間距扭仁、尺寸都應(yīng)該是8dp的倍數(shù)。
淘寶的設(shè)計(jì)厅翔，據(jù)我所知用的是5的基數(shù)乖坠，愛彼迎用的是8的基數(shù)，從這點(diǎn)來看刀闷，基本可以得出一個(gè)結(jié)論熊泵，使用越小的數(shù)值基數(shù)涩赢，設(shè)計(jì)呈現(xiàn)通常就會(huì)越緊湊戈次。
一個(gè)最小柵格基數(shù)的倍數(shù)值有很多轩勘，但其實(shí)通常有6個(gè)左右常用間距筒扒，就能滿足絕大多數(shù)的場(chǎng)景。
我目前負(fù)責(zé)的產(chǎn)品最小柵格基數(shù)是6绊寻，設(shè)計(jì)上常用間距大概有6個(gè)花墩，完全能夠滿足大多數(shù)設(shè)計(jì)場(chǎng)景所需。
這些間距其實(shí)并不用刻意去選擇澄步，當(dāng)你使用最小柵格倍數(shù)值時(shí)間長(zhǎng)了冰蘑，就能自然得出幾個(gè)常用的間距，字號(hào)的選擇使用基本也適用這個(gè)邏輯村缸。
另外祠肥，一個(gè)產(chǎn)品中模塊眾多，難免會(huì)出現(xiàn)一些特殊情況梯皿，所以肯定不能限定死只可以用那幾個(gè)間距仇箱。
除了上圖中列舉的常用間距之外县恕，12、36剂桥、90忠烛、120等一些間距數(shù)值也會(huì)用到，只是用的頻率不會(huì)很高权逗。
案例解析
接下來美尸，根據(jù)最小柵格基數(shù)為6的設(shè)計(jì)規(guī)范，通過一個(gè)商品卡片案例斟薇，分析一下間距設(shè)定的幾個(gè)原則师坎。
上圖中，首先要給各個(gè)元素分類奔垦，比如主標(biāo)題和副標(biāo)題是一類內(nèi)容屹耐；標(biāo)簽是一類內(nèi)容；價(jià)格是一類內(nèi)容椿猎；“找相似”按鈕又是一類內(nèi)容惶岭。
根據(jù)親密關(guān)系原則，同類內(nèi)容的間距應(yīng)該更近犯眠，這樣有利于建立信息層級(jí)關(guān)系按灶，提升用戶的可讀性。
具體多近呢筐咧？可以根據(jù)商品卡片在頁(yè)面中的外邊距鸯旁，來進(jìn)行分析定義。
看一個(gè)產(chǎn)品的外邊距基本能判斷量蕊，是寬松型排版铺罢，還是緊湊型排版。
產(chǎn)品的外邊距是根據(jù)設(shè)計(jì)語(yǔ)言残炮，產(chǎn)品定位韭赘，產(chǎn)品內(nèi)容多少等來定義，常見的邊距有20势就、24泉瞻、30、36苞冯、48袖牙、60等。（大概就是這個(gè)范圍內(nèi)）
使用較大外邊距舅锄，內(nèi)容區(qū)域的間距要小于外邊距鞭达，小到可以直觀分辨即可，這樣可以體現(xiàn)出頁(yè)面中，內(nèi)容的親密關(guān)系畴蹭。
使用常規(guī)外邊距烘贴，比如我們的案例中，使用30px就是常規(guī)外邊距撮胧，內(nèi)容區(qū)域要適當(dāng)小于或等于外邊距桨踪，這樣視覺上體現(xiàn)的是統(tǒng)一性。
主標(biāo)題與副標(biāo)題屬于同類項(xiàng)芹啥，它們之間的間距一定要小于锻离，卡片的內(nèi)邊距，這樣整體看上去才能體現(xiàn)信息層級(jí)墓怀。
間距小到多少汽纠，還是那個(gè)理念，可以直觀感受到比內(nèi)邊距小即可為止傀履，不能過小虱朵。
一般來說，視覺上的間距大概是內(nèi)邊距（同模塊中的大間距）的一半钓账，就會(huì)表現(xiàn)的不錯(cuò)碴犬。
案例中設(shè)置的是一個(gè)柵格單位6px，再加上文字的行間隙梆暮，視覺上大概就是15px的間距服协，就是內(nèi)邊距的一半。
接下來啦粹，給案例加標(biāo)簽偿荷，標(biāo)簽與文字不是同類信息，所以要適當(dāng)與主副標(biāo)題拉開間距唠椭。
通常第一選擇就是跳纳，視覺距離與內(nèi)邊距30px，保證統(tǒng)一贪嫂。
案例中設(shè)置的是24px寺庄，再加上文字的行間距，就非常接近30px撩荣。
接下來是價(jià)格铣揉，對(duì)于一個(gè)商品卡片設(shè)計(jì)饶深，價(jià)格是需要著重突出體現(xiàn)的餐曹。
一般設(shè)計(jì)上要突出一個(gè)元素，大概3種方式：一是改變顏色敌厘；二是放大台猴；三是加大留白；也就是加大間距。
案例的商品卡片饱狂，設(shè)計(jì)風(fēng)格價(jià)格顏色規(guī)范是黑色曹步，所以顏色不能改變。
只能放大或加大留白休讳，放大和留白得在合理的范圍內(nèi)讲婚，不然就會(huì)破壞卡片的整體結(jié)構(gòu)性。
間距上與標(biāo)簽設(shè)置30px的間距俊柔，加上文字的行高筹麸，視覺上的間距，會(huì)成為卡片中最大的間距留白雏婶，從而起到突出的作用物赶。
這種設(shè)計(jì)方法，在一個(gè)設(shè)計(jì)組件中留晚，最好只出現(xiàn)一個(gè)酵紫，不然整體結(jié)構(gòu)就會(huì)有一定程度上的破壞。
另外強(qiáng)調(diào)一下错维，統(tǒng)一性固然重要奖地，但設(shè)計(jì)的核心是為需求目標(biāo)服務(wù)，所以赋焕，這時(shí)候統(tǒng)一性的優(yōu)先級(jí)是次于需求目標(biāo)的鹉动。
就像淘寶首頁(yè)的瓷片區(qū)，間距非常緊湊宏邮，失去了一定的美感泽示，但這樣做確實(shí)展示了更多的內(nèi)容，滿足了需求目標(biāo)蜜氨。
?最后?
最后做個(gè)總結(jié)：
1械筛、關(guān)于文字的間距，要考慮文字的行高飒炎，盡可能保持視覺統(tǒng)一性埋哟；
2、iOS設(shè)計(jì)稿郎汪，設(shè)計(jì)軟件中默認(rèn)的文字行高赤赊，與開發(fā)軟件中的默認(rèn)行高不一致，最好修復(fù)行高煞赢，與開發(fā)保持一致抛计；
3、文字段落不要用回車鍵去定義照筑，要用段落參數(shù)吹截，段落間距通常要大于文字行高1.5倍瘦陈；
4、多行文字出現(xiàn)這種參差不齊的情況波俄，不要設(shè)置為左右水平對(duì)齊晨逝；
5、一般字號(hào)越大懦铺，字與其他元素間距也需要越大捉貌；
6、UI設(shè)計(jì)要結(jié)合產(chǎn)品定位等冬念，制定最小柵格基數(shù)昏翰，然后任何間距要以最小柵格基數(shù)的倍數(shù)呈現(xiàn)；
7刘急、一個(gè)產(chǎn)品中棚菊，通常設(shè)置6個(gè)左右的間距數(shù)值，能滿足大多數(shù)設(shè)計(jì)的場(chǎng)景叔汁；
8统求、善于使用親密關(guān)系、留白理念据块、統(tǒng)一性等設(shè)計(jì)原則码邻，設(shè)計(jì)前理解需求目標(biāo)。
