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

2019-7-17    資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

在過(guò)去兩個(gè)月,從國(guó)外的 Google I/O、Apple WWDC、Facebook 開(kāi)發(fā)者大會(huì),到國(guó)內(nèi)的飛聊、QQ改版、豆瓣FM 6.0,可以看到很多關(guān)于交互設(shè)計(jì)上的趨勢(shì)。

同時(shí),我從日常的產(chǎn)品體驗(yàn)中,整理了一些思考內(nèi)容,以下是對(duì) 2020 年交互設(shè)計(jì)趨勢(shì)的展望。

模態(tài)展示

在 iOS 13 中,模態(tài)面板采用了新的卡片樣式,它占據(jù)了屏幕 90% 的面積。模態(tài)面板拉起時(shí),原有的頁(yè)面會(huì)有一個(gè)縱深效果,以灰色狀態(tài)顯示,防止用戶(hù)和它們發(fā)生交互。模態(tài)面板可以通過(guò)滑動(dòng)操作下拉關(guān)閉,適用于單手操作,專(zhuān)為大屏服務(wù)。

在系統(tǒng)郵件、日歷、通訊錄、Apple Music、信息 Animoji 等自帶應(yīng)用中,模態(tài)面板得到了廣泛應(yīng)用。

△ Apple Music & 郵件

專(zhuān)注下半部分

夸克瀏覽器是專(zhuān)注下半部分做得最好的一個(gè),夸克并沒(méi)有像 Safari、Chrome 那樣把搜索框放在頂部,而是將整合后的搜索欄放在了用戶(hù)更容易操作的屏幕下半部分。

分層內(nèi)容

分層內(nèi)容是基于動(dòng)作菜單,彈出分層內(nèi)容。分層內(nèi)容的展現(xiàn)形式可以減少頁(yè)面跳轉(zhuǎn),讓用戶(hù)保持在最原始的環(huán)境中。并且主要操作交互位于界面下半部分,觸手可及。

△ Snapchat & Keep

1. 懸停分層

在網(wǎng)易云音樂(lè)、即刻、飛聊等應(yīng)用中,采用了懸停分層。頂部展示的是介紹性?xún)?nèi)容,隨著頁(yè)面下滑,介紹內(nèi)容隱藏,同時(shí)功能欄將置頂懸停,展示的內(nèi)容區(qū)域大大增加。

△ 網(wǎng)易云音樂(lè) & 即刻

△ Broadcasting iOS App UI Exploration

連續(xù)性頁(yè)面

連續(xù)性頁(yè)面的轉(zhuǎn)換效果可以很好記住產(chǎn)品路線,加強(qiáng)了頁(yè)面的層級(jí)關(guān)系。同時(shí),流暢的動(dòng)畫(huà)轉(zhuǎn)換效果,帶來(lái)了更連貫的用戶(hù)體驗(yàn)。

App Store 和 Behance,以及最近發(fā)布的豆瓣 FM 6.0,都采用了這種方式。

△ App Store & Behance

全屏展示

很多App在引導(dǎo)評(píng)分樣式上,都采用的是系統(tǒng)彈窗。在 Keep App 上,設(shè)計(jì)了一個(gè)全屏展示的評(píng)分提示。形式新穎,加上背景圖的氣氛,讓人想去評(píng)分的意愿大大增加。

同樣,Airbnb 的系統(tǒng)通知提示也是采用的全屏展示,這是一個(gè)趨勢(shì),值得我們?nèi)リP(guān)注。

△ Airbnb 愛(ài)彼迎 & Keep

快捷驗(yàn)證

1. 蘋(píng)果賬號(hào)登錄

近兩年幾乎所有的 App 都會(huì)推薦首先使用手機(jī)號(hào)+短信驗(yàn)證碼的方式注冊(cè)/登錄,同時(shí)也會(huì)接入像微信、QQ、支付寶這樣的三方登錄。

在 WWDC 2019 上,蘋(píng)果也給我們帶來(lái)了 「使用蘋(píng)果賬號(hào)登錄」,幾乎所有的蘋(píng)果設(shè)備都會(huì)登錄 Apple ID。因此,我們可以在不久的將來(lái),通過(guò)蘋(píng)果賬號(hào),就可以直接登錄所有的 App,是不是很方便?

2. 號(hào)碼識(shí)別

網(wǎng)易易盾的號(hào)碼識(shí)別,可以自動(dòng)獲取當(dāng)前開(kāi)啟流量的 SIM 卡號(hào)碼,一鍵點(diǎn)擊即可完成注冊(cè)、登錄操作。減少手機(jī)號(hào)輸入、短信驗(yàn)證碼等待時(shí)間等傳統(tǒng)步驟,提升關(guān)鍵環(huán)節(jié)轉(zhuǎn)化率。

△ 網(wǎng)易易盾

語(yǔ)音交互

近年來(lái),智能語(yǔ)音技術(shù)在很多場(chǎng)景得到了應(yīng)用,微軟的 Cortana,蘋(píng)果的 Siri、谷歌的 Assistant。在引入深度學(xué)習(xí)后,語(yǔ)音助手可以在訓(xùn)練中越來(lái)越強(qiáng),吐詞更連貫??淇说恼Z(yǔ)音助手有本地天氣、本周本月可視化數(shù)據(jù)、新聞熱點(diǎn)、節(jié)日問(wèn)候、冷知識(shí)等功能。

在5月的開(kāi)發(fā)者大會(huì)上,谷歌展示了其人工智能與語(yǔ)音識(shí)別的 Live Relay 技術(shù)。其能夠?yàn)椴槐銘?yīng)答電話的用戶(hù),提供基于實(shí)時(shí)語(yǔ)音/文字互轉(zhuǎn)的通話支持。對(duì)于聾啞人來(lái)說(shuō),這絕對(duì)是一項(xiàng)實(shí)用的功能。

△ Google I/O 2019 Live Relay

事實(shí)上,Live Relay 也能幫助到一般人,例如當(dāng)我們需要接聽(tīng)重要電話,但卻無(wú)法離開(kāi)當(dāng)下所進(jìn)行事項(xiàng),Live Relay 在此時(shí)就能派上用場(chǎng),透過(guò)輸入文字的方式,接聽(tīng)重要來(lái)電。

最方便的是,Live Relay 還可整合即時(shí)的翻譯功能,這在與外國(guó)人士溝通時(shí)起了很大的幫助作用,可說(shuō)是另外一種「無(wú)障礙功能」。

AR增強(qiáng)現(xiàn)實(shí)

1. WANNA KICKS 通過(guò)AR技術(shù)「試鞋」

通過(guò) AR 增強(qiáng)現(xiàn)實(shí)技術(shù)與智能手機(jī)相機(jī)的結(jié)合,幫助你看到 YEEZY BOOST 350 等運(yùn)動(dòng)鞋「穿」在自己腳上的效果,它甚至還能模擬出鞋子在光線不同環(huán)境下的各種效果。

2. 小程序AR+口紅試色

昨天,首個(gè)支持AR動(dòng)態(tài)試妝的小程序「阿瑪尼美妝」同步更新上線。基于小程序基礎(chǔ)能力和谷歌 TensorFlow 機(jī)器學(xué)習(xí)開(kāi)源平臺(tái)支持,歐萊雅集團(tuán)開(kāi)發(fā)了 AR 動(dòng)態(tài)試妝能力。相比以前上傳照片的試色方式,AR 動(dòng)態(tài)試妝讓試色更真實(shí)。

AR 使用在網(wǎng)頁(yè)設(shè)計(jì)或應(yīng)用程序領(lǐng)域,它能夠自然地將虛擬與現(xiàn)實(shí)結(jié)合,帶來(lái)身臨其境的新體驗(yàn)。

多窗口預(yù)覽

△ App Store & QQ

在 QQ 的版本中,列表頁(yè)面長(zhǎng)按消息,會(huì)彈出多窗口模式,消息可以來(lái)回切換,類(lèi)似于 iOS 后臺(tái)切換模式。在會(huì)話窗口長(zhǎng)按任意地方,也會(huì)呼出多窗口模式。

總結(jié)

科技發(fā)展給設(shè)計(jì)產(chǎn)生的影響是巨大的,讓我更深刻地認(rèn)識(shí)到作為設(shè)計(jì)師的責(zé)任。這些設(shè)計(jì)趨勢(shì)有意或無(wú)意地將幫助用戶(hù)得到更好的產(chǎn)品體驗(yàn)。

藍(lán)藍(lán)設(shè)計(jì)bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì)  ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)。

分享本文至:

日歷

鏈接

個(gè)人資料

存檔