新媒體視覺系列(3):對比

在之前的文章《新媒體運營必需知道的 4 個設(shè)計原則》中,琛姐談到過?4 個設(shè)計的基本原則——親密性、對齊、重復(fù)、對比

本文是對「對比」原則的修正和補(bǔ)充。

對比的目的主要有 2 個,一個是打破統(tǒng)一的版面設(shè)計,增強(qiáng)視覺效果。比如,差不多的兩個拳頭放在一起時,畫面很平淡,因為只存在方向的對比:

但如果是一個老人的拳頭和一個小孩的拳頭出現(xiàn)在同一畫面,視覺效果就會強(qiáng)烈很多,因為同時存在方向、大小、糙嫩3種類型的對比:


對比的另一個目的是組織信息邏輯。完全統(tǒng)一的版面無法有效閱讀,只有通過對比,讀者才能對信息邏輯一目了然,對比越強(qiáng)烈,信息邏輯就越清晰。

比如,一篇文章一般由標(biāo)題、小標(biāo)題、正文組成,如果標(biāo)題和正文間的對比不夠強(qiáng)烈,就很難一眼看出文章的邏輯,比如下面左圖中,只有文字大小的對比,小標(biāo)題就不夠顯眼,辨識較困難,如果加強(qiáng)對比,增加粗細(xì)和顏色的對比,改成右圖的樣式,對比就非常鮮明了,信息邏輯也就一目了然。

圖片來源:《寫給大家看的設(shè)計書》

對比的方式主要有:方向?qū)Ρ?、形狀對比、色彩對比、字體對比和圖文對比。

1.方向的對比

排版布局時,可以采用不同的方向進(jìn)行對比,比如下圖中縱向文字和橫向文字就形成了鮮明的對比:

這種方向的對比不只存在于文字和文字之間,也可以運用于圖像和文字間,比如下圖的海報中,圖像主體中的地平線是水平的,橫向的,文字部分是垂直的,縱向的,方向的對比也非常鮮明。

公眾號 HomeFacialPro 的排版中也采用了這種方向的對比,標(biāo)題部分采用縱向布局,正文部分橫向排列,整體視覺效果非常靈動。

公眾號Voicer中的部分插圖也使用了橫向和縱向文字的對比,并增加了動態(tài)效果,進(jìn)一步強(qiáng)化了對比。

2.形狀的對比

1)大VS小

同時放置2張或2張以上的圖片時,常規(guī)的方式是將2張圖設(shè)置成同樣的尺寸和比例:

但這樣很容易顯得單調(diào)、乏味,更好的辦法是加入尺寸的對比,比如,將上圖中的其中一個對象縮小,在尺寸上和另外一個對象形成對比,改成下圖這樣,整體效果會更生動、活潑:

2)幾何VS有機(jī)

大部分形狀可以分為幾何形狀和有機(jī)形狀 2 大類。

幾何形狀主要包括正方形、矩形、三角形、圓形等規(guī)則形狀(如下圖左),有機(jī)形狀主要是指受自然啟發(fā)的不規(guī)則形狀(如下圖右)。

規(guī)則的幾何形狀可以和不規(guī)則的有機(jī)形狀形成很好的對比。比如,下面的這張海報就是由規(guī)則的外矩形框和不規(guī)則的內(nèi)邊框組成,對比效果非常好。

3.色彩的對比

色彩的對比方案非常豐富,最為典型的有暖色和冷色的對比、亮色和暗色的對比、互補(bǔ)色對比等等,琛姐在之前的文章《新媒體運營必須知道的色彩搭配常識》中詳細(xì)講解過色彩相關(guān)概念,不清楚的童鞋可以點進(jìn)去看看,這里不再贅述。

一般來說,色輪的右上方是暖色,左下方為冷色。暖色給人的印象:生動、激情、有表現(xiàn)力,給人感覺在空間的位置靠前。適用于前景色。冷色給人的印象:謹(jǐn)慎、冷靜、平靜感,給人感覺在空間的位置靠后。適用于背景色。

所以,當(dāng)我們把這兩種顏色放在一起時,對比非常強(qiáng)烈,而且一般把冷色作為背景,暖色作為前景。比如,下面這張海報,就是采用冷暖色的對比,冷色(藍(lán)色)作背景,暖色(紅色)作前景。

明暗的對比非常常見,比如,下面的這張圖片,就是用暗色作背景,高亮的HOTEL標(biāo)志作前景,對比非常鮮明,主題很突出。

互補(bǔ)色是色輪上相對的2種顏色,互補(bǔ)色對比是色彩對比中最鮮明的組合之一,比如紅色和綠色。

這種對比非常鮮明,畫面沖突感很強(qiáng),故有“紅配綠,唱大戲”之說。因為這種搭配的不穩(wěn)定性,在正式的設(shè)計中比較少見。如果想特別引人注目,可以嘗試采用。比如,電影《三槍拍案驚奇》就大量采用了互補(bǔ)色的對比,整體視覺效果非常夸張。

4.字體的對比

字體可以分為襯線體和非襯線體 2 大類,襯線體的筆畫開始、結(jié)束的地方有額外的裝飾,而且筆畫的粗細(xì)會有所不同(如下圖左)。無襯線字體,沒有這些額外的裝飾,而且筆畫的粗細(xì)差不多(如下圖右)。

根據(jù)經(jīng)驗,最好選擇一種襯線字體和一種非襯線字體來設(shè)置對比,因為通常來說,互補(bǔ)的兩種元素會產(chǎn)生很好的對比效果。下圖logo中非襯線體和襯線體,以及書寫體的對比完美平衡了整個設(shè)計。

5.圖文的對比

在前面的平衡中我們已經(jīng)說過,圖片和文字的視覺重量是不一致的,一般情況下,遵循圖重文輕的原則,所以,將圖片和文字放在一起時,可以有效突出圖片,將圖片作為有效的視覺線索。比如,下圖中的箭頭符號,在一大片文字中顯得非常突出,成為了有效的視覺線索。

小結(jié)

對比的目的主要有 2 個,一個是打破統(tǒng)一的版面設(shè)計,增強(qiáng)視覺效果。另一個目的是組織信息邏輯。對比的方式主要有:方向?qū)Ρ?、形狀對比、色彩對比、字體對比和圖文對比。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 內(nèi)容為:設(shè)計中字體的選擇、表述方式(形容詞)、適用處、圖片與字體的排版、字體的色彩及規(guī)格等 字體 纖細(xì)、瀟灑、圓潤...
    藍(lán)血沙閱讀 5,886評論 0 48
  • 所謂成長 就是把有些曾經(jīng)看到很重的東西看輕了,把曾經(jīng)以為很輕的看重了。
    monicawu閱讀 157評論 0 0
  • 晚檢視: 1.和善而堅定。堅定有余,和善不足。 2.繼續(xù)關(guān)注大寧的無視問題。臨睡前,大寧問我今天我乖么?不知道發(fā)什...
    軒寧媽閱讀 256評論 2 1
  • 日精進(jìn) 業(yè)務(wù)的本質(zhì)是通過雙方交易,解決各自的問題。業(yè)務(wù)員的本質(zhì)是通過了解對方的困惑和需求,解決對方的困惑,滿足對方...
    若蘭ZHOU閱讀 182評論 0 0

友情鏈接更多精彩內(nèi)容