設(shè)計師們也常常通過設(shè)計作品互相汲取靈感，而這也是促成設(shè)計圈內(nèi)的各種設(shè)計趨勢的形成。可能是厭倦了循規(guī)蹈矩，炎熱的夏季讓設(shè)計師們開始尋求更多獨樹一幟的設(shè)計手法，大膽的用色已經(jīng)不能滿足需求了，而網(wǎng)頁的首圖設(shè)計也不再拘泥于現(xiàn)代、正面的設(shè)計風格了。在接下來的9月份， 你可能會看到更多有趣的設(shè)計，而其中有許多設(shè)計作品可能會受到下面的3種設(shè)計趨勢的影響。

1、彩虹色

說實話，彩虹色所毀掉的設(shè)計比起它所創(chuàng)造的好設(shè)計要多得多。這種局面很大程度上還是因為絕大多數(shù)設(shè)計師無法駕馭多種色彩，最終導(dǎo)致設(shè)計上的失誤。絕大多數(shù)的優(yōu)秀的設(shè)計當中，配色方案都會將色彩的數(shù)量控制在3~4種色彩這樣的范疇以內(nèi)，便于控制，也不會造成視覺污染。

不過，不能因為彩虹色造成過“設(shè)計災(zāi)難”就全盤否定了它在設(shè)計中的可能性。如果掌握了多種色彩的使用訣竅，彩虹色同樣可以讓設(shè)計足夠優(yōu)雅、簡單。在過去的一個月當中，不少網(wǎng)站開始在網(wǎng)頁設(shè)計項目中有意識地使用彩虹色。其中不僅有小型的設(shè)計項目，還有Github Universe Conference、Southwest Airlines?和?London Grammar’s Spotify channel 這樣比較著名的網(wǎng)站。

有意思的地方在于，每個網(wǎng)站在使用彩虹色這樣的事情上，都采用了不同的策略，拿出了多樣的方案。

Github 的網(wǎng)站采用的是我們平常最常見的彩虹色“黑暗模式”：將不同的色彩賦予不同的文字、LOGO的不同部分上，甚至讓幽靈按鈕同時承載多種色彩。Github 的設(shè)計師在彩虹色的選取上非常用心，這些色彩雖然多樣，但是足夠微妙，在飽和度和明度的控制上都非常合理，并不會讓人覺得有違和感，并且傳遞出多彩和樂觀的情緒，是正確而合理的色彩搭配。

Southwest Airlines 對于彩虹色的使用方法與Github 截然不同，設(shè)計師將彩虹色填充到背景元素和文本元素當中，并沒有作為視覺主體，而是將它們作為視覺裝飾來使用。彩虹色在這個網(wǎng)頁設(shè)計案例中，賦予整個頁面以生命力，讓視覺上更加令人愉悅。

London Grammar 在 Spotify 的這個頁面設(shè)計也非常有趣，黑色的背景襯托之下，作為視覺主體的彩虹色氣泡非常抓人眼球，而這個彩虹色氣泡會隨著背景音樂而變化，給人帶來非常有趣的體驗，對我而言，聽著音樂我能看著這個彩虹氣泡扭一整天。

2、更輕量級的網(wǎng)頁首圖

超大的網(wǎng)頁首圖和輪播式Banner 在網(wǎng)頁設(shè)計圈中已經(jīng)流行多年了，不過極簡主義設(shè)計在近年來的流行，使得不少設(shè)計師開始尋求更加簡約、輕量級的首圖構(gòu)造。

由于這樣的設(shè)計數(shù)量上有明顯的增長，我們發(fā)現(xiàn)了這一趨勢的存在：設(shè)計師會采用白色或者淺色的頁頭，只使用標題搭配零星的裝飾性元素，來營造一種相對簡約的體驗，創(chuàng)造出一種輕量級的設(shè)計體驗。這樣的設(shè)計手法看起來很有趣，不過有一些設(shè)計會讓人覺得沒有視覺焦點。

不過在用戶看來，這樣的設(shè)計相對而言更加獨特，在大量的常規(guī)設(shè)計中，更容易脫穎而出。不過，這樣的設(shè)計是否提供了足夠的信息量，用來吸引用戶持續(xù)地關(guān)注或者帶來積極的響應(yīng)，還有待驗證。

這一設(shè)計趨勢目前還處于早期階段，不少設(shè)計師在使用它的時候，還在不斷地增刪元素探索更多可能性。設(shè)計師總想打破一兩項規(guī)則，創(chuàng)造一些與眾不同的東西，這一點你我都能理解。在項目中迭代設(shè)計，能夠更加有效地驗證想法。目前已有的設(shè)計案例可能不少還不夠理想，但是在不久的未來，就能找到一套行之有效的完整設(shè)計方案。

chaptr

stephen

rev

3、黑暗系動畫元素

這可能是最近最有趣的設(shè)計趨勢了，將顏色深沉的、黑色調(diào)的動畫融入到網(wǎng)頁設(shè)計中來。從色彩上來說，黑暗的色調(diào)更容易營造出神秘的氛圍，創(chuàng)造更強烈的形式感，吸引用戶的好奇心探索下去。而動畫的加入，則讓整個頁面更加具有獨特的生命力。

這種黑暗色調(diào)的動畫元素有著多樣的玩法，它們可以以不同的元素呈現(xiàn)出來，可以承載多樣的效果。下面的幾個網(wǎng)站都采用了不同的黑暗系設(shè)計元素來完成設(shè)計，這些動畫和黑暗系元素都能夠輕松地吸引用戶去點擊。

雖然這些設(shè)計看起來很酷，但是并不是所有用戶都會買單。而且，這樣明顯是經(jīng)過深度定制的設(shè)計元素，在大屏幕上顯示會很有沖擊力，但是在移動端設(shè)備上顯示就不一定有同樣的效果了。

不過，設(shè)計趨勢就是趨勢，它所帶來的獨特的設(shè)計常常是有條件的，營造特定的情緒，或者創(chuàng)造獨特的流行風尚，很難去要求這些趨勢“無所不能”。

當然，還有一部分黑暗系的設(shè)計單純是為了營造特定的視覺效果而存在。

如果你想在自己的網(wǎng)站中采用這樣的設(shè)計，建議最好確保其中視覺元素的可識別性，也就是保持一定的對比度，確保用戶可以辨別它們的存在。

雖然下面的幾個案例并沒有使用太多的色彩，但是在選擇對比色的時候，最好選取白色以為其他的色彩，來作為強調(diào)。

另外，這一設(shè)計趨勢當中，涉及到的動畫效果，沒有一個采用了復(fù)雜的動效，這確保了動畫內(nèi)容的直觀、易于理解，而且讓整個瀏覽體驗足夠順暢，這也是讓它成為趨勢的關(guān)鍵性因素。

work-play

garden-eight

projects

結(jié)語

這次所總結(jié)的三個趨勢足夠好玩，在接下來到來的開學(xué)季和更遠一些的購物季，這些趨勢應(yīng)該會貢獻不少好的設(shè)計。

【用戶體驗設(shè)計是個細致活兒】

1. 《說句心里話，這5種常見的設(shè)計模式還是挺鬧心的》
2. 《漂亮還不夠！讓你APP的粘度更高的游戲化設(shè)計策略》
3. 《想讓設(shè)計更走心？你得學(xué)會用共情來驅(qū)動設(shè)計》
4. 《原力與你同在！星球大戰(zhàn)給我們的6個關(guān)于用戶體驗的啟示》

原文地址：webdesignerdepot
原文作者：CARRIE COUSINS
優(yōu)設(shè)譯文：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計愛好者也準備了貼心的知識樹專欄。開啟免費自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計導(dǎo)航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航，設(shè)計師必備：http://hao.uisdc.com