在過去兩個月,從國外的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
懸停分層
在網易雲音樂、即刻、飛聊等應用中,採用了懸停分層。頂部展示的是介紹性內容,隨著頁面下滑,介紹內容隱藏,同時功能欄將置頂懸停,展示的內容區域大大增加。
網易雲音樂 & 即刻
Broadcasting iOS App UI Exploration
04. 連續性頁面
連續性頁面的轉換效果可以很好記住產品路線,加強了頁面的層級關係。同時,流暢的動畫轉換效果,帶來了更連貫的使用者體驗。
App Store 和 Behance,以及最近釋出的豆瓣 FM 6.0,都採用了這種方式。
App Store & Behance
05. 全屏展示
很多App在引導評分樣式上,都採用的是系統彈窗。在Keep App上,設計了一個全屏展示的評分提示。形式新穎,加上背景圖的氣氛,讓人想去評分的意願大大增加。
同樣,Airbnb的系統通知提示也是採用的全屏展示,這是一個趨勢,值得我們去關注。
Airbnb 愛彼迎 & Keep
06. 快捷驗證
蘋果賬號登入
在 WWDC 2019 上,蘋果也給我們帶來了 “使用蘋果賬號登入”,幾乎所有的蘋果裝置都會登入 Apple ID。因此,我們可以在不久的將來,通過蘋果賬號,就可以直接登入所有的 App,是不是很方便?
號碼識別
網易易盾的號碼識別,可以自動獲取當前開啟流量的SIM卡號碼,一鍵點選即可完成註冊、登入操作。減少手機號輸入、簡訊驗證碼等待時間等傳統步驟,提升關鍵環節轉化率。
網易易盾
07. 語音互動
近年來,智慧語音技術在很多場景得到了應用,微軟的 Cortana,蘋果的 Siri、谷歌的 Assistant。在引入深度學習後,語音助手可以在訓練中越來越強,吐詞更連貫。夸克的語音助手有本地天氣、本週本月視覺化資料、新聞熱點、節日問候、冷知識等功能。
在5月的開發者大會上,谷歌展示了其人工智慧與語音識別的 Live Relay 技術。其能夠為不便應答電話的使用者,提供基於實時語音 / 文字互轉的通話支援。對於聾啞人來說,這絕對是一項實用的功能。
Google I/O 2019 Live Relay
事實上,Live Relay也能幫助到一般人,例如當我們需要接聽重要電話,但卻無法離開當下所進行事項,Live Relay在此時就能派上用場,透過輸入文字的方式,接聽重要來電。
最方便的是,Live Relay還可整合即時的翻譯功能,這在與外國人士溝通時起了很大的幫助作用,可說是另外一種「無障礙功能」。
08. AR增強現實
WANNA KICKS 通過AR技術「試鞋」
通過AR增強現實技術與智慧手機相機的結合,幫助你看到YEEZY BOOST 350等運動鞋「穿」在自己腳上的效果,它甚至還能模擬出鞋子在光線不同環境下的各種效果。
小程式AR 口紅試色
昨天,首個支援AR動態試妝的小程式“阿瑪尼美妝”同步更新上線。基於小程式基礎能力和谷歌TensorFlow機器學習開源平臺支援,歐萊雅集團開發了AR動態試妝能力。相比以前上傳照片的試色方式,AR動態試妝讓試色更真實。
AR 使用在網頁設計或應用程式領域,它能夠自然地將虛擬與現實結合,帶來身臨其境的新體驗。
09. 多視窗預覽
App Store & QQ
在QQ最新的版本中,列表頁面長按訊息,會彈出多視窗模式,訊息可以來回切換,類似於iOS 後臺切換模式。在會話視窗長按任意地方,也會撥出多視窗模式。
10. 總結
科技發展給設計產生的影響是巨大的,讓我更深刻的認識到作為設計師的責任。這些設計趨勢有意或無意地將幫助使用者得到更好的產品體驗,我們期待2020年的設計將如何演變。