今天湖湖給大家分享的是Behance上的一篇2017設(shè)計(jì)趨勢總結(jié),內(nèi)容不僅全面滤愕,案例也十分精良 温算,完全可以作為一個(gè)設(shè)計(jì)靈感庫,時(shí)不時(shí)拿出來看看也是極好的间影!
設(shè)計(jì)趨勢會(huì)受到媒體注竿、技術(shù)、時(shí)尚的潮流以及可用性的影響。設(shè)計(jì)趨勢是緩慢巩割、逐漸的滲透到所有設(shè)計(jì)的分支中的裙顽,消失亦然。 一個(gè)設(shè)計(jì)趨勢或潮流的生命周期大多不會(huì)超過1-2年宣谈。2017年的設(shè)計(jì)趨勢會(huì)繼續(xù)16年的材質(zhì)化(materialized)傾向的同時(shí)愈犹,增加一些新的改變,這些改變可能已被大家所熟知闻丑,甚至在過去幾年你也已經(jīng)見過甘萧。其中影響著趨勢的,最主要還是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ì)的感覺径筏。這是扁平趨勢的一個(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)照片不是指我們在web上常見的gif圖滋恬。他是指只有少數(shù)元素移動(dòng)的靜態(tài)圖片。這個(gè)技術(shù)使得一個(gè)簡單的圖片更加生動(dòng)抱究。
03.更多3D效果
3D絕對在帶領(lǐng)著潮流恢氯,我們很快就會(huì)看到它對所有設(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)畫絕對是web設(shè)計(jì)界去年最大的流行趨勢州丹,所以抉擇是否要用動(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年杂彭,由于市場營銷和更好的針對目標(biāo)的游客用戶,我們會(huì)看到更多關(guān)于登錄頁面的出色設(shè)計(jì)吓揪。
06.幾何形狀亲怠、圖案、線條和圓圈圈
這個(gè)潮流從2016年開始柠辞,絕對會(huì)延續(xù)到2017年团秽。你可以通過簡單增加一些富現(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ì)和大膽的色彩真是超級搭。使用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上可以購買到冬阳。
D.ex Multilayer Parallax是一個(gè)Wordpress的插件蛤虐,你可以使用它創(chuàng)造非常漂亮的多層視差區(qū)域。你還可以有創(chuàng)造力的通過任何樣式組合不同的層肝陪。我們創(chuàng)建了12個(gè)不同的樣例供你參考驳庭,玩得開心喲。
項(xiàng)目案例:F — mdls
作者:Adencys
09.色彩漸變
顏色漸變是當(dāng)下最流行的趨勢氯窍。從2016年開始迅速蔓延饲常,特別是在Instagram決定改變他們原有的logo,改成一個(gè)大漸變后荞驴。從logo到按鈕到圖像的疊加處理不皆,這個(gè)趨勢無所不在。
10.動(dòng)端的瀏覽(響應(yīng)式設(shè)計(jì))
2015-2016年移動(dòng)端的設(shè)備大量增加熊楼。當(dāng)說到瀏覽網(wǎng)頁時(shí),平板和智能手機(jī)已經(jīng)超過電腦能犯、手提電腦成為第一選擇鲫骗,而且這個(gè)趨勢還會(huì)繼續(xù)。任何沒有把響應(yīng)式設(shè)計(jì)做好的網(wǎng)頁踩晶,都應(yīng)該馬上执泰,是馬上升級!
---------
項(xiàng)目案例:Responsive Website Animation
作者:Muharrem Senyil
11.個(gè)性化的圖形和插圖
圖片庫的圖片依然很流行渡蜻,但有一個(gè)新的趨勢在2016年有明顯的增長术吝,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.延遲加載
長網(wǎng)頁的的圖片都通過延遲加載的方式來進(jìn)行筝蚕,在需要的時(shí)候才加載信息霍狰。
15.分割的內(nèi)容
在響應(yīng)式的網(wǎng)頁設(shè)計(jì)里,分割的內(nèi)容變得越來越流行饰及,它把屏幕分割成兩部分或者更多的區(qū)域蔗坯。分割的做法能在一個(gè)頁面里給用戶傳達(dá)幾部分同等重要的信息。這個(gè)趨勢在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ì)量的視頻內(nèi)容來講好一個(gè)故事赴魁。而網(wǎng)站上的視頻可以是短的卸奉、重復(fù)播放的,通過展示產(chǎn)品或拍成電影的內(nèi)容讓用戶對故事保持興趣颖御。
----------
項(xiàng)目案例:Hillsong
作者:Ruslan Siiz
18.SEO搜索引擎優(yōu)化很重要
搜索引擎優(yōu)化對于網(wǎng)站來說很重要榄棵,如果一個(gè)很漂亮的網(wǎng)站卻在SEO上沒做好,就很難被用戶搜到潘拱。
19.隱藏的導(dǎo)航
對于漢堡包菜單按鈕難以被用戶發(fā)現(xiàn)這個(gè)觀點(diǎn)疹鳄,有很多贊成和反對的討論。但有一點(diǎn)是肯定的芦岂,這個(gè)趨勢還是會(huì)存在瘪弓,人們終有一天會(huì)習(xí)慣它。
20.微小的設(shè)計(jì)細(xì)節(jié)
對于細(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ì)趨勢
21.1. 極簡主義
隨著所有大品牌都走更簡單虑乖、極簡的設(shè)計(jì),這個(gè)趨勢會(huì)持續(xù)的流行栓票。
---------------------------
傳送門:Mingo Ideas Up
21.2. 手繪
手繪已經(jīng)流行了好幾年了决左,它很趕時(shí)髦。這種手繪的設(shè)計(jì)用在咖啡館走贪、理發(fā)館和藝術(shù)工藝館很合適佛猛。
----------------------------
查看這個(gè)藝術(shù)家的設(shè)計(jì):Sam Healy
21.3. 負(fù)型
這是一個(gè)很老的趨勢了,但在過去幾年又流行起來坠狡,在2017年只會(huì)繼續(xù)增長继找,值得繼續(xù)留意。
21.4. 裁剪
這個(gè)趨勢就是為了展示logo是怎么回事逃沿。
21.5. 幾何化
這個(gè)趨勢很老派了婴渡,但是是永遠(yuǎn)經(jīng)典的做法。
----------------------------
傳送門:Mingo Ideas Up
21.6. 線條藝術(shù)
這個(gè)趨勢在新的現(xiàn)代的商業(yè)運(yùn)用中很流行凯亮。
---------------------------------------
傳送門:Sam Healy;Andrea Schlaffer;Jacek Janiczak
21.7. 圖案
圖案是一個(gè)新的趨勢边臼,通過獨(dú)特的重復(fù)方式可以使作品很出彩。這種原創(chuàng)的趨勢可以被用到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è)趨勢已經(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)造出來的對比也很贊签餐。
22.字體設(shè)計(jì)趨勢
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. 字體中的色彩漸變
色彩漸變絕對還是流行的主要因素氯檐,字體設(shè)計(jì)里也不例外。
----------------------------
22.3. 視覺層次
字體層次對應(yīng)所有設(shè)計(jì)領(lǐng)域來說都非常重要体捏。字體的字號(hào)大小和粗細(xì)可以輕易的暗示出文字的重要程度冠摄,當(dāng)你設(shè)計(jì)文本的時(shí)候一定要記住糯崎。還有另一點(diǎn),通過文字的位置和顏色變化河泳,也可以把文字的視覺層次拉開沃呢。
22.4. 很小很小很小很小反正就是很小的字體
超小字體可以通過在顏色或圖像中創(chuàng)造一個(gè)對比來讓小文字的閱讀性更好。動(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