我們?nèi)粘K吹降慕^大多數(shù)的網(wǎng)站券犁,在基礎(chǔ)配色方案上,都是以淺色為主的,背景大多是白色或者淺色纽绍。有意思的是,近兩年势似,以黑色為主色調(diào)拌夏,或者大量運(yùn)用深色背景的網(wǎng)站僧著,逐漸流行開(kāi)來(lái)。
這些深色系網(wǎng)站常常被設(shè)計(jì)的非常時(shí)髦障簿,并且搭配了不少有趣的動(dòng)效盹愚,比如懸停觸發(fā)的小特效和微妙的視差效果,這些特效讓網(wǎng)站擁有了近乎電影的視覺(jué)體驗(yàn)站故。今天我們就來(lái)聊聊這一設(shè)計(jì)趨勢(shì)皆怕。
深色系配色+動(dòng)效
深色系配色和動(dòng)效的結(jié)合確實(shí)已經(jīng)悄然流行起來(lái)了:用黑色或者深色為主的配色方案,搭配一個(gè)炫酷的動(dòng)效西篓。兩種技巧的搭配端逼,創(chuàng)造出層次分明的視覺(jué),營(yíng)造出微妙的情緒氛圍和令人著迷的神秘感污淋。
雖然在具體實(shí)現(xiàn)上并不那么容易顶滩,在移動(dòng)端上的體驗(yàn)不如桌面端明顯,但是這種設(shè)計(jì)趨勢(shì)所營(yíng)造的視覺(jué)體驗(yàn)還是很能引人關(guān)注的寸爆。深色系的配色會(huì)讓前景的元素更聚焦礁鲁,用戶會(huì)不由自主地關(guān)注設(shè)計(jì)師刻意營(yíng)造的焦點(diǎn)。
在這種被營(yíng)造出的神秘的氛圍之下赁豆,被動(dòng)效加持的視覺(jué)焦點(diǎn)元素會(huì)讓用戶好奇仅醇,這個(gè)頁(yè)面之下還藏著什么,接下來(lái)會(huì)有怎樣的事情發(fā)生魔种。
這種設(shè)計(jì)趨勢(shì)和其他的趨勢(shì)相似析二,僅僅是一個(gè)范圍而非規(guī)定嚴(yán)苛的規(guī)定,你可以使用黑色作為主色調(diào)也可以使用藏藍(lán)节预,搭配的動(dòng)效也沒(méi)有固定的套路叶摄,它可以只是一個(gè)簡(jiǎn)單的懸停動(dòng)效,也可以是一種復(fù)雜而精致的動(dòng)態(tài)效果安拟,你可以根據(jù)實(shí)際狀況自行嘗試蛤吓。
當(dāng)然,這種設(shè)計(jì)趨勢(shì)的核心在于營(yíng)造神秘感糠赦。
運(yùn)作機(jī)制
很難完全說(shuō)清這種設(shè)計(jì)趨勢(shì)為什么會(huì)如此的有效会傲,當(dāng)你簡(jiǎn)單腦補(bǔ)深色系配色+動(dòng)效的時(shí)候,很難意識(shí)到這種效果實(shí)際效果是如此的出眾拙泽√噬剑回過(guò)頭來(lái),我們可以仔細(xì)剖析這種設(shè)計(jì)趨勢(shì)的特征:
配色方案中不會(huì)有太多顏色
幾乎沒(méi)有太多明晰的對(duì)比
整體設(shè)計(jì)看起來(lái)極其簡(jiǎn)單
不過(guò)顾瞻,也可能正是這些看起來(lái)不復(fù)雜的設(shè)計(jì)泼疑,使得這種設(shè)計(jì)趨勢(shì)在用戶當(dāng)中發(fā)揮了效果。它打破了規(guī)則朋其,吸引了用戶王浴。
另外一個(gè)促使它流行的因素應(yīng)該是它所營(yíng)造的黑暗氛圍和神秘感。人總是充滿好奇心的梅猿,欲蓋彌彰總比開(kāi)放的展示更加撩人氓辣。動(dòng)畫(huà)和黑暗的氛圍搭配起來(lái)的時(shí)候,更容易勾起訪客的好奇心袱蚓。
在許多設(shè)計(jì)作品當(dāng)中钞啸,我們看到設(shè)計(jì)師并不僅僅營(yíng)造出神秘感,他們還加入了更多的情緒上的引導(dǎo)喇潘。不同的情緒在這樣的神秘氛圍下發(fā)酵体斩,用戶最終會(huì)身不由己地被這種視覺(jué)模式所吸引。
不一定非得是黑色的
雖然絕大多數(shù)的設(shè)計(jì)師還是選擇了黑色為主的設(shè)計(jì)颖低,但是實(shí)際上并不一定只有黑色適合這一設(shè)計(jì)趨勢(shì)絮吵。
其他的深色調(diào)同樣有效,這個(gè)時(shí)候就是考驗(yàn)設(shè)計(jì)師調(diào)色和搭配的能力了忱屑。
除此之外蹬敲,想要讓整個(gè)配色和動(dòng)效能夠有效地搭配,還得讓色彩足夠豐富莺戒。確定主要的色彩之后伴嗡,最好在配色方案中加入同色系不同明暗、不同飽和度的色彩从铲,這樣能讓整個(gè)配色統(tǒng)一而又豐富瘪校。
雖然營(yíng)造顯著的對(duì)比并不在這個(gè)設(shè)計(jì)趨勢(shì)之內(nèi),但是它依然是不容忽視名段。這個(gè)深色系為主的配色方案應(yīng)該盡量貼近單色系配色阱扬,但是配色中色彩的對(duì)比度不夠明顯會(huì)讓人迷惑,對(duì)比度太強(qiáng)則不夠微妙伸辟。
這一是趨勢(shì)的局限性
深色系配色+動(dòng)效這種設(shè)計(jì)趨勢(shì)并不適合每個(gè)人价认,也不會(huì)貼合每個(gè)項(xiàng)目的實(shí)際需求,它也有著局限性:
在移動(dòng)端上的顯示效果一般
在可訪問(wèn)性上或多或少有那么一點(diǎn)問(wèn)題
對(duì)于一部分用戶而言吸引力不足
導(dǎo)航和CTA元素并不好安置
在環(huán)境光不足或者不好的情況下自娩,頁(yè)面可能很難看清
部分用戶可能并不喜歡網(wǎng)站所呈現(xiàn)出的情緒
用戶可能會(huì)在較短的時(shí)間內(nèi)厭倦
使用時(shí)候的注意事項(xiàng)
如果你覺(jué)得自己可以駕馭這種設(shè)計(jì)趨勢(shì)用踩,那么你可以嘗試在自己的網(wǎng)頁(yè)當(dāng)中使用它。不過(guò)忙迁,下面的事項(xiàng)一定要注意:
堅(jiān)持使用單頁(yè):太多先鋒的設(shè)計(jì)手法可能會(huì)讓用戶覺(jué)得不舒服脐彩,太多的元素也可能打破好不容易營(yíng)造的感覺(jué),所以姊扔,盡量限制其為單頁(yè)設(shè)計(jì)惠奸。
使用對(duì)比色:白色文本在深色背景上顯示效果很好。其他的元素也是同樣的道理恰梢。需要突出的按鈕佛南、導(dǎo)航元素梗掰、信息等都可以采用對(duì)比色。
簡(jiǎn)化動(dòng)效:過(guò)于復(fù)雜的動(dòng)效可能會(huì)讓用戶覺(jué)得難于接受嗅回。堅(jiān)持使用簡(jiǎn)單的動(dòng)效能產(chǎn)生更好的效果及穗。
分層結(jié)構(gòu):由于需要結(jié)合動(dòng)效,不同的元素需要處于不同的分層當(dāng)中绵载,這樣可以營(yíng)造出有觸感的真實(shí)效果埂陆。分層還能讓設(shè)計(jì)師更好地創(chuàng)造對(duì)比,也更易于管理娃豹。
大膽的排版:文本元素不僅要包含對(duì)比焚虱,而且要通過(guò)大膽排版和字體設(shè)計(jì),來(lái)創(chuàng)造出不落俗套的設(shè)計(jì)懂版。在保證可讀性的前提之下鹃栽,使用粗細(xì)不同、大小對(duì)比的字體躯畴,營(yíng)造出形式感谍咆。
接下來(lái)會(huì)怎樣?
和任何設(shè)計(jì)趨勢(shì)一樣私股,深色系配色+動(dòng)效的設(shè)計(jì)趨勢(shì)會(huì)隨著時(shí)間的推移逐步演變摹察,雖然我們無(wú)法確知變化的細(xì)節(jié),但是我們總歸能夠看到一個(gè)方向倡鲸。
深色系的配色和如今逐步崛起的VR和AR的沉浸式體驗(yàn)有著一致的精神供嚎,動(dòng)效的流行自是不必說(shuō),相比于復(fù)雜化的演化方向峭状,它更有可能會(huì)越來(lái)越自然克滴,越來(lái)越有意思。
不同的設(shè)計(jì)技巧之間的組合搭配优床,或多或少能夠創(chuàng)造出一些新的效果劝赔,今天所聊的這種設(shè)計(jì)趨勢(shì)又何嘗不是如此呢?你也可以沿著這個(gè)思路繼續(xù)探索適合自己設(shè)計(jì)項(xiàng)目的視覺(jué)效果胆敞。
CARRIE COUSINS