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

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

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

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

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

01 模態(tài)展示

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

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

▲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)易云音樂、即刻、飛聊等應用中,采用了懸停分層。頂部展示的是介紹性內(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在引導評分樣式上,都采用的是系統(tǒng)彈窗。在Keep App上,設計了一個全屏展示的評分提示。形式新穎,加上背景圖的氣氛,讓人想去評分的意愿大大增加。

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

▲Airbnb 愛彼迎 & Keep

06 快捷驗證

1. 蘋果賬號登錄

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

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

2. 號碼識別

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

▲網(wǎng)易易盾

07 語音交互

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

在5月的開發(fā)者大會上,谷歌展示了其人工智能與語音識別的 Live Relay 技術(shù)。其能夠為不便應答電話的用戶,提供基于實時語音 / 文字互轉(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機器學習開源平臺支持,歐萊雅集團開發(fā)了AR動態(tài)試妝能力。相比以前上傳照片的試色方式,AR動態(tài)試妝讓試色更真實。

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

09 多窗口預覽

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

▲App Store & QQ

10 總結(jié)

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

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

 

作者:阿洋;公眾號:洋爺(ID:yangye365)網(wǎng)易資深視覺設計師,每周分享關(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

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

    來自廣東 回復
    1. 一點毛病沒有

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

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

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

    來自臺灣 回復
  6. 感謝分享??!學習到了

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

    回復
    1. AE可以搞定

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

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

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

      來自廣東 回復