您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計教程 >> 設(shè)計理論 >> 瀏覽設(shè)計教程

配色和字體都很棒,但為什么界面看著不高級?

王M爭: 上周末我和一個大學(xué)同窗在微信上聊(互)天(吹),如今他是上海一家公司的首席UED總監(jiān)。中心我們聊了許多有的沒的,其中他說了一句話,讓我印象分外深刻。

其實許多時候,我們覺得本身的作品特別很是的平庸或者「看起來分外糊」,大部分緣故原由就是配色,字體和間距的對比沒有做好。這些話說起來簡單,但是做起來很難。學(xué)了不少的設(shè)計理論,但是仍舊做不好設(shè)計。

配色和字體的對比一向都很受大家的正視。在制訂設(shè)計規(guī)范的時候,我們首先會去確定產(chǎn)品的主色調(diào)和輔助色。對于筆墨來說,不同級別的筆墨(題目類,正文類,提醒類)會選擇不同的字號和字色,這些都是會出如今你的設(shè)計規(guī)范中。然而我很少看到有人在設(shè)計規(guī)范里提到間距,所以從這個角度來看,間距經(jīng)常會被我們忽視。那么這篇文章里我就對間距做了一個比較簡單的總結(jié)。

為什么要使用間距?

我一向認(rèn)為設(shè)計師做東西的時候肯定要「較真」,你在設(shè)計過程所做的任何決定都要問本身為什么,多思考。做到對癥下藥,如許會少走許多彎路,也更容易成長。

那么假如我們想了解間距乃至更加規(guī)范的使用間距,首先我們要曉暢為什么要使用間距。間距的使用有許多作用,可以吸引用戶細(xì)致力、提拔內(nèi)容的可讀性,闡述元素之間的關(guān)系。其實簡單來說,間距的作用可以歸納成一句話:建立視覺層級來簡化界面內(nèi)容,讓用戶更容易接受。

間距的種類

間距從位置上我們可以分為兩種,一種間距是用于區(qū)分不同的內(nèi)容塊;另一種間距是用于區(qū)分內(nèi)容塊內(nèi)的信息。為了表述方便,我們在這里稱其為:塊內(nèi)間距和塊外間距。

The more whitespace around an object , the more the eye is drawn to it.

一個物體四周的留白越多,就會越容易吸引用戶的細(xì)致力。

從信息層級的角度來說,級別越高的內(nèi)容間距越大。由于越緊張的內(nèi)容就要吸引用戶越多的細(xì)致力,因此為了更好的進(jìn)行區(qū)分,塊內(nèi)間距都是小于塊外間距的。

以Airbnb為例,由于從信息層級的角度來說,一個房源(內(nèi)容塊)的級別要比其介紹信息要高的多,所以每個房源之間的間距要大于房間圖片、位置、價格的間距。

上圖中左邊的界面是正常的,右邊的被我處理過了,使其塊內(nèi)間距和塊外間距一樣大。我們可以很顯明的發(fā)現(xiàn),右邊的界面會給用戶帶來困擾。他們不知道下面的的筆墨介紹是屬于上面這個圖照舊下面這個圖。

當(dāng)然我們也可以發(fā)現(xiàn)其實塊內(nèi)間距由于其內(nèi)部信息層級的差異會進(jìn)行二次區(qū)分,也就是說塊內(nèi)間距也不是都一樣的。

行間距

間距的使用會對你的筆墨易讀性產(chǎn)生很大的影響。這里筆墨的間距重要是指筆墨之間的高度間距,我們稱之為行高。行高過大過小都不利于用戶閱讀。一樣平常來說,行高選擇為字符高度的30%是恰到益處的。

間距與線條

在文章開頭我們也提到了間距的一個重要作用就是內(nèi)容區(qū)分。那么說到內(nèi)容區(qū)分,線條是我們無法繞開的一個話題。由于線條在界面設(shè)計中重要功能就是完成內(nèi)容區(qū)分。而隨著極簡主義風(fēng)格的鼓起,去線化設(shè)計也開始成為設(shè)計的一個潮流。設(shè)計師開始使用間距(留白)來庖代線條來完成區(qū)分。所以弄懂間距和線條之間的關(guān)系是特別很是有需要的。

同樣的內(nèi)容,左邊的使用線條,右邊使用間距。從上面這個圖,我們也可以看出線條受到設(shè)計師蕭瑟的緣故原由。線條的使用會極大的分散用戶的細(xì)致力,整個界面會稍顯擁擠。

虎撲的界面是有線條的,但是我發(fā)現(xiàn)把線條去掉以后界面雖然稍顯凌亂,但是用戶照舊能夠通過間距來很好的區(qū)分內(nèi)容。

其實線條和間距并不是對立的關(guān)系,在統(tǒng)一界面中,我們也會同時看到線條和間距,而且功能都是為了區(qū)分內(nèi)容。

不只是間距

你對設(shè)計元素的歸納總結(jié)能力決定了你的上限。同樣的用戶提醒功能,你只知道單一的使用dialog,然而大牛們卻會根據(jù)提醒強度的不同和是否必要用戶操作來選擇dialog,toast和snackbar,從而建立一套完美的用戶提醒系統(tǒng)。

同樣的道理,我們都知道間距可以很好的區(qū)分內(nèi)容,那么其實要完成“內(nèi)容區(qū)分”,我們不肯定非要使用間距。除了已經(jīng)說過的線條,我們同樣可以使用配色,陰影,圖案等。

例如,上面這個例子中,其實間距已經(jīng)很好的完成了信息層級的構(gòu)建,但是整個界面會顯得比較單調(diào)。我們可以引入圖標(biāo)和配色來強化不同內(nèi)容之間的對比,而且使整個界面更加通亮。

慎用間距

這篇文章雖然是寫如何更好的使用間距,但是對于間距的使用,我小我照舊覺得要穩(wěn)重一點。由于假如你要通過放大間距來完成信息層級的區(qū)分,那么會出現(xiàn)大量的留白,整個界面也會顯得分外清爽。但是老板可能會不爽,這個網(wǎng)頁怎么這么空?你是不是偷懶了???再加點東西進(jìn)去唄,讓整個界面充實起來。

當(dāng)然這算是奚弄,我對于間距使用的隱諱重要是來自網(wǎng)頁長度的增長。由于一旦你的間距拉開勢必會造成界面長度的增長,曩昔一屏就可以展示的內(nèi)容你如今必要滑動才能看完。我們不知道對于用戶來說,他們更偏愛清爽的界面(多留白)照舊簡單的操作(不要滑動)。

設(shè)計師要做好設(shè)計要把本身帶入用戶的角色,但是也不要去“代表”用戶。通過本身的主觀臆想去做設(shè)計,覺得這個界面悅目就行了,但是悅目對于用戶來說不肯定好用。可是如今設(shè)計師很少能參與到用戶調(diào)研過程中,所以在工作中,我們的一些想法無法得到數(shù)據(jù)的佐證。這也是現(xiàn)階段大部分設(shè)計師的一個痛點。

總結(jié)

間距對于界面設(shè)計來說是特別很是緊張的,盼望這篇文章能引起大家對它的正視,也盼望你讀完以后能夠有所收獲。

迎接關(guān)注作者的微信公眾號:「王M爭」

[教程作者:互聯(lián)網(wǎng)]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/di3840.html
從聊天界面的設(shè)計,看QQ和微信的不同
輕松看懂規(guī)范!詳解組件控件結(jié)構(gòu)系統(tǒng)之單元控件類
圖趣網(wǎng)微信
建議反饋
×