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

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

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

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

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

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

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

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

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

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

02 - 長滾動式設計

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

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

National Geographic

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

Riding the new silk road by New York Times

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

在 2017 年，這種長條狀的滾動式網頁設計也許將成為主流。

03 - 插畫的運用

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

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

Dropbox

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

payplan

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

04 - 隱藏菜單

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

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

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

05 - 更加頻繁的卡片式設計

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

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

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

06 - Touch ID的完全控制

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

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

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

07 - 娛樂和個性化

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

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

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

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

在如今科技高速發(fā)展的現(xiàn)代，我們需要一個能夠恰當的安排我們的工作、時間或需求的軟件。太過復雜的技術在我們的日程表上可是沒有位置的。

08 - 精挑細選的配色

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

與華麗強烈的顏色不同，適當的柔和配色也許并沒有引起足夠的重視。但這并不是說有必要變更你的品牌顏色。保持優(yōu)雅專業(yè)的氛圍，讓我們再來使用你所選擇的顏色。

09 - 原質化設計

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

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

10 - 打破網格設計

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

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

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

Red Collar Digital

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

SERGEY MAKHNO Architects

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

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

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