默認
打賞 發表評論 2
想開發IM:買成品怕坑?租第3方怕貴?找開源自已擼?盡量別走彎路了... 找站長給點建議
QQ設計團隊分享:新版 QQ 8.0 語音消息改版背后的功能設計思路
閱讀(5224) | 評論(2 收藏 淘帖2

本文來自騰訊ISUX設計團隊,原文地址:isux.tencent.com/articles/qq-voice-message-design.html,感謝大廠的無私分享。


1、引言


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

QQ設計團隊分享:新版 QQ 8.0 語音消息改版背后的功能設計思路_1.jpg

關于騰訊ISUX團隊:

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


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

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


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

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

QQ設計團隊分享:新版 QQ 8.0 語音消息改版背后的功能設計思路_2.jpg

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

QQ設計團隊分享:新版 QQ 8.0 語音消息改版背后的功能設計思路_3.jpg

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

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

QQ設計團隊分享:新版 QQ 8.0 語音消息改版背后的功能設計思路_4.jpg

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

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

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

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

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


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


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


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

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

QQ設計團隊分享:新版 QQ 8.0 語音消息改版背后的功能設計思路_5.jpg

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

QQ設計團隊分享:新版 QQ 8.0 語音消息改版背后的功能設計思路_6.jpg

QQ設計團隊分享:新版 QQ 8.0 語音消息改版背后的功能設計思路_7.jpg

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


-“聲紋是程序直接生成的,難道還需要設計?”


盆友,買家秀和賣家秀了解一下?

QQ設計團隊分享:新版 QQ 8.0 語音消息改版背后的功能設計思路_8.jpg

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

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

QQ設計團隊分享:新版 QQ 8.0 語音消息改版背后的功能設計思路_9.jpg

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

QQ設計團隊分享:新版 QQ 8.0 語音消息改版背后的功能設計思路_10.jpg

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

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


4.1更大的響應區域


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


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

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

QQ設計團隊分享:新版 QQ 8.0 語音消息改版背后的功能設計思路_11.jpg

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

QQ設計團隊分享:新版 QQ 8.0 語音消息改版背后的功能設計思路_12.jpg

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

QQ設計團隊分享:新版 QQ 8.0 語音消息改版背后的功能設計思路_13 (1).gif

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


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


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

QQ設計團隊分享:新版 QQ 8.0 語音消息改版背后的功能設計思路_14.jpg

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

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

5、懂你所需,為你設計


-“結束了嗎,有沒有one more thing?”


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

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

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

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

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


QQ設計團隊分享:新版 QQ 8.0 語音消息改版背后的功能設計思路_15.jpg

QQ新版語音氣泡iOS上線當天喜提微博熱搜。看到用戶們的花式夸獎,我們的心情美滋滋。但同時網絡上也出現了一些負面的評價,這些聲音也在鞭策設計團隊持續打磨語音消息體驗。

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

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

(原文鏈接:https://isux.tencent.com/articles/qq-voice-message-design.html

附錄:即時通訊/社交產品的實踐總結、感悟分享


技術往事:微信估值已超5千億,雷軍曾有機會收編張小龍及其Foxmail
QQ和微信兇猛成長的背后:騰訊網絡基礎架構的這些年
閑話即時通訊:騰訊的成長史本質就是一部QQ成長史
騰訊開發微信花了多少錢?技術難度真這么大?難在哪?
技術往事:史上最全QQ圖標變遷過程,追尋IM巨人的演進歷史
開發往事:深度講述2010到2015,微信一路風雨的背后
開發往事:記錄微信3.0版背后的故事(距微信1.0發布9個月時)
微信七年回顧:歷經多少質疑和差評,才配擁有今天的強大
前創始團隊成員分享:盤點微信的前世今生——微信成功的必然和偶然
QQ的成功,遠沒有你想象的那么順利和輕松
[技術腦洞] 如果把14億中國人拉到一個微信群里技術上能實現嗎?
QQ和微信止步不前,意味著即時通訊社交應用創業的第2春已來?
那些年微信開發過的雞肋功能,及其帶給我們的思考
為什么說即時通訊社交APP創業就是一個坑?
即時通訊創業必讀:解密微信的產品定位、創新思維、設計法則等
老羅最新發布了“子彈短信”這款IM,主打熟人社交能否對標微信?
盤點和反思在微信的陰影下艱難求生的移動端IM應用
QQ現狀深度剖析:你還認為QQ已經被微信打敗了嗎?
那些年微信開發過的雞肋功能,及其帶給我們的思考
漸行漸遠的人人網:十年親歷者的互聯網社交產品復盤和反思
中國互聯網社交二十年:全民見證的互聯網創業演義
IM熱門功能討論:為什么微信里沒有消息“已讀”功能?
讀懂微信:從1.0到7.0版本,一個主流IM社交工具的進化史
王欣回應微信封禁,解釋為何取名“馬桶MT”
同為IM社交產品中的王者,QQ與微信到底有什么區別
還原真實的騰訊:從最不被看好,到即時通訊巨頭的草根創業史
知識科普:IM聊天應用是如何將消息發送給對方的?(非技術篇)
QQ設計團隊分享:新版 QQ 8.0 語音消息改版背后的功能設計思路
>> 更多同類文章 ……

即時通訊網 - 即時通訊開發者社區! 來源: - 即時通訊開發者社區!

標簽:社交產品
上一篇:通俗易懂:如何設計能支撐百萬并發的數據庫架構?下一篇:快速了解Electron:新一代基于Web的跨平臺桌面技術

本帖已收錄至以下技術專輯

推薦方案
評論 2
最近QQ改版變化太大了
引用:NowIsGood. 發表于 2019-05-17 10:10
最近QQ改版變化太大了

qq好像越來越年輕化了
簽名: 《主流移動端賬號登錄方式的原理及設計思路》http://www.uktmgv.tw/thread-2863-1-1.html
打賞樓主 ×
使用微信打賞! 使用支付寶打賞!

返回頂部
曾氏料二肖中特