界面設(shè)計(jì)中的對比類型
編輯導(dǎo)語:有不同,就有對比。不一樣的視覺效果總會(huì)給人不同的感覺,也讓我們的生活、工作越來越有色彩。今天,作者就來借對比為由,談?wù)劷缑嬖O(shè)計(jì)中的對比類型,希望能給產(chǎn)品設(shè)計(jì)的小伙伴們一些借鑒,我們一起來看看吧。
世界中從不缺少的就是對比,人和人的對比,價(jià)格和價(jià)格的對比,生活和生活的對比。
而今天我說的,是設(shè)計(jì)中的對比,是按鈕、顏色、排版布局的對比。
設(shè)計(jì)中通過有效的對比技法,可以更加快速的傳遞產(chǎn)品信息,從而提升用戶體驗(yàn)。
一、什么是對比
對比,是把具有明顯差異、矛盾和對立的雙方安排在一起,進(jìn)行對照比較的表現(xiàn)手法。
對比是把對立的意思或事物、或把事物的兩個(gè)方面放在一起作比較,讓讀者在比較中分清好壞、辨別是非。
那么,為什么說對比度很重要呢?
因?yàn)槿搜圩羁焖俨蹲降降木褪菍Ρ榷取?/strong>
而圖像的最高可能對比度,我們稱它為對比度或動(dòng)態(tài)范圍。
更重要的是,對于色盲等弱視視覺障礙的人來說,對比度顯得更加重要。
因?yàn)槭挛锏膶Ρ榷仁浅蔀樗麄兛吹降奈矬w的核心特征,使他們能夠區(qū)分它們,沒有了對比度,對他們而言,也就失去了視覺。
在學(xué)術(shù)藝術(shù)中,對比是處理對立元素和效果的一種排列方式。
例如:明暗顏色、大小形狀、粗糙或光滑的紋理。在這種情況下,對比不僅可以用來吸引注意力,還可以設(shè)置情緒和氛圍,在藝術(shù)品中創(chuàng)造多樣性、視覺趣味和戲劇性。
在設(shè)計(jì)中,對比度還是影響效果的關(guān)鍵因素之一。
不管是PC端網(wǎng)頁還是手機(jī)中的APP,它們的視覺層次、結(jié)構(gòu),設(shè)計(jì)師在通過對比度設(shè)計(jì)后,也能夠以一種獨(dú)特的方式呈現(xiàn),并告知用戶哪些交互點(diǎn)是重要的,哪些是次要的。
同時(shí),對比度還可以有效地吸引用戶的注意力并將其吸引到特定元素上,因此它在產(chǎn)品的直觀引導(dǎo)和可用性方面也發(fā)揮著重要作用。
Lucibel的網(wǎng)站設(shè)計(jì)展示了純粹的單色顏色對比,為頁面構(gòu)建了堅(jiān)實(shí)的視覺層次結(jié)構(gòu)。
LAUDEMIO的品牌網(wǎng)站使用黑色背景和產(chǎn)品主體進(jìn)行層次分離,最后加上白色文案說明
二、UI設(shè)計(jì)中的對比類型
對比在UI中具有很多不同的特征屬性,其中就包括:
顏色:顏色是人眼最快發(fā)現(xiàn)和最明顯對比之一,它適用于各種內(nèi)容下使用。
例如:通過互補(bǔ)色、對比色或類似色進(jìn)行多種組合。
這鞋方式最廣泛地用于潔面按鈕、導(dǎo)航、卡片、產(chǎn)品背景等地方,就是希望用戶能在打開的第一時(shí)間看到,并快速進(jìn)行操作使用。
大小:這種對比類型是希望重要元素或內(nèi)容首先引起用戶注意所使用的,多數(shù)情況下設(shè)計(jì)師會(huì)將元素設(shè)計(jì)成明顯大于其他元素。
形狀:這種對比類型屬于形狀改變,通過使一個(gè)元素的形狀與其他元素不同來吸引用戶的眼球。
位置:在這種類型中,設(shè)計(jì)師以這種方式更改行中一個(gè)元素的位置,使其看起來不同,我們看到最多的這種對比案例就是閱讀文本片段時(shí),新段落會(huì)以縮進(jìn)開頭。
紋理:這里的差異是由于使用彼此明顯區(qū)分的紋理而建立的。
方向:在這里,設(shè)計(jì)師通過更改元素的物理位置,使其使用其他或意想不到的方向進(jìn)行,通過這種不尋常的方式來吸引用戶的注意力。
以上這幾種對比類型,我現(xiàn)在通過可視化的方式為大家呈現(xiàn)一遍,這樣可以加深大家對對比的理解。
不同特征屬性的對對比方式
其實(shí),多數(shù)人只要想到對比,我想第一想到的會(huì)是黑白的東西吧。
在沒有陰影和多種顏色的情況下,單色的對比度是表現(xiàn)潛力最好的形式。
更重要的是,與藝術(shù)品或攝影作品相比,對比度不僅會(huì)影響美感,而且對布局的可用性和可見性也有重大影響。
因此,對比度的使用應(yīng)該算是用戶最友好、最易于使用的方法了。
F2Pool APP的界面中,顏色對比有助于數(shù)據(jù)和內(nèi)容形成分割,便于用戶閱讀使用。
區(qū)塊鏈APP界面通過使用多色的插畫設(shè)計(jì),使整體產(chǎn)品更加具有活力和動(dòng)感,同時(shí)吸引力更強(qiáng)。
根據(jù)相關(guān)數(shù)據(jù)結(jié)果表明,“黑白”的配色方式,是對用戶幫助和引導(dǎo)最大的。
所以,使用黑白配色進(jìn)行對比,可以有效提升用戶的體驗(yàn)。
當(dāng)然,多色對比也是可以的,這里我提供一個(gè)色輪配色法,大家可以自行采納。
該色輪可以幫助設(shè)計(jì)師找到最佳水平的顏色組合。
三、排版對比
除了剛才說到的哪些,接下來我在說一種對比類型,它主要是基于字體的區(qū)別進(jìn)行做排版對比的。
這里提供幾種關(guān)于字體、排版的對比方式:
尺寸:通過對字體字號的設(shè)定進(jìn)行對比實(shí)現(xiàn),可以有效的展示主次分明。比如以及標(biāo)題使用30px的字號,而內(nèi)容文本則使用24px的字號。
重量:主要的方式是將字體加粗呈現(xiàn),在視覺上看起來更加具有厚重感,這樣加粗的文本在視覺上會(huì)更加具有地位和突出性。
結(jié)構(gòu):形式在這里可以理解成是字體的字像,通過改變字體字象進(jìn)行區(qū)別,比如標(biāo)準(zhǔn)的蘋方體和花體就是很好的視覺對比。
形式:將字體加以傾斜,也可以呈現(xiàn)出不一樣的結(jié)果。
顏色:這里的顏色不光是指字體顏色本身,同時(shí)也可以為字體添加背景色,用來襯托字體。
方向:通過改變單個(gè)字體的方向、或一句話的排列方向,都可以形成有效的對比效果。
藝術(shù)學(xué)院概念展示的不同類型排版對比
四、對比的輔助功能
說了剛才那么多,可能你已經(jīng)抓住了設(shè)計(jì)的要害,那就是對比度越高,設(shè)計(jì)就越好。
其實(shí),并不是這樣的,任何事物都需要掌握一個(gè)度,超過那個(gè)度,有時(shí)候就會(huì)適得其反。
雖然我們知道對比度會(huì)使內(nèi)容更加明顯,但是你還應(yīng)該知道,過高的對比度也會(huì)使用戶感到疲勞。
按照文本視覺呈現(xiàn)的正確比例,我們應(yīng)該將對比度控制在7:1之間才是比較合適的選擇。
在當(dāng)前這個(gè)概念A(yù)PP界面中,通過明顯的顏色來提升按鈕的視覺焦點(diǎn),同時(shí),加粗的文本也是重點(diǎn)提醒,這些手法都是便于閱讀和操作的方式。
五、需要考慮的要點(diǎn)
除了剛才說到的這些對比方式和規(guī)則外,作為設(shè)計(jì)師,還應(yīng)該考慮的一些問題。
1. 內(nèi)容加在了圖片上,要是用高對比度
由于圖片本身的體積較大,覆蓋面積也大,所以用戶在瀏覽時(shí),視覺很容易會(huì)被圖片吸引過去。
但是,由于圖片內(nèi)容的情況,很多相關(guān)文案就會(huì)顯得柔弱不堪。
在這種情況下,一般的對比就無法解決視覺問題了,而是需要你加大提高文案和背景的對比。
比如使用了類似黑色圖片的背景,就要使用純白色文本,如果使用了亮色的圖片背景,文本就需要考慮使用暗色。
2. 注意對比度給用戶帶來的傷害
這種情況多數(shù)出現(xiàn)在閱讀類產(chǎn)品上。
比如我們?nèi)粘J褂玫男≌f類app,產(chǎn)品里就有一種功能叫做背景自定義。
它的主要目的就是擔(dān)心用戶在長時(shí)間閱讀的情況下產(chǎn)生視覺疲勞,所以需要設(shè)計(jì)柔和的背景進(jìn)行自定義切換。
有的產(chǎn)品還會(huì)增加字體大小、顏色修改、夜間模式等多個(gè)功能,都是為了降低對比度,使用戶在體驗(yàn)上不再那么刺眼。
3. 留白的重要性
留白是極其重要的設(shè)計(jì)手法之一。
它同樣是產(chǎn)生對比的好技法,通過給產(chǎn)品界面留有適當(dāng)?shù)目瞻子嗟?,可使產(chǎn)品具有通透感,用戶在使用產(chǎn)品時(shí)也不會(huì)產(chǎn)生壓抑。
另外由于留白是大面積的空白空間,這也就產(chǎn)生了和密集內(nèi)容的強(qiáng)烈對比。
六、為什么對比度很重要
最后總結(jié)一下所有的內(nèi)容,我們可以定義一下對比度的幾個(gè)關(guān)鍵優(yōu)勢和好處:
- 更強(qiáng)的視覺層次;
- 更好的專注;
- 創(chuàng)意氛圍;
- 增強(qiáng)可讀性;
- 與人類自然感知和反應(yīng)的對應(yīng)。
生活充滿了對比,無論你會(huì)采取什么方面。
對于所有的生命,我們必須學(xué)會(huì)如何接受這一點(diǎn),并嘗試享受如此多樣化和不可預(yù)測的生活。
與現(xiàn)實(shí)相呼應(yīng),設(shè)計(jì)也充滿對比,并盡可能多地借鑒。
本文由 @西瓜的設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理;未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Pexels,基于CC0協(xié)議
- 目前還沒評論,等你發(fā)揮!