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

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

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

01 - 漸變色的運用比例將進一步提高

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

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

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

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

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

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

02 - 長滾動式設(shè)計

“滾動”，并不算是一個新的設(shè)計趨勢。

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

National Geographic

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

Riding the new silk road by New York Times

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

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

03 - 插畫的運用

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

對于品牌來說，沒有什么能比用插畫來塑造品牌形象、傳遞品牌性格還要簡單有效的方式了。作為一種有趣的情感表達，插畫可以是量身定制的，因而它能幫助獲得用戶的信任，讓人感覺更為親切。

Dropbox

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

payplan

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

04 - 隱藏菜單

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

不要被充滿屏幕的畫面所蒙騙。雖然移動設(shè)備的桌面不亞于臺式機，但我們也可以為了節(jié)約用戶的空間來將一些功能隱藏。

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

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

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

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

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

06 - Touch ID的完全控制

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

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

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

07 - 娛樂和個性化

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

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

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

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

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

08 - 精挑細選的配色

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

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

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

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

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

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

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

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

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

Red Collar Digital

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

SERGEY MAKHNO Architects

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

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

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