通常設(shè)計(jì)APP界面的時(shí)候，每個(gè)icon、列表間距之類的都是APP UI設(shè)計(jì)師標(biāo)注的，一般都有設(shè)計(jì)規(guī)范的，移動(dòng)端需要根據(jù)不同的平臺(tái)，比如安卓和ios系統(tǒng)來適配界面。

所以，行間距和邊距的規(guī)范就非常的重要。如下圖的APP間距標(biāo)注圖。

今天25學(xué)堂小編跟大家分享的是APP 字間距、行間距、外邊距、元素邊距等四個(gè)方面。

而這些邊距與間距的距離是標(biāo)注里面最大的一項(xiàng)工作量。我們看看那些視覺設(shè)計(jì)規(guī)范就知道啦。

1、手機(jī)APP界面設(shè)計(jì)規(guī)范：如何定義視覺規(guī)范

2、Android APP界面設(shè)計(jì)視覺規(guī)范大全【完整版】

3、APP設(shè)計(jì)案例與教程-Panli代購網(wǎng)APP1.0版視覺規(guī)范

4、APP設(shè)計(jì)規(guī)范實(shí)例：悅商城APP視覺界面設(shè)計(jì)規(guī)范

5、網(wǎng)易云音樂Android 3.0視覺設(shè)計(jì)規(guī)范文檔?等等規(guī)范里頭，都有間距的標(biāo)注規(guī)范和設(shè)計(jì)要點(diǎn)。

其實(shí)，APP里面間距和邊距的設(shè)計(jì)，很有學(xué)問，設(shè)計(jì)的好不好就看間距和邊距的設(shè)計(jì)啦。

下面，25學(xué)堂小編舉例來跟大家說明一下。

第一個(gè)APP邊距的設(shè)計(jì)要點(diǎn)：特別是圖文與屏幕邊距是否符合產(chǎn)品訴求

通常來說，在圖片和屏幕邊距之間保留一定的像素邊距可以更好的引導(dǎo)用戶豎向往下閱讀

而當(dāng)圖片與屏幕邊距為0的時(shí)候，用戶更容易將注意力集中在每個(gè)圖文內(nèi)容本身，其視覺流線在往下瀏覽時(shí)，因?yàn)闆]有留白的引導(dǎo)，被圖片直接割裂，造成在圖片上的停留時(shí)間更長。

我們也對(duì)比一下，當(dāng)圖片不留邊距時(shí)，用戶更加聚焦在每個(gè)圖文本身，而非被留白引導(dǎo)往下翻閱。

通常我們?cè)O(shè)計(jì)APP界面與邊距的距離留白最佳是

ios端：@2x倍的時(shí)候是24px，@3x為32px最佳

android端的邊距規(guī)范：常用字體邊距規(guī)格對(duì)照表

第二個(gè)APP行間距的設(shè)計(jì)要點(diǎn)：行間距是否適合用戶閱讀

在內(nèi)容型文本中，文本行間距太窄會(huì)容易造成閱讀困難。通常的經(jīng)驗(yàn)值，行間距大約是字體間距的1.2~1.5倍之間，總體閱讀會(huì)比較舒服。

對(duì)比行間距 1.5倍 ? ?VS ? ? 行間距 1倍

第三個(gè)APP行間距的設(shè)計(jì)要點(diǎn)：元素塊之間的間距

如果當(dāng)行間距較大時(shí)，其本身可以作為分割內(nèi)容的一種方式。意思就不一樣啦。代表的不同的區(qū)域設(shè)計(jì)。所以，把控好元素塊之間的間距很關(guān)鍵。

間距也代表了對(duì)比和排列的分隔。所以，APP設(shè)計(jì)師們一定要好好把握好APP間距與邊距的設(shè)計(jì)要點(diǎn)。具體的還需要根據(jù)自己的界面來定。