您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 視覺(jué)設(shè)計(jì) >> 瀏覽設(shè)計(jì)教程

2017UI流行趨勢(shì) - 漸變色彩探索

設(shè)計(jì)風(fēng)向標(biāo)的更新周期越來(lái)越短,基本每一年都會(huì)有新的設(shè)計(jì)理念推出,每隔十個(gè)月就會(huì)有一些視覺(jué)技巧在挑戰(zhàn)現(xiàn)在的主流設(shè)計(jì)理念。

那么現(xiàn)在的視覺(jué)設(shè)計(jì)圈更新迭代速度這么快,即將到來(lái)的2017年 UI 又會(huì)流行什么呢???


不妨先從本質(zhì)分析,整個(gè)設(shè)計(jì)行業(yè)的基礎(chǔ)因素“人”已經(jīng)在潛移默化發(fā)生了新的變化。

80后設(shè)計(jì)師穩(wěn)重的成為行業(yè)里的主力軍,90后小鮮肉帶著一股跳躍性的思維在圈里逐漸嶄露頭角,他們更敢于創(chuàng)新、用色大膽并且把設(shè)計(jì)當(dāng)成興趣愛(ài)好去鉆研,成長(zhǎng)速度快的驚人。當(dāng)80、90兩個(gè)年代兩股設(shè)計(jì)洪流交織在一起時(shí),沉穩(wěn)與新奇并存,嚴(yán)謹(jǐn)與敏捷互補(bǔ)。


今天就先以色彩做案例,從一些優(yōu)秀作品中感受下色彩應(yīng)用領(lǐng)域發(fā)生的一些變化.....



1、雙色漸變


“漸變色”一個(gè)不算新鮮的傳統(tǒng)視覺(jué)表現(xiàn)手法,相信大多數(shù)80后設(shè)計(jì)師都會(huì)在以往的某個(gè)時(shí)期對(duì)漸變色的使用情有獨(dú)鐘!

從2013年至今,扁平風(fēng)以強(qiáng)烈簡(jiǎn)潔的功能界面區(qū)分,拋棄多余的元素,減少過(guò)度美觀修飾對(duì)信息的干擾等等優(yōu)勢(shì)在設(shè)計(jì)潮流中著實(shí)穩(wěn)穩(wěn)的走過(guò)了三個(gè)年頭。

但是一切皆扁平的純色理論中,也有一定程度上存在著各種小弊端,如:頁(yè)面信息難以拉開(kāi)層次關(guān)系;缺少個(gè)性\特性展現(xiàn);過(guò)度弱化的視覺(jué)信號(hào);失去對(duì)事件的控制感等等...


所以不少新銳設(shè)計(jì)師在試著打破扁平的魔咒,漸變色就是目前被設(shè)計(jì)師們重新拾起的武器。

選擇色譜盤(pán)上的鄰近色進(jìn)行糅合,產(chǎn)生了雙色漸變,絢麗中又不浮夸,運(yùn)用得當(dāng)會(huì)為頁(yè)面增色不少。

簡(jiǎn)單干凈的雙色漸變開(kāi)始讓簡(jiǎn)單的設(shè)計(jì)賦予活潑有趣的氣息。


如下案例:

(Behance 案例)


(Dribbble 案例)


     (Behance 案例)


(Dribbble 案例)



 

2、輕量漸變


輕量漸變色與雙色漸變色相比,具有更加柔和、減少跳躍的屬性。適合使用在需要突出產(chǎn)品意識(shí)的同時(shí),又加入了一些活潑的調(diào)性。

由于輕量漸變色通常采用同一顏色的深淺三個(gè)色度內(nèi)的漸變過(guò)度,用量更輕,起伏很淡,對(duì)用戶的視覺(jué)傳達(dá)是似有似無(wú)的心里暗示。

與扁平純色相比,輕量漸變?nèi)谌肓斯庠辞腥朦c(diǎn),氣氛的變化,所以輕量漸變色展現(xiàn)的是色彩的“柔性美”及“溫和氣質(zhì)”。

輕量漸變色在卡片或者較大面積時(shí)使用更佳!


如下案例:

(Dribbble 案例)


(Dribbble 案例)


(Dribbble 案例)

(Behance 案例)

(主流 APP 案例)

3、彩色投影


投影同樣也是一個(gè)視覺(jué)老技巧。但是以往投影多流行的是灰色或者重色的運(yùn)用。近期另一種更大膽活潑的形式開(kāi)始悄然流行,就是“彩色投影”或者叫“融入式投影”。

投影的顏色會(huì)隨著投影源的主體色彩而改變,這樣的好處是可以把投影帶來(lái)的層次感控制在良好的弱體驗(yàn)之間,讓投影的主體更好的融進(jìn)整體畫(huà)面中。也避免了部分亮色系搭配時(shí),灰色投影顯臟的問(wèn)題。同時(shí)也可以讓界面及色彩更突出和飽滿。

所以,越來(lái)越多的新銳視覺(jué)設(shè)計(jì)師開(kāi)始在研磨彩色投影的神奇功效...


如下案例:

(Dribbble 案例)


(Dribbble 案例)

視覺(jué)展現(xiàn)趨勢(shì)的設(shè)計(jì)技巧還有很多,今天只拋一個(gè)色彩相關(guān)的小點(diǎn)供大家腦洞。

不要誤解這里談到的似乎不是全新的方法,設(shè)計(jì)趨勢(shì)就是在開(kāi)歷史的倒車(chē)。

其實(shí)每一次潮流下驅(qū)動(dòng)的變化都是當(dāng)前時(shí)代人對(duì)美的重新定義和認(rèn)知,也是符合當(dāng)前感性體驗(yàn)的不斷升級(jí)。像幾年前的投影是鮮明層次需求渴望的重色使然,時(shí)下流行的彩色投影則是對(duì)整體和諧性與層級(jí)關(guān)系雙重把控下的更高要求!

BTW, 趨勢(shì)的摸索往往彎路多于正途,也不是所有的趨勢(shì)都適合每套產(chǎn)品的調(diào)性。

但正是這些不斷的嘗新探索才推動(dòng)了產(chǎn)品對(duì)設(shè)計(jì)不斷持重的體驗(yàn)升華!

[教程作者:王羽楓]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://irelandcustomcontracting.com/tutorial/ui3388.html
游戲類網(wǎng)頁(yè)設(shè)計(jì)師的成長(zhǎng)故事(附PSD下載)
干貨分享!UI設(shè)計(jì)中的顏色運(yùn)用
圖趣網(wǎng)微信
建議反饋
×