上周末，我和微信（相互）（現(xiàn)在）的一位大學(xué)同學(xué)聊天，現(xiàn)在他是一家上海公司的UED主管。在中間，我們談了很多關(guān)于那里的東西，他說了一句話讓我印象特別深刻。

事實(shí)上，很多時(shí)候，我們覺得我們的工作很平庸或“看起來特別曖昧”，大多數(shù)原因是色彩匹配，字體和間距的比較并不好。這些話很容易說，但很難做到。我學(xué)到了很多設(shè)計(jì)理論，但我仍然做得不好。

顏色匹配和字體的比較一直受到每個(gè)人的高度重視。在設(shè)計(jì)設(shè)計(jì)規(guī)范時(shí)，我們首先確定產(chǎn)品的主要和次要顏色。對(duì)于文本，不同級(jí)別的文本（標(biāo)題類，正文類，提示類）將選擇不同的字體大小和單詞顏色，這些將出現(xiàn)在您的設(shè)計(jì)規(guī)范中。但是，我很少看到人們?cè)谠O(shè)計(jì)規(guī)范中提到間距，因此從這個(gè)角度來看，間距經(jīng)常被忽視。因此，在本文中，我對(duì)間距進(jìn)行了相對(duì)簡(jiǎn)單的總結(jié)。

為什么要使用間距？

我一直認(rèn)為，當(dāng)設(shè)計(jì)師做事時(shí)，他們必須“更加真實(shí)”。您在設(shè)計(jì)過程中做出的任何決定都應(yīng)該問自己為什么這么想。有針對(duì)性地進(jìn)行此操作將減少更少的彎路和更容易的增長。

因此，如果我們想要了解間距甚至更標(biāo)準(zhǔn)化的間距使用，我們必須首先理解為什么使用間距。間距的使用有很多效果，可以吸引用戶的注意力，提高內(nèi)容的可讀性，并解釋元素之間的關(guān)系。實(shí)際上，簡(jiǎn)單來說，間距的作用可以概括為一句話：建立可視化層次結(jié)構(gòu)來簡(jiǎn)化界面內(nèi)容，使用戶更容易接受。

間距類型

間距可以從位置分為兩種類型，一種間距用于區(qū)分不同的內(nèi)容塊;另一個(gè)間隔用于區(qū)分內(nèi)容塊中的信息。為方便起見，我們?cè)诖藢⑵浞Q為：塊內(nèi)的間距和塊外的間距。

物體周圍的空白越多，吸引的眼睛就越多。物體周圍的空白越多，就越容易吸引用戶的注意力。

從信息層次的角度來看，內(nèi)容間隔越高，內(nèi)容越大。因?yàn)楦匾膬?nèi)容是為了吸引用戶的更多關(guān)注，為了更好地區(qū)分，塊內(nèi)的間隔小于塊之間的距離。

以Airbnb為例，因?yàn)閺男畔用鎭砜?，房屋的水平（?nèi)容塊）遠(yuǎn)高于其引入信息，因此每個(gè)房屋之間的間距大于房間圖片，位置，價(jià)格間距。

上圖中左側(cè)的界面是正常的，右側(cè)的界面已由我處理，因此塊內(nèi)的間距與塊外的間距一樣大。我們可以清楚地看到右側(cè)的界面會(huì)給用戶帶來問題。他們不知道下面的文字是針對(duì)上面的圖片還是下面的圖片。

當(dāng)然，我們還可以發(fā)現(xiàn)塊內(nèi)的間隔由于其內(nèi)部信息層次的不同而被劃分兩次，這意味著塊內(nèi)的間隔不同。

行間距

間距的使用會(huì)對(duì)文本易讀性產(chǎn)生重大影響。這里文本的間距主要是指單詞之間的高度間距，我們稱之為行高。如果線路太大或太小，則不利于用戶閱讀。通常，行高選擇為字符高度的30％。

間距和線條

在文章的開頭我們還提到間距的主要功能之一是內(nèi)容差異化。因此，在內(nèi)容差異化方面，線條是我們無法規(guī)避的主題。因?yàn)榻缑嬖O(shè)計(jì)中線條的主要功能是完成內(nèi)容的區(qū)分。隨著極簡(jiǎn)主義風(fēng)格的興起，去線性化設(shè)計(jì)也成為一種設(shè)計(jì)趨勢(shì)。設(shè)計(jì)師開始使用間距（白色）來代替線條來完成區(qū)分。因此有必要了解間距和線條之間的關(guān)系。

對(duì)于相同的內(nèi)容，請(qǐng)使用左側(cè)的線條和右側(cè)的間距。從上圖中，我們也可以看到為什么線條被設(shè)計(jì)師遺漏了。線條的使用將極大地分散用戶的注意力，并且整個(gè)界面將略微擁擠。

虎撲的界面是有襯里的，但我發(fā)現(xiàn)刪除線后界面略顯凌亂，但用戶仍然可以通過間距來區(qū)分內(nèi)容。

實(shí)際上，線條和間距不是對(duì)立的。在同一個(gè)界面中，我們還可以看到線條和間距，而功能則是區(qū)分內(nèi)容。

不只是間距

您總結(jié)設(shè)計(jì)元素的能力決定了您的上限。同樣的用戶提示功能，你只知道對(duì)話的單一使用，但是大奶會(huì)根據(jù)提示的不同強(qiáng)度和用戶是否需要操作來選擇對(duì)話，吐司和小吃吧，從而建立完整的用戶提示系統(tǒng)。

出于同樣的原因，我們都知道間距可以很好地區(qū)分內(nèi)容，所以實(shí)際上，要完成“內(nèi)容區(qū)分”，我們不必使用間距。除了已經(jīng)說過的線條之外，我們還可以使用顏色匹配，陰影，圖案等。

例如，在上面的示例中，信息級(jí)別的間距已經(jīng)很好，但整個(gè)界面將更加單調(diào)。我們可以引入圖標(biāo)和配色方案來增強(qiáng)不同內(nèi)容之間的對(duì)比度，使整個(gè)界面更加明亮。

謹(jǐn)慎使用間距

雖然這篇文章是關(guān)于如何更好地使用間距的，但我個(gè)人認(rèn)為我應(yīng)該謹(jǐn)慎使用間距。因?yàn)槿绻阆胪ㄟ^放大間隙來完成信息級(jí)別的區(qū)分，就會(huì)有很多空白區(qū)域，整個(gè)界面會(huì)特別清爽。但是老板可能會(huì)心煩意亂，這個(gè)頁面怎么這么空？你懶嗎？添加一些內(nèi)容，讓整個(gè)界面變滿。

當(dāng)然，這是一個(gè)嘲笑。我對(duì)間距的禁忌主要是由于頁面長度的增加。因?yàn)橐坏├_間距，就不可避免地導(dǎo)致界面長度的增加?？梢栽谏弦粋€(gè)屏幕上顯示的內(nèi)容需要刷卡才能看到。我們不知道對(duì)于用戶來說，他們更喜歡刷新界面（更白）或簡(jiǎn)單操作（不滑動(dòng)）。

設(shè)計(jì)師必須將自己的設(shè)計(jì)融入用戶的角色，但不要去“代表”用戶。我想通過自己的主觀妄想來進(jìn)行設(shè)計(jì)。我認(rèn)為這個(gè)界面看起來不錯(cuò)，但它并不一定適合用戶。但是，設(shè)計(jì)人員很少能夠參與用戶研究過程，因此數(shù)據(jù)無法支持我們的一些想法。對(duì)于大多數(shù)設(shè)計(jì)師來說，這也是一個(gè)痛點(diǎn)。

總結(jié)

間距對(duì)于界面設(shè)計(jì)非常重要。本文希望引起人們的注意，并希望你在閱讀之后能獲得一些東西。

« 文章標(biāo)題的關(guān)鍵規(guī)則：廢話要求技巧 | 微信排水常規(guī)有效方法和轉(zhuǎn)化技巧 »