2019年網頁及UI設計趨勢（八）

摘要： 每年各大設計部落格和知名網站都會預測新一年的網頁和UI設計趨勢，既有相同之處，也有各家的獨到見解，甚至還有相互衝突的地方。在接下來的系列文章裡，將會為大家彙編（譯）一些比較具有前瞻性的趨勢文章供參考。 本期文章則選取了uxplanet 對UI設計趨勢的預測，包含19個...

每年各大設計部落格和知名網站都會預測新一年的網頁和UI設計趨勢，既有相同之處，也有各家的獨到見解，甚至還有相互衝突的地方。在接下來的系列文章裡，將會為大家彙編（譯）一些比較具有前瞻性的趨勢文章供參考。

本期文章則選取了uxplanet 對UI設計趨勢的預測，包含19個方面的內容，涉及影象，背景，插畫，顏色，互動，動效，排版等，幾乎涵蓋了UI所有方面的趨勢，非常值得借鑑。

系列文章

• 2019年網頁及UI設計趨勢（一）
• 2019年網頁及UI設計趨勢（二）
• 2019年網頁及UI設計趨勢（三）
• 2019年網頁及UI設計趨勢（四）
• 2019年網頁及UI設計趨勢（五）
• 2019年網頁及UI設計趨勢（六）
• 2019年網頁及UI設計趨勢（七）
• 2019年網頁及UI設計趨勢（八）
• 2019年網頁及UI設計趨勢（九）
• 2019年網頁及UI設計趨勢（十）

2019年UI趨勢大預測
Big Review of UI Design Trends We Start 2019 With

概覽

1. 3D影象
2. 互動個性化
3. 全屏背景影象和視訊
4. 複雜的網頁數字插畫
5. 視覺敘事
6. 無按鈕互動
7. 面向UI的品牌建立
8. 美觀好用的UI動效
9. 突出的排版和精心製作的標語
10. 高度可讀性
11. 過渡實驗
12. 美觀的英雄影象
13. 藝術化的UI細節
14. 分屏
15. 多層佈局
16. 高質量的照片內容
17. 視訊內容的增長
18. 海報樣式的網頁
19. 色彩實驗

3D影象

近年來最熱的趨勢之一就是整合到移動端和網頁介面的各種3D影象。將這種型別的影象整合到UI中是非常大的挑戰，需要特殊的技術以及藝術家的眼光。此外，還需要花費時間。但是，它無疑是非常吸引眼球的，使用者不會忽視它的存在。3D渲染通常看上去十分逼真，這對使用者介面設計來說是一個很大的優勢。這種型別的影象可以在你需要的照片內容無法獲取或者價格昂貴的情況下進行替代。

[圖片上傳失敗...(image-a980f1-1550893967942)]

這是一個公司的網站 ，他們的業務是設計和建造可持續性的房屋，使用太陽能來獲取所有能源。房屋的3D渲染模型允許使用者看到他們所提供服務的逼真影象，甚至可以操控白天和夜晚模式。

這是一個預訂服務網站 ，使用了3D影象作為大型的主體圖片，佔據了頁面的左側，可以立刻吸引使用者的注意力。這樣的插圖不僅設定了主體，還讓介面看上去很美觀。 這是My Baby應用的一個起始頁 ，一個可愛的移動版日記，記錄所有寶貴的物品，如照片，視訊以及成就。3D圖形以優雅和具有吸引力的方式設定了情緒和主體。 憑藉吸引人的優雅圖形，即使像註冊這樣的基本應用程式螢幕也會看起來很誘人，並且可以在第一時間的互動中吸引使用者。這裡可以看到飯店app應用程式 是如何實現的。

個性化的互動介面

近年來為數字產品的使用者體驗帶來更加深入和複雜化的個人定製形成一股強烈的運動。設計師努力提供更多功能讓使用者可以根據他們的需求自定義功能。

Perfect Recipe 應用允許使用者設定努力的目標（減少或增加體重，保持健康飲食，諸如此類）。此外，使用者可以標記他們避免使用的食材，這樣應用程式在顯示菜譜的時候就可以不把這些包含在裡面。每個使用者通過這種方式可以得到定製化的內容，建議和搜尋結果。 Tasty Burger app 讓使用者在下單前可以定製他們的漢堡包，新增或者去除特殊的食材。

全屏背景影象和視訊

你可能從前面的例子注意到了，另一個強勢增長，特別是在網站UI設計中的趨勢就是全屏背景視覺的使用。這些可以是照片，特殊渲染過的視覺影象，甚至是視訊。這種方式有助於使螢幕在視覺上和情感上具有吸引力，並且支援所有佈局元素的完整性。

這是一個設計工作室的網站首頁 ，該網站專注於室內外設計視覺化。高質量的經過渲染的原圖佔據了整個背景區域：這種方式使影象快速設定了主題並且展示出了公司的服務內容。 這是Explore Universe 的UI概念，專門介紹太陽系及其行星以及有趣的探索的線上互動百科全書。圖片，視訊以及影象素材和黑色的背景相結合，提供了主題的視覺連線。流暢的動畫讓使用者身臨其境的感受到了無盡的外太空。

複雜的網頁數字插畫

自定義數字插畫變得越來越普遍，特別是在網頁介面中。自定義影象具有不同的樣式，有效的提供了頁面或者螢幕上的快速資訊感知。而且，它們為原創性奠定了堅實的基礎。網站和應用程式提供自定義吉祥物，圖示和插畫，以增強頁面或螢幕的外觀，並提高可用性和直觀導航。而且，影象改進了UX設計的可用性，為有文字識別困難的使用者打破了感知極限，例如非母語使用者，閱讀障礙使用者或者不具閱讀能力的學前兒童。

這種趨勢也在積極地將數字插圖建立為部落格的標題影象，正如我們在Tubik部落格上做的那樣。這絕對是一個很酷的趨勢，因為它為我們經常閱讀的部落格和網站添加了有意義和資訊豐富的美感，並且開拓了藝術家的創作視野。

這是Kiddy的著陸頁，一個讓僱傭保姆變得小菜一碟的網站。看上去很可愛是吧？使用了幾個元素讓人感覺到可愛和正能量，其中帶有有趣人物的自定義動畫插圖扮演了關鍵角色。他們傳遞資訊和心情，在使用者開始閱讀服務內容之前創造所需的氛圍，併為所有頁面提供獨特的外觀。

視覺敘事

自定義圖形的發展趨勢為介面中的故事講述打開了更廣闊的視野。越來越多的網站和移動應用程式轉向使用專門設計的角色來展示故事，設定氛圍，傳達資訊，或者以與平臺對應的情緒，語調和語音的方式來呈現優勢。原始角色有助於使互動更像人類，與現實世界建立強烈的視覺關聯，以及即時轉移所需的情緒。更重要的是，根據構圖，角色可能成為一個有效的工具讓頁面或者螢幕更具動態化以及生機勃勃。

這一套插畫是為我們最近的專案Florence App創作的。它是一個線上市場，自顧型護士可以在英國找到高薪輪班。角色建立了視覺故事講述並且展示了app的功能和優勢。

無按鈕互動

按鈕依然是UI設計的重要元素之一，但現在我們從沒有按鈕的UI互動的視角看到更多關於移動使用者體驗的創造性實驗。這種方法可以節省螢幕上更多寶貴的空間用來展示更多的資訊，甚至可以認為它是基於手勢操作的虛擬介面的第一步。

這個百科全書應用程式 提供了各種主題的互動式資訊圖表。所有的資料互動都是基於手勢操作的，而沒有任何按鈕出現在佈局中。

面向UI的品牌建立

2018年延續了品牌重建的大趨勢：全球化和本土公司，產品和品牌改變了它們的logo以及品牌視覺效果，主要是為了簡化形式和細節。這一趨勢的原因之一是隨著越來越多的企業爭奪更高的線上業務，需要努力讓品牌元素的可用性和導航性變得更好。因此，全新的和重構的logo標識被建立的更為使用者介面友好化，並且在各種數字裝置和佈局上更有效的被感知。此外，動態logo成為一種趨勢，使身份符號更具有互動性並增強品牌意識。

Moon Creative，一個讓兒童和青少年學習設計和動畫的教育機構，他們的logo設計和應用品牌化。應用程式內的色板，動態logo，互動元素和動畫達到了品牌的一致性。

美觀好用的UI動效

近些年來沒有看到對互動動效的興趣減少。不僅是因為它可以賦予互動過程生命和運動，而且顯著的改善了可用性。使用者體驗變得更加資訊化和更具吸引力，同時互動介面的元素操控更為清晰易懂。因此，設計師更好的使用了大量的按鈕，標籤，圖示，預載以及滾動動畫。

這是一組理財app 的互動，該應用讓使用者可以以獨立或分組的方式追蹤他們的支出和收入。UI動效支援直觀的導航，並吸引使用者注意核心元素和變化。 Slumber app 具有一個漂亮而引人注目的主屏視覺點，一個自定義的插畫，與預載一起聯動，使等待的過程不會枯燥而且很美觀。

突出的排版和精心製作的標語

大膽而引人注目的排版繼續在網頁和移動佈局中保持著高姿態。它通常是關鍵設計元素之一，設計師們會非常注意保持其可讀性和可掃描性：排版結構，合適的字型選擇是每一個UI設計專案的核心任務。我們越來越多的注意到文字不僅是資訊的來源，而且還是設計的核心元素以及使用者體驗的中心。更重要的是，設計群體對UI的文案表現更為關注：特別是資訊性和引人注目的標語成為網頁設計不可或缺的元素。

這是一個優雅的傳記網站 的設計，聚焦於Stanley Kubrick的光榮之路，生活和創意遺產。很容易看出，對比度和精心設計的排版被選為設計中的主要表現工具。

高度可讀性

近年來引起UI和UX設計師高度關注的是通用可讀性，不僅是諸如標題，品牌名稱或者號召性用語等核心文字元素，而且還包括文字中的其他內容。這就需要為網站和移動應用介面仔細選擇字型和字型組合，更傾向於使用簡單和高可讀性的字型，而不是複雜和藝術字體。

這是一個支援訪客的博物館應用 的互動概念：幫助檢視可用的展覽，在幾秒鐘內瞭解它們的更多內容，甚至可以建立線路從所有博物館到你想要看的展覽。時尚和突出的視覺效果與易讀的文字相關聯，方便應用在途中使用。

過渡實驗

隨著越來越多的可訪問性和改進的運動設計工具，螢幕之間的滾動和過渡動畫使其在網站和移動互動介面保持著流行度。具有創意的和原創過渡效果提升了使用者體驗 ，使其看上去更為自然，併為基本的互動增添了優雅感。

這個UI概念幫助了那些搜尋或者持續關注汽車新聞的人。上圖所示為一個網頁應用Carfinder 的一組互動概念，通過特殊效果和引人入勝的動作，讓進入汽車世界變得輕鬆優雅。

美觀的英雄影象

英雄橫幅（Hero Banner）是網站互動中第一秒映入使用者眼簾的巨幅影象。它們為主要內容極具吸引力的視覺呈現做出了很大的貢獻。英雄橫幅證明其在設定情緒或者傳遞資訊方面卓有成效。此外，除了網頁上任何其他引人注目的圖形，這也是一種既有資訊性又具情感化吸引力的內容。突出的英雄橫幅可以滿足多個目標，如：

• 吸引使用者注意力
• 用視覺傳遞資訊
• 提供總體風格概念
• 設定所需主題，情緒和氛圍
• 表達核心利益或條目的有效性

這就是設計師需要投入這項技術讓當今的網頁多元化的原因。

這是一個外賣服務網站 的首頁，使用者可以從城市的任何商店購買並且由網站負責送貨。基於一個美觀且本色的調色盤，附帶突出的英雄影象使設計看上去十分誘人，從而讓使用者更好的瞭解網站業務。 這是一個銷售兒童書籍的電子商務網站 的一個頁面。這是一個栩栩如生的例子展示了自定義英雄插畫如何設定了情緒和主題。結合互動細節中的假象，使其成為一個具有吸引力的UI解決方案。

藝術化的UI細節

之前的例子都具有一個非常流行的趨勢，即將藝術融入到使用者體驗設計之中。儘管功能性才是使用者體驗的基礎，但是使用者的決策和偏好不僅基於邏輯而且還會涉及到情感和審美情趣。因此，藝術元素證明其在抓住使用者注意力和為使用者體驗增添積極的氛圍上是有用的。

為Cuteen app 設計的藝術圖示，為總體UI佈局增添了優雅和美觀。 這是一個設計師的作品集網站 概念，專注於名人，娛樂，音樂和電影製作的專案。暗色背景和自定義英雄插圖相結合，看上去更加生機勃勃，並且營造了一個音樂舞臺的氛圍。

分屏

一個非常熱門的趨勢就是網頁和移動介面的分屏使用。這並不是什麼新趨勢，它之前消失過，但是又回到了各式各樣的設計領域中，現在它無疑又起死回生了。這種方式被認為在響應式設計中是有效的，因為你可以在不缺失一致性的情況下讓內容變化多樣。更重要的是，它打開了顏色組合和實驗的無限空間。一些網站使用分屏來呈現同等重要的雙重內容。對於移動裝置，分屏成為基於暗色或亮色背景方案介面一個使用者友好的趨勢。而正確的可讀性也通常是爭辯的問題：設計師通過為核心資料區塊使用淺色背景空間解決了這個問題，並且為螢幕和頁面添加了優雅的對比度。

Watering Tracker 應用使用了水平的分屏設計：上方是深色的背景用來優雅的展示圖表和視覺，下方是淺色的背景，用來保持高度可讀性。 這是一個簡單的部落格應用的移動UI介面。主螢幕的上部分是閱讀話題，使用者可以水平移動選擇看哪個條目；接著還有熱門文章緊隨話題之後 。每一個分類都有很酷的視覺內容以3D圖形呈現。分屏允許提供亮色介面上良好的文字內容可閱讀性。

多層佈局

UI設計師在不斷進行創造性實驗，以找到使網頁具有吸引力和互動性的有趣方式。其中一個增長趨勢就是應用幾個互動層，使滾動體驗和互動看起來更具還原性。

這是一個致力於保護海洋的慈善網站的動效概念。設計師使用兩個圖層在幻燈變化的時候同時移動。順便提一下，使用紋理和影象作為文字內容的底部塗層這一非常流行的趨勢概念叫做圖層填充排版。

高質量的照片內容

一個廣泛使用的趨勢就是仔細和平衡的使用高質量影象和藝術照片內容。攝影是一種通過逼真和清晰的視覺效果給使用者留下深刻印象以及設定所需關聯的好方法。隨著照片相簿網站的快速發展，設計師有越來越多的機會發現好圖片；特別是對許多專案，尤其是電子商務專案，創意團隊為了達到產品的目標直接拍攝原始內容。特別值得注意的是日常生活中的如下領域：時尚，玩具，視訊和飲料等。

這是一個住宿應用 的UI設計，提供了一個3D影象和高質量照片完美結合的佈局。

視訊內容的增長

不同型別的促銷和解釋視訊如雨後春筍般出現在熒屏和頁面上。毋庸置疑，它們有效的為營銷目標提供了服務並提升了品牌知名度。一個有創意且美觀的視訊是吸引使用者注意力的好方式，也是強烈快速傳遞資訊的行之有效的方法。視訊可同時啟用多個感知通道 - 音訊，視覺，聲音，並通過講故事的力量增強它們。所有提及的因素都傾向於通過視訊提供強大而令人難忘的演示，特別是基於高品質的影象設計和動畫。人們每天都會承載大量的各種各樣的資訊，大部分人都沒有過多時間學習產品和服務，特別是新產品和服務。因此，視訊成為動態的，極具資訊化以及吸引力的交流方式。但是，繼而又出現了網頁載入速度的問題，這就需要在不同裝置上進行仔細的測試。

海報樣式的網頁

使用突出的視覺內容的趨勢可以在網頁上獲得一個更多的視角，看上去感覺很像海報。在正確選擇影象和時尚排版的情況下，允許頁面突出並吸引使用者的注意力。

Tasty Burger app 的著陸頁，基於極具吸引力和美觀的動畫：美味可口的新鮮漢堡創造了令人垂涎的效果，從而立刻設定了主題和情感吸引力，獨特的字型讓它看上去更為具有海報外觀。

色彩實驗

色彩實驗的趨勢也沒有受到任何流行度的損失，並帶來了全新的原創組合。很自然，顏色是為介面新增資訊和情緒，讓其看上去美觀且極具吸引力的有效方式之一。無論如何，有效的色彩實驗不僅僅是純粹的創造力，即使是最有創意和最令人驚豔的組合也是基於色彩理論和色彩心理學以及UI設計師的實踐經驗的。

這是一個基於最瘋狂想法的共享模版的虛擬聊天室的網路平臺 設計概念。視覺呈現使用了明亮甚至迷幻的色彩組合以及引人入勝的3D圖形，包括一個擬人化的人手元素，還有幾何形狀象徵著各種現代科技。

（編譯完）

英文原文：地址

原文作者：Tubik Studio

原文譯者：Twitter /Linkedin /微博

以上譯文僅代表原作者觀點。如需轉載請遵循CC版權協議 正確標明出處。