本文會告訴你2017年UI設(shè)計的趨勢。

網(wǎng)頁設(shè)計和UI設(shè)計的趨勢是變化非常快的，有的時候我們很難跟得上這不斷變化的趨勢和發(fā)展。 隨著2016年接近尾聲，我們挑選了我們認為您應(yīng)該在2017年UI設(shè)計的10個最重要的趨勢。

01. Immersive, full-screen video 沉浸式的全屏視頻

Campos Coffee的網(wǎng)站使用簡單的排版結(jié)合動態(tài)全屏視頻制作了一個簡單但有力的內(nèi)容

古語有云：“一幅畫頂一千字”，這個說法在現(xiàn)在依然是有效的。在UI設(shè)計的世界，圖像畫面仍然是一個很好的方式來快速抓住用戶的注意力。 視覺被認為是所有人類感覺中最強的，并且大的單幅圖像能夠以更有效、簡潔、快速地方式總結(jié)語音的訊息和音調(diào)。

圖像長期以來一直是UI和網(wǎng)頁設(shè)計的主要內(nèi)容，它的成功逐漸為視頻鋪平了道路。 我們看到視頻在數(shù)字設(shè)計中被越來越多的使用到。 傳統(tǒng)攝影是靜態(tài)的，視頻是動態(tài)的。 視頻是吸引用戶眼球和講故事的絕佳手段。

傳統(tǒng)的圖像不會很快消失，但有一件事是肯定的 ----2017年及以后的網(wǎng)頁和UI設(shè)計將會充滿內(nèi)容豐富、互動更強的全屏視頻作為講故事的主要手段

荷蘭航空公司KLM的雜志iFly50依賴于更加風(fēng)格化的方法，使用雙重曝光視頻來吸引用戶，吸引人們繼續(xù)瀏覽網(wǎng)頁

視頻和大的、美觀的全屏圖像是吸引用戶和快速確立網(wǎng)頁基調(diào)的有效方式。 這兩種形式在其應(yīng)用中是高度通用的，特別適合作為背景排版使用的。

02. Long form content and scrolling 長篇幅滾動翻頁網(wǎng)頁

National Geographic的網(wǎng)站是主頁頁面的內(nèi)容是一個很好的例子，因為它幾乎涵蓋了這篇文章中提到的每一點

滾動的網(wǎng)頁絕不是一種新的方式，也絕對不是一個基本功能的“趨勢” 用于瀏覽Web和應(yīng)用程序。然而，我們越來越多地看到的是更多在桌面設(shè)備和更大屏幕的設(shè)備上使用了長篇幅滾動網(wǎng)頁來進行信息展現(xiàn)。

在過去幾年中，由于用戶覺得在較小屏幕設(shè)備上滑動翻頁更便于查找內(nèi)容，更多的設(shè)計人員開始在較大屏幕上使用長篇幅滾動網(wǎng)頁的界面。

這允許用戶可以以更流暢的動作來非常快速地瀏覽大量的信息，而不會因為要切換頁面而被干擾。 它是一個能夠廣泛適用的方式，可以用在所有設(shè)備和內(nèi)容媒體上，不管是長篇新聞和新聞故事，還是登陸頁面和交互體驗，它都可以適用

國家地理雜志將地圖，視頻，圖像和動畫結(jié)合在一起，創(chuàng)造了一種單一，流暢，身臨其境且豐富多彩的瀏覽體驗，

瀑布流網(wǎng)頁是一個非常好的網(wǎng)頁瀏覽方式，它以線性的方式引導(dǎo)用戶瀏覽網(wǎng)頁內(nèi)容。 它是一個廣泛適用的方式，非常適合創(chuàng)建沉浸式、無縫、長篇幅的內(nèi)容。不管用戶使用的是什么設(shè)備，它都可以讓用戶有一個流暢的體驗。

03. Gradients and vivid colours 漸變和鮮艷的顏色

Spotify是大品牌嘗試大膽使用顏色和漸變的一個很好的例子

2013年，扁平化迅速在各類設(shè)計中流行開來，扁平化讓設(shè)計師們在設(shè)計中使用更多的冷色調(diào)和刪除多余的元素。 盡管它本身有一些缺點，但平面設(shè)計是一門實用哲學(xué)，扁平化今天仍然具有價值。

扁平化要求簡化UI中的核心功能性元素，從而獲得更簡潔高效的用戶體驗。

使用扁平化是為了獲得更好的用戶體驗，但是扁平化的迅速流行造成很多設(shè)計師設(shè)計出的網(wǎng)頁都極其相似的現(xiàn)象。 來自世界各地的品牌和設(shè)計師們都跟風(fēng)涌入扁平化的浪潮中，導(dǎo)致很多設(shè)計都缺乏個性，非常相似。

2016年，扁平化的趨勢又逐漸顯現(xiàn)，更多的品牌和設(shè)計師開始強調(diào)更加個性的扁平化，嘗試鮮亮的顏色和漸變，不再像以前一樣一味的強調(diào)簡單和冷色調(diào)。 漸變和鮮艷的顏色越來越多在傳統(tǒng)的UI和網(wǎng)頁設(shè)計中，最近備受爭議的Instagram，在品牌的重新設(shè)計中就用到了鮮艷的顏色和漸變。 無論這是否符合你的品味，我們都應(yīng)期望看到更多的使用漸變和鮮亮的顏色將推動UI和網(wǎng)頁更具個性!

Spotify不斷變化的漸變創(chuàng)造了一種友好和有趣的美學(xué)

鮮亮的顏色和漸變能夠?qū)⒏�多的能量、溫暖和活力注入到一個產(chǎn)品中，使其脫穎而出。 大膽的去嘗試使用不同的顏色，但一定要確保他們和你想要表達的內(nèi)容和諧一致，不能沖突。 但是這樣做之前一定要深思熟慮，避免給人們造成眼睛不適的感覺。

04. Illustrations 插畫

Dropbox是具有強烈插畫風(fēng)格品牌的很好的一個例子。 這種粗獷、手繪的風(fēng)格讓人覺得輕松愉悅，增加了人們對他們產(chǎn)品的信任感。

插畫能夠給人一種別具一格的感覺，這是普通圖片很難實現(xiàn)的。 更能貼合品牌特質(zhì)的定制插畫能夠使公司更加細致的創(chuàng)建一個真正貼合他們的個性和語調(diào)的視覺語言 - 有助于給用戶和客戶灌輸可靠和信任的感覺。

插畫也擁有很多表現(xiàn)形式。 一些品牌可能選擇用平滑的線條插畫，這種插畫能夠表現(xiàn)出一種銳利和高雅的感覺;而其他品牌可能選擇更粗糙潦草的手繪風(fēng)格，這種風(fēng)格的插畫給用戶一種有趣和俏皮的感覺。 插畫給創(chuàng)意提供更多的途徑，當插畫與攝影和排版結(jié)合時，更是如此。

PayPlan的清新、溫和的說插畫風(fēng)格加上他們的審美幫助他們將品牌定位為友好和關(guān)懷，吸引用戶的需求。

插畫定制可以創(chuàng)造個性和可靠性，這兩點對于創(chuàng)造和客戶長期有效的連接是至關(guān)重要的。 插畫在APP上是可以廣泛適用的，并且與本文討論的其他UI設(shè)計流行趨勢可以完美結(jié)合的。

05. Breaking the grid 突破網(wǎng)格

Red Collar Digital的網(wǎng)頁是突破網(wǎng)格限制的UI的一個很好的例子

網(wǎng)格長期以來一直是設(shè)計師的神器，給那些需要確保一致性、平衡、節(jié)奏和順序的設(shè)計提供了基礎(chǔ)。 它是用戶體驗設(shè)計中的一個重要工具，因為他們?yōu)橛脩籼峁┝俗钍煜さ腢I體驗，使他們能夠以一種自然的方式直觀地瀏覽網(wǎng)站或APP。

然而，與網(wǎng)格同樣需要重視的一點是：它也限制性的和剛性的制約了設(shè)計者的創(chuàng)造性選擇。 為了創(chuàng)造突破傳統(tǒng)的數(shù)字體驗，許多網(wǎng)頁和UI設(shè)計師正在通過“打破網(wǎng)格”來試驗布局。

通過遠離網(wǎng)格和剛性的基線結(jié)構(gòu)，設(shè)計師正在創(chuàng)建更有趣和實驗性的網(wǎng)站，APP和界面。 它開辟了一個全新的創(chuàng)新道路，允許設(shè)計師通過使用分層、深度、運動和明顯的焦點實現(xiàn)真正的表達。

像Like Red Collar Digital，建筑師Sergey Makhno 用兩層排版、圖像甚至視頻創(chuàng)造了一個更寬松和自由流動的的體驗

打破網(wǎng)格提供了更多的創(chuàng)新選擇。 它的靈活性可以產(chǎn)生流動性和自由度，這是在用網(wǎng)格設(shè)計時很難有的。 然而，在你這樣做的時候一定要考慮周全。 所有的界面首先必須是用戶友好的，這一點是毋庸置疑的，否則可能會使一些用戶非常困惑! 如果是響應(yīng)式設(shè)計你還需要考慮如何在讓它在較小的屏幕上能夠發(fā)揮作用。