129萬人夸獎的QQ語音進度條,是如何設計出來的? - 優設網 - UISDC

129萬人夸獎的QQ語音進度條,是如何設計出來的?

2019/05/13 18951評論 23

4 月 16 日 QQ 語音消息新特性突然登上微博熱搜,QQ 鐵粉瞬間集結。是什么讓 129 萬人為 QQ 花式彩虹屁?為何微信卻被吃瓜群眾瘋狂艾特?現在,讓我為你揭秘 QQ 語音消息改版的設計旅程。

回歸溝通:語音消息能否更方便

QQ 已經陪伴了大家 20 年,但是我們仍然在持續思考怎樣讓用戶的溝通更加高效。語音作為人與人之間最自然的交流方式,也不斷引起我們對現有體驗的反思。是否語音消息只能采取這種經典的氣泡體驗?

現有的這些點擊播放的語音氣泡真的滿足了所有用戶需求嗎?

總結一下:發送語音一時爽,接收語音想撞墻。

針對這些用戶聲音,業內已有一些解決方案。但是其目標用戶量和場景遠沒有 QQ 這樣豐富。在此次改版中,我們回歸 QQ 本身,探索在 QQ 語音消息場景中存在的那些痛點。

面對這些痛點,此次改版將需求聚焦在:

  • 長語音被打斷可以重聽
  • 識別有效的語音片段
  • 重點語音片段反復收聽

功能層面上,我們將通過提供語音的暫停和進度拖拽能力,并可視化音量,以滿足語音接收者的使用效率需求。在體驗層面上,語音作為用戶的高頻溝通操作,其設計必須滿足 QQ 8.0 中精致這一設計原則,給用戶帶來極致體驗。

體驗設計:打磨精致的語音消息進度體驗

1. 美好體驗,從第一眼開始

易學性──讓功能更加直覺化

「這么簡單的操作,用戶試一次就知道怎么用了吧!」

QQ 擁有廣泛的用戶群,所有功能都要盡量降低用戶的學習成本。更何況由于沒有其他國民級 APP 的相似特性可以類比,對用戶來說語音進度調節不只是一個新功能,更是一種新模式。在這種背景下,功能的易學性顯得尤為重要。怎樣讓用戶一眼就明白語音消息可以暫停并拖動呢?怎樣讓操作更加直覺化?我們不妨從用戶熟悉的事物入手,進行聯想。

暫停和拖動在語音中不常見,但它卻是播放器的通用功能。在播放器設計中,有三個用戶行為引導的關鍵元素:按鈕──播放和暫停的指示;游標──拖動指示;顏色──進度指示。本次語音氣泡的設計中,我們依舊沿用了按鈕、游標、色彩作為指示性元素。

但是這些元素的加入無疑會加重氣泡內的信息負擔。并且當同時出現多個語音氣泡時,我們更加需要保證聊天頁面有適當的信息密度。因此在聲紋樣式設計中,降噪成為了關鍵。在發散了多種樣式后,我們最終選擇了這種簡約的聲紋形態。它既能很好地展示進度信息,又可以平衡氣泡內的信息密度,讓 QQ 多樣化的用戶群都能對語音進度拖拽有更直覺化的操作。

準確or美──直觀體驗至上

「聲紋是程序直接生成的,難道還需要設計?」

買家秀和賣家秀了解一下?

呈現準確音量的聲紋無法滿足我們預期中的流暢視覺體驗,反而會讓用戶感覺到多變聲紋信息帶來的壓力?;毓檣杓頗勘?,聲紋是為了幫助用戶識別有效語音片段,因此有聲音和無聲音的聲紋對比很重要。這也意味著對于正常音量區間的聲音,我們可以適當犧牲準確性以確保良好的視覺體驗。

在收集了大量用戶真實語音聲紋后,我們發現最「丑」聲紋來自于兩類聲音。一類是當用戶語音連續達到最大音量時,大量聲紋達到最高高度并撐滿語音氣泡。這種現象常發生在用戶對著手機收音孔處說話的場景中。為了解決這個問題,我們將達到最大音量的聲紋高度進行削減。被削減的高度按照正弦曲線做隨機值,再加回到這些聲紋的上方。經過這樣的優化后,所有達到最高值的聲紋都能夠在頂部產生流暢的曲線。

另一類「丑」聲紋則來自于音量忽高忽低造成的聲紋高度跳變。這是由于人們說話是非連續的,會存在語氣詞和用戶思考的沉默點。解決這個問題的關鍵是讓高聲紋和低聲紋之間的落差減少。因此我們定義當相鄰聲紋高度差超過 50% 時,就對這兩個聲紋高度做平滑處理,保證所有音量的聲紋都有流暢的過渡。

經過與產品和開發團隊的多輪參數調整后,這些精心優化后的聲紋可以讓用戶無論怎樣說話都能「看到」自己最美的語音。

2. 不止拖拽,更要暢快感受

更大的響應區域

「點擊拖拽是常規操作,調用系統交互就好了吧?」

拖拽的確常規,但是在功能之外,我們能否讓用戶的操作體驗更暢快呢?

暢快意味著無拘無束,翻譯成交互語言就是要賦予用戶更大的操作區域。但是我們的手指寬度和控件大小有時難以匹配。例如,8.0 UI 改版后的語音氣泡高度為 118px,而成人手指的寬度范圍則在 110px-180px。如果拖拽只能在氣泡范圍內進行,就意味著用戶需小心翼翼地去操作。為了實現「無拘無束」的拖拽體驗,我們根據用戶的行為階段對響應范圍進行了兩次放大。

第一次放大:開始拖動階段,放大觸發拖動的范圍。拖拽事件的觸發范圍由氣泡本身擴大到氣泡的外邊緣區域。

第二次放大:拖拽中,拖動行為的響應范圍擴大到全屏。一旦用戶觸發拖拽,系統將屏蔽聊天頁面的所有操作,包括右滑返回、上下滾動和頁面內的所有點擊操作。確保用戶在手指未離開屏幕的前提下,可以在整個頁面范圍內控制進度拖拽。一方面用戶不再需要沿著氣泡的小小區域去拖拽,體驗更加順暢;另一方面這也可以減少手指對于氣泡的遮擋,讓用戶更好地看清楚當前進度。

更合理的氣泡長度變化規則

「語音越長,氣泡越長,so easy~」

氣泡越長代表語音越長。但你可能沒注意過,其實氣泡長度是隨著語音時長呈線性變化。這個本來運行良好的規則在加入了拖拽功能后卻出現了問題。從灰度用戶的數據來看,大部分用戶的語音時長在 10s 以內。此時語音氣泡較短,十分不易于進行拖拽。所以我們既需要短語音氣泡變長,又要保證用戶可以感知到氣泡始終隨著時長增長而變長。在氣泡最大長度無法改變的前提下,必須改變原有的線性變化規律,轉變為更精細的分階段的曲線變化。

階段1:斜率逐漸增加的曲線。此階段對應著短時長語音,也是用戶的高頻使用場景。因此該階段氣泡長度隨語音時長的增長需要更加明顯。階段2:斜率逐漸減小的曲線。此階段對應的長語音是低頻場景,此時氣泡長度隨語音時長變化的反饋可以適當放緩。階段3:達到氣泡長度最大值,不再變化。此時為超長語音階段,用戶已經不需要通過氣泡長度來判斷語音時長。

運用更加精細的氣泡長度變化規律,讓用戶的高頻語音消息更好拖拽。

3. 懂你所需,為你設計

「結束了嗎,有沒有 one more thing?」

至此,語音消息的改版設計似乎已經結束,但我們對于設計的追求不止于此。語音進度調節只是語音消息體驗中的一個小小功能。我們希望通過這些精致貼心的體驗設計,讓用戶產生一種感覺──QQ 懂我。因為懂你,所以希望為你的溝通做更多事情。

關于語音消息,設計團隊也在發散更多貼近用戶真實生活的場景。

  • 更加貼近場景的體驗。未來我們是否可以利用傳感器檢測到用戶所處的環境和狀態,根據不同的環境和用戶行為狀態,確定這些消息是以語音還是文本顯示。
  • 更加豐富的語音表達。語音比文本承載了更多的情感信息,基于這個屬性,我們能否通過特殊聲音編輯、視覺化表達、手機觸感等方式,幫助發送方傳達更加豐富的信息。
  • 無障礙化體驗。對于視障人群、運動障礙人群、老年人群體來說,語音是很好的溝通選擇。我們是否能夠更進一步,通過語音指令更好地協助他們使用 QQ。

做最懂你的語音消息,我們還在繼續。

未來可期:最美的QQ正在路上

QQ 新版語音氣泡 iOS 上線當天喜提微博熱搜??吹接沒塹幕ㄊ嬌浣?,我們的心情美滋滋。但同時網絡上也出現了一些負面的評價,這些聲音也在鞭策設計團隊持續打磨語音消息體驗。

一花一世界,一樹一菩提。語音消息氣泡改版只是體驗升級的第一步,但它可以折射出整個 QQ 8.0 版本所遵循的設計原則:降噪、生機和精致。沿著這些原則,我們依舊在打造最美 QQ 的路上奮力前行。

什么,你還沒有下載手機 QQ 8.0?那你豈不是沒法體驗到史上最簡潔的 QQ 頁面,也不能發現底部 tab 小驚喜了?你更沒法知道我們的語音消息馬上就支持 XX 和 XX 兩個超贊功能(頂級機密,手動打碼)。

掃碼下載,即刻體驗手機 QQ 8.0。

歡迎關注「騰訊ISUX」的公眾號:

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址://www.qratuj.com.cn/qq-voice-progress-bar

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

設計圈干貨 界面設計 排版布局 版式設計 職場 優設專訪 優設大課堂 設計達人 設計師干貨 web前端開發 配色 視覺設計 素材下載 AI教程 設計理論 設計流程 神器下載 字體下載 設計師專訪 psd下載 海報設計 設計規范 設計趨勢 用戶體驗設計 動效設計 logo設計 平面設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里