想要讓對比度更明顯,可以從這6方面入手

      作者:RICH STAAT
      2018-11-01
      8255

      對比其實是不同元素和個體之間的差異的外化表現(xiàn),差異越大,對比就越明顯。

      對比其實是不同元素和個體之間的差異的外化表現(xiàn),差異越大,對比就越明顯。在幾乎所有的設計項目當中,設計師總會出于各種目的來營造對比,通常而言,對比可以用來:

      強調重點

      提高可讀性

      創(chuàng)建層次

      增加視覺吸引力

      很多時候對比度能夠讓設計顯得更加時尚,今天的文章我們將會分享一些實用的方法,幫你提升設計中的對比度。

      1、調整元素的尺寸大小構成對比

      如果你所設計的UI界面或者插畫當中,絕大多數(shù)的元素都是尺寸相似的,位置對稱的,色彩相似,那么它們在一起是很難創(chuàng)造出視覺焦點的。

      增加設計的對比度的諸多方法當中,讓元素之間的尺寸差別盡可能大一點是最快最直接的。想要達到這個目標,可以讓某個元素更大一點,或者更小一點。用戶的眼睛會很自然地被這種差異性吸引過去,因為它們是不同的。

      如果你此刻所設計的是網(wǎng)頁,那么可以讓標題或者CTA標語和按鈕比周圍的元素更大一些。更大的元素會擁有更明顯的視覺重量,這種東西可以通過對比來呈現(xiàn)。

      下面是一些實戰(zhàn)案例:

      1.png

      2.png

      3.png

      2、使用紋理和圖案來構建對比

      想創(chuàng)造對比度更高的設計,本質始終還在在于創(chuàng)造差異。而紋理和圖案這種元素,相互之間往往有著很大的差異,在設計的時候可以充分利用這一點。比如可以讓粗糙的紋理和平滑的元素搭配在一起,創(chuàng)造出對比度。

      另外一方面,紋理本身會帶有一些特定的屬性,比如粗糲的紋理能夠創(chuàng)造復古的質感,微妙的紋理則能夠給人自然的感受。同樣的,不同的氣質和質感之間也存在差異,一方面能夠創(chuàng)造更加獨特的效果,另外一方面也能強化對比度。

      以下是一些實戰(zhàn)案例:

      4.png

      5.png

      6.png

      3、通過色彩強化對比度

      配色也是很重要的設計技巧,同樣是最容易被感知到的設計元素。色彩的色相、明暗、飽和度上的差異,都能夠制造足夠對比度。同一種色相之下,不同深淺的顏色之間的對比是非常明顯的,而我們最常見的就是在黑色背景上的白色文本和在白色背景上的黑色文本,這種對比度確保了內容擁有基本的可讀性。

      當然,在實際的色彩搭配當中,對比度足夠明顯的配色方案會更加復雜,通常而言,下面基于色輪的三種色彩搭配方式能夠給你對比明顯效果不錯的配色:

      互補配色。色輪上處于相對位置的兩種色彩,比如紅色和綠色。

      分割互補。這是互補配色的變種,指的是色輪上相鄰的兩種色彩和它們各自相對位置的色彩,共同組成的配色方案。

      三元互補。這指的是在色輪上互相間隔120度的三種色彩組成的配色,比如綠色,紫色和橙色構成的配色。

      TripAdvisor 這個網(wǎng)站就使用了三元互補的配色,來構建對比色。

      7.png

      最后補充一句,除了借助色輪以外,還可以比較簡單地使用冷色和暖色來作為對比色,構建配色方案。

      8.png

      4、通過留白來制造層次和對比

      在設計的時候,留白是組織內容的重要手段,它們能夠創(chuàng)造足夠明晰的視覺層次。比如設計一個包含大量內容的頁面,不同元素之間的疏密控制,能讓內容各自擁有不同的層級,不同元素之間的留白和間距,則能夠讓它們擁有不同程度的吸引力。被大量留白所環(huán)繞的元素,更容易吸引人的注意力。

      9.png

      注意 Information Highwayman 這個網(wǎng)站是怎么借助視覺層級來吸引用戶注意力的。

      10.png

      距離靠近的元素會讓用戶覺得它們相互之間是有關系的,而相互遠離的元素這種關聯(lián)性就會降低。這是留白的作用。

      11.png

      大量的留白不僅能夠營造對比,還能創(chuàng)造優(yōu)雅大氣的感覺。

      12.png

      5、充分利用字體排版來制造對比

      不同的字體組合和排版布局,同樣能夠強化設計的對比度。不同的字體有著不同的視覺效果,給人不同的體驗,可以通過合理的字體組合,來營造對比度。字體之間的差異要足夠顯著,但是在搭配使用的時候,還需要足夠協(xié)調,這種微妙的平衡需要控制。最受歡迎的搭配方式,是采用襯線體字體和非襯線體字體。諸如 Fontjoy 和 Type Connectiong 可以幫你進行字體搭配的挑選。

      另外一種方法,是使用不同的字體樣式來創(chuàng)造差異,比如使用斜體、加粗的效果,或者使用不同的字重來進行區(qū)別。

      下面是案例:

      13.png

      14.png

      15.png

      6、使用意外的元素

      如果使用得當,一些非常規(guī)的、意外的元素,能夠給你的設計保持平衡還能夠創(chuàng)造足夠的對比度。意外的元素并不是用戶不希望看到的東西,而是讓他們感到驚訝的元素。

      雖然這些元素很難做到恰到好處,但是也不是沒有規(guī)律可供遵循。比如使用不對稱的設計,來打破沉悶的布局,或者在中性的配色方案當中,加入一抹亮色,這都是比較典型的方案。

      下面是案例:

      16.png

      17.png

      18.png

      結語

      在設計的過程中,并非所有的設計都是一次成型的。當你的設計需要足夠的對比度的時候,可以按照上述的方法,來進行調整,將對比度提升上來,讓整個設計更加貼合用戶的需要,讓設計發(fā)揮作用。


      4
      4
      分享到:

      0

      喜歡他,就推薦他上首頁吧^_^

      推薦閱讀

      ×

      賽事服務聯(lián)系方式

      0371-86068866

      4008887269

      cndesign@163.com

      好的,我知道了

      官方微信

      聯(lián)系我們

      • QQ:33143335 QQ:1904200230
      • 電話:18569912460
      • 投稿:cndesign@163.com
      • 地址:鄭州市國家大學科技園東區(qū)9號樓2層

      版權信息

        移動 Android 版 豫 ICP 備16038122號-2 豫公網(wǎng)安備 41019702002261號

      主站蜘蛛池模板: 视频一区二区在线观看| 亚欧色一区W666天堂| 人妻无码一区二区不卡无码av| 日韩精品国产一区| 日韩精品无码免费一区二区三区| 国产天堂在线一区二区三区| 精品少妇ay一区二区三区| 国产成人无码一区二区三区在线| 亚洲av无码一区二区三区天堂古代 | 国产精品亚洲一区二区三区在线| 国产在线一区观看| 另类ts人妖一区二区三区| 亚洲AV无码国产精品永久一区| 一区二区三区福利视频免费观看| 中文字幕一区日韩在线视频| V一区无码内射国产| 午夜无码一区二区三区在线观看| 天天躁日日躁狠狠躁一区| 四虎成人精品一区二区免费网站| 精品国产一区在线观看| 成人在线观看一区| 色一情一乱一伦一区二区三区日本 | 亚洲av无码一区二区三区天堂古代| 国产成人精品无码一区二区| 亚洲AV无码一区二区三区系列| 国产亚洲一区二区三区在线| av无码人妻一区二区三区牛牛 | 国产在线乱子伦一区二区| 91亚洲一区二区在线观看不卡| 久久99精品波多结衣一区| 乱色精品无码一区二区国产盗| 亚洲视频一区在线| 亚洲日韩中文字幕无码一区| 久久精品日韩一区国产二区 | 色多多免费视频观看区一区| 黑人一区二区三区中文字幕| 99久久精品国产免看国产一区| 国产激情з∠视频一区二区| 国产精品福利一区二区久久| 精品免费国产一区二区三区| 精品国产AⅤ一区二区三区4区 |