2020年最值得關注的9大交互設計趨勢

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

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

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

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

01 模態展示

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

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

▲Apple Music & 郵件

02 專注下半部分

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

03 分層內容

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

▲Snapchat & Keep

1. 懸停分層

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

▲網易云音樂 & 即刻

▲Broadcasting iOS App

04 連續性頁面

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

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

▲App Store & Behance

05 全屏展示

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

同樣,Airbnb的系統通知提示也是采用的全屏展示,這是一個趨勢,值得我們去關注。

▲Airbnb 愛彼迎 & Keep

06 快捷驗證

1. 蘋果賬號登錄

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

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

2. 號碼識別

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

▲網易易盾

07 語音交互

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

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

▲Google I/O 2019 Live Relay

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

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

08 AR增強現實

1. WANNA KICKS 通過AR技術「試鞋」

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

2. 小程序AR+口紅試色

昨天,首個支持AR動態試妝的小程序“阿瑪尼美妝”同步更新上線。基于小程序基礎能力和谷歌TensorFlow機器學習開源平臺支持,歐萊雅集團開發了AR動態試妝能力。相比以前上傳照片的試色方式,AR動態試妝讓試色更真實。

AR 使用在網頁設計或應用程序領域,它能夠自然地將虛擬與現實結合,帶來身臨其境的新體驗。

09 多窗口預覽

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

▲App Store & QQ

10 總結

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

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

 

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

本文由 @洋爺 原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. anyway,科技一時進步,用戶一時爽。一直進步一直爽,amazing UX

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

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

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

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

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

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

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

    回復
    1. AE可以搞定

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

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

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

      來自廣東 回復