上周末我跟一個大學同學在微信上聊（互）天（吹）冬三，現(xiàn)在他是上海一家公司的首席UED總監(jiān)匀油。中間我們聊了很多有的沒的，其中他說了一句話勾笆，讓我印象特別深刻敌蚜。
其實很多時候，我們覺得自己的作品非常的平庸或者“看起來特別糊”窝爪，大部分原因就是配色弛车，字體和間距的對比沒有做好。這些話說起來簡單蒲每，但是做起來很難纷跛。學了不少的設計理論，但是依舊做不好設計邀杏。
配色和字體的對比一直都很受大家的重視贫奠。在制定設計規(guī)范的時候，我們首先會去確定產(chǎn)品的主色調和輔助色望蜡。對于文字來說唤崭，不同級別的文字（標題類，正文類脖律，提示類）會選擇不同的字號和字色谢肾，這些都是會出現(xiàn)在你的設計規(guī)范中。然而我很少看到有人在設計規(guī)范里提到間距小泉，所以從這個角度來看芦疏，間距經(jīng)常會被我們忽視。那么這篇文章里我就對間距做了一個比較簡單的總結膏孟。
為什么要使用間距眯分？
我一直認為設計師做東西的時候一定要“較真”，你在設計過程所做的任何決定都要問自己為什么柒桑，多思考弊决。做到有的放矢，這樣會少走很多彎路，也更容易成長飘诗。
那么如果我們想了解間距乃至更加規(guī)范的使用間距与倡，首先我們要明白為什么要使用間距。間距的使用有很多作用昆稿，可以吸引用戶注意力纺座、提升內容的可讀性，闡述元素之間的關系溉潭。其實簡單來說净响，間距的作用可以歸納成一句話：建立視覺層級來簡化界面內容，讓用戶更容易接受喳瓣。
間距的種類
間距從位置上我們可以分為兩種馋贤，一種間距是用于區(qū)分不同的內容塊；另一種間距是用于區(qū)分內容塊內的信息畏陕。為了表述方便配乓，我們在這里稱其為：塊內間距和塊外間距。
從信息層級的角度來說，級別越高的內容間距越大鞠绰。因為越重要的內容就要吸引用戶越多的注意力腰埂，因此為了更好的進行區(qū)分，塊內間距都是小于塊外間距的洞豁。
以Airbnb為例盐固，因為從信息層級的角度來說，一個房源（內容塊）的級別要比其介紹信息要高的多丈挟，所以每個房源之間的間距要大于房間圖片刁卜、位置、價格的間距曙咽。
上圖中左邊的界面是正常的蛔趴，右邊的被我處理過了，使其塊內間距和塊外間距一樣大例朱。我們可以很明顯的發(fā)現(xiàn)孝情，右邊的界面會給用戶帶來困擾。他們不知道下面的的文字介紹是屬于上面這個圖還是下面這個圖洒嗤。
當然我們也可以發(fā)現(xiàn)其實塊內間距因為其內部信息層級的差異會進行二次區(qū)分箫荡，也就是說塊內間距也不是都一樣的。
行間距
間距的使用會對你的文字易讀性產(chǎn)生很大的影響渔隶。這里文字的間距主要是指文字之間的高度間距羔挡，我們稱之為行高洁奈。行高過大過小都不利于用戶閱讀。一般來說绞灼，行高選擇為字符高度的30%是恰到好處的利术。
間距與線條
在文章開頭我們也提到了間距的一個主要作用就是內容區(qū)分。那么說到內容區(qū)分低矮，線條是我們無法繞開的一個話題印叁。因為線條在界面設計中主要功能就是完成內容區(qū)分。而隨著極簡主義風格的興起军掂，去線化設計也開始成為設計的一個潮流轮蜕。設計師開始使用間距（留白）來取代線條來完成區(qū)分。所以弄懂間距和線條之間的關系是非常有必要的良姆。
同樣的內容肠虽，左邊的使用線條，右邊使用間距玛追。從上面這個圖，我們也可以看出線條受到設計師冷落的原因闲延。線條的使用會極大的分散用戶的注意力痊剖，整個界面會會稍顯擁擠。
虎撲的界面是有線條的垒玲，但是我發(fā)現(xiàn)把線條去掉以后界面雖然稍顯凌亂陆馁，但是用戶還是能夠通過間距來很好的區(qū)分內容。
其實線條和間距并不是對立的關系合愈，在同一界面中叮贩，我們也會同時看到線條和間距，而且功能都是為了區(qū)分內容佛析。
不只是間距
你對設計元素的歸納總結能力決定了你的上限益老。同樣的用戶提示功能，你只知道單一的使用dialog寸莫，然而大牛們卻會根據(jù)提示強度的不同和是否需要用戶操作來選擇dialog,toast和snackbar捺萌，從而建立一套完善的用戶提示體系。
同樣的道理膘茎，我們都知道間距可以很好的區(qū)分內容桃纯，那么其實要完成“內容區(qū)分”，我們不一定非要使用間距披坏。除了已經(jīng)說過的線條态坦，我們同樣可以使用配色，陰影棒拂，圖案等伞梯。
例如，上面這個例子中，其實間距已經(jīng)很好的完成了信息層級的構建壮锻，但是整個界面會顯得比較單調琐旁。我們可以引入圖標和配色來強化不同內容之間的對比，而且使整個界面更加明亮猜绣。
慎用間距
這篇文章雖然是寫如何更好的使用間距灰殴，但是對于間距的使用，我個人還是覺得要慎重一點掰邢。因為如果你要通過放大間距來完成信息層級的區(qū)分牺陶，那么會出現(xiàn)大量的留白，整個界面也會顯得特別清爽辣之。但是老板可能會不爽掰伸，這個頁面怎么這么空？你是不是偷懶了盎彻馈狮鸭？再加點東西進去唄，讓整個界面充實起來多搀。
當然這算是調侃歧蕉，我對于間距使用的忌諱主要是來自頁面長度的增加。因為一旦你的間距拉開勢必會造成界面長度的增加康铭，以前一屏就可以展示的內容你現(xiàn)在需要滑動才能看完惯退。我們不知道對于用戶來說，他們更偏愛清爽的界面（多留白）還是簡單的操作（不要滑動）从藤。
設計師要做好設計要把自己帶入用戶的角色催跪，但是也不要去“代表”用戶。通過自己的主觀臆想去做設計夷野，覺得這個界面好看就行了懊蒸，但是好看對于用戶來說不一定好用∩ㄔ穑可是現(xiàn)在設計師很少能參與到用戶調研過程中榛鼎，所以在工作中，我們的一些想法無法得到數(shù)據(jù)的佐證鳖孤。這也是現(xiàn)階段大部分設計師的一個痛點者娱。
總結
間距對于界面設計來說是非常重要的，這篇文章希望能引起大家對它的重視苏揣，也希望你讀完以后能夠有所收獲黄鳍。
