【深色動(dòng)效】深色系配色遭遇微妙的動(dòng)效的時(shí)候!

我們?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)效


Meida

Impero

深色系配色和動(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ī)制


Garden8

很難完全說(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é)模式所吸引。

不一定非得是黑色的


FedEx-track

雖然絕大多數(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)


Formigari

The Great

如果你覺(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ì)怎樣?


Blairwitch

和任何設(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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末着帽,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子移层,更是在濱河造成了極大的恐慌仍翰,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,591評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件观话,死亡現(xiàn)場(chǎng)離奇詭異予借,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門灵迫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)秦叛,“玉大人,你說(shuō)我怎么就攤上這事瀑粥≌醢希” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,823評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵利凑,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我嫌术,道長(zhǎng)哀澈,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,204評(píng)論 1 292
  • 正文 為了忘掉前任度气,我火速辦了婚禮割按,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘磷籍。我一直安慰自己适荣,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,228評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布院领。 她就那樣靜靜地躺著弛矛,像睡著了一般。 火紅的嫁衣襯著肌膚如雪比然。 梳的紋絲不亂的頭發(fā)上丈氓,一...
    開(kāi)封第一講書(shū)人閱讀 51,190評(píng)論 1 299
  • 那天,我揣著相機(jī)與錄音强法,去河邊找鬼万俗。 笑死,一個(gè)胖子當(dāng)著我的面吹牛饮怯,可吹牛的內(nèi)容都是我干的闰歪。 我是一名探鬼主播,決...
    沈念sama閱讀 40,078評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼蓖墅,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼库倘!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起论矾,我...
    開(kāi)封第一講書(shū)人閱讀 38,923評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤于樟,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后拇囊,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體迂曲,經(jīng)...
    沈念sama閱讀 45,334評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,550評(píng)論 2 333
  • 正文 我和宋清朗相戀三年寥袭,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了路捧。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片关霸。...
    茶點(diǎn)故事閱讀 39,727評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖杰扫,靈堂內(nèi)的尸體忽然破棺而出队寇,到底是詐尸還是另有隱情,我是刑警寧澤章姓,帶...
    沈念sama閱讀 35,428評(píng)論 5 343
  • 正文 年R本政府宣布佳遣,位于F島的核電站,受9級(jí)特大地震影響凡伊,放射性物質(zhì)發(fā)生泄漏零渐。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,022評(píng)論 3 326
  • 文/蒙蒙 一系忙、第九天 我趴在偏房一處隱蔽的房頂上張望诵盼。 院中可真熱鬧,春花似錦银还、人聲如沸风宁。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,672評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)戒财。三九已至,卻和暖如春捺弦,著一層夾襖步出監(jiān)牢的瞬間固翰,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,826評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工羹呵, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留骂际,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,734評(píng)論 2 368
  • 正文 我出身青樓冈欢,卻偏偏與公主長(zhǎng)得像歉铝,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子凑耻,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,619評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容