在上篇文章《2020年最值得關(guān)注的9大交互設(shè)計(jì)趨勢(shì)》中，分享了科技發(fā)展對(duì)交互設(shè)計(jì)產(chǎn)生的影響和變化。這一期，我想和大家談?wù)勗O(shè)計(jì)趨勢(shì)的第二部分：UI用戶界面的應(yīng)用與最新趨勢(shì)，供大家參考。

01 創(chuàng)意動(dòng)畫

1. 品牌加載

公眾喜歡有趣，可塑的動(dòng)畫。Airbnb 和 Netfilx 將品牌logo動(dòng)畫應(yīng)用到了啟動(dòng)頁(yè)和加載頁(yè)面。結(jié)合品牌特點(diǎn)、風(fēng)格和符號(hào)，融合到產(chǎn)品設(shè)計(jì)中，從而提升視覺的一致性，創(chuàng)造屬于特有性格的產(chǎn)品界面。

▲Netflix& Airbnb

2. 圖標(biāo)動(dòng)畫

微交互是建立在移動(dòng)端上微妙視覺效果的小動(dòng)畫，而圖標(biāo)動(dòng)畫是微交互其中的一種。它的目的是吸引用戶，讓用戶感覺順暢、愉悅。為此設(shè)計(jì)師借此創(chuàng)造出打動(dòng)人心的瞬間。

最近，讓我印象深刻的一個(gè)圖標(biāo)動(dòng)畫是 Facebook 的新消息提醒界面，這些由產(chǎn)品所包含的一個(gè)個(gè)小細(xì)節(jié)，創(chuàng)造出了新穎而有趣的設(shè)計(jì)。

▲FacebookWebsite

02 留白分隔

在UI界面中，最常見的分隔方式是用細(xì)線對(duì)模塊進(jìn)行劃分。但隨著設(shè)計(jì)重心趨向簡(jiǎn)約，注重內(nèi)容本身，傳統(tǒng)的分隔線方式就略顯多余。

根據(jù)格式塔親密原則，通過留白控制間距大小，可以清晰的劃分模塊層級(jí)，同時(shí)界面看起來也更加透氣、富有張力?？梢钥吹絈Q、飛聊、Gmail、Messenger等應(yīng)用都采用留白分隔。

▲Gmail & Messenger

03 融入插圖

1. 品牌形象插畫

一個(gè)好的插畫作品可以為產(chǎn)品帶來極佳的辨識(shí)度。Snapchat的頁(yè)面用了很多情感化設(shè)計(jì)和品牌形象。包括開啟通知引導(dǎo)動(dòng)畫、查找好友landing page、下拉刷新頁(yè)、照片回憶等等。

從品牌的個(gè)性化設(shè)計(jì)，尋找一種基于插畫的設(shè)計(jì)語(yǔ)言，把產(chǎn)品塑造成一個(gè)高辨識(shí)度的ID。

▲Snapchat

2. 3D插畫

隨著軟件技術(shù)的提升，3D插畫在這幾年中大受歡迎，很多應(yīng)用都使用3D渲染產(chǎn)品，如：星巴克、Keep、毒App等等，因?yàn)樗鎸?shí)立體、有著更高的轉(zhuǎn)化率。

▲Starbucks by Wojciech

▲Keep& 毒

04 圓角卡片

圓角代表友好、親和力；而卡片模塊化的布局更為清晰、有效、整潔。

在上周的微信改版《微信 7.0.5 發(fā)布：9個(gè)細(xì)節(jié)提升體驗(yàn)》的文章中，我講到了訂閱號(hào)的推送文章去掉了標(biāo)題欄的背景，卡片變的更加簡(jiǎn)潔。另外，公眾號(hào)詳情頁(yè)由原先的列表式，改成了圓角卡片式，彈窗也由直角改成圓角。

▲Broadcasting&微信

05 視頻背景

長(zhǎng)期以來，圖像在視覺設(shè)計(jì)中起著至關(guān)重要的作用，而視頻能夠更直觀的吸引用戶，傳達(dá)主要的思想。

在移動(dòng)端中，視頻主要用于登錄頁(yè)背景，一般可以是幾秒鐘的循環(huán)剪輯視頻，它可以帶來一種身臨其境的感受體驗(yàn)。

▲Lyft&Nike

06 輕提示

Toast是一種輕量級(jí)的提示，它作為用戶操作后的反饋。UI形態(tài)上從居中浮層，慢慢趨向于底部通欄樣式。這樣設(shè)計(jì)的好處是不會(huì)擋住當(dāng)前界面的內(nèi)容。

舉一個(gè)反例就是，iOS的調(diào)整音量提示，大范圍的遮住了界面，特別是對(duì)正在玩游戲的用戶非常不友好，直到iOS13這個(gè)設(shè)計(jì)才被修改。

▲Google Earth& Spotify

07 色彩平鋪

隨著扁平化設(shè)計(jì)和 Material Design 進(jìn)一步占據(jù)主流趨勢(shì)，簡(jiǎn)約的界面，明亮，大膽的色彩一直都處于增長(zhǎng)趨勢(shì)。色彩平鋪已經(jīng)成為清新、酷炫、數(shù)字時(shí)代的代名詞。

▲Snapchat &Spotify

08 注重內(nèi)容

重內(nèi)容、輕UI。把注意力引導(dǎo)在重要內(nèi)容和功能上。像Facebook、Instagram 這種以圖片社交為主的App都有一個(gè)特點(diǎn)，就是文字都是黑白灰，將彩色交給圖片去傳達(dá)，讓用戶關(guān)注內(nèi)容即可。

▲Facebookfor Android

09 AR

增強(qiáng)現(xiàn)實(shí)類的技術(shù)，已經(jīng)出現(xiàn)在很多Web、App等領(lǐng)域中。許多平臺(tái)開發(fā)者也將增強(qiáng)現(xiàn)實(shí)技術(shù)納入其開發(fā)工具里面，可預(yù)期的這種類型的App將會(huì)越來越多。

1. 地圖導(dǎo)視界面

地圖+AR，讓你不再盯著二維平面上那個(gè)藍(lán)色的點(diǎn)，而是現(xiàn)實(shí)世界中的箭頭告訴你在哪個(gè)路口轉(zhuǎn)向。

▲Google Map

2. 表情貼紙

還有像Instagram、Snapchat、Messenger等平臺(tái)上可用的AR濾鏡來創(chuàng)作，表情貼紙可以幫助用戶更直白有效地自我表達(dá)、獲取注意力。

▲Spark AR

10 車載系統(tǒng)界面

隨著5G、車聯(lián)網(wǎng)、人工智能、自動(dòng)駕駛的發(fā)展，車載界面也越來越受重視了。

在今年的 Google I/O 開發(fā)者大會(huì)上，針對(duì)車載系統(tǒng)Android Auto，推出了新的設(shè)計(jì)語(yǔ)言，它有著更好的可拓展性。在UI上，完全重新設(shè)計(jì)了導(dǎo)航欄，能夠更輕松的訪問應(yīng)用、通知，和你的Google智能助理，最大限度的幫助駕駛者減少分心，將注意力集中在道路上。

▲Android Auto UI

此外，還開發(fā)了新的系統(tǒng)小部件，在使用地圖進(jìn)行導(dǎo)航時(shí)，仍然可以一鍵控制音樂應(yīng)用，或者正在進(jìn)行的電話，同時(shí)在屏幕上保持地圖的完整視圖。

總結(jié)

UI設(shè)計(jì)的趨勢(shì)除了側(cè)重內(nèi)容和情感之外，還會(huì)根據(jù)不同設(shè)備載體、新的技術(shù)（3D、AR）而變化。但歸根結(jié)底還是以人為本，借用Adobe設(shè)計(jì)副總裁 Jamie Myrold 的一句話：如今設(shè)計(jì)師要思考的，絕不僅僅是設(shè)計(jì)一款A(yù)pp、網(wǎng)站或設(shè)計(jì)工具。我們要思考的是人類的需求，用戶的需求；打造真正人性化，多元化與包容性的設(shè)計(jì)。

#相關(guān)文章#

2020年最值得關(guān)注的9大交互設(shè)計(jì)趨勢(shì)

作者：阿洋；公眾號(hào)：洋爺（ID：yangye365）網(wǎng)易資深視覺設(shè)計(jì)師，每周分享關(guān)于交互、產(chǎn)品、視覺上的思考，歡迎關(guān)注交流。

本文由 @洋爺 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。