2016年UI設(shè)計(jì)的10大趨勢(shì) 10 top UI trends for 2016

網(wǎng)頁(yè)設(shè)計(jì)和UI設(shè)計(jì)的趨勢(shì)是變化非常快的，有的時(shí)候我們很難跟得上這不斷變化的趨勢(shì)和發(fā)展。 隨著2016年接近尾聲，我們挑選了我們認(rèn)為您應(yīng)該在2016年UI設(shè)計(jì)的10個(gè)最重要的趨勢(shì)。

01. Immersive, full-screen video   沉浸式的全屏視頻

Campos Coffee的網(wǎng)站使用簡(jiǎn)單的排版結(jié)合動(dòng)態(tài)全屏視頻制作了一個(gè)簡(jiǎn)單但有力的內(nèi)容

古語(yǔ)有云：“一幅畫(huà)頂一千字”，這個(gè)說(shuō)法在現(xiàn)在依然是有效的。在UI設(shè)計(jì)的世界，圖像畫(huà)面仍然是一個(gè)很好的方式來(lái)快速抓住用戶(hù)的注意力。 視覺(jué)被認(rèn)為是所有人類(lèi)感覺(jué)中最強(qiáng)的，并且大的單幅圖像能夠以更有效、簡(jiǎn)潔、快速地方式總結(jié)語(yǔ)音的訊息和音調(diào)。

圖像長(zhǎng)期以來(lái)一直是UI和網(wǎng)頁(yè)設(shè)計(jì)的主要內(nèi)容，它的成功逐漸為視頻鋪平了道路。 我們看到視頻在數(shù)字設(shè)計(jì)中被越來(lái)越多的使用到。 傳統(tǒng)攝影是靜態(tài)的，視頻是動(dòng)態(tài)的。 視頻是吸引用戶(hù)眼球和講故事的好手段。

傳統(tǒng)的圖像不會(huì)很快消失，但有一件事是肯定的 ----2016年及以后的網(wǎng)頁(yè)和UI設(shè)計(jì)將會(huì)充滿(mǎn)內(nèi)容豐富、互動(dòng)更強(qiáng)的全屏視頻作為講故事的主要手段

荷蘭航空公司KLM的雜志iFly50依賴(lài)于更加風(fēng)格化的方法，使用雙重曝光視頻來(lái)吸引用戶(hù)，吸引人們繼續(xù)瀏覽網(wǎng)頁(yè)

視頻和大的、美觀的全屏圖像是吸引用戶(hù)和快速確立網(wǎng)頁(yè)基調(diào)的有效方式。 這兩種形式在其應(yīng)用中是高度通用的，特別適合作為背景排版使用的。

02. Long form content and scrolling   長(zhǎng)篇幅滾動(dòng)翻頁(yè)網(wǎng)頁(yè)

National Geographic的網(wǎng)站是主頁(yè)頁(yè)面的內(nèi)容是一個(gè)很好的例子，因?yàn)樗鼛缀鹾w了這篇文章中提到的每一點(diǎn)

滾動(dòng)的網(wǎng)頁(yè)絕不是一種新的方式，也絕對(duì)不是一個(gè)基本功能的“趨勢(shì)”  用于瀏覽Web和應(yīng)用程序。然而，我們?cè)絹?lái)越多地看到的是更多在桌面設(shè)備和更大屏幕的設(shè)備上使用了長(zhǎng)篇幅滾動(dòng)網(wǎng)頁(yè)來(lái)進(jìn)行信息展現(xiàn)。

在過(guò)去幾年中，由于用戶(hù)覺(jué)得在較小屏幕設(shè)備上滑動(dòng)翻頁(yè)更便于查找內(nèi)容，更多的設(shè)計(jì)人員開(kāi)始在較大屏幕上使用長(zhǎng)篇幅滾動(dòng)網(wǎng)頁(yè)的界面。

這允許用戶(hù)可以以更流暢的動(dòng)作來(lái)非常快速地瀏覽大量的信息，而不會(huì)因?yàn)橐袚Q頁(yè)面而被干擾。 它是一個(gè)能夠廣泛適用的方式，可以用在所有設(shè)備和內(nèi)容媒體上，不管是長(zhǎng)篇新聞和新聞故事，還是登陸頁(yè)面和交互體驗(yàn)，它都可以適用

國(guó)家地理雜志將地圖，視頻，圖像和動(dòng)畫(huà)結(jié)合在一起，創(chuàng)造了一種單一，流暢，身臨其境且豐富多彩的瀏覽體驗(yàn)，

瀑布流網(wǎng)頁(yè)是一個(gè)非常好的網(wǎng)頁(yè)瀏覽方式，它以線(xiàn)性的方式引導(dǎo)用戶(hù)瀏覽網(wǎng)頁(yè)內(nèi)容。 它是一個(gè)廣泛適用的方式，非常適合創(chuàng)建沉浸式、無(wú)縫、長(zhǎng)篇幅的內(nèi)容。不管用戶(hù)使用的是什么設(shè)備，它都可以讓用戶(hù)有一個(gè)流暢的體驗(yàn)。

03. Gradients and vivid colours  漸變和鮮艷的顏色

Spotify是大品牌嘗試大膽使用顏色和漸變的一個(gè)很好的例子

2013年，扁平化迅速在各類(lèi)設(shè)計(jì)中流行開(kāi)來(lái)，扁平化讓設(shè)計(jì)師們?cè)谠O(shè)計(jì)中使用更多的冷色調(diào)和刪除多余的元素。 盡管它本身有一些缺點(diǎn)，但平面設(shè)計(jì)是一門(mén)實(shí)用哲學(xué)，扁平化今天仍然具有價(jià)值。

扁平化要求簡(jiǎn)化UI中的核心功能性元素，從而獲得更簡(jiǎn)潔高效的用戶(hù)體驗(yàn)。

使用扁平化是為了獲得更好的用戶(hù)體驗(yàn)，但是扁平化的迅速流行造成很多設(shè)計(jì)師設(shè)計(jì)出的網(wǎng)頁(yè)都極其相似的現(xiàn)象。 來(lái)自世界各地的品牌和設(shè)計(jì)師們都跟風(fēng)涌入扁平化的浪潮中，導(dǎo)致很多設(shè)計(jì)都缺乏個(gè)性，非常相似。

2016年，扁平化的趨勢(shì)又逐漸顯現(xiàn)，更多的品牌和設(shè)計(jì)師開(kāi)始強(qiáng)調(diào)更加個(gè)性的扁平化，嘗試鮮亮的顏色和漸變，不再像以前一樣一味的強(qiáng)調(diào)簡(jiǎn)單和冷色調(diào)。 漸變和鮮艷的顏色越來(lái)越多在傳統(tǒng)的UI和網(wǎng)頁(yè)設(shè)計(jì)中，最近備受爭(zhēng)議的Instagram，在品牌的重新設(shè)計(jì)中就用到了鮮艷的顏色和漸變。 無(wú)論這是否符合你的品味，我們都應(yīng)期望看到更多的使用漸變和鮮亮的顏色將推動(dòng)UI和網(wǎng)頁(yè)更具個(gè)性！

Spotify不斷變化的漸變創(chuàng)造了一種友好和有趣的美學(xué)

鮮亮的顏色和漸變能夠?qū)⒏嗟哪芰?、溫暖和活力注入到一個(gè)產(chǎn)品中，使其脫穎而出。 大膽的去嘗試使用不同的顏色，但一定要確保他們和你想要表達(dá)的內(nèi)容和諧一致，不能沖突。 但是這樣做之前一定要深思熟慮，避免給人們?cè)斐裳劬Σ贿m的感覺(jué)。

04. Illustrations   插畫(huà)

Dropbox是具有強(qiáng)烈插畫(huà)風(fēng)格品牌的很好的一個(gè)例子。 這種粗獷、手繪的風(fēng)格讓人覺(jué)得輕松愉悅，增加了人們對(duì)他們產(chǎn)品的信任感。

插畫(huà)能夠給人一種別具一格的感覺(jué)，這是普通圖片很難實(shí)現(xiàn)的。 更能貼合品牌特質(zhì)的定制插畫(huà)能夠使公司更加細(xì)致的創(chuàng)建一個(gè)真正貼合他們的個(gè)性和語(yǔ)調(diào)的視覺(jué)語(yǔ)言 - 有助于給用戶(hù)和客戶(hù)灌輸可靠和信任的感覺(jué)。

插畫(huà)也擁有很多表現(xiàn)形式。 一些品牌可能選擇用平滑的線(xiàn)條插畫(huà)，這種插畫(huà)能夠表現(xiàn)出一種銳利和高雅的感覺(jué)；而其他品牌可能選擇更粗糙潦草的手繪風(fēng)格，這種風(fēng)格的插畫(huà)給用戶(hù)一種有趣和俏皮的感覺(jué)。 插畫(huà)給創(chuàng)意提供更多的途徑，當(dāng)插畫(huà)與攝影和排版結(jié)合時(shí)，更是如此。

PayPlan的清新、溫和的說(shuō)插畫(huà)風(fēng)格加上他們的審美幫助他們將品牌定位為友好和關(guān)懷，吸引用戶(hù)的需求。

插畫(huà)定制可以創(chuàng)造個(gè)性和可靠性，這兩點(diǎn)對(duì)于創(chuàng)造和客戶(hù)長(zhǎng)期有效的連接是至關(guān)重要的。 插畫(huà)在APP上是可以廣泛適用的，并且與本文討論的其他UI設(shè)計(jì)流行趨勢(shì)可以好結(jié)合的。

05. Breaking the grid 突破網(wǎng)格

Red Collar Digital的網(wǎng)頁(yè)是突破網(wǎng)格限制的UI的一個(gè)很好的例子

網(wǎng)格長(zhǎng)期以來(lái)一直是設(shè)計(jì)師的神器，給那些需要確保一致性、平衡、節(jié)奏和順序的設(shè)計(jì)提供了基礎(chǔ)。 它是用戶(hù)體驗(yàn)設(shè)計(jì)中的一個(gè)重要工具，因?yàn)樗麄優(yōu)橛脩?hù)提供了最熟悉的UI體驗(yàn)，使他們能夠以一種自然的方式直觀地瀏覽網(wǎng)站或APP。

然而，與網(wǎng)格同樣需要重視的一點(diǎn)是：它也限制性的和剛性的制約了設(shè)計(jì)者的創(chuàng)造性選擇。 為了創(chuàng)造突破傳統(tǒng)的數(shù)字體驗(yàn)，許多網(wǎng)頁(yè)和UI設(shè)計(jì)師正在通過(guò)“打破網(wǎng)格”來(lái)試驗(yàn)布局。

通過(guò)遠(yuǎn)離網(wǎng)格和剛性的基線(xiàn)結(jié)構(gòu)，設(shè)計(jì)師正在創(chuàng)建更有趣和實(shí)驗(yàn)性的網(wǎng)站，APP和界面。 它開(kāi)辟了一個(gè)全新的創(chuàng)新道路，允許設(shè)計(jì)師通過(guò)使用分層、深度、運(yùn)動(dòng)和明顯的焦點(diǎn)實(shí)現(xiàn)真正的表達(dá)。

像Like Red Collar Digital，建筑師Sergey Makhno 用兩層排版、圖像甚至視頻創(chuàng)造了一個(gè)更寬松和自由流動(dòng)的的體驗(yàn)

打破網(wǎng)格提供了更多的創(chuàng)新選擇。 它的靈活性可以產(chǎn)生流動(dòng)性和自由度，這是在用網(wǎng)格設(shè)計(jì)時(shí)很難有的。 然而，在你這樣做的時(shí)候一定要考慮周全。 所有的界面首先必須是用戶(hù)友好的，這一點(diǎn)是毋庸置疑的，否則可能會(huì)使一些用戶(hù)非常困惑！ 如果是響應(yīng)式設(shè)計(jì)你還需要考慮如何在讓它在較小的屏幕上能夠發(fā)揮作用。

06. Parallax  視差

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

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

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

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

07. More cards!  卡片

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

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

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

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

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

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

08. Micro-interactions  微互動(dòng)

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

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

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

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

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

該示例清楚地向用戶(hù)指示他們的動(dòng)作已經(jīng)實(shí)現(xiàn)，因?yàn)樗鼈冊(cè)诳捎脿顟B(tài)之間切換

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

09. Typography  字體排版

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

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

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

雪鐵龍?jiān)谒麄兊难╄F龍起源互動(dòng)頁(yè)面中也選擇了創(chuàng)意的分層字體和圖像組合。

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

10. Experimental Navs  導(dǎo)航欄實(shí)驗(yàn)

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

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

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

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

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

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

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

結(jié)論

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

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

當(dāng)前題目：2016年UI設(shè)計(jì)的10大趨勢(shì) 10 top UI trends for 2016
網(wǎng)頁(yè)鏈接：http://www.muchs.cn/news16/43616.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計(jì)、做網(wǎng)站、自適應(yīng)網(wǎng)站、定制開(kāi)發(fā)、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)