QQ設計團隊分享：手Q語音消息改版背后的功能設計思路

Posted on 2025-01-21 16:08 Jack Jiang 閱讀(122) 評論(0) 編輯收藏

本文來自騰訊ISUX設計團隊，下文有修訂和改動。

1、引言

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

關于騰訊ISUX團隊：

騰訊社交用戶體驗設計，簡稱ISUX (Internet Social User Experience)，成立于2011年1月11日，是騰訊集團核心、全球最具規模的UX設計團隊，專業成員包括用戶研究、交互設計、視覺設計、品牌設計、視頻動畫設計、UI開發、產品設計與市場研究等，至今ISUX分布于中國深圳總部、北京、上海、成都及韓國首爾。ISUX主要負責騰訊社交通訊與娛樂類產品服務的用戶體驗設計與研究，包括主要服務平臺如QQ、QQ空間、QQ音樂、騰訊云、騰訊企點、QQ物聯、騰訊課堂、興趣部落、花樣直播、全民K歌、全民影帝、企鵝FM、企鵝MV、天天P圖、微云和來電等。

即時通訊網整理另一篇來自ISUX團隊的文章，也可以一讀：《感悟分享：在騰訊的八年，我的成長之路和職業思考》。

技術交流：

- 移動端IM開發入門文章：《新手入門一篇就夠：從零開發移動端IM》

- 開源IM框架源碼：https://github.com/JackJiang2011/MobileIMSDK（備用地址點此）

（本文已同步發布于：http://www.52im.net/thread-2568-1-1.html）

2、回歸溝通：語音消息能否更方便

QQ已經陪伴了大家20年，但是我們仍然在持續思考怎樣讓用戶的溝通更加高效。語音作為人與人之間最自然的交流方式，也不斷引起我們對現有體驗的反思。

是否語音消息只能采取這種經典的氣泡體驗？

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

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

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

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

1）長語音被打斷可以重聽；
2）識別有效的語音片段；
3）重點語音片段反復收聽。

對于QQ 8.0此次對語音消息功能的改進目標：

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

3、美好體驗，從第一眼開始

3.1 易學性：讓功能更加直覺化

“這么簡單的操作，用戶試一次就知道怎么用了吧！”

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

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

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

3.2 準確or美：直觀體驗至上

“聲紋是程序直接生成的，難道還需要設計？”

盆友，買家秀和賣家秀了解一下？

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

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

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

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

4、不止拖拽，更要暢快感受

4.1 更大的響應區域

“點擊拖拽是常規操作，調用系統交互就好了吧？”

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

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

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

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

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

-“語音越長，氣泡越長，so easy~”

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

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

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

5、懂你所需，為你設計

-“結束了嗎，有沒有one more thing？”

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

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

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

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