近兩年世界設計潮流盤點:避開亮色系,在平面上增加深度

編者按：好的設計的美醜往往標誌著一個網站的質量。雖然緊跟時尚潮流看起來標新立異，但如果運用失當反而會適得其反。縱觀近兩年的設計風格，我們能很明顯地發現亮色系、3D式、動感化的風格逐漸引領風騷而去年那些路過的「坑」又為今年更立體、好看的設計做了鋪墊，下面我們可以來具體看看2017到2018年設計風格到底發生了哪些變化，也助於我們更好地迎接2019！本文整理自 Medium 中原標題為 「Dangerous Design trends 2017」 及 「2018 Design Trends」 的文章。

2017年那些差點成坑的設計：

亮色系

眾所周知色調能傳達不同的情感。在品牌和界面設計中，相比暗色系，明亮些的色調更易攝人眼球並傳達積極情緒。這些大膽的配色搭配閃爍的效果顯得更具活力、有趣，不像淡色那樣怡情放鬆。

2017年是激動人心的一年，很多創業公司和產品如雨後春筍紛紛湧入市場，並力爭各自的一席之地。由於色彩的運用是一條吸睛的捷徑，很容易讓用戶產生代入感，因此暴力美學變得越來越流行。但凡事都有兩面性，這種運用也很可能會干擾用戶體驗。

1. 大塊大塊亮色的運用和拼接很可能造成視覺疲勞，讓人眼花繚亂、不知所云。一旦用戶產生這種體驗就可能會立馬溜掉，然而這種設計風格的初衷不正是為了留住他們嗎，這樣看是不是適得其反了呢？

2. 如果把這種配色放在文本附近可能直接惹人不悅，沒法閱讀下去。亮色會反射更多光線，其造成的效果就像你在看書，然而有人不停用閃光燈照你一樣，即使把內容讀完，也會催生出負面情緒。

1. 在亮色中加入更多暗系色塊或中性色調調和一下；

2. 將霓虹燈一樣的顏色更多地放在細節裡，或用於「提示語」中吸引注意；

3. 在大字標語中使用亮色作為裝飾元素；

4. 將亮色用於強調及交互內容中。

1.  用大片大片的鮮明色彩裝飾主界面，或將其做成背景色；

2. 在一張頁面上使用過多亮色設計；

3. 把文本附近的頁面做得過於花裡胡哨；

4. 別在如圖標、導航之類的有特殊意義的按鍵中使用亮色。

實驗布局

為了吸引流量，設計師們不遺餘力地貢獻著想像力，試圖打破僵硬的布局，將衝突性、混亂的模塊帶入設計版圖中，同時這種實驗性的布局在2017 年也漸趨流行起來。

這個潮流很有趣，也很值得玩味。這種方法在整齊劃一的界面設計中為藝術及多樣風格開闢出了一片海洋。這種實驗性布局的風格就是追求不對稱，無論是圖片、排版還是互動設計可能都是混搭出來的，元素與元素之間貫徹不同的裝飾風格，甚至有可能相互重疊。

1. 現實生活已經夠雜亂無章了，難道看個網站還要繼續經受這種「洗禮」嗎？這種布局的無序性很可能讓用戶找不到想瀏覽的信息，使閱讀體驗強行變差。當真正的閱讀內容被繁冗的板塊遮蔽，合理的排布此時就變得至關重要。

2. 視覺層次對用戶的引導也十分重要。在實驗性布局中，很多浮動元素將界面分割成混亂、散漫的狀態，往往讓人抓不住重點。

1. 在非關鍵內容頁面上可以試用實驗布局增加點格調；

2. 可以在整齊劃一的模塊和結構裡運用非對稱布局作為俏皮的點綴；

3. 將分組表單排列在附近，並保證不同的內容模板間有明顯區隔；

4. 僅在對比明顯及排版足夠寬敞時使用重疊元素。

1. 在內容繁複的模塊裡使用這種布局只會雪上加霜；

2. 如果你的讀者閱讀時間十分有限，就不要為了這種視覺上的衝擊白白給他們增加閱讀難度了；

3. 別把模塊布局得太隨意，像紙屑一樣分布在整個版面上並不好看，一些基本的對齊布局必須要照顧到；

4. 別盲目重疊元素，也別盲目設置交互效果，一定要考慮模板內容中的相關性。

小細節

極簡主義這幾年一直都很流行，不過目前看來這種風向似有轉變，設計師逐漸開始青睞於更詳盡的頁面布局了。當然，這是有原因的：極簡風的設計大大壓縮了提供驚豔感的機會，很難顯得與眾不同，所以要想標新立異必須要在細節上下功夫。

極簡風的整體設計搭配上一些精緻的細節其實是很吸引眼球的。從精巧的導航設計到並無特殊意義的文藝風浮動元素，這些都可以成為設計師下手的空間。同時浮動裝飾圖標、下劃線、幾何圖形等小設計也越來越受歡迎，它們可以幫助讀者在自己喜歡的內容上作標註，充當版面的指南針或分隔符，就像一些評論一樣有用。

1. 細節用得好可以讓人眼前一亮並為讀者起提示作用，但假如排鋪得亂糟糟，為了效果而效果，恐怕只會徒增讀者的反感，讓人覺得喧賓奪主。畢竟最重要的是內容啊，要是讓這些小玩意兒把內容都擋住了，恐怕讀者也不願意再費力瀏覽了。

2. 小細節經常被用作裝飾元素排布於圖像或模板周圍，有時在版面上也會與其他元素重疊，或跟隨光標產生移動效果。這些細節如果吸引了讀者的關注，既可能產生正面影響，也可能有負面印象。因此，我們需要意識到這個問題，有序地處理這種效果，在不影響閱讀的前提下效益最大化。

1. 利用細節設計起到強化閱讀的效果，保證瀏覽順暢；

2. 採用細節為讀者「指路」，引導他們尋找自己想要的內容，或者對不同內容區塊進行隔斷；

3. 用簡潔明了的背景設計平衡細節的繁複感；

4. 可以嘗試在細節設計中添加文本內容，使其與網站的閱讀內容產生相關性，更統一一致。

1. 在本就冗雜不堪的背景上又增加細節的雕刻，可能會讓人覺得很囉嗦；

2. 避免無的放矢，單純無意義的細節堆砌反而顯得整個網站沒有主題；

3. 要是嘗試在主要的用戶導航中突出那些無意義的細節設計，反而顯得更沒意義；

4. 把小細節僅當做錦上添花的東西，別把它看得太重要。

忠心提醒

微型排版看起來更有層次感，也為網站中的板塊與板塊之間留有餘地，至少一眼瀏覽過去不會那麼累。這種小字體也起到了有趣的對比作用，沒有讓人覺得嘈雜的感覺。

但另一方面，微型版面也可能在較為宏大的背景裡被埋沒，很難讓人注意到。同時，由於字體太小，反而可能讓人覺得讀起來太費力，乾脆放棄細看其中的奧妙。所以運用這種版面要格外留心——最好在短句子、小段落中使用。此外，也最好避免使用小於13pT的字體排版。

隨著越來越多的設計師開拓創新，實驗導航模式也逐漸受到追捧。不同的導航樣式可以使網站更有趣，也可以以特殊方式為讀者「引路」。

如果實驗導航模式足夠直觀，讓用戶能夠與之交互並產生愉悅感，那這種設計就是成功的。但也必須意識到一點，即：並不是每種設計和每個觀眾都適合這種風格，測試其可用性至關重要。

在UI設計中，動畫效果能產生無數種可能，這種創造性的轉換界面能增強用戶體驗度，在炫彩的交互中帶來不一樣的感受。

但也要注意，動畫效果太多可能影響頁面的加載速度，除非你對用戶的耐心足夠有把握，不然最好別冒這個險。此外，和細節設計一樣，冗雜的動畫界面反而會吞沒網站的主題，讓用戶找不到想看的內容。

2018的設計風格明顯有了更長足的進步：

3D 靜物場景

近兩年來3D靜物場景的設計越來越多，代表性的3D藝術家有MVSM、Peter Tarka等，Mindsparkle Mag 預測，未來3D靜物場境會越來越受歡迎，特別是在企業的logo和產品展示結合的項目中。

▲Project: Squarespace stillife Author: MVSM

▲Project: Shapes & Forms Author: Peter Tarka

▲Project: Rubik Author: Peter Tarka

▲Project: Audi Q-Riosity Author: Peter Tarka

▲Project: Adobe Government Author: Peter Tarka

更多AR設計

增強現實（Augmented Reality，簡稱AR）不僅在遊戲、影片及App中備受關注，在設計上也有很值得期待的前景，特別是對行動裝置來說，其更是大有一番施展的空間。像DIA Studio所做的，把互動性的3D字型運用在日常生活場景中。

▲Project: DIA Author: DIA

▲Project: DIA Author: DIA

▲Project: DIA Author: DIA

更多3D字型

3D字型將會越來越流行，重點是吸引眼球、打破創意界限。3D技術能進行有效連接，能給受眾留下深刻印象，因此對企業（如耐克）來說越來越重要。當然，我們還會看到更多3D動畫。

▲Project: 3D Type Collection Author: ILOVEDUST.

▲Project: 3D Type Collection Author: ILOVEDUST.

▲Project: 3D Type Collection Author: ILOVEDUST.

▲Project: Typography projects Author: Muokkaa Studio

▲Project: 3D Type Collection Author: ILOVEDUST.

數位化手工藝術

新工具(如平板電腦、stylos等)和新應用程式使使用手繪技術和將其與數位技術融合變得更加容易。在Photoshop中「舊畫筆」的時代已經正式結束了。這種新潮流被稱為「數碼畫筆」，其用途更加廣泛，能夠利用立體維度最終呈現出一種更現代、更美觀的外觀。越來越多的品牌（如Adobe、Nike）正在使用這種技術美化他們的品牌或產品。

▲Project: Paintblast Vol.1 Author: David Milan

▲Project: Paintblast Vol.1 Author: David Milan

▲Project: Adobe Creative Cloud 2018 Author: Ruslan Khasanov

▲ Project: Masked Author: Rik Oostenbroek

▲Project: Paintwaves Author: Ari Weinkle

▲Project: MI Author: Rik Oostenbroek

明豔多彩的漸變效果

近年來，漸變效果重回江湖。預計這一趨勢將會持續下去，而且將變得更加多樣化。未來將會看到更多的漸變效果創新，特別是在使用明亮和生動的顏色與多種紋理結合這一方面。漸變2.0還包含了雙色調的運用。

▲Project: Magic.co Author: Ludmila Schevenko

▲Project: Daily Posters Author: Magdiel Lopez

▲Project: Daily Posters Author: Magdiel Lopez

更多3D、2D結合的動畫

類似先前提到的AR趨勢，預計將會有更多設計師將3D影像與2D平面結合進行創作，例如設計師Baugasm的海報。

▲Project: Daily Posters Author: Baugasm

▲Project: Daily Posters Author: Baugasm

▲Project: Daily Posters Author: Baugasm

更靈活多變的3D呈現

近兩年3D設計經歷了巨大的發展，各方面都趨向完美。人們已經越來越難辨別現實與虛擬之間的差別。今年有很多取材於自然有機的形式以及動作表現，讓3D設計的動畫更吸引人們目光：比如我們在自然界裡看到的液態形式及運動。

▲Project: Nike Vapormax Author: MVSM

▲Project: Blobs with Medium Author: vincent Schwenk

▲Project: Blobs with Medium Author: Vincent Schwenk

▲Project: Covestro DC Author: Vitaly Grossmann

更多精巧的藝術照片

當代攝影和品牌宣傳照將會變得更為大膽、前衛、具解說性且設計精巧。無論這些效果是來自手工工藝或是以3D技術捕捉並可視化，都會讓人印象深刻。

▲Project: Monkifesto Author: Snask

▲Project: Monkifesto Author: Snask

▲Project: Aizone Author: Sagmeister&Walsh

▲Project: Nike AMD Revolution Author: Happy Finish

充滿現代感的復古插畫

現代插畫與復古外觀的結合成為了2018年的一大趨勢。此外，更多精心製作的動畫（講究深度、細微動作等），除了引人注目之外，能述說及強化故事的衝擊性。

▲Project: PSB Refinance Author: Kirill Pavlov

▲Project: Bare Witness Author: Re Agency

▲Project: Inside the Head Author: Sara Svensson

彩色凝膠攝影

彩色凝膠或濾鏡可用來調整閃光燈的色溫；使用不同顏色的濾色片可以得到特別的燈光效果。這種技巧有無限的可能，可以在拍攝時為被拍攝者或物件創造出有趣的光影色彩，當使用兩種或更多不同顏色時，所創造出的美麗顏色及對比效果是無法用photoshop做出來的。

▲Project: Nude Coca-Cola & Nude Pleasure Author: Local Preacher

▲Project: Nude Coca-Cola & Nude Pleasure Author: Local Preacher

▲ Project: Neon Hoodies Author: Tim Tadder

▲ Project: Neon Hoodies Author: Tim Tadder

響應式logo

在滿滿都是行動裝置的世界裡，響應式logo變得越來越重要，也變得越來越具有適應性，它包含了移動、平板電腦、桌面設備等多個版本。就像幾年前響應式的網頁設計一樣，響應式logo現在已然成為必需品了。

▲Project: Responsive Logos Author: Joe Harrison

簡單的半3D logo

正如下面的例子所展示的，標誌設計的新趨勢是將簡化的形狀與半三維的外觀結合起來，利用平滑微妙的顏色遞減，均衡地增加深度效果，最終顏色的整體使用感將變得更加明亮和飽和。

▲Project: Formula 1 Author: Wieden + Kennedy

▲Author & Project: Firefox

▲Author & Project: Firefox

▲Author & Project: Firefox

自定義的藝術字體

定製化的一些古怪字體現在正變成設計師們的心頭好。無論是破碎感的還是扭曲狀的，這種類型的字體設計總會脫穎而出，而這種字體在誕生伊始就天然伴隨著表達感。有一些字體還具有交互性，可以隨著光標滑動產生變化。

▲Project & Author: Jeanne Bataille

▲Project: Vi Novell Author: Atipus

▲Project & Author: Abschluss HSD

網頁設計上更多的3D效果（或更具交互性）

2018年網頁設計的一個主要趨勢是(交互的)3D元素的興起，它具有深度感、運動感、可隨角度的變化產生視覺上的疏離甚至透視效果。3D元素及交互環境使得網站變得非常獨特，當然也提高了美感和用戶體驗。例如，Atacac已經創建了一個交互式未來虛擬實境展示廳，允許用戶在虛擬3D中探索時裝系列。

▲Project & Author: Atacac 2017 Yearbook

▲Project & Author: The Artery

交互式的滑鼠指針

交互式滑鼠指針可以帶來更好的用戶體驗。使用者可以在定製的個人網站裡通過控制滑鼠指針實現互動。例如在Ben Mingo的網站，當點擊菜單欄的時候滑鼠指針會變成磁鐵，十分有趣。我們期待未來能有更多有趣的滑鼠指針設計。

▲Project: Folk Author: Phoenix

▲Credits & Author: Ben Mingo

▲Credits & Author: Walking Men

創意性的網頁加載

在枯燥無味的加載頁面前苦苦等待的日子已經過去了。為什麼不在加載的這段時間裡玩點有趣的呢？

▲Credits & Author: Contemple

▲Credits: Awwwards Conference Design & Development: Adoratorio

Instagram 限時動態

這或許已經不是什麼特別的設計趨勢了，但的確有很多設計師這樣做。自從Instagram限時動態推出之後，這個功能立馬獲得設計師的讚賞及使用，以建立自己的美學品牌、獲得更多的粉絲。今後或許我們可以看到更多Instagram的應用。

3D的手工藝視覺

數字與手工藝的結合成了一種漸熱的創作方式。手工藝作品比起數字作品更有趣及精緻，因此可以用3D製作出手工藝一樣的效果。以下就是Maxim Shkret的雕塑，看起來就象是用紙張手工做出來的一樣。

▲Credits: 3D Art Author: Maxim Shkret

▲Credits: 3D Art Author: Maxim Shkret

▲Credits: 3D Art Author: Maxim Shkret

等距設計及投影

等距投影是在二維空間中直觀地表示三維物體的一種方法，以前主要用於技術和工程圖紙，現在則被運用在設計上，無論是在攝影、插畫、3D設計還是肖像學中，等距設計都正迅速崛起，你也可以期待在今後看到更有創意的作品。

▲Credits: Ultraviolet Break of Day Author: Field.io

▲Project: Abstractions Vol.1 Author: Mohamed Samir

▲ Project: Isometric House Author: Angela Chan

在「平面」設計上增加深度

運用陰影效果，在平面上的物體上增加深度，使其更具立體感，這種方法常見於當對象在不同的圖層的情況。此舉可以增加真實感，同時也可運用銳度和模糊度來凸顯效果。

▲Credits: Nike Promotion Ads Author: Jardson Almeida

▲Credits: Flyknit Lunar 1 & 3 Author: Callum Notman

▲Credits: Flyknit Lunar 1 & 3 Author: Callum Notman

原文連結：http://www.sohu.com/a/217538266_778271

https://medium.muz.li/dangerous-design-trends-2017-c388ce9e735a