2022-06-29 分類: 用戶體驗(yàn)
色彩幾乎是所有設(shè)計(jì)體系中不可忽略的組成部分,而在網(wǎng)頁(yè)設(shè)計(jì)中,色彩本身所發(fā)揮的作用并不單一,除了最基本的著色構(gòu)成色彩搭配的作用之外,色彩能夠通過對(duì)比創(chuàng)造視覺焦點(diǎn),構(gòu)建信息層次,影響用戶情緒,甚至引導(dǎo)訪客的行為。
所以,在玩轉(zhuǎn)配色本身之外,進(jìn)階的色彩運(yùn)用技巧還有很多。
1、通過比例變化創(chuàng)造視覺焦點(diǎn)
控制色彩的比例來創(chuàng)造視覺焦點(diǎn)是常見的色彩運(yùn)用手法之一,控制色彩的比例實(shí)際主要是通過控制色彩所在元素的大小來達(dá)成效果的。比如Viporte 這個(gè)網(wǎng)站,當(dāng)你上下滾動(dòng)首頁(yè)的時(shí)候,每個(gè)部分都用超大的字體進(jìn)行了裝飾,而每個(gè)字母都使用了漂亮的色彩進(jìn)行填充。不同的文字使用了不同的色彩,并且搭配以相應(yīng)的圖片。每個(gè)頁(yè)面的焦點(diǎn)肯定是最中心的圖片和字母,而焦點(diǎn)的形成和色彩的比例與運(yùn)用脫不開關(guān)系??刂粕实恼急?,無論是多還是少,只要有明確的目的,總能形成吸引注意力的焦點(diǎn)。無論是我們常說的“萬花叢中一點(diǎn)綠”,還是極簡(jiǎn)主義設(shè)計(jì)中大面積的留白,都是色彩比例控制下所構(gòu)成視覺焦點(diǎn)的典型案例。
2、通過對(duì)比度吸引用戶注意
在設(shè)計(jì)過程中,使用色彩來控制對(duì)比度也是設(shè)計(jì)師頻繁使用的技巧之一。當(dāng)設(shè)計(jì)的整體色調(diào)趨于柔和和平靜的時(shí)候,突然注入強(qiáng)對(duì)比的色彩,能夠瞬間抓住用戶的注意力。
而Thinx 這個(gè)網(wǎng)站在設(shè)計(jì)的時(shí)候就將對(duì)比度控制得很好。網(wǎng)頁(yè)主體的配色采用的是經(jīng)典的黑白搭配,白色的背景搭配黑色的文本。而整體的設(shè)計(jì)感的來源則主要源于排版和彩色的圖片。網(wǎng)站所采用的圖片明顯經(jīng)過精心的選擇和設(shè)計(jì),紅色的底色、黑色的內(nèi)衣和模特外露的細(xì)膩肌膚色在圖片激烈的碰撞,漂亮而充滿誘惑,圖片大膽的色調(diào)搭配和素色的背景與文字形成了鮮明而強(qiáng)烈的對(duì)比,無論是經(jīng)典的紅黑搭配,還是永恒的黑白配色,都足夠漂亮和吸引人。
Thinx 這個(gè)案例我非常喜歡,并且經(jīng)常會(huì)用到,因?yàn)樗C明了設(shè)計(jì)師并不一定非得靠高飽和度的霓虹色來創(chuàng)造高對(duì)比度的配色。即使是兩種平衡的顏色,也能讓整個(gè)設(shè)計(jì)脫穎而出。
3、使用色彩創(chuàng)造UX模式
高度一致的配色方案能夠創(chuàng)造出視覺模式,而延伸到用戶體驗(yàn)上,則會(huì)讓整個(gè)UX呈現(xiàn)出模式化的特征。模式化的設(shè)計(jì)讓用戶更容易適應(yīng),用戶更容易摸索出規(guī)律,也更容易產(chǎn)生相匹配的預(yù)期,換句話說,UX模式能夠培養(yǎng)用戶習(xí)慣,同用戶產(chǎn)生深刻的關(guān)聯(lián)。就像用戶習(xí)慣了某些特定的圖標(biāo)之后,在其他地方看到這些圖標(biāo)就知道它們的含義,明白該如何交互了。比如,小房子圖標(biāo)會(huì)讓用戶想到首頁(yè)、主頁(yè),而垃圾桶則會(huì)關(guān)聯(lián)上刪除的概念。色彩相對(duì)而言更加主觀,因?yàn)槊總€(gè)網(wǎng)站和APP都會(huì)采用自己的配色方案,不同的色彩代表不同的含義。
那我們就拿Underbelly 這個(gè)產(chǎn)品展示頁(yè)作為示例吧。在Underbelly 這個(gè)網(wǎng)站中,所有可點(diǎn)擊的組件都是藍(lán)色的,你在試用網(wǎng)站幾秒鐘之后,能夠快速掌握這個(gè)UX模式,并且明白如何操作。這就是Underbelly 通過色彩構(gòu)建UX模式的方法。UX模式的優(yōu)勢(shì)在于,它讓用戶更快地熟識(shí)你的產(chǎn)品。越容易識(shí)別,用戶的想法越少,產(chǎn)品的的使用也就更加順暢了。
4、使用色彩來創(chuàng)建層次
當(dāng)我們?yōu)g覽網(wǎng)頁(yè)和各種界面的時(shí)候,信息的層次感很大程度是借助視覺來營(yíng)造的。使用色彩來創(chuàng)造視覺層次感就很順其自然了。
在Skore 的產(chǎn)品頁(yè)面中,每一個(gè)部分都有使用到綠色的元素。重復(fù)的綠色元素不僅創(chuàng)建出可供用戶快速識(shí)別的模式,它也讓用戶能夠快速明白哪些因素更加重要。通常,我們解釋視覺層次的時(shí)候,會(huì)用不同大小、粗細(xì)的字體來闡述信息層次和結(jié)構(gòu),但是不同強(qiáng)度的色彩,同樣可以實(shí)現(xiàn)層次的劃分。
在Skore 這個(gè)案例當(dāng)中,綠色和灰色的文本以及白色的背景之間有著良好的對(duì)比度,整個(gè)配色方案不依賴其他的強(qiáng)調(diào)色,以綠色為主。這種相對(duì)穩(wěn)定的配色結(jié)構(gòu)有助于讓每個(gè)部分都有層次地呈現(xiàn)出來。綠色不僅吸引用戶關(guān)注關(guān)鍵的元素,而且為不同的部分的內(nèi)部提供層次結(jié)構(gòu)。
5、充分利用色彩的相似性
除開其他的目的,設(shè)計(jì)師使用色彩或者調(diào)整色彩的目的,基本都是為了創(chuàng)造設(shè)計(jì)的一致性。InVision 的年度總結(jié)頁(yè)面使用了從粉色到紫色的漸變,在頁(yè)面的下方,粉色和紫色同樣應(yīng)用到了按鈕中,此外,在著陸頁(yè)當(dāng)中,將對(duì)比度明顯的白色置于粉色+紫色的背景之上,確保信息的清晰呈現(xiàn)。如果色彩每次都不一樣,那么整個(gè)設(shè)計(jì)看起來就不是那么令人難忘了。
另外一個(gè)案例來自于 Comotion。Comotion 的工作室首頁(yè)采用了幾種不同的色彩,但是這些色彩的色調(diào)是非常接近的,從而創(chuàng)建出了一種和而不同的配色方案。在這個(gè)設(shè)計(jì)案例當(dāng)中,幾個(gè)不同的色彩互為搭配,并不會(huì)太過于突出,但是又能夠恰到好處地進(jìn)行強(qiáng)調(diào),最終讓色彩足夠好看,有保持了用戶的參與度。
結(jié)語
色彩能夠幫助設(shè)計(jì)師達(dá)成各種各樣的目的,靈活的運(yùn)用能夠讓實(shí)現(xiàn)這一切。當(dāng)你將上述的色彩使用技巧都合理的運(yùn)用起來,可以靈活的創(chuàng)造視覺焦點(diǎn),構(gòu)造層次,打造真正有趣而有用的設(shè)計(jì)。
網(wǎng)站標(biāo)題:這5個(gè)色彩進(jìn)階技巧,能幫你創(chuàng)造更優(yōu)質(zhì)的網(wǎng)頁(yè)用戶體驗(yàn)
鏈接URL:http://m.rwnh.cn/news39/173039.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷seo公司;服務(wù)項(xiàng)目有用戶體驗(yàn)等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容