海淘科技編者，為大家提供2017年最全面的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)，并結(jié)合了大量?jī)?yōu)質(zhì)案例，也想在這里分享給更多人。這篇文章有點(diǎn)長(zhǎng)不過(guò)很易讀，希望大家看了能有所收獲~~
【文章目錄】
01 半扁平化設(shè)計(jì)
02 動(dòng)態(tài)照片
03 更多的3D
04 動(dòng)畫(huà)
05 登錄頁(yè)
06 幾何圖形，圖案，線條和圓
07 大膽的用色
08 創(chuàng)新滾動(dòng)和視差
09 漸變色
10 移動(dòng)瀏覽 (響應(yīng)設(shè)計(jì))
11 定制圖形和插圖
12 中性空間與網(wǎng)格的創(chuàng)造性運(yùn)用
13 講故事
14 懶加載
15 拆分內(nèi)容
16 全屏幕形式
17 視頻無(wú)處不在
18 SEO 很重要
19 隱藏導(dǎo)航
20 微小的細(xì)節(jié)設(shè)計(jì)
21 logo設(shè)計(jì)趨勢(shì)
22 字體設(shè)計(jì)趨勢(shì)
【正文開(kāi)始】
設(shè)計(jì)趨勢(shì)受到媒體，技術(shù)，時(shí)尚行業(yè)和實(shí)用性的影響。一種趨勢(shì)的形成是緩慢而漸進(jìn)的，它以這種方式滲透到設(shè)計(jì)的所有分支，然后再以同樣的方式消失。大體來(lái)說(shuō)，一種設(shè)計(jì)趨勢(shì)的壽命不過(guò)一兩年時(shí)間。2017年的設(shè)計(jì)將繼續(xù)2016年出現(xiàn)的趨勢(shì)，同時(shí)增加一些新的影響，但這種感覺(jué)是眾所周知且熟悉的，你可能已經(jīng)在過(guò)去幾年看到它。主要影響者仍然是谷歌的Material Design，并產(chǎn)生一些變化。
在過(guò)去的幾年里，扁平化設(shè)計(jì)統(tǒng)治了網(wǎng)頁(yè)設(shè)計(jì)市場(chǎng)，但現(xiàn)在，受Material Design的影響，它變得更加立體化。這種轉(zhuǎn)變始于一些輕柔的陰影，使其成為半扁平化設(shè)計(jì)。從極簡(jiǎn)主義風(fēng)格的扁平化設(shè)計(jì)演變以適應(yīng)新發(fā)展的技術(shù)。扁平化設(shè)計(jì)仍在進(jìn)行中，但已經(jīng)經(jīng)歷了一些改進(jìn)。
輕柔的陰影增加了深度和復(fù)雜性，卻不會(huì)破壞扁平化設(shè)計(jì)的感覺(jué)。這是扁平化趨勢(shì)新增的一個(gè)特征，并將繼續(xù)在2017演進(jìn)。
項(xiàng)目: Resourсe | UI/UX Tool for Web Services
作者: Ruslan Latypov; LS Graphics; Anton Mishin; Valery Gurkov
項(xiàng)目: Listener’s Playlist
作者: Anzi .
動(dòng)態(tài)照片不是我們?cè)诰W(wǎng)上常見(jiàn)的那種GIF。動(dòng)態(tài)照片就是靜態(tài)的圖像中有少量的動(dòng)態(tài)元素。這種技術(shù)通過(guò)賦予簡(jiǎn)單的照片以生命，使其更貼近現(xiàn)實(shí)。
3D絕對(duì)是我們的方向，我們將看到它在所有設(shè)計(jì)領(lǐng)域的影響力。隨著VR / AR革命迅速建立勢(shì)頭，這個(gè)領(lǐng)域進(jìn)步的相當(dāng)快。
項(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
動(dòng)畫(huà)越來(lái)越多的出現(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)中，他們可以是gif，SVG，WebGL的CSS或視頻。動(dòng)畫(huà)肯定是在去年的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)中最大的事情之一，所以請(qǐng)毫不猶豫地使用它們。
項(xiàng)目: Nickelodeon Kids Pick The President
作者: JeanPierre Le Roux
項(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
在2017，我們將看到著陸頁(yè)的上升趨勢(shì)，這是由于它的市場(chǎng)營(yíng)銷潛力和更好定位顧客的能力。
這一趨勢(shì)始于2016，并肯定會(huì)在2017延續(xù)下去。你可以通過(guò)添加一些現(xiàn)代化的幾何形狀來(lái)使你的網(wǎng)頁(yè)更加個(gè)性化，無(wú)論是扁平的或是帶有微投影的。
項(xiàng)目: Pfizer – Active and 50+ for The New York Times
作者: justyna stasik; Vladimir Marchukov
項(xiàng)目： DRAP.agency Branding
作者：Mireldy Design; Filip Gjurin
使用大膽的顏色來(lái)強(qiáng)調(diào)。大膽的色彩與Material design和扁平化設(shè)計(jì)相襯得如此完美。可以使用由 Google 提供的調(diào)色板來(lái)選擇和搭配你想要的顏色。
項(xiàng)目: Edris – Logo Designed by MiLo
作者: Loredana Papp-Dinea; Mihai Baldean; Milo Themes
項(xiàng)目: Rendered — Responsive Demo Website for Adobe
Serge Vasil
項(xiàng)目: b2mach
作者: Natalia ?erko; Kuba Enzowski; Kommunikat Studio
這個(gè)視覺(jué)的主意很棒，它能將獨(dú)特的元素添加到任何網(wǎng)站。從多圖層視差到視頻視差，一切皆有可能。
看看D.ex Multilayer Parallax。這個(gè)產(chǎn)品是完全由 Milothemes在Loredana Papp和 Mihai Baldean的帶領(lǐng)下開(kāi)發(fā)的。它在Envato Market / codecanyon.net上可以買(mǎi)到。
它是一個(gè) WordPress 插件，能讓你用一個(gè)以上的圖層創(chuàng)建美麗的視差作品。勇于創(chuàng)新，以任何你想要的風(fēng)格組合圖層。我們創(chuàng)建了12 個(gè)不同的例子，來(lái)引導(dǎo)你走向美麗的多層世界的第一步。來(lái)和圖層一起玩吧。
漸變色是現(xiàn)在最大的趨勢(shì)之一。開(kāi)始于 2016 年，并隨后獲得迅速增長(zhǎng)，像 Instagram這樣響當(dāng)當(dāng)?shù)钠放?，也決定將自己的logo從扁平單一的顏色變成多色漸變。從logo到按鈕或是圖片疊加層，這一趨勢(shì)無(wú)處不在。
移動(dòng)瀏覽在2015 年和 2016年獲得了可觀的增長(zhǎng)。超越了臺(tái)式機(jī)、 筆記本電腦，平板電腦和智能手機(jī)現(xiàn)在是瀏覽網(wǎng)站時(shí)的第一選擇，這種趨勢(shì)將繼續(xù)下去。任何不專注于響應(yīng)設(shè)計(jì)的網(wǎng)站都需要盡快升級(jí)!
項(xiàng)目: Responsive Website Animation
作者: Muharrem Senyil
Stock photos仍然非常流行，但 2016 年出現(xiàn)了一個(gè)顯著增長(zhǎng)的新趨勢(shì)，并將在 2017 持續(xù)發(fā)展： 使用定制的圖形和插圖。如果你想要一個(gè)讓訪客過(guò)目不忘的獨(dú)特網(wǎng)站，請(qǐng)聯(lián)系一個(gè)數(shù)字化設(shè)計(jì)師。所以，少用Stock photos，多用原創(chuàng)、獨(dú)特的圖像。
作者: Margarita Mar
前幾年 web 設(shè)計(jì)已適應(yīng)有組織的列和網(wǎng)格，但在 2016 年，我們看到了大量轉(zhuǎn)向不規(guī)則圖層和超現(xiàn)代的設(shè)計(jì)。
為了使顧客多停留在頁(yè)面上，網(wǎng)站現(xiàn)在開(kāi)始講故事了。相對(duì)平鋪直敘的信息而言，人們趨向于在故事中獲得更多。
懶加載延遲加載長(zhǎng)網(wǎng)頁(yè)中的圖像，基本上是當(dāng)需要的時(shí)候才讓信息出現(xiàn)。
拆分內(nèi)容在響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)中越來(lái)越流行，它將屏幕分成兩個(gè)或兩個(gè)以上的部分。一個(gè)分屏網(wǎng)站將在一個(gè)頁(yè)面上向觀眾展示幾個(gè)同樣重要的信息。這種趨勢(shì)自2015年底以來(lái)正在上升，但在2017，它將進(jìn)一步增長(zhǎng)，并可能在許多網(wǎng)站上遇到。
不需要去另一個(gè)頁(yè)面填寫(xiě)一個(gè)表格，因?yàn)樾碌木W(wǎng)站都配備了全屏幕形式，與響應(yīng)式設(shè)計(jì)相適應(yīng)。
視頻內(nèi)容在去年增加，人們要求高質(zhì)量的、有故事的視頻。在網(wǎng)站上播放的視頻是短而循環(huán)的，展示產(chǎn)品或大型電影項(xiàng)目，這將使觀眾對(duì)故事保持興趣。
項(xiàng)目: Hillsong
作者: Ruslan Siiz
搜索引擎優(yōu)化在一個(gè)網(wǎng)站中是非常重要的，一個(gè)漂亮的網(wǎng)站沒(méi)有一個(gè)良好的SEO很可能會(huì)被拋在后面。
就用戶找到菜單有多難這點(diǎn)，漢堡菜單引發(fā)了許多贊成和反對(duì)的爭(zhēng)論，但有一點(diǎn)是肯定的——這種趨勢(shì)將會(huì)留下來(lái)，并且人們最終會(huì)習(xí)慣它。
今年關(guān)注細(xì)節(jié)真的很重要。從小細(xì)節(jié)，如導(dǎo)航點(diǎn)到角落的標(biāo)志，專注于小細(xì)節(jié)，以更好完成工作。
項(xiàng)目: Barometa – Next-generation Job Platform
作者: Netguru Team; ?ukasz Pachytel
作者: Konstantin Zhenchur
21.1 極簡(jiǎn)主義
隨著所有大品牌都切換到更簡(jiǎn)約的、 最小的設(shè)計(jì)，這一趨勢(shì)將保留下去。
作者: Mingo Ideas Up
21.2 手繪
這是一個(gè)在聚光燈下存在了幾年的趨勢(shì)，它完全符合“潮人”業(yè)務(wù)。這種風(fēng)格用于咖啡餐飲業(yè)、理發(fā)行業(yè)或藝術(shù)和工藝品行業(yè)。
作者: Sam Healy
21.3 負(fù)空間
這是一個(gè)古老的趨勢(shì)，但在過(guò)去的幾年中，我們看到它再次出現(xiàn)，它只會(huì)在2017增長(zhǎng)，所以它肯定是值得關(guān)注的。
21.4 裁剪
這種趨勢(shì)追求盡可能的簡(jiǎn)潔，只展示到足夠知道一個(gè)標(biāo)志是什么，沒(méi)有更多。
作者: Aleksandr Maksimov
21.5 幾何
這種趨勢(shì)肯定是老派的，但它是那些永遠(yuǎn)不會(huì)過(guò)時(shí)的樣式之一。
作者: Mingo Ideas Up
21.6 線條藝術(shù)
這種趨勢(shì)在新興、現(xiàn)代的商業(yè)中很流行。
作者 : Sam Healy; Andrea Schlaffer; Jacek Janiczak
21.7 圖案
圖案是一種新的趨勢(shì)，這種重復(fù)是讓企業(yè)脫穎而出的獨(dú)特方式。這種原始的趨勢(shì)也可用于徽標(biāo)的演示文稿。
作者: Nick Edlin; Stanislav Aleynikov; Lucas Gil-Turner
21.8 動(dòng)畫(huà)logo
運(yùn)動(dòng)的設(shè)計(jì)是今年一大趨勢(shì)，我們可以在所有的設(shè)計(jì)領(lǐng)域中找到它。
作者: Javier Miranda Nieto; The Woork Co
21.9 復(fù)古
復(fù)古風(fēng)格仍在。即使這種趨勢(shì)已經(jīng)存在了一段時(shí)間，它仍然有一些可以說(shuō)。
作者: Роман Додонов; Mingo Ideas Up; Will Try Further
21.10 漸變色
漸變色今年無(wú)處不在——即使是logo。
作者: Mingo Ideas Up
21.11 logo中的插畫(huà)
插圖是使企業(yè)logo給人留下獨(dú)特、個(gè)性印象的好辦法。今年他們變得越來(lái)越流行。
作者: Bodea Daniel; Jacek Janiczak
21.12 logo中的攝影
圖像與排版的組合現(xiàn)在實(shí)在太熱了。他們一起配合得很好，他們之間形成了有趣的對(duì)比。
22.1 大，粗和漂亮的字體
字體設(shè)計(jì)也許是創(chuàng)造優(yōu)秀的設(shè)計(jì)中最重要的部分。今年標(biāo)題的字體設(shè)計(jì)將變得粗而大。
作者: Alexander Laguta
作者: Quim Marin
22.2 字體設(shè)計(jì)中的漸變色
漸變色絕對(duì)是“IT”的趨勢(shì)，現(xiàn)在你也會(huì)在字體設(shè)計(jì)中發(fā)現(xiàn)它。
作者: The Woork Co
22.3 視覺(jué)的層次結(jié)構(gòu)
在所有設(shè)計(jì)領(lǐng)域中，排版層次都是非常重要的。字體的大小和重量可以很容易地表明哪些單詞或字母是最重要的，所以當(dāng)你創(chuàng)建你的文字時(shí)，請(qǐng)記住這個(gè)方面。你還得記住，可以通過(guò)文本的位置和顏色實(shí)現(xiàn)很棒的視覺(jué)層次結(jié)構(gòu)。
22.4 小字體
超小文本通常被負(fù)空間包圍，但你可以通過(guò)顏色或圖像之間的對(duì)比，使其更加凸顯。你也可以使用動(dòng)畫(huà)來(lái)幫助它脫穎而出。
作者: Slava Oleinik; Bahaa Samir; Witty Digital
22.5 動(dòng)畫(huà)字體
動(dòng)畫(huà)無(wú)處不在，即使在字體設(shè)計(jì)。如果你使用柔和的動(dòng)作，今年你不會(huì)出錯(cuò)。
項(xiàng)目: Gotham Pro Animated Typeface Free
作者: Yaroslav Kononov; Daria Zalyatskaya; Nastya Sokha; Katerina Pavlenko; Max Kravchenko; Nadezhda Shymchenko; Kate Nizhegorodova
22.6 字體遇上攝影
文字與攝影的結(jié)合可以達(dá)到很好的效果。看看這些優(yōu)秀的例子。
作者: Quim Marin
22.7 幾何圖形和字體
幾何圖形也可以結(jié)合排版，實(shí)現(xiàn)現(xiàn)代感效果。
作者: Quim Marin
作者: ? Studio—JQ ?
22.8 字體配對(duì)
同時(shí)使用兩個(gè)或多個(gè)字體仍然是今年的趨勢(shì)。看看下面的例子，一些有趣的配對(duì)，將有助于你的項(xiàng)目。
Typography: Google Fonts Combinations – Volume 1
Typography: Google Fonts Combinations – Volume 2
