你有沒有注意到最近正在“興起”的一種“黑暗系”設(shè)計(jì)風(fēng)格模式？設(shè)計(jì)師們正在嘗試一些更有趣、偏向于黑暗的設(shè)計(jì)模式，并且將這種模式以及風(fēng)格融入了動(dòng)畫元素中。

這些動(dòng)畫可以是簡(jiǎn)單的單個(gè)動(dòng)作，或是比較復(fù)雜的進(jìn)行多個(gè)元素或路徑的動(dòng)作，盤旋效果和完整的電影體驗(yàn)。現(xiàn)在，讓我們深入了解這個(gè)網(wǎng)站設(shè)計(jì)趨勢(shì)，并探索一些可以使它成為你項(xiàng)目中一個(gè)亮點(diǎn)的方法。

1.關(guān)于這個(gè)趨勢(shì)




暗系風(fēng)格動(dòng)畫是一種將兩種元素結(jié)合在一起的趨勢(shì)——一個(gè)是黑色單色調(diào)色板，而另一個(gè)是很酷的動(dòng)畫效果。其結(jié)果往往是令人驚嘆的分層設(shè)計(jì)，微妙但表現(xiàn)出一種獨(dú)特的個(gè)性。

盡管這一趨勢(shì)在實(shí)際的網(wǎng)站設(shè)計(jì)中項(xiàng)目中并不好使用，而且在移動(dòng)端的用戶體驗(yàn)上并不能做好完美的適應(yīng)，但這種視覺模式的驅(qū)動(dòng)因素是興趣的建立。由于黑暗元素的存在，用戶不得不專注于設(shè)計(jì)的內(nèi)容。

當(dāng)用戶看到動(dòng)畫元素并開始尋找其中微妙的變化和影響時(shí)，就會(huì)產(chǎn)生一個(gè)神秘的因素來(lái)驅(qū)動(dòng)用戶與這些元素進(jìn)行交互或接觸。然后，接下來(lái)會(huì)發(fā)生什么呢？

每一種網(wǎng)頁(yè)設(shè)計(jì)都有不同的組合方式。沒有哪種特定類型的動(dòng)畫效果是最好或最值得推薦和使用的，也沒有哪種固定的顏色必須使用，盡管很多設(shè)計(jì)都偏向于使用豐富的黑色和灰色。

動(dòng)畫其實(shí)可以像懸停效果一樣簡(jiǎn)單，也可以像專門制作的視頻一樣精致。

它之所以能起到作用的原因是因?yàn)樗谟脩糁g喚起了一種神秘感，并且用戶想要解決這個(gè)神秘的問題。

2.為什么它能發(fā)揮作用



實(shí)際上，我們很難解釋為什么這種設(shè)計(jì)趨勢(shì)如此有效。尤其是當(dāng)你在沒有看到實(shí)際的網(wǎng)站設(shè)計(jì)項(xiàng)目的情況下思考這個(gè)問題時(shí)，你不會(huì)想到暗系風(fēng)格的動(dòng)畫模式會(huì)獲得成功。

· 沒有太多的顏色。

· 只有非常小的對(duì)比元素。

· 這些設(shè)計(jì)簡(jiǎn)直太簡(jiǎn)單了。

但也許這就是為什么這一趨勢(shì)行得通的原因。它打破了規(guī)則，而這些元素足以吸引用戶走進(jìn)你的設(shè)計(jì)。

另一個(gè)因素是，黑暗系總是和“神秘”這一關(guān)鍵詞緊密相連，并且，人們總是喜歡神秘的事物。他們希望自己能夠看到其中隱藏的元素，或者解決一個(gè)復(fù)雜的問題。帶有動(dòng)畫效果的暗色方案為用戶提供了一種解開謎團(tuán)的“原始沖動(dòng)”。

這些項(xiàng)目也有明顯的情感吸引力?；诤诎档念伾谇楦蟹矫婵偸潜憩F(xiàn)為喜怒無(wú)常的。這些調(diào)色板的顏色變化是復(fù)雜而有趣的(無(wú)論如何，從設(shè)計(jì)的角度來(lái)看)。這種富有深度的元素很難表達(dá)，但值得探索。

綜合所有的情感和神秘感，你就能知道為什么用戶會(huì)被這種視覺模式吸引。

3.它不一定只能是黑的



雖然大部分相關(guān)的設(shè)計(jì)都是采用黑色的調(diào)色板，但它們并不是硬性要求。

其他深色的色調(diào)同樣也可以很有效，同時(shí)，它賦予設(shè)計(jì)師創(chuàng)造一個(gè)不同于黑暗動(dòng)畫設(shè)計(jì)的能力，并能夠?qū)⑸收{(diào)色板結(jié)合與客戶的品牌色基礎(chǔ)。

無(wú)論你最后選擇何種顏色，制作這些動(dòng)畫的關(guān)鍵在于豐富的色彩選擇。一種混灰色調(diào)(混合一種顏色和灰色)或混黑色調(diào)(混合一種顏色和黑色)可以為單色調(diào)色板提供一個(gè)不同的范圍(你可以參考上面案例中FedEx設(shè)計(jì)中不同的紫色)。

雖然對(duì)比不是這個(gè)設(shè)計(jì)趨勢(shì)的重點(diǎn)，但它很重要。在單色設(shè)計(jì)中如果沒有足夠的對(duì)比度，動(dòng)畫就會(huì)迷失在背景中，使設(shè)計(jì)無(wú)效。

4.一些“預(yù)防點(diǎn)”

這種設(shè)計(jì)趨勢(shì)并不適用于所有的網(wǎng)站設(shè)計(jì)項(xiàng)目，而且很難有效地做到這一點(diǎn)。暗系風(fēng)格動(dòng)畫或背景也有一些你需要“預(yù)防”的缺點(diǎn):

· 在移動(dòng)設(shè)備上，這并不是很好的選擇；

· 一些固有的兼容性或可訪問性的問題；

· 有些用戶可能沒有足夠的視覺興趣；

· 這對(duì)導(dǎo)航和呼叫行動(dòng)按鈕可能具有挑戰(zhàn)性；

· 環(huán)境條件，比如燈光等會(huì)使設(shè)計(jì)更加難以看到；

· 一些用戶不會(huì)接受這種“嚴(yán)肅”的氛圍；

· 用戶可能很快會(huì)對(duì)設(shè)計(jì)感到厭倦，減在站點(diǎn)停留的時(shí)間。

5.關(guān)于嘗試這個(gè)設(shè)計(jì)趨勢(shì)的一些提示




如果你并不害怕這個(gè)設(shè)計(jì)趨勢(shì)可能帶來(lái)的挑戰(zhàn)，并且有一個(gè)能夠與暗色調(diào)動(dòng)畫設(shè)計(jì)方案相匹配的網(wǎng)站設(shè)計(jì)項(xiàng)目的話，那么你可以做一些事情來(lái)幫助確保項(xiàng)目的成功。

· 堅(jiān)持單頁(yè)/單屏設(shè)計(jì)：太多的時(shí)髦的設(shè)計(jì)元素會(huì)讓人難以承受，如果你打算使用這個(gè)概念，請(qǐng)將其限制為一個(gè)單頁(yè)或只是在一屏上展示。

· 使用對(duì)比色：白色文字在黑暗背景下非常有效，其他元素也一樣。確保有關(guān)按鈕、導(dǎo)航元素、消息和操作的元素很容易被看到或識(shí)別。雖然動(dòng)畫和背景可能沒有明顯的差別，但其他元素必須易于識(shí)別。

· 簡(jiǎn)化動(dòng)畫：過于復(fù)雜的動(dòng)畫可能會(huì)破壞設(shè)計(jì)的整體。堅(jiān)持簡(jiǎn)單的動(dòng)作和效果，不要太快。

· 分層設(shè)計(jì)：使這個(gè)概念工作的最終因素是分層設(shè)計(jì)。在背景和動(dòng)畫元素之間建立分離，使之具有真實(shí)的感覺。分層還將幫助你規(guī)劃足夠的對(duì)比度以使元素可見。

· 使用粗體文本：文本元素不僅僅只是包含大量的色彩對(duì)比，你可能需要使用一個(gè)醒目的粗體，以確保文本不會(huì)被“掩蓋”于設(shè)計(jì)中。它應(yīng)該跳出來(lái)，用粗體來(lái)強(qiáng)調(diào)文字，簡(jiǎn)單的筆觸來(lái)確保字體的可讀性。

6.接下來(lái)呢？



與任何設(shè)計(jì)趨勢(shì)一樣，這個(gè)趨勢(shì)將在接下來(lái)的一段時(shí)間里繼續(xù)發(fā)展。雖然我們無(wú)法預(yù)測(cè)接下來(lái)會(huì)發(fā)生什么，但有些設(shè)計(jì)卻提供了線索。

在虛擬現(xiàn)實(shí)世界中，暗色和動(dòng)畫可能是一個(gè)有特色的設(shè)計(jì)，VR是目前游戲和視頻的主要發(fā)展領(lǐng)域，它已經(jīng)使用了大量的暗色。

這一設(shè)計(jì)趨勢(shì)可能非常適合一些類型的項(xiàng)目，比如新的Blair Witch項(xiàng)目中的視頻預(yù)告片/游戲網(wǎng)站。

黑暗配色方案已經(jīng)存在一段時(shí)間了，但這一新的與類似彩色動(dòng)畫的轉(zhuǎn)折是有趣的。它往往是設(shè)計(jì)師們絕對(duì)會(huì)感興趣的趨勢(shì)之一，這一部分是由于它給用戶帶來(lái)的挑戰(zhàn)，而不是因?yàn)樗南才瓱o(wú)常。

無(wú)論通過哪種方式，這種風(fēng)格都被更頻繁地使用。雖然它對(duì)僅僅對(duì)于某些類型的項(xiàng)目很有效，但它可能是混合設(shè)計(jì)的一種有趣的方式。在你選擇將一個(gè)暗系風(fēng)格動(dòng)畫設(shè)計(jì)加入你的項(xiàng)目必備元素清單之前，先嘗試使用幻燈片效果或簡(jiǎn)單的一些交互動(dòng)作，看看用戶是否能夠接受，然后在決定是否需要更完整和針對(duì)性的使用它們。