爆火｜2017設計師不能不知道的設計趨勢指南！

原文：

作者： Loredana Papp-Dinea, Mihai Baldean

翻譯者：騰訊視頻Tencent Video Design Team | Ning

本文已獲得作者對「騰訊視頻TVDesign」譯文的正式授權

每年我們在設計上都會學到新東西，2016年也不例外。我們在去年發布的關於設計趨勢的文章非常成功，所以決定再預測一波2017年的設計趨勢，馬上開始！

設計趨勢會受到媒體、技術、時尚的潮流以及可用性的影響。設計趨勢是緩慢、逐漸的滲透到所有設計的分支中的，消失亦然。 一個設計趨勢或潮流的生命周期大多不會超過1-2年。2017年的設計趨勢會繼續16年的材質化（materialized）傾向的同時，增加一些新的改變，這些改變可能已被大家所熟知，甚至在過去幾年你也已經見過。其中影響著趨勢的，最主要還是Google的Material Design和它經歷的一些變化。

01. 半扁平的設計

在過去幾年，扁平化幾乎統治了網頁設計，但因為Material Design的影響，設計走向更加多維度，往空間上發展。這個轉變從增加輕投影開始，走向「半扁平」的設計。

扁平化是因為需要更符合開發技術，減少設計樣式而進化出來的，扁平仍然流行，只是不斷在改進。

柔和平滑的漸變投影既為扁平化設計增加了深度和豐富性，又不會破壞扁平設計的感覺。這是扁平趨勢的一個新做法，並且在2017年會繼續進化。

案例項目: Resourсe | UI/UX Tool for Web Services

作者: Ruslan Latypov; LS Graphics; Anton Mishin; Valery Gurkov

Project: Listener's Playlist

Author: Anzi .

02. 動態攝影（Cinemagraphs）

動態照片不是指我們在web上常見的gif圖。他是指只有少數元素移動的靜態圖片。這個技術使得一個簡單的圖片更加生動。

03. 更多3D效果

3D絕對在帶領著潮流，我們很快就會看到它對所有設計領域的影響。隨著VR/AR迅速在整個行業進行的革命，這一領域會發展得像飛鏢那麼快。

案例項目: LUV.IT

作者: AARON MARTINEZ

案例項目: Open Annual Awards

作者: TAVO

案例項目: Air Max '17

作者: Berd -; Lukas Vojir; mark haley; Oliver Harris; Jeff Thomson

項目案例: NIKE F.C. | 3D Golden balls in the real world

作者: TAVO

項目案例: Better You Brand

作者: Craig Minchington; Satellite Office; Brand Nu

04. 動畫

動畫越來越多的運用在web設計上，它可能是gif、svg、WebGL CSS 或視頻格式。動畫絕對是web設計界去年最大的流行趨勢，所以抉擇是否要用動畫的時候不用猶豫。

項目案例: Nickelodeon Kids Pick The President

作者: JeanPierre Le Roux

項目案例: AR Virtual Fitness Coach App | AR 虛擬健身教練

作者: 曲 植Daz_Qu

---------

項目案例: UI Collection in Motion

作者: Minh Pham

---------

項目案例: ZH OURO- Rio 2016

作者: Leo Natsume; Guilherme Maron

05. 登錄頁面

2017年，由於市場營銷和更好的針對目標的遊客用戶，我們會看到更多關於登錄頁面的出色設計。

06. 幾何形狀、圖案、線條和圓圈圈

這個潮流從2016年開始，絕對會延續到2017年。你可以通過簡單增加一些富現代感的形狀、平面圖形或一個柔和的投影來做好一個網站。

項目案例: Pfizer - Active and 50+ for The New York Times

作者: justyna stasik; Vladimir Marchukov

---------

項目案例: DRAP.agency Branding

Mireldy Design; Filip Gjurin

07. 大膽的色彩

使用大膽的顏色來表達自己的觀點。Material design和扁平化設計和大膽的色彩真是超級搭。使用Google提供的色板或自己搭配使用都可以的。

---------

Project: Edris - Logo Designed by MiLo

---------

項目案例: Rendered — Responsive Demo Website for Adobe

Serge Vasil

項目案例: b2mach

作者s: Natalia Żerko; Kuba Enzowski; Kommunikat Studio

08. 有創意的滾動和視差

在任何網頁通過這個視覺創意增加獨特的元素效果都會很棒。無論是多層的視差或是視頻的視差，都有可能。

介紹下D.ex Multilayer Parallax這個產品。它是在 Loredana Papp和Mihai Baldean的帶領下由Milothemes公司開發。在Envato Market / codecanyon.net上可以購買到。

D.ex Multilayer Parallax是一個Wordpress的插件，你可以使用它創造非常漂亮的多層視差區域。你還可以有創造力的通過任何樣式組合不同的層。我們創建了12個不同的樣例供你參考，玩得開心喲。

購買 D.ex Multilayer Parallax for WordPress

---------

項目案例: F — mdls

作者: Adencys

09.

色彩漸變

顏色漸變是當下最流行的趨勢。從2016年開始迅速蔓延，特別是在Instagram決定改變他們原有的logo，改成一個大漸變后。從logo到按鈕到圖像的疊加處理，這個趨勢無所不在。

2015-2016年移動端的設備大量增加。當說到瀏覽網頁時，平板和智能手機已經超過電腦、手提電腦成為第一選擇，而且這個趨勢還會繼續。任何沒有把響應式設計做好的網頁，都應該馬上，是馬上升級！

---------

項目案例: Responsive Website Animation

作者: Muharrem Senyil

11. 個性化的圖形和插圖

圖片庫的圖片依然很流行，但有一個新的趨勢在2016年有明顯的增長，2017年會依然保持的：用自己定製的圖形和插畫。如果你想自己的網站有一個獨特的形象，讓用戶可以記住，聯繫一個數字插畫設計師吧。少點圖庫，更多的原創，獨特的圖像。

傳送門: Margarita Mar

12. 創造性地使用中立空間和柵格

在前幾年，網頁設計很講究列和網格。但在2016年，我們看到相當多轉移到不規則的圖層和更現代的設計。

13. 講故事

網站現在都通過講故事的方式來說服用戶留在這個頁面。比起平鋪直敘的文字，人們從故事中受到的感染會更多。

14. 延遲載入

長網頁的的圖片都通過延遲載入的方式來進行，在需要的時候才載入信息。

15. 分割的內容

在響應式的網頁設計里，分割的內容變得越來越流行，它把屏幕分割成兩部分或者更多的區域。分割的做法能在一個頁面里給用戶傳達幾部分同等重要的信息。這個趨勢在2015年後期開始流行，在2017年將運用到更多的網站上。

16. 全屏展示

當全屏的內容做好響應式設計后，再也沒有必要為了填一個表格而跳轉頁面，在當前頁面完全可以操作完成並有更好的體驗。

17. 視頻無處不在

視頻內容在去年有大量的增長，人們需要高清質量的視頻內容來講好一個故事。而網站上的視頻可以是短的、重複播放的，通過展示產品或拍成電影的內容讓用戶對故事保持興趣。

項目案例: Hillsong

作者: Ruslan Siiz

18. SEO搜索引擎優化很重要

搜索引擎優化對於網站來說很重要，如果一個很漂亮的網站卻在SEO上沒做好，就很難被用戶搜到。

19. 隱藏的導航

對於漢堡包菜單按鈕難以被用戶發現這個觀點，有很多贊成和反對的討論。但有一點是肯定的，這個趨勢還是會存在，人們終有一天會習慣它。

20. 微小的設計細節

對於細節設計的專註真的很重要。例如導航的圓點的設計，角落的logo 設計，都需要專註在細小的細節上，才能把工作做好。

項目案例: Barometa - Next-generation Job Platform

作者: Netguru Team; Łukasz Pachytel

傳送門: Konstantin Zhenchur

21. Logo設計趨勢

21.1. 極簡主義

隨著所有大品牌都走更簡單、極簡的設計，這個趨勢會持續的流行。

傳送門: Mingo Ideas Up

21.2. 手繪

手繪已經流行了好幾年了，它很趕時髦。這種手繪的設計用在咖啡館、理髮館和藝術工藝館很合適。

查看這個藝術家的設計: Sam Healy

21.3. 負型

這是一個很老的趨勢了，但在過去幾年又流行起來，在2017年只會繼續增長，值得繼續留意。

21.4. 裁剪

這個趨勢就是為了展示logo是怎麼回事。

21.5. 幾何化

這個趨勢很老派了，但是是永遠經典的做法。

21.6. 線條藝術

這個趨勢在新的現代的商業運用中很流行。

傳送門: Sam Healy; Andrea Schlaffer; Jacek Janiczak

21.7. 圖案

圖案是一個新的趨勢，通過獨特的重複方式可以使作品很出彩。這種原創的趨勢可以被用到logo的展示里。

傳送門: Nick Edlin; Stanislav Aleynikov; Lucas Gil-Turner

21.8. 動起來的Logo

動效設計在今年真是超流行，我們可以看到它在所有領域設計的應用。

傳送門: Javier Miranda Nieto; The Woork Co

21.9. 復古風

復古仍然很流行。儘管這個趨勢已經流行一段時間了，仍然還有很多可以探索的地方。

傳送門: Роман Додонов; Mingo Ideas Up; Will Try Further

21.10. 色彩漸變

顏色漸變今年真是到處都能看到哇，在logo中也不例外。

21.11. Logo中的插畫

插畫是賦予logo獨特和富有人情味的方式，今年越發的流行 。

傳送門: Bodea Daniel; Jacek Janiczak

21.12. Logo里的攝影

現在很流行在字體里混合圖像使用。它的效果很好，創造出來的對比也很贊。

22. 字體設計趨勢

22.1. 又大又粗&漂亮的字體設計

字體大概是創造出色設計的最關鍵部分了。今年流行的將是大的粗體的大標題。

傳送門： Alexander Laguta

傳送門：Quim Marin

---------

項目案例: Baugasm Series - Pack 4

作者: Vasjen Katro

22.2. 字體中的色彩漸變

色彩漸變絕對還是流行的主要因素，字體設計里也不例外。

22.3. 視覺層次

字體層次對應所有設計領域來說都非常重要。字體的字型大小大小和粗細可以輕易的暗示出文字的重要程度，當你設計文本的時候一定要記住。還有另一點，通過文字的位置和顏色變化，也可以把文字的視覺層次拉開。

超小字體可以通過在顏色或圖像中創造一個對比來讓小文字的閱讀性更好。動效的辦法也能幫助小文字的閱讀。

傳送門：Slava Oleinik; Bahaa Samir; Witty Digital

---------

22.5. 字體的動畫

動畫無處不在，連字體也不例外。柔滑的動畫永遠都不會錯。

項目案例: Gotham Pro Animated Typeface Free

作者s: Yaroslav Kononov; Daria Zalyatskaya; Nastya Sokha; Katerina Pavlenko; Max Kravchenko;Nadezhda Shymchenko; Kate Nizhegorodova

22.6. 當字體遇上攝影

字體和攝影的組合通常可以達到很好的視覺效果。以下就是一些例子。

傳送門：Quim Marin

22.7. 幾何形狀與字體

幾何形狀也可以與字體結合噠~結果還會很現代。

傳送門：Quim Marin

傳送門：∆ Studio—JQ ∆

22.8. 字體搭配

兩種或兩種以上的字體組合使用在今年還很流行。看下以下兩個案例，裡面都是些有趣的搭配。

Typography: Google Fonts Combinations - Volume 1

Typography: Google Fonts Combinations - Volume 2

-------- END --------

翻譯者：Ning @騰訊視頻TVD(Tencent Video Design Team)

希望通過翻譯國外設計圈比較優質的內容，讓國內設計小夥伴都能第一時間接觸到全球設計界的一手資訊，一起討論