06. Parallax 視差

Epicurrence的網(wǎng)站選擇非常明顯的視差，創(chuàng)造一個快速移動和沉浸式的體驗，反映其推廣的事件

將視差與突破網(wǎng)格和滾動翻頁結(jié)合起來時非常好的做法，這樣在傳統(tǒng)的排版中很少見。 簡而言之，視差是一種背景移動速度比前景更慢的效果，當(dāng)用戶滾動時給出深度和動態(tài)感。 這不是一個新的方法，但正在被很多品牌嘗試。

Bang&Olufsen，高檔音響產(chǎn)品制造商，選擇更微妙、更精致的視差，體現(xiàn)他們的時尚和高端的品牌身份

視差必須謹(jǐn)慎使用，因為它可以很容易變得讓客戶難以忍受。 但是，當(dāng)謹(jǐn)慎使用時，它提供了一種很棒的動態(tài)感受，以幫助向上滾動切換內(nèi)容并吸引住用戶。 將它與圖像、文字和不太嚴(yán)謹(jǐn)?shù)牟季纸Y(jié)合使用，可以創(chuàng)建流暢的分層內(nèi)容。

07. More cards! 卡片

上面的例子顯示了如何實現(xiàn)卡以在較大屏幕UI上工作，從可滾動菜單卡到分層定價模型的選項。

卡片的模式不是一個新突破性的趨勢，但對于UI設(shè)計，它們是一個功能性很強的設(shè)計方式。在移動UI設(shè)計方面的成功以及被融入到 Google’s Material Design 中 ，卡片一直在網(wǎng)頁設(shè)計中獲得突出地位。

據(jù)Google稱，2015年，移動設(shè)備超越臺式機成為瀏覽網(wǎng)頁最流行的平臺，因此越來越多的設(shè)計師正在模糊移動和桌面UI之間的界限，創(chuàng)造更加無縫的用戶體驗。

卡片形式是一種廣泛適用的UI設(shè)計方法，可以在各種平臺上適用，從較小屏幕的設(shè)備一直到較大的。他們是一個很棒的方式在屏幕上同時組織和顯示大量的數(shù)據(jù)，允許用戶快速篩選可用的信息并選擇查看。 Facebook，Twitter，Netflix和Pinterest都是強大的數(shù)字平臺，它們都選擇了使用卡片的形式。

卡片提供了一個有效的解決方案，允許用戶快速瀏覽可用的內(nèi)容并迅速找到他們需要的信息

卡片是組織短片短信息的好方法，它們的靈活性在組織和消費內(nèi)容的較小屏幕上是無價的。 卡片是一種可以顯示文字、圖像、視頻和其間所有內(nèi)容的解決方案，可以從最小的屏幕設(shè)備擴展到最大屏幕的設(shè)備。 卡片提供無盡的適用性，允許設(shè)計師翻轉(zhuǎn)、旋轉(zhuǎn)、堆疊和過濾他們的所有方式的UX功能 - 更多的功能將通過微交互來解釋。

08. Micro-interactions 微互動

上圖是如何實現(xiàn)微交互以顯示菜單UI中的狀態(tài)變化的一個很好的例子

通常小屏幕上的動畫形式的微交互在UI和UX設(shè)計中起著至關(guān)重要的作用，尤其是在移動端和小屏幕設(shè)備上。

從用戶體驗的角度來看，微交互不僅是小的、有趣的屏幕上的動畫或轉(zhuǎn)換，同時也是對于用戶及其動作的視覺反饋的形式。微交互讓用戶知道與UI交互時正在發(fā)生什么，已經(jīng)發(fā)生了什么，以及將要發(fā)生什么。

使用Facebook的著名的“like”按鈕作為例子：當(dāng)用戶點擊豎起的圖標(biāo)表示喜歡某些東西，這個按鈕會變大，并變成藍(lán)色，然后返回到其原始大小，以上這些動作都在一個流暢的動畫中完成，通知用戶，他們的“like”已經(jīng)完成。

聰明的設(shè)計師通過將功能以有趣的方式實現(xiàn)來讓用戶高興。從有趣的加載動畫，到順滑的圖標(biāo)轉(zhuǎn)換，有效的微互動能夠同時起到吸引和通知用戶的作用。

該示例清楚地向用戶指示他們的動作已經(jīng)實現(xiàn)，因為它們在可用狀態(tài)之間切換

微互動提供有用的人性化反饋，以一種周到和有趣的方式讓用戶知道做什么和正在發(fā)生什么。 他們可以將簡單平凡的過程變得有趣，以及提供關(guān)鍵的反饋。

09. Typography 字體排版

MailChimp使用混合的字體、顏色和不透明度創(chuàng)建一個俏皮的圣誕節(jié)啟發(fā)的文字排版介紹他們的2016年假日提示營銷指南

隨著越來越多的網(wǎng)絡(luò)字體服務(wù)商(谷歌字體，Typekit)提供免費或便宜好用的字體系列，期望看到更多的品牌使用大膽和美麗的字體代替系統(tǒng)字體。

正如我們在2016年看到的，以及可預(yù)見的未來，網(wǎng)頁排版將從以傳統(tǒng)的圖形和編輯為中心的設(shè)計轉(zhuǎn)向試驗更具創(chuàng)意的字體排版設(shè)計。

雪鐵龍在他們的雪鐵龍起源互動頁面中也選擇了創(chuàng)意的分層字體和圖像組合。

排版是品牌和設(shè)計師在創(chuàng)造充滿個性的內(nèi)容時進(jìn)行實驗的另一種創(chuàng)造性媒介。 正如本文所討論的，許多這些趨勢是一起工作的，創(chuàng)意排版絕對是一個很好的例子。 將文字排版與圖像、視頻、插圖、顏色和非常規(guī)布局結(jié)合起來創(chuàng)造獨特的體驗。

10. Experimental Navs 導(dǎo)航欄實驗

Adult Swim 的網(wǎng)頁導(dǎo)航達(dá)到了一個全新的水平

導(dǎo)航和菜單一直是設(shè)計師熱烈爭論的話題。隨著移動和桌面UI之間的界限逐漸模糊，以及越來越多地使用漢堡包菜單(也叫做左滑菜單 )在更大屏幕的UI上，設(shè)計菜單和導(dǎo)航有了更多的創(chuàng)造性空間。

以漢堡菜單為例，他們提供的是在設(shè)計和構(gòu)建響應(yīng)式網(wǎng)站時的一致性，您可以(本質(zhì)上)設(shè)計一個單一的導(dǎo)航結(jié)構(gòu)在所有設(shè)備上擴展和工作。這里更有趣的是，使用漢堡菜單提供的創(chuàng)意自由的數(shù)量。

菜單隱藏在畫布之外，設(shè)計師可以給自己整個視口窗口來創(chuàng)建一個創(chuàng)造性的解決方案。天空的創(chuàng)造性可能性的極限，但一如既往，導(dǎo)航服務(wù)在用戶體驗中的扮演著一個重要角色，所以請確保它永遠(yuǎn)不會形成的功能 ---- 用戶需要能夠快速找到您的內(nèi)容!

并不是所有的設(shè)計師都同意在桌面應(yīng)用程序(或在所有)使用漢堡菜單。但這個話題是值得討論的，我們也相信2017年及以后會有更多的人嘗試設(shè)計更好的導(dǎo)航和菜單。

Adult Swim 網(wǎng)站的特點是移動縮略圖的三維網(wǎng)格，其中有排版和顏色變化的懸停狀態(tài)

導(dǎo)航不再局限于排列在窗口頂部的一排單行鏈接，而且肯定有更多的創(chuàng)意解決方案可以幫助用戶找到他們。雖然創(chuàng)意和美學(xué)很重要，但設(shè)計師應(yīng)該始終優(yōu)先考慮可用性，確保用戶能夠快速輕松地找到所需的內(nèi)容，而不是被過度的設(shè)計或花哨的解決方案混淆。

結(jié)論

與所有流行趨勢的本質(zhì)一樣，UI的趨勢也是不斷地來來去去，但是也會有一些被保持下來變成了設(shè)計的基本準(zhǔn)則。我在這里討論的所有趨勢或預(yù)測不是都可以與您正在開發(fā)的項目相關(guān);作為一個設(shè)計師，它是由你自己的判斷來決定什么是正確的，什么不是，而且有些東西將被客戶和項目改變。

然而，在這個創(chuàng)意產(chǎn)業(yè)中變化以閃電的速度發(fā)生，所以追趕正在發(fā)生的改變是重要的。 UI設(shè)計總是通過實現(xiàn)一些偉大的UX，同時偉大的UX也將伴隨著新技術(shù)的出現(xiàn)和發(fā)展而改變。這是一個不斷變化的領(lǐng)域，需要不斷的學(xué)習(xí)和創(chuàng)新。

我希望從這篇文章中你了解了一些關(guān)于2016年期間的設(shè)計是如何進(jìn)展，更重要的是，這些變化將如何影響2017年及以后的設(shè)計。