
今天湖湖給大家分享的是Behance上的一篇2017設(shè)計(jì)趨勢(shì)總結(jié),內(nèi)容不僅全面,案例也十分精良 ,完全可以作為一個(gè)設(shè)計(jì)靈感庫,時(shí)不時(shí)拿出來看看也是極好的!
設(shè)計(jì)趨勢(shì)會(huì)受到媒體、技術(shù)、時(shí)尚的潮流以及可用性的影響。設(shè)計(jì)趨勢(shì)是緩慢、逐漸的滲透到所有設(shè)計(jì)的分支中的,消失亦然。 一個(gè)設(shè)計(jì)趨勢(shì)或潮流的生命周期大多不會(huì)超過1-2年。2017年的設(shè)計(jì)趨勢(shì)會(huì)繼續(xù)16年的材質(zhì)化(materialized)傾向的同時(shí),增加一些新的改變,這些改變可能已被大家所熟知,甚至在過去幾年你也已經(jīng)見過。其中影響著趨勢(shì)的,最主要還是Google的Material Design和它經(jīng)歷的一些變化。
01.半扁平的設(shè)計(jì)
在過去幾年,扁平化幾乎統(tǒng)治了網(wǎng)頁設(shè)計(jì),但因?yàn)镸aterial Design的影響,設(shè)計(jì)走向更加多維度,往空間上發(fā)展。這個(gè)轉(zhuǎn)變從增加輕投影開始,走向“半扁平”的設(shè)計(jì)。
扁平化是因?yàn)樾枰祥_發(fā)技術(shù),減少設(shè)計(jì)樣式而進(jìn)化出來的,扁平仍然流行,只是不斷在改進(jìn)。
柔和平滑的漸變投影既為扁平化設(shè)計(jì)增加了深度和豐富性,又不會(huì)破壞扁平設(shè)計(jì)的感覺。這是扁平趨勢(shì)的一個(gè)新做法,并且在2017年會(huì)繼續(xù)進(jìn)化。

----------
案例項(xiàng)目:Resourсe | UI/UX Tool for Web Services
作者:Ruslan Latypov;LS Graphics;Anton Mishin;Valery Gurkov


----------
Project:Listener's Playlist
Author:Anzi .
02.動(dòng)態(tài)攝影(Cinemagraphs)
動(dòng)態(tài)照片不是指我們?cè)趙eb上常見的gif圖。他是指只有少數(shù)元素移動(dòng)的靜態(tài)圖片。這個(gè)技術(shù)使得一個(gè)簡(jiǎn)單的圖片更加生動(dòng)。




03.更多3D效果
3D絕對(duì)在帶領(lǐng)著潮流,我們很快就會(huì)看到它對(duì)所有設(shè)計(jì)領(lǐng)域的影響。隨著VR/AR迅速在整個(gè)行業(yè)進(jìn)行的革命,這一領(lǐng)域會(huì)發(fā)展得像飛鏢那么快。

----------
案例項(xiàng)目:LUV.IT
作者:AARON MARTINEZ

----------
案例項(xiàng)目:Open Annual Awards
作者:TAVO

-----------
案例項(xiàng)目:Air Max '17
作者:Berd -;Lukas Vojir;mark haley;Oliver Harris;Jeff Thomson

----------
項(xiàng)目案例:NIKE F.C. | 3D Golden balls in the real world
作者:TAVO

----------
項(xiàng)目案例:Better You Brand
作者:Craig Minchington;Satellite Office;Brand Nu
04.動(dòng)畫
動(dòng)畫越來越多的運(yùn)用在web設(shè)計(jì)上,它可能是gif、svg、WebGL CSS 或視頻格式。動(dòng)畫絕對(duì)是web設(shè)計(jì)界去年最大的流行趨勢(shì),所以抉擇是否要用動(dòng)畫的時(shí)候不用猶豫。

----------

----------
項(xiàng)目案例:AR Virtual Fitness Coach App | AR 虛擬健身教練
作者:曲 植Daz_Qu

---------
項(xiàng)目案例:UI Collection in Motion
作者:Minh Pham

---------
項(xiàng)目案例:ZH OURO- Rio 2016
作者:Leo Natsume;Guilherme Maron
05.登錄頁面
2017年,由于市場(chǎng)營(yíng)銷和更好的針對(duì)目標(biāo)的游客用戶,我們會(huì)看到更多關(guān)于登錄頁面的出色設(shè)計(jì)。
06.幾何形狀、圖案、線條和圓圈圈
這個(gè)潮流從2016年開始,絕對(duì)會(huì)延續(xù)到2017年。你可以通過簡(jiǎn)單增加一些富現(xiàn)代感的形狀、平面圖形或一個(gè)柔和的投影來做好一個(gè)網(wǎng)站。

----------
項(xiàng)目案例:Pfizer - Active and 50+ for The New York Times
作者:justyna stasik;Vladimir Marchukov

---------
項(xiàng)目案例:DRAP.agency Branding
Mireldy Design;Filip Gjurin

07.大膽的色彩
使用大膽的顏色來表達(dá)自己的觀點(diǎn)。Material design和扁平化設(shè)計(jì)和大膽的色彩真是超級(jí)搭。使用Google提供的色板或自己搭配使用都可以的。


---------
Project:Edris - Logo Designed by MiLo
Author:Loredana Papp-Dinea;Mihai Baldean;Milo Themes

---------
項(xiàng)目案例:Rendered — Responsive Demo Website for Adobe
Serge Vasil

----------
項(xiàng)目案例:b2mach
作者s:Natalia ?erko;Kuba Enzowski;Kommunikat Studio
08.有創(chuàng)意的滾動(dòng)和視差
在任何網(wǎng)頁通過這個(gè)視覺創(chuàng)意增加獨(dú)特的元素效果都會(huì)很棒。無論是多層的視差或是視頻的視差,都有可能。
介紹下D.ex Multilayer Parallax這個(gè)產(chǎn)品。它是在 Loredana Papp和Mihai Baldean的帶領(lǐng)下由Milothemes公司開發(fā)。在Envato Market / codecanyon.net上可以購(gòu)買到。

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

項(xiàng)目案例:F — mdls
作者:Adencys
09.色彩漸變
顏色漸變是當(dāng)下最流行的趨勢(shì)。從2016年開始迅速蔓延,特別是在Instagram決定改變他們?cè)械膌ogo,改成一個(gè)大漸變后。從logo到按鈕到圖像的疊加處理,這個(gè)趨勢(shì)無所不在。

10.動(dòng)端的瀏覽(響應(yīng)式設(shè)計(jì))
2015-2016年移動(dòng)端的設(shè)備大量增加。當(dāng)說到瀏覽網(wǎng)頁時(shí),平板和智能手機(jī)已經(jīng)超過電腦、手提電腦成為第一選擇,而且這個(gè)趨勢(shì)還會(huì)繼續(xù)。任何沒有把響應(yīng)式設(shè)計(jì)做好的網(wǎng)頁,都應(yīng)該馬上,是馬上升級(jí)!

---------
項(xiàng)目案例:Responsive Website Animation
作者:Muharrem Senyil
11.個(gè)性化的圖形和插圖
圖片庫的圖片依然很流行,但有一個(gè)新的趨勢(shì)在2016年有明顯的增長(zhǎng),2017年會(huì)依然保持的:用自己定制的圖形和插畫。如果你想自己的網(wǎng)站有一個(gè)獨(dú)特的形象,讓用戶可以記住,聯(lián)系一個(gè)數(shù)字插畫設(shè)計(jì)師吧。少點(diǎn)圖庫,更多的原創(chuàng),獨(dú)特的圖像。

--------------------------
傳送門:Margarita Mar

12.創(chuàng)造性地使用中立空間和柵格
在前幾年,網(wǎng)頁設(shè)計(jì)很講究列和網(wǎng)格。但在2016年,我們看到相當(dāng)多轉(zhuǎn)移到不規(guī)則的圖層和更現(xiàn)代的設(shè)計(jì)。

13.講故事
網(wǎng)站現(xiàn)在都通過講故事的方式來說服用戶留在這個(gè)頁面。比起平鋪直敘的文字,人們從故事中受到的感染會(huì)更多。
14.延遲加載
長(zhǎng)網(wǎng)頁的的圖片都通過延遲加載的方式來進(jìn)行,在需要的時(shí)候才加載信息。

15.分割的內(nèi)容
在響應(yīng)式的網(wǎng)頁設(shè)計(jì)里,分割的內(nèi)容變得越來越流行,它把屏幕分割成兩部分或者更多的區(qū)域。分割的做法能在一個(gè)頁面里給用戶傳達(dá)幾部分同等重要的信息。這個(gè)趨勢(shì)在2015年后期開始流行,在2017年將運(yùn)用到更多的網(wǎng)站上。

16.全屏展示
當(dāng)全屏的內(nèi)容做好響應(yīng)式設(shè)計(jì)后,再也沒有必要為了填一個(gè)表格而跳轉(zhuǎn)頁面,在當(dāng)前頁面完全可以操作完成并有更好的體驗(yàn)。

17.視頻無處不在
視頻內(nèi)容在去年有大量的增長(zhǎng),人們需要高清質(zhì)量的視頻內(nèi)容來講好一個(gè)故事。而網(wǎng)站上的視頻可以是短的、重復(fù)播放的,通過展示產(chǎn)品或拍成電影的內(nèi)容讓用戶對(duì)故事保持興趣。

----------
項(xiàng)目案例:Hillsong
作者:Ruslan Siiz
18.SEO搜索引擎優(yōu)化很重要
搜索引擎優(yōu)化對(duì)于網(wǎng)站來說很重要,如果一個(gè)很漂亮的網(wǎng)站卻在SEO上沒做好,就很難被用戶搜到。

19.隱藏的導(dǎo)航
對(duì)于漢堡包菜單按鈕難以被用戶發(fā)現(xiàn)這個(gè)觀點(diǎn),有很多贊成和反對(duì)的討論。但有一點(diǎn)是肯定的,這個(gè)趨勢(shì)還是會(huì)存在,人們終有一天會(huì)習(xí)慣它。

20.微小的設(shè)計(jì)細(xì)節(jié)
對(duì)于細(xì)節(jié)設(shè)計(jì)的專注真的很重要。例如導(dǎo)航的圓點(diǎn)的設(shè)計(jì),角落的logo 設(shè)計(jì),都需要專注在細(xì)小的細(xì)節(jié)上,才能把工作做好。

----------
項(xiàng)目案例:Barometa - Next-generation Job Platform
作者:Netguru Team;?ukasz Pachytel

------------------
傳送門:Konstantin Zhenchur
21.Logo設(shè)計(jì)趨勢(shì)
21.1. 極簡(jiǎn)主義
隨著所有大品牌都走更簡(jiǎn)單、極簡(jiǎn)的設(shè)計(jì),這個(gè)趨勢(shì)會(huì)持續(xù)的流行。

---------------------------
傳送門:Mingo Ideas Up
21.2. 手繪
手繪已經(jīng)流行了好幾年了,它很趕時(shí)髦。這種手繪的設(shè)計(jì)用在咖啡館、理發(fā)館和藝術(shù)工藝館很合適。

----------------------------
查看這個(gè)藝術(shù)家的設(shè)計(jì):Sam Healy
21.3. 負(fù)型
這是一個(gè)很老的趨勢(shì)了,但在過去幾年又流行起來,在2017年只會(huì)繼續(xù)增長(zhǎng),值得繼續(xù)留意。

21.4. 裁剪
這個(gè)趨勢(shì)就是為了展示logo是怎么回事。

21.5. 幾何化
這個(gè)趨勢(shì)很老派了,但是是永遠(yuǎn)經(jīng)典的做法。

----------------------------
傳送門:Mingo Ideas Up
21.6. 線條藝術(shù)
這個(gè)趨勢(shì)在新的現(xiàn)代的商業(yè)運(yùn)用中很流行。

---------------------------------------
傳送門:Sam Healy;Andrea Schlaffer;Jacek Janiczak
21.7. 圖案
圖案是一個(gè)新的趨勢(shì),通過獨(dú)特的重復(fù)方式可以使作品很出彩。這種原創(chuàng)的趨勢(shì)可以被用到logo的展示里。

----------------------------
傳送門:Nick Edlin;Stanislav Aleynikov;Lucas Gil-Turner
21.8. 動(dòng)起來的Logo
動(dòng)效設(shè)計(jì)在今年真是超流行,我們可以看到它在所有領(lǐng)域設(shè)計(jì)的應(yīng)用。



----------------------------
傳送門:Javier Miranda Nieto;The Woork Co
21.9. 復(fù)古風(fēng)
復(fù)古仍然很流行。盡管這個(gè)趨勢(shì)已經(jīng)流行一段時(shí)間了,仍然還有很多可以探索的地方。

----------------------------
傳送門:Роман Додонов;Mingo Ideas Up;Will Try Further
21.10. 色彩漸變
顏色漸變今年真是到處都能看到哇,在logo中也不例外。

----------------------------
21.11. Logo中的插畫
插畫是賦予logo獨(dú)特和富有人情味的方式,今年越發(fā)的流行 。

---------------------------------------
傳送門:Bodea Daniel;Jacek Janiczak
21.12. Logo里的攝影
現(xiàn)在很流行在字體里混合圖像使用。它的效果很好,創(chuàng)造出來的對(duì)比也很贊。

22.字體設(shè)計(jì)趨勢(shì)
22.1. 又大又粗&漂亮的字體設(shè)計(jì)
字體大概是創(chuàng)造出色設(shè)計(jì)的最關(guān)鍵部分了。今年流行的將是大的粗體的大標(biāo)題。


---------------------------
傳送門:Alexander Laguta
--------------------------

傳送門:Quim Marin

---------
項(xiàng)目案例:Baugasm Series - Pack 4
作者:Vasjen Katro
22.2. 字體中的色彩漸變
色彩漸變絕對(duì)還是流行的主要因素,字體設(shè)計(jì)里也不例外。

----------------------------
22.3. 視覺層次
字體層次對(duì)應(yīng)所有設(shè)計(jì)領(lǐng)域來說都非常重要。字體的字號(hào)大小和粗細(xì)可以輕易的暗示出文字的重要程度,當(dāng)你設(shè)計(jì)文本的時(shí)候一定要記住。還有另一點(diǎn),通過文字的位置和顏色變化,也可以把文字的視覺層次拉開。

22.4. 很小很小很小很小反正就是很小的字體
超小字體可以通過在顏色或圖像中創(chuàng)造一個(gè)對(duì)比來讓小文字的閱讀性更好。動(dòng)效的辦法也能幫助小文字的閱讀。



----------------------------
傳送門:Slava Oleinik;Bahaa Samir;Witty Digital

---------
項(xiàng)目案例:Baugasm Series - Pack 4
作者:Vasjen Katro
22.5. 字體的動(dòng)畫
動(dòng)畫無處不在,連字體也不例外。柔滑的動(dòng)畫永遠(yuǎn)都不會(huì)錯(cuò)。

----------
項(xiàng)目案例: Gotham Pro Animated Typeface Free
作者s:Yaroslav Kononov;Daria Zalyatskaya;Nastya Sokha;Katerina Pavlenko;Max Kravchenko;Nadezhda Shymchenko;Kate Nizhegorodova
22.6. 當(dāng)字體遇上攝影
字體和攝影的組合通??梢赃_(dá)到很好的視覺效果。以下就是一些例子。


--------------------------
傳送門:Quim Marin
22.7. 幾何形狀與字體
幾何形狀也可以與字體結(jié)合噠~結(jié)果還會(huì)很現(xiàn)代。


---------------------------
傳送門:Quim Marin

---------------------------
傳送門:? Studio—JQ ?
22.8. 字體搭配
兩種或兩種以上的字體組合使用在今年還很流行??聪乱韵聝蓚€(gè)案例,里面都是些有趣的搭配。
Typography: Google Fonts Combinations - Volume 1
Typography: Google Fonts Combinations - Volume 2

原文:https://www.behance.net/gallery/47810259/2017-Design-Trends-Guide
作者:Loredana Papp-Dinea,Mihai Baldean
翻譯者:騰訊視頻Tencent Video Design Team | ?Ning