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

13 評論 30285 瀏覽 357 收藏 10 分鐘

2019年已經(jīng)過去一大半了,筆者從日常的產(chǎn)品體驗中整理思考,給我們預(yù)測了2020年交互設(shè)計領(lǐng)域的最新趨勢,結(jié)合自己的工作領(lǐng)域和方向,相信一定對大家有所幫助。

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

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

01 模態(tài)展示

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

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

▲Apple Music & 郵件

02 專注下半部分

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

03 分層內(nèi)容

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

▲Snapchat & Keep

1. 懸停分層

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

▲網(wǎng)易云音樂 & 即刻

▲Broadcasting iOS App

04 連續(xù)性頁面

連續(xù)性頁面的轉(zhuǎn)換效果可以很好記住產(chǎn)品路線,加強了頁面的層級關(guān)系。同時,流暢的動畫轉(zhuǎn)換效果,帶來了更連貫的用戶體驗。

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

▲App Store & Behance

05 全屏展示

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

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

▲Airbnb 愛彼迎 & Keep

06 快捷驗證

1. 蘋果賬號登錄

近兩年幾乎所有的 App 都會推薦首先使用手機號+短信驗證碼的方式注冊/登錄,同時也會接入像微信、QQ、支付寶這樣的三方登錄。

在 WWDC 2019 上,蘋果也給我們帶來了“使用蘋果賬號登錄”,幾乎所有的蘋果設(shè)備都會登錄 Apple ID。因此,我們可以在不久的將來,通過蘋果賬號,就可以直接登錄所有的 App,是不是很方便?

2. 號碼識別

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

▲網(wǎng)易易盾

07 語音交互

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

在5月的開發(fā)者大會上,谷歌展示了其人工智能與語音識別的 Live Relay 技術(shù)。其能夠為不便應(yīng)答電話的用戶,提供基于實時語音 / 文字互轉(zhuǎn)的通話支持。對于聾啞人來說,這絕對是一項實用的功能。

▲Google I/O 2019 Live Relay

事實上,Live Relay也能幫助到一般人,例如當我們需要接聽重要電話,但卻無法離開當下所進行事項,Live Relay在此時就能派上用場,透過輸入文字的方式,接聽重要來電。

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

08 AR增強現(xiàn)實

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

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

2. 小程序AR+口紅試色

昨天,首個支持AR動態(tài)試妝的小程序“阿瑪尼美妝”同步更新上線?;谛〕绦蚧A(chǔ)能力和谷歌TensorFlow機器學(xué)習(xí)開源平臺支持,歐萊雅集團開發(fā)了AR動態(tài)試妝能力。相比以前上傳照片的試色方式,AR動態(tài)試妝讓試色更真實。

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

09 多窗口預(yù)覽

在QQ最新的版本中,列表頁面長按消息,會彈出多窗口模式,消息可以來回切換,類似于iOS 后臺切換模式。在會話窗口長按任意地方,也會呼出多窗口模式。

▲App Store & QQ

10 總結(jié)

科技發(fā)展給設(shè)計產(chǎn)生的影響是巨大的,讓我更深刻的認識到作為設(shè)計師的責任。

這些設(shè)計趨勢有意或無意地將幫助用戶得到更好的產(chǎn)品體驗,我們期待2020年的設(shè)計將如何演變。

 

作者:阿洋;公眾號:洋爺(ID:yangye365)網(wǎng)易資深視覺設(shè)計師,每周分享關(guān)于交互、產(chǎn)品、視覺上的思考,歡迎關(guān)注交流。

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. anyway,科技一時進步,用戶一時爽。一直進步一直爽,amazing UX

    回復(fù)
  2. 已經(jīng)深刻體會到這些新的交互,真的很棒

    來自廣東 回復(fù)
    1. 一點毛病沒有

      來自河北 回復(fù)
  3. qq這個功能將真的需要進一步優(yōu)化,設(shè)計是很好的,但是對于用戶體驗來說,感覺可能與設(shè)計有所偏差。希望優(yōu)化觸摸力度與時間

    來自山西 回復(fù)
    1. 來自河北 回復(fù)
  4. qq這個太容易觸發(fā)了

    回復(fù)
  5. qq這個功能你不說我都不知道,厲害了

    來自臺灣 回復(fù)
  6. 感謝分享?。W(xué)習(xí)到了

    來自廣東 回復(fù)
  7. 你好,請教下,這些交互是什么軟件做出來的?我是剛進入產(chǎn)品設(shè)計的新人。

    回復(fù)
    1. AE可以搞定

      來自北京 回復(fù)
    2. 用ae有些不方便principle你試試

      來自北京 回復(fù)
    3. 那個我也聽說不錯的,但沒用過,比較簡單易上手

      來自北京 回復(fù)
    4. protopie 也可以,有很多交互動效軟件

      來自廣東 回復(fù)