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