幾乎每一年，UI 的設(shè)計(jì)風(fēng)格都在發(fā)生變化。例如扁平化、手勢(shì)、微交互、卡片等等那些過(guò)去兩年讓眾多設(shè)計(jì)師踴躍嘗試的設(shè)計(jì)，總會(huì)有一些好的設(shè)計(jì)想法在改變著你的設(shè)計(jì)習(xí)慣。

那么，對(duì)于即將到來(lái)的2017年，又有哪些設(shè)計(jì)可能會(huì)占據(jù)設(shè)計(jì)師的視野呢？

小編最近在網(wǎng)站creative bloq 以及 vandelay上搜羅到一些信息，整理了當(dāng)下10個(gè) 2017 年的 UI 設(shè)計(jì)趨勢(shì)的案例，希望對(duì)你有所啟發(fā)。

01 - 漸變色的運(yùn)用比例將進(jìn)一步提高

2013 年開(kāi)始盛行的扁平化設(shè)計(jì)中，強(qiáng)調(diào)簡(jiǎn)潔的功能界面區(qū)分，拋棄多余的元素。至今，這種設(shè)計(jì)風(fēng)格依然有著借鑒的價(jià)值。

不過(guò)，隨著扁平化的流行，它的弊端也開(kāi)始顯現(xiàn)出來(lái)：一時(shí)之間幾乎是所有的平面設(shè)計(jì)都在強(qiáng)調(diào)扁平化，這使得它們趨于雷同，看上去毫無(wú)個(gè)性。

想要在扁平化設(shè)計(jì)中，加點(diǎn)不一樣的元素讓它更為生動(dòng)，漸變色不失為一個(gè)好的選擇。

Spotify 的網(wǎng)站，就是一個(gè)極好的例子。它的主頁(yè)面把 2016 年最流行的粉色和藍(lán)色糅合，產(chǎn)生了雙色漸變，看起來(lái)十分絢麗。

再往下拉，就變成了橙色的漸變色，顯得十分有夏天的感覺(jué)。

雖然此前設(shè)計(jì)界對(duì)于 Instagram 的扁平化漸變色 logo 的設(shè)計(jì)褒貶不一，不過(guò)，它也意味著一種設(shè)計(jì)的趨勢(shì)：漸變色能讓設(shè)計(jì)看起來(lái)更活潑有趣，毫無(wú)疑問(wèn)，它是 2017 年的十大設(shè)計(jì)趨勢(shì)之一。

02 - 長(zhǎng)滾動(dòng)式設(shè)計(jì)

“滾動(dòng)”，并不算是一個(gè)新的設(shè)計(jì)趨勢(shì)。

在過(guò)去的幾年內(nèi)，滾動(dòng)式的閱讀體驗(yàn)在小屏幕設(shè)備上的發(fā)展尤為突出。想想你手機(jī)上的 App，一定有很多采取的是這種滾動(dòng)式設(shè)計(jì)。

National Geographic

正如你所看到的這個(gè)國(guó)家地理的官方網(wǎng)站一樣，這種滾動(dòng)設(shè)計(jì)的好處非常直白：它提供給用戶(hù)一個(gè)更為流暢的瀏覽體驗(yàn)，以一個(gè)線(xiàn)性的方式，引導(dǎo)用戶(hù)在短時(shí)間內(nèi)不受打擾地閱讀到更多的內(nèi)容。

Riding the new silk road by New York Times

現(xiàn)在，“滾動(dòng)”從小屏幕越來(lái)越多地轉(zhuǎn)向大屏幕設(shè)計(jì)。也有很多的設(shè)計(jì)師在研究大屏幕上的“滾動(dòng)”機(jī)制如何處理，才能帶來(lái)更為卓越的使用感受。

在 2017 年，這種長(zhǎng)條狀的滾動(dòng)式網(wǎng)頁(yè)設(shè)計(jì)也許將成為主流。

03 - 插畫(huà)的運(yùn)用

插畫(huà)可以讓設(shè)計(jì)具有“性格”，比起傳統(tǒng)的攝影，它是一種直觀的與用戶(hù)進(jìn)行情感交流的視覺(jué)語(yǔ)言。

對(duì)于品牌來(lái)說(shuō)，沒(méi)有什么能比用插畫(huà)來(lái)塑造品牌形象、傳遞品牌性格還要簡(jiǎn)單有效的方式了。作為一種有趣的情感表達(dá)，插畫(huà)可以是量身定制的，因而它能幫助獲得用戶(hù)的信任，讓人感覺(jué)更為親切。

Dropbox

Dropbox 和 Payplan 都是不錯(cuò)的例子，它們的首頁(yè)以簡(jiǎn)筆畫(huà)的形式很直觀地表達(dá)了產(chǎn)品的幾大功能，能夠幫助用戶(hù)快速理解。

payplan

此外，插畫(huà)的實(shí)現(xiàn)途徑并不唯一。它提供多種創(chuàng)意方向的選擇，不同的插畫(huà)也可以傳遞不同的情緒。比如簡(jiǎn)筆風(fēng)的手繪看上去單純可愛(ài)，精細(xì)繁復(fù)的筆觸可以產(chǎn)生一種“高級(jí)”質(zhì)感，當(dāng)插畫(huà)與攝影結(jié)合，則給人一種虛實(shí)難辨的奇幻感。

04 - 隱藏菜單

隱藏菜單并不是什么特別的新發(fā)現(xiàn)。長(zhǎng)久以來(lái)他都被隱藏在幕后，現(xiàn)在設(shè)計(jì)師們終于將他們展現(xiàn)在了臺(tái)前，讓我們盡情期待吧。

不要被充滿(mǎn)屏幕的畫(huà)面所蒙騙。雖然移動(dòng)設(shè)備的桌面不亞于臺(tái)式機(jī)，但我們也可以為了節(jié)約用戶(hù)的空間來(lái)將一些功能隱藏。

需要使用的功能有很多，我們可以利用滑動(dòng)菜單欄，將必要的功能顯示，不必要的功能隱藏起來(lái)。越來(lái)越多的導(dǎo)航菜單都在做減法，讓顯示的功能盡可能的變少，只有特定的需要使用的選項(xiàng)還保留在上面。

05 - 更加頻繁的卡片式設(shè)計(jì)

卡片型設(shè)計(jì)，對(duì)于在移動(dòng)終端上查看網(wǎng)頁(yè)十分友好這點(diǎn)已被證實(shí)。實(shí)際上，越來(lái)越多的手機(jī)網(wǎng)頁(yè)已經(jīng)開(kāi)始逐漸嘗試使用這種方法。

將內(nèi)容分割、調(diào)整內(nèi)容放置在合適的地方、與相關(guān)聯(lián)的信息放在一起表示等等這樣的想法用卡片式設(shè)計(jì)是十分方便的。另外，在使用卡片型設(shè)計(jì)時(shí)，用戶(hù)只能選擇特定的動(dòng)作，所以設(shè)計(jì)師可以專(zhuān)注于你覺(jué)得必要的內(nèi)容上進(jìn)行設(shè)計(jì)。

由于卡片型設(shè)計(jì)，用戶(hù)可以上傳屬于自己的多媒體（例如Twitter的動(dòng)畫(huà)或圖片等等），可以為你的網(wǎng)站創(chuàng)造更多的流量。

06 - Touch ID的完全控制

TouchID初登場(chǎng)時(shí)，僅僅被用于解鎖。2015年時(shí)Apple在ApplePay上展現(xiàn)了他革命性的使用方法，才讓這種功能的重要作用的來(lái)龍去脈變得明顯。

在那年年末，iOS8上的第三方應(yīng)用（如Dropbox或Amazon等等），紛紛表示接受TouchID的指紋認(rèn)證功能。

手動(dòng)輸入密碼，事實(shí)上已經(jīng)成為過(guò)去。在網(wǎng)絡(luò)飛速發(fā)展的現(xiàn)在我們需要更加簡(jiǎn)單快捷的途徑。雖然這一技術(shù)已經(jīng)進(jìn)化，我想在接下來(lái)的一年，這一技術(shù)也將會(huì)得到更加飛速的發(fā)展。

07 - 娛樂(lè)和個(gè)性化

正如之前所說(shuō)，文化是界面設(shè)計(jì)變更的重要因素。接下來(lái)讓我們來(lái)看一些具體的例子吧。

一個(gè)新的APP，將保守的要素用大膽的配色，有趣的面板和俏皮的附件所取代，將會(huì)表現(xiàn)出更具有娛樂(lè)性的效果。不管是這里還是那里，都利用了有趣的信息或獨(dú)特的對(duì)話(huà)框。

這也意味著這個(gè)APP成了一位表演者，APP更加個(gè)性化，一如友人般的存在。

雖然個(gè)人軟件通信已經(jīng)是老物了，但現(xiàn)在也是打到了前所未有的完美狀態(tài)。讓我們來(lái)看看Microsoft的OFFICE助手工具Clippy吧。Clippy比助手和朋友更加麻煩，但他現(xiàn)在已經(jīng)成了在互聯(lián)網(wǎng)上流行的一個(gè)有趣的故事了。

在如今科技高速發(fā)展的現(xiàn)代，我們需要一個(gè)能夠恰當(dāng)?shù)陌才盼覀兊墓ぷ鳌r(shí)間或需求的軟件。太過(guò)復(fù)雜的技術(shù)在我們的日程表上可是沒(méi)有位置的。

08 - 精挑細(xì)選的配色

「少即是多」這個(gè)概念，已經(jīng)獨(dú)占鰲頭。所以設(shè)計(jì)師無(wú)論何時(shí)都必須保持簡(jiǎn)潔，尤其是在于顏色打交道的時(shí)候。讓我們來(lái)看看這款時(shí)尚的APP設(shè)計(jì)吧。你瞧，無(wú)論是哪一種顏色，都采用了極簡(jiǎn)的設(shè)計(jì)方法。

與華麗強(qiáng)烈的顏色不同，適當(dāng)?shù)娜岷团渖苍S并沒(méi)有引起足夠的重視。但這并不是說(shuō)有必要變更你的品牌顏色。保持優(yōu)雅專(zhuān)業(yè)的氛圍，讓我們?cè)賮?lái)使用你所選擇的顏色。

09 - 原質(zhì)化設(shè)計(jì)

原質(zhì)化設(shè)計(jì)最初是在2014年Google上發(fā)表的較為新穎的視覺(jué)語(yǔ)言。一經(jīng)發(fā)布便馬上在互聯(lián)網(wǎng)上流傳開(kāi)來(lái)，對(duì)于移動(dòng)終端設(shè)計(jì)來(lái)說(shuō)是革命性的發(fā)現(xiàn)。

相信經(jīng)過(guò)2年的沉淀，在2017年會(huì)有更多優(yōu)秀的APP或網(wǎng)頁(yè)設(shè)計(jì)利用簡(jiǎn)約的效果來(lái)表現(xiàn)出原質(zhì)化設(shè)計(jì)。（合理的層次感與適當(dāng)?shù)姆指?，以及精挑?xì)選的動(dòng)效等等）；同時(shí)原質(zhì)化設(shè)計(jì)與常年被使用的卡片化設(shè)計(jì)也有著密不可分的關(guān)系。

10 - 打破網(wǎng)格設(shè)計(jì)

對(duì)于大多數(shù)設(shè)計(jì)師而言，網(wǎng)格一直以來(lái)都是設(shè)計(jì)的基礎(chǔ)，它能夠保證一致性、平衡性和某種節(jié)奏。

此外，一個(gè)用戶(hù)很熟悉的網(wǎng)格，也代表著一個(gè)不會(huì)出錯(cuò)的選擇，起碼用戶(hù)在看到這個(gè)設(shè)計(jì)的時(shí)候，可以不用指導(dǎo)地、下意識(shí)地去使用網(wǎng)站或者應(yīng)用程序。

然而，網(wǎng)格也意味著限制。在一個(gè)有限的網(wǎng)格內(nèi)，富有才華的設(shè)計(jì)師，很難去完整地表現(xiàn)他的天馬行空。于是，有些設(shè)計(jì)師正在嘗試突破傳統(tǒng)的數(shù)字體驗(yàn)，打破網(wǎng)格。

Red Collar Digital

Red Collar Digital 的頁(yè)面以云為背景，前景是滾動(dòng)式的圖文內(nèi)容，沒(méi)有網(wǎng)格的限制，顯得清新且自由。

SERGEY MAKHNO Architects

無(wú)疑，這種無(wú)網(wǎng)格的創(chuàng)造性設(shè)計(jì)可以充分發(fā)揮設(shè)計(jì)師的奇思妙想，讓網(wǎng)頁(yè)看起來(lái)更加靈活自由。不過(guò)，這種設(shè)計(jì)搞不好也會(huì)導(dǎo)致一種缺乏秩序的混亂感。

值得注意的是，無(wú)論是怎樣顛覆性的無(wú)網(wǎng)格設(shè)計(jì)，用戶(hù)的體驗(yàn)永遠(yuǎn)是第一位的，它的所有接口，都應(yīng)該是用戶(hù)友好型的。

最后，相信2017年的趨勢(shì)可能并不止這些，也可能會(huì)改變，期待下次分享吧~