網(wǎng)頁設(shè)計(jì)中配色和字體都很棒，但為什么界面看著不高級(jí)？

其實(shí)很多時(shí)候，我們覺得自己的作品非常的平庸或者「看起來特別糊」，大部分原因就是配色，字體和間距的對(duì)比沒有做好。這些話說起來簡單，但是做起來很難。學(xué)了不少的設(shè)計(jì)理論，但是依舊做不好設(shè)計(jì)。
配色和字體的對(duì)比一直都很受大家的重視。在制定設(shè)計(jì)規(guī)范的時(shí)候，我們首先會(huì)去確定產(chǎn)品的主色調(diào)和輔助色。對(duì)于文字來說，不同級(jí)別的文字（標(biāo)題類，正文類，提示類）會(huì)選擇不同的字號(hào)和字色，這些都是會(huì)出現(xiàn)在你的設(shè)計(jì)規(guī)范中。然而我很少看到有人在設(shè)計(jì)規(guī)范里提到間距，所以從這個(gè)角度來看，間距經(jīng)常會(huì)被我們忽視。那么創(chuàng)新互聯(lián)成都網(wǎng)站建設(shè)公司對(duì)這篇文章里間距做了一個(gè)比較簡單的總結(jié)。
為什么要使用間距？
我一直認(rèn)為設(shè)計(jì)師做東西的時(shí)候一定要「較真」，你在設(shè)計(jì)過程所做的任何決定都要問自己為什么，多思考。做到有的放矢，這樣會(huì)少走很多彎路，也更容易成長。
那么如果我們想了解間距乃至更加規(guī)范的使用間距，首先我們要明白為什么要使用間距。間距的使用有很多作用，可以吸引用戶注意力、提升內(nèi)容的可讀性，闡述元素之間的關(guān)系。其實(shí)簡單來說，間距的作用可以歸納成一句話：建立視覺層級(jí)來簡化界面內(nèi)容，讓用戶更容易接受。
間距的種類
間距從位置上我們可以分為兩種，一種間距是用于區(qū)分不同的內(nèi)容塊；另一種間距是用于區(qū)分內(nèi)容塊內(nèi)的信息。為了表述方便，我們?cè)谶@里稱其為：塊內(nèi)間距和塊外間距。
The more whitespace around an object , the more the eye is drawn to it.
一個(gè)物體周圍的留白越多，就會(huì)越容易吸引用戶的注意力。
從信息層級(jí)的角度來說，級(jí)別越高的內(nèi)容間距越大。因?yàn)樵街匾膬?nèi)容就要吸引用戶越多的注意力，因此為了更好的進(jìn)行區(qū)分，塊內(nèi)間距都是小于塊外間距的。
以Airbnb為例，因?yàn)閺男畔蛹?jí)的角度來說，一個(gè)房源（內(nèi)容塊）的級(jí)別要比其介紹信息要高的多，所以每個(gè)房源之間的間距要大于房間圖片、位置、價(jià)格的間距。
上圖中左邊的界面是正常的，右邊的被我處理過了，使其塊內(nèi)間距和塊外間距一樣大。我們可以很明顯的發(fā)現(xiàn)，右邊的界面會(huì)給用戶帶來困擾。他們不知道下面的的文字介紹是屬于上面這個(gè)圖還是下面這個(gè)圖。
當(dāng)然我們也可以發(fā)現(xiàn)其實(shí)塊內(nèi)間距因?yàn)槠鋬?nèi)部信息層級(jí)的差異會(huì)進(jìn)行二次區(qū)分，也就是說塊內(nèi)間距也不是都一樣的。
行間距
間距的使用會(huì)對(duì)你的文字易讀性產(chǎn)生很大的影響。這里文字的間距主要是指文字之間的高度間距，我們稱之為行高。行高過大過小都不利于用戶閱讀。一般來說，行高選擇為字符高度的30%是恰到好處的。
間距與線條
在文章開頭我們也提到了間距的一個(gè)主要作用就是內(nèi)容區(qū)分。那么說到內(nèi)容區(qū)分，線條是我們無法繞開的一個(gè)話題。因?yàn)榫€條在界面設(shè)計(jì)中主要功能就是完成內(nèi)容區(qū)分。而隨著極簡主義風(fēng)格的興起，去線化設(shè)計(jì)也開始成為設(shè)計(jì)的一個(gè)潮流。設(shè)計(jì)師開始使用間距（留白）來取代線條來完成區(qū)分。所以弄懂間距和線條之間的關(guān)系是非常有必要的。
同樣的內(nèi)容，左邊的使用線條，右邊使用間距。從上面這個(gè)圖，我們也可以看出線條受到設(shè)計(jì)師冷落的原因。線條的使用會(huì)極大的分散用戶的注意力，整個(gè)界面會(huì)稍顯擁擠。
虎撲的界面是有線條的，但是我發(fā)現(xiàn)把線條去掉以后界面雖然稍顯凌亂，但是用戶還是能夠通過間距來很好的區(qū)分內(nèi)容。
其實(shí)線條和間距并不是對(duì)立的關(guān)系，在同一界面中，我們也會(huì)同時(shí)看到線條和間距，而且功能都是為了區(qū)分內(nèi)容。
不只是間距
你對(duì)設(shè)計(jì)元素的歸納總結(jié)能力決定了你的上限。同樣的用戶提示功能，你只知道單一的使用dialog，然而大牛們卻會(huì)根據(jù)提示強(qiáng)度的不同和是否需要用戶操作來選擇dialog,toast和snackbar，從而建立一套完善的用戶提示體系。
同樣的道理，我們都知道間距可以很好的區(qū)分內(nèi)容，那么其實(shí)要完成“內(nèi)容區(qū)分”，我們不一定非要使用間距。除了已經(jīng)說過的線條，我們同樣可以使用配色，陰影，圖案等。
例如，上面這個(gè)例子中，其實(shí)間距已經(jīng)很好的完成了信息層級(jí)的構(gòu)建，但是整個(gè)界面會(huì)顯得比較單調(diào)。我們可以引入圖標(biāo)和配色來強(qiáng)化不同內(nèi)容之間的對(duì)比，而且使整個(gè)界面更加明亮。
慎用間距
這篇文章雖然是寫如何更好的使用間距，但是對(duì)于間距的使用，我個(gè)人還是覺得要慎重一點(diǎn)。因?yàn)槿绻阋ㄟ^放大間距來完成信息層級(jí)的區(qū)分，那么會(huì)出現(xiàn)大量的留白，整個(gè)界面也會(huì)顯得特別清爽。但是老板可能會(huì)不爽，這個(gè)頁面怎么這么空？你是不是偷懶了??？再加點(diǎn)東西進(jìn)去唄，讓整個(gè)界面充實(shí)起來。
當(dāng)然這算是調(diào)侃，我對(duì)于間距使用的忌諱主要是來自頁面長度的增加。因?yàn)橐坏┠愕拈g距拉開勢(shì)必會(huì)造成界面長度的增加，以前一屏就可以展示的內(nèi)容你現(xiàn)在需要滑動(dòng)才能看完。我們不知道對(duì)于用戶來說，他們更偏愛清爽的界面（多留白）還是簡單的操作（不要滑動(dòng)）。
設(shè)計(jì)師要做好設(shè)計(jì)要把自己帶入用戶的角色，但是也不要去“代表”用戶。通過自己的主觀臆想去做設(shè)計(jì)，覺得這個(gè)界面好看就行了，但是好看對(duì)于用戶來說不一定好用?？墒乾F(xiàn)在設(shè)計(jì)師很少能參與到用戶調(diào)研過程中，所以在工作中，我們的一些想法無法得到數(shù)據(jù)的佐證。這也是現(xiàn)階段大部分設(shè)計(jì)師的一個(gè)痛點(diǎn)。
總結(jié)

間距對(duì)于界面設(shè)計(jì)來說是非常重要的，希望這篇文章能引起大家對(duì)它的重視，也希望你讀完以后能夠有所收獲。

本文來自創(chuàng)新互聯(lián)品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)
標(biāo)簽：重慶網(wǎng)站建設(shè)公司,成都網(wǎng)頁設(shè)計(jì)公司,成都網(wǎng)站設(shè)計(jì)公司，網(wǎng)站建設(shè) 成都，成都 網(wǎng)站建設(shè)，企業(yè)網(wǎng)站建設(shè)，營銷型網(wǎng)站建設(shè)，網(wǎng)站建設(shè)設(shè)計(jì)，網(wǎng)站開發(fā)，網(wǎng)站制作設(shè)計(jì)

網(wǎng)站題目：網(wǎng)頁設(shè)計(jì)中配色和字體都很棒，但為什么界面看著不高級(jí)？
網(wǎng)頁地址：http://bm7419.com/news/169619.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、域名注冊(cè)、全網(wǎng)營銷推廣、面包屑導(dǎo)航、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)