設(shè)計(jì)趨勢(shì)會(huì)受到媒體簇宽、技術(shù)勋篓、時(shí)尚的潮流以及可用性的影響。設(shè)計(jì)趨勢(shì)是緩慢魏割、逐漸的滲透到所有設(shè)計(jì)的分支中的譬嚣,消失亦然。 一個(gè)設(shè)計(jì)趨勢(shì)或潮流的生命周期大多不會(huì)超過(guò)1-2年钞它。2017年的設(shè)計(jì)趨勢(shì)會(huì)繼續(xù)16年的材質(zhì)化(materialized)傾向的同時(shí)拜银,增加一些新的改變,這些改變可能已被大家所熟知遭垛,甚至在過(guò)去幾年你也已經(jīng)見過(guò)尼桶。其中影響著趨勢(shì)的,最主要還是Google的Material Design和它經(jīng)歷的一些變化锯仪。
01.半扁平的設(shè)計(jì)
在過(guò)去幾年泵督,扁平化幾乎統(tǒng)治了網(wǎng)頁(yè)設(shè)計(jì),但因?yàn)镸aterial Design的影響庶喜,設(shè)計(jì)走向更加多維度小腊,往空間上發(fā)展。這個(gè)轉(zhuǎn)變從增加輕投影開始久窟,走向“半扁平”的設(shè)計(jì)秩冈。
扁平化是因?yàn)樾枰祥_發(fā)技術(shù),減少設(shè)計(jì)樣式而進(jìn)化出來(lái)的斥扛,扁平仍然流行入问,只是不斷在改進(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)畫越來(lái)越多的運(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.登錄頁(yè)面
2017年翠勉,由于市場(chǎng)營(yíng)銷和更好的針對(duì)目標(biāo)的游客用戶,我們會(huì)看到更多關(guān)于登錄頁(yè)面的出色設(shè)計(jì)霉颠。
06.幾何形狀对碌、圖案、線條和圓圈圈
這個(gè)潮流從2016年開始蒿偎,絕對(duì)會(huì)延續(xù)到2017年朽们。你可以通過(guò)簡(jiǎn)單增加一些富現(xiàn)代感的形狀、平面圖形或一個(gè)柔和的投影來(lái)做好一個(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.大膽的色彩
使用大膽的顏色來(lái)表達(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)頁(yè)通過(guò)這個(gè)視覺創(chuàng)意增加獨(dú)特的元素效果都會(huì)很棒叁丧。無(wú)論是多層的視差或是視頻的視差,都有可能岳瞭。
介紹下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)造力的通過(guò)任何樣式組合不同的層乏矾。我們創(chuàng)建了12個(gè)不同的樣例供你參考,玩得開心喲迁杨。
項(xiàng)目案例:F — mdls
作者:Adencys
09.色彩漸變
顏色漸變是當(dāng)下最流行的趨勢(shì)钻心。從2016年開始迅速蔓延,特別是在Instagram決定改變他們?cè)械膌ogo铅协,改成一個(gè)大漸變后捷沸。從logo到按鈕到圖像的疊加處理,這個(gè)趨勢(shì)無(wú)所不在狐史。
10.動(dòng)端的瀏覽(響應(yīng)式設(shè)計(jì))
2015-2016年移動(dòng)端的設(shè)備大量增加痒给。當(dāng)說(shuō)到瀏覽網(wǎng)頁(yè)時(shí),平板和智能手機(jī)已經(jīng)超過(guò)電腦骏全、手提電腦成為第一選擇苍柏,而且這個(gè)趨勢(shì)還會(huì)繼續(xù)。任何沒(méi)有把響應(yīng)式設(shè)計(jì)做好的網(wǎng)頁(yè)姜贡,都應(yīng)該馬上试吁,是馬上升級(jí)!
---------
項(xiàng)目案例:Responsive Website Animation
作者:Muharrem Senyil
11.個(gè)性化的圖形和插圖
圖片庫(kù)的圖片依然很流行楼咳,但有一個(gè)新的趨勢(shì)在2016年有明顯的增長(zhǎng)熄捍,2017年會(huì)依然保持的:用自己定制的圖形和插畫烛恤。如果你想自己的網(wǎng)站有一個(gè)獨(dú)特的形象,讓用戶可以記住余耽,聯(lián)系一個(gè)數(shù)字插畫設(shè)計(jì)師吧缚柏。少點(diǎn)圖庫(kù),更多的原創(chuàng)碟贾,獨(dú)特的圖像船惨。
--------------------------
傳送門:Margarita Mar
12.創(chuàng)造性地使用中立空間和柵格
在前幾年,網(wǎng)頁(yè)設(shè)計(jì)很講究列和網(wǎng)格缕陕。但在2016年粱锐,我們看到相當(dāng)多轉(zhuǎn)移到不規(guī)則的圖層和更現(xiàn)代的設(shè)計(jì)。
13.講故事
網(wǎng)站現(xiàn)在都通過(guò)講故事的方式來(lái)說(shuō)服用戶留在這個(gè)頁(yè)面扛邑。比起平鋪直敘的文字怜浅,人們從故事中受到的感染會(huì)更多。
14.延遲加載
長(zhǎng)網(wǎng)頁(yè)的的圖片都通過(guò)延遲加載的方式來(lái)進(jìn)行蔬崩,在需要的時(shí)候才加載信息恶座。
15.分割的內(nèi)容
在響應(yīng)式的網(wǎng)頁(yè)設(shè)計(jì)里,分割的內(nèi)容變得越來(lái)越流行沥阳,它把屏幕分割成兩部分或者更多的區(qū)域跨琳。分割的做法能在一個(gè)頁(yè)面里給用戶傳達(dá)幾部分同等重要的信息。這個(gè)趨勢(shì)在2015年后期開始流行桐罕,在2017年將運(yùn)用到更多的網(wǎng)站上脉让。
16.全屏展示
當(dāng)全屏的內(nèi)容做好響應(yīng)式設(shè)計(jì)后,再也沒(méi)有必要為了填一個(gè)表格而跳轉(zhuǎn)頁(yè)面功炮,在當(dāng)前頁(yè)面完全可以操作完成并有更好的體驗(yàn)溅潜。
17.視頻無(wú)處不在
視頻內(nèi)容在去年有大量的增長(zhǎng),人們需要高清質(zhì)量的視頻內(nèi)容來(lái)講好一個(gè)故事薪伏。而網(wǎng)站上的視頻可以是短的滚澜、重復(fù)播放的,通過(guò)展示產(chǎn)品或拍成電影的內(nèi)容讓用戶對(duì)故事保持興趣嫁怀。
----------
項(xiàng)目案例:Hillsong
作者:Ruslan Siiz
18.SEO搜索引擎優(yōu)化很重要
搜索引擎優(yōu)化對(duì)于網(wǎng)站來(lái)說(shuō)很重要设捐,如果一個(gè)很漂亮的網(wǎng)站卻在SEO上沒(méi)做好,就很難被用戶搜到塘淑。
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ì)了,但在過(guò)去幾年又流行起來(lái)棚愤,在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ì)反肋,通過(guò)獨(dú)特的重復(fù)方式可以使作品很出彩。這種原創(chuàng)的趨勢(shì)可以被用到logo的展示里踏施。
----------------------------
傳送門:Nick Edlin;Stanislav Aleynikov;Lucas Gil-Turner
21.8. 動(dòng)起來(lái)的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)造出來(lái)的對(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)域來(lái)說(shuō)都非常重要。字體的字號(hào)大小和粗細(xì)可以輕易的暗示出文字的重要程度虽填,當(dāng)你設(shè)計(jì)文本的時(shí)候一定要記住丁恭。還有另一點(diǎn),通過(guò)文字的位置和顏色變化斋日,也可以把文字的視覺層次拉開牲览。
22.4. 很小很小很小很小反正就是很小的字體
超小字體可以通過(guò)在顏色或圖像中創(chuàng)造一個(gè)對(duì)比來(lái)讓小文字的閱讀性更好。動(dòng)效的辦法也能幫助小文字的閱讀恶守。
----------------------------
傳送門:Slava Oleinik;Bahaa Samir;Witty Digital
---------
項(xiàng)目案例:Baugasm Series - Pack 4
作者:Vasjen Katro
22.5. 字體的動(dòng)畫
動(dòng)畫無(wú)處不在第献,連字體也不例外。柔滑的動(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