你不想錯過的10個2017年UI設計流行趨勢

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

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

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

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

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

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

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

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

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

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

02 - 長滾動式設計

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

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

National Geographic

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

Riding the new silk road by New York Times

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

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

03 - 插畫的運用

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

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

Dropbox

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

payplan

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

04 - 隱藏菜單

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

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

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

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

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

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

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

06 - Touch ID的完全控制

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

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

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

07 - 娛樂和個性化

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

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

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

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

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

08 - 精挑細選的配色

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

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

09 - 原質化設計

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

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

10 - 打破網格設計

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

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

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

Red Collar Digital

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

SERGEY MAKHNO Architects

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

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

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