夠全面 | Behance上爆火的2017設(shè)計(jì)趨勢(shì)指南!

今天湖湖給大家分享的是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是怎么回事。

傳送門:Aleksandr Maksimov

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中也不例外。

----------------------------

傳送門:Mingo Ideas Up

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ì)里也不例外。

----------------------------

傳送門:The Woork Co

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容