漲知識！5個簡單直觀的網頁設計對比技巧

標籤：new   tar   9.png   知識   來源   ddb   文章   targe   視覺設計   

對比是視覺設計中非常常用以及常見的設計技巧之一，甚至我個人覺得對比是設計中最最重要的要點。

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

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

現任數美互動創意總監，曾任職於IM2.0 DDB 新意互動 等國際4A廣告公司，擔任互動美術指導，資深互動美術指導。

1. 大小對比

首先我們先看幾個案例。

大小對比通過突出應該突出的資訊和內容，在功能上可以更好的突出內容，在設計形式可以形成不同的版式結構，更佳絕有設計感。

執行個體示範，我們如何通過大小對比的方式進行排版。

我們拿到的文字內容：

將內容進行打散：

通過突出不同的內容進行大小對比，我們可以得到不同的版式結構。

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

2. 顏色對比

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

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

在沒有加入顏色對比前，因為大小對比的關係618的視覺層級遠高於“玩轉” “蘋果全場4折”，但是即便我們保證大小關係不變，加入顏色對比，“蘋果全場4折”這個資訊的視覺層級明顯被提高了。

3. 前後對比

通過建立形式，文字，視覺元素這幾者的前後關係，形成空間以及前後對比。

4. 聚散對比

5. 虛實對比

通過透視遠近關係，或者光影變化形成不同的虛實感受，形成虛實對比以及空間。

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

當你能夠熟練掌握對比的設計方法之後，在實際設計中無論是區分閱讀層級，構建畫面時都會更加有想法和思路。

文章來源：http://www.haitaoit.com/news-list-5-0-1.html

漲知識！5個簡單直觀的網頁設計對比技巧