基礎(chǔ)小技巧!5個(gè)簡單直觀的設(shè)計(jì)對比方法

@謝思靖?:? 對比是視覺設(shè)計(jì)中非常常用以及常見的設(shè)計(jì)技巧之一,甚至我個(gè)人覺得對比是設(shè)計(jì)中最最重要的要點(diǎn)。

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

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

作者:謝思靖

現(xiàn)任數(shù)美互動(dòng)創(chuàng)意總監(jiān),曾任職于IM2.0 DDB 新意互動(dòng) 等國際4A廣告公司,擔(dān)任互動(dòng)美術(shù)指導(dǎo),資深互動(dòng)美術(shù)指導(dǎo)。

他的專訪:《高手專訪!資深網(wǎng)頁設(shè)計(jì)師謝思靖的總監(jiān)晉級之路》

他的課程:http://xue.uisdc.com/wui/

1. ?大小對比

首先我們先看幾個(gè)事例。

基礎(chǔ)小技巧!5個(gè)簡單直觀的設(shè)計(jì)對比方法

基礎(chǔ)小技巧!5個(gè)簡單直觀的設(shè)計(jì)對比方法

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

實(shí)例演示,我們?nèi)绾瓮ㄟ^大小對比的方式進(jìn)行排版。

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

基礎(chǔ)小技巧!5個(gè)簡單直觀的設(shè)計(jì)對比方法

將內(nèi)容進(jìn)行打散:

基礎(chǔ)小技巧!5個(gè)簡單直觀的設(shè)計(jì)對比方法

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

基礎(chǔ)小技巧!5個(gè)簡單直觀的設(shè)計(jì)對比方法

基礎(chǔ)小技巧!5個(gè)簡單直觀的設(shè)計(jì)對比方法

基礎(chǔ)小技巧!5個(gè)簡單直觀的設(shè)計(jì)對比方法

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

2. ?顏色對比

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

我們依然拿之前的案例進(jìn)行舉例,雖然下面兩個(gè)排版一樣,但是因?yàn)轭伾珜Ρ龋覀兏菀妆?18這個(gè)信息點(diǎn)抓住眼球。

基礎(chǔ)小技巧!5個(gè)簡單直觀的設(shè)計(jì)對比方法

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

基礎(chǔ)小技巧!5個(gè)簡單直觀的設(shè)計(jì)對比方法

3. ?前后對比

基礎(chǔ)小技巧!5個(gè)簡單直觀的設(shè)計(jì)對比方法

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

4. ?聚散對比

基礎(chǔ)小技巧!5個(gè)簡單直觀的設(shè)計(jì)對比方法

5. ?虛實(shí)對比

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

基礎(chǔ)小技巧!5個(gè)簡單直觀的設(shè)計(jì)對比方法

基礎(chǔ)小技巧!5個(gè)簡單直觀的設(shè)計(jì)對比方法

基礎(chǔ)小技巧!5個(gè)簡單直觀的設(shè)計(jì)對比方法

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

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

歡迎關(guān)注作者的微信號:

基礎(chǔ)小技巧!5個(gè)簡單直觀的設(shè)計(jì)對比方法

看完這篇你絕對能用好「對比原則」:《設(shè)計(jì)基礎(chǔ)功!幫你徹底掌握設(shè)計(jì)四大原則中的對比原則》

進(jìn)階版的對比方法:《實(shí)例教學(xué)!利用「對比原則」做出搶眼設(shè)計(jì)的20個(gè)方法》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱:yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái),專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書:史上最全的設(shè)計(jì)師圖書導(dǎo)航:http://hao.uisdc.com/book/
設(shè)計(jì)微博:擁有粉絲量200萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ,歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航:全球頂尖設(shè)計(jì)網(wǎng)站推薦,設(shè)計(jì)師必備導(dǎo)航:http://hao.uisdc.com

收藏 12
點(diǎn)贊 2

復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。