用這幾個方法氧映,讓你的ui界面對比度更明顯春畔?之前怎沒聽說

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

強調重點

提高可讀性

創(chuàng)建層次

增加視覺吸引力

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

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

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

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

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

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

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

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

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

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

3撇贺、通過色彩強化對比度

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

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

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

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

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

TripAdvisor 這個網站就使用了三元互補的配色,來構建對比色构哺。

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

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

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

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

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

會降低嫌蚤。這是留白的作用。

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

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

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

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

下面是案例:

6、使用意外的元素

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

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

下面是案例:

結語

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

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末勿负,一起剝皮案震驚了整個濱河市馏艾,隨后出現的幾起案子,更是在濱河造成了極大的恐慌奴愉,老刑警劉巖琅摩,帶你破解...
    沈念sama閱讀 218,607評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異锭硼,居然都是意外死亡房资,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 93,239評論 3 395
  • 文/潘曉璐 我一進店門檀头,熙熙樓的掌柜王于貴愁眉苦臉地迎上來轰异,“玉大人岖沛,你說我怎么就攤上這事〈疃溃” “怎么了婴削?”我有些...
    開封第一講書人閱讀 164,960評論 0 355
  • 文/不壞的土叔 我叫張陵,是天一觀的道長牙肝。 經常有香客問我唉俗,道長,這世上最難降的妖魔是什么配椭? 我笑而不...
    開封第一講書人閱讀 58,750評論 1 294
  • 正文 為了忘掉前任虫溜,我火速辦了婚禮,結果婚禮上股缸,老公的妹妹穿的比我還像新娘衡楞。我一直安慰自己,他們只是感情好敦姻,可當我...
    茶點故事閱讀 67,764評論 6 392
  • 文/花漫 我一把揭開白布瘾境。 她就那樣靜靜地躺著,像睡著了一般替劈。 火紅的嫁衣襯著肌膚如雪寄雀。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,604評論 1 305
  • 那天陨献,我揣著相機與錄音,去河邊找鬼懂更。 笑死眨业,一個胖子當著我的面吹牛,可吹牛的內容都是我干的沮协。 我是一名探鬼主播龄捡,決...
    沈念sama閱讀 40,347評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼慷暂!你這毒婦竟也來了聘殖?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,253評論 0 276
  • 序言:老撾萬榮一對情侶失蹤行瑞,失蹤者是張志新(化名)和其女友劉穎奸腺,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體血久,經...
    沈念sama閱讀 45,702評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡突照,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,893評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了氧吐。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片讹蘑。...
    茶點故事閱讀 40,015評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡末盔,死狀恐怖,靈堂內的尸體忽然破棺而出座慰,到底是詐尸還是另有隱情陨舱,我是刑警寧澤,帶...
    沈念sama閱讀 35,734評論 5 346
  • 正文 年R本政府宣布版仔,位于F島的核電站游盲,受9級特大地震影響,放射性物質發(fā)生泄漏邦尊。R本人自食惡果不足惜背桐,卻給世界環(huán)境...
    茶點故事閱讀 41,352評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蝉揍。 院中可真熱鬧链峭,春花似錦、人聲如沸又沾。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,934評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽杖刷。三九已至励饵,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間滑燃,已是汗流浹背役听。 一陣腳步聲響...
    開封第一講書人閱讀 33,052評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留表窘,地道東北人典予。 一個月前我還...
    沈念sama閱讀 48,216評論 3 371
  • 正文 我出身青樓,卻偏偏與公主長得像乐严,于是被迫代替她去往敵國和親瘤袖。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,969評論 2 355

推薦閱讀更多精彩內容