對比方法相對直觀的UI設(shè)計小技巧

今天會給大家介紹5種直觀簡單的對比方法。

如果能熟練理解和掌握，相信會對大家的日常設(shè)計中起到非常大的作用和幫助。

 

1.  大小對比

首先我們先看幾個事例。

大小對比通過突出應(yīng)該突出的信息和內(nèi)容，在功能上可以更好的突出內(nèi)容，在設(shè)計形式可以形成不同的版式結(jié)構(gòu)，更佳絕有設(shè)計感。

實例演示，我們?nèi)绾瓮ㄟ^大小對比的方式進行排版。

我們拿到的文字內(nèi)容：

將內(nèi)容進行打散：

通過突出不同的內(nèi)容進行大小對比，我們可以得到不同的版式結(jié)構(gòu)。

大小對比在實際設(shè)計中運用的非常多，不僅僅局限于排版，這里只是拿排版進行舉例。

 

2.  顏色對比

顏色對比可以通過顏色去突出一些信息，也可以通過顏色的對比 增加信息的層級讓用戶更好的按照我們希望的閱讀瀏覽順序進行信息的閱讀。而顏色對比對提升設(shè)計感和氛圍也是很有幫助。

我們依然拿之前的案例進行舉例，雖然下面兩個排版一樣，但是因為顏色對比，我們更容易被618這個信息點抓住眼球。

在沒有加入顏色對比前，因為大小對比的關(guān)系618的視覺層級遠(yuǎn)高于“玩轉(zhuǎn)” “蘋果全場4折”，但是即便我們保證大小關(guān)系不變，加入顏色對比，“蘋果全場4折”這個信息的視覺層級明顯被提高了。

3.  前后對比

通過建立形式，文字，視覺元素這幾者的前后關(guān)系，形成空間以及前后對比。

 

4.  聚散對比

5.  虛實對比

通過透視遠(yuǎn)近關(guān)系，或者光影變化形成不同的虛實感受，形成虛實對比以及空間。.

這就是我們今天介紹的常見的設(shè)計的五種對比方法，希望大家在閱讀設(shè)計，以及自己做設(shè)計的時候能夠認(rèn)真感悟這些不同的對比是如何應(yīng)用在不同設(shè)計中的。

當(dāng)你能夠熟練掌握對比的設(shè)計方法之后，在實際設(shè)計中無論是區(qū)分閱讀層級，構(gòu)建畫面時都會更加有想法和思路。