本文來自騰訊ISUX設(shè)計團(tuán)隊，下文有修訂和改動。
1、引言
2019年4月16日QQ語音消息新特性突然登上微博熱搜，QQ鐵粉瞬間集結(jié)。是什么讓129萬人為QQ花式彩虹屁？為何微信卻被吃瓜群眾瘋狂艾特？現(xiàn)在，讓我為你揭秘QQ語音消息改版的設(shè)計旅程。
關(guān)于騰訊ISUX團(tuán)隊：
騰訊社交用戶體驗設(shè)計，簡稱ISUX (Internet Social User Experience)，成立于2011年1月11日，是騰訊集團(tuán)核心、全球最具規(guī)模的UX設(shè)計團(tuán)隊，專業(yè)成員包括用戶研究、交互設(shè)計、視覺設(shè)計、品牌設(shè)計、視頻動畫設(shè)計、UI開發(fā)、產(chǎn)品設(shè)計與市場研究等，至今ISUX分布于中國深圳總部、北京、上海、成都及韓國首爾。ISUX主要負(fù)責(zé)騰訊社交通訊與娛樂類產(chǎn)品服務(wù)的用戶體驗設(shè)計與研究，包括主要服務(wù)平臺如QQ、QQ空間、QQ音樂、騰訊云、騰訊企點、QQ物聯(lián)、騰訊課堂、興趣部落、花樣直播、全民K歌、全民影帝、企鵝FM、企鵝MV、天天P圖、微云和來電等。
即時通訊網(wǎng)整理另一篇來自ISUX團(tuán)隊的文章，也可以一讀：《感悟分享：在騰訊的八年，我的成長之路和職業(yè)思考》。
技術(shù)交流：
2、回歸溝通：語音消息能否更方便
QQ已經(jīng)陪伴了大家20年，但是我們?nèi)匀辉诔掷m(xù)思考怎樣讓用戶的溝通更加高效。語音作為人與人之間最自然的交流方式，也不斷引起我們對現(xiàn)有體驗的反思。
是否語音消息只能采取這種經(jīng)典的氣泡體驗？
現(xiàn)有的這些點擊播放的語音氣泡真的滿足了所有用戶需求嗎？emm…
總結(jié)一下：發(fā)送語音一時爽，接收語音想撞墻。
針對這些用戶聲音，業(yè)內(nèi)已有一些解決方案。但是其目標(biāo)用戶量和場景遠(yuǎn)沒有QQ這樣豐富。在此次改版中，我們回歸QQ本身，探索在QQ語音消息場景中存在的那些痛點。
面對這些痛點，此次改版將需求聚焦在：
- 1）長語音被打斷可以重聽；
- 2）識別有效的語音片段；
- 3）重點語音片段反復(fù)收聽。
對于QQ 8.0此次對語音消息功能的改進(jìn)目標(biāo)：
- 1）功能層面上，我們將通過提供語音的暫停和進(jìn)度拖拽能力，并可視化音量，以滿足語音接收者的使用效率需求；
- 2）在體驗層面上，語音作為用戶的高頻溝通操作，其設(shè)計必須滿足QQ8.0中精致這一設(shè)計原則，給用戶帶來極致體驗。
3、美好體驗，從第一眼開始
3.1 易學(xué)性：讓功能更加直覺化
“這么簡單的操作，用戶試一次就知道怎么用了吧！”
QQ擁有廣泛的用戶群，所有功能都要盡量降低用戶的學(xué)習(xí)成本。更何況由于沒有其他國民級APP的相似特性可以類比，對用戶來說語音進(jìn)度調(diào)節(jié)不只是一個新功能，更是一種新模式。在這種背景下，功能的易學(xué)性顯得尤為重要。怎樣讓用戶一眼就明白語音消息可以暫停并拖動呢？怎樣讓操作更加直覺化？我們不妨從用戶熟悉的事物入手，進(jìn)行聯(lián)想。
暫停和拖動在語音中不常見，但它卻是播放器的通用功能。在播放器設(shè)計中，有三個用戶行為引導(dǎo)的關(guān)鍵元素：a.按鈕—播放和暫停的指示 b.游標(biāo)—拖動指示 c.顏色—進(jìn)度指示。本次語音氣泡的設(shè)計中，我們依舊沿用了按鈕、游標(biāo)、色彩作為指示性元素。
但是這些元素的加入無疑會加重氣泡內(nèi)的信息負(fù)擔(dān)。并且當(dāng)同時出現(xiàn)多個語音氣泡時，我們更加需要保證聊天頁面有適當(dāng)?shù)男畔⒚芏取Ｒ虼嗽诼暭y樣式設(shè)計中，降噪成為了關(guān)鍵。在發(fā)散了多種樣式后，我們最終選擇了這種簡約的聲紋形態(tài)。它既能很好的展示進(jìn)度信息，又可以平衡氣泡內(nèi)的信息密度，讓QQ多樣化的用戶群都能對語音進(jìn)度拖拽有更直覺化的操作。
3.2 準(zhǔn)確or美：直觀體驗至上
“聲紋是程序直接生成的，難道還需要設(shè)計？”
盆友，買家秀和賣家秀了解一下？
呈現(xiàn)準(zhǔn)確音量的聲紋無法滿足我們預(yù)期中的流暢視覺體驗，反而會讓用戶感覺到多變聲紋信息帶來的壓力?；貧w設(shè)計目標(biāo)，聲紋是為了幫助用戶識別有效語音片段，因此有聲音和無聲音的聲紋對比很重要。這也意味著對于正常音量區(qū)間的聲音，我們可以適當(dāng)犧牲準(zhǔn)確性以確保良好的視覺體驗。
在收集了大量用戶真實語音聲紋后，我們發(fā)現(xiàn)最“丑”聲紋來自于兩類聲音。一類是當(dāng)用戶語音連續(xù)達(dá)到最大音量時，大量聲紋達(dá)到最高高度并撐滿語音氣泡。這種現(xiàn)象常發(fā)生在用戶對著手機收音孔處說話的場景中。為了解決這個問題，我們將達(dá)到最大音量的聲紋高度進(jìn)行削減。被削減的高度按照正弦曲線做隨機值，再加回到這些聲紋的上方。經(jīng)過這樣的優(yōu)化后，所有達(dá)到最高值的聲紋都能夠在頂部產(chǎn)生流暢的曲線。
另一類“丑”聲紋則來自于音量忽高忽低造成的聲紋高度跳變。這是由于人們說話是非連續(xù)的，會存在語氣詞和用戶思考的沉默點。解決這個問題的關(guān)鍵是讓高聲紋和低聲紋之間的落差減少。因此我們定義當(dāng)相鄰聲紋高度差超過50%時，就對這兩個聲紋高度做平滑處理，保證所有音量的聲紋都有流暢的過渡。
經(jīng)過與產(chǎn)品和開發(fā)團(tuán)隊的多輪參數(shù)調(diào)整后，這些精心優(yōu)化后的聲紋可以讓用戶無論怎樣說話都能“看到”自己最美的語音。
4、不止拖拽，更要暢快感受
4.1 更大的響應(yīng)區(qū)域
“點擊拖拽是常規(guī)操作，調(diào)用系統(tǒng)交互就好了吧？”
拖拽的確常規(guī)，但是在功能之外，我們能否讓用戶的操作體驗更暢快呢？
暢快意味著無拘無束，翻譯成交互語言就是要賦予用戶更大的操作區(qū)域。但是我們的手指寬度和控件大小有時難以匹配。例如，8.0UI改版后的語音氣泡高度為118px，而成人手指的寬度范圍則在110px-180px。如果拖拽只能在氣泡范圍內(nèi)進(jìn)行，就意味著用戶需小心翼翼地去操作。為了實現(xiàn)“無拘無束”的拖拽體驗，我們根據(jù)用戶的行為階段對響應(yīng)范圍進(jìn)行了兩次放大。
第一次放大：開始拖動階段，放大觸發(fā)拖動的范圍。拖拽事件的觸發(fā)范圍由氣泡本身擴大到氣泡的外邊緣區(qū)域。
第二次放大：拖拽中，拖動行為的響應(yīng)范圍擴大到全屏。一旦用戶觸發(fā)拖拽，系統(tǒng)將屏蔽聊天頁面的所有操作，包括右滑返回、上下滾動和頁面內(nèi)的所有點擊操作。確保用戶在手指未離開屏幕的前提下，可以在整個頁面范圍內(nèi)控制進(jìn)度拖拽。一方面用戶不再需要沿著氣泡的小小區(qū)域去拖拽，體驗更加順暢；另一方面這也可以減少手指對于氣泡的遮擋，讓用戶更好的看清楚當(dāng)前進(jìn)度。
4.2 更合理的氣泡長度變化規(guī)則
-“語音越長，氣泡越長，so easy~”
氣泡越長代表語音越長。但你可能沒注意過，其實氣泡長度是隨著語音時長呈線性變化。這個本來運行良好的規(guī)則在加入了拖拽功能后卻出現(xiàn)了問題。從灰度用戶的數(shù)據(jù)來看，大部分用戶的語音時長在10s以內(nèi)。此時語音氣泡較短，十分不易于進(jìn)行拖拽。所以我們既需要短語音氣泡變長，又要保證用戶可以感知到氣泡始終隨著時長增長而變長。在氣泡最大長度無法改變的前提下，必須改變原有的線性變化規(guī)律，轉(zhuǎn)變?yōu)楦?xì)的分階段的曲線變化。
- [階段1] 斜率逐漸增加的曲線。此階段對應(yīng)著短時長語音，也是用戶的高頻使用場景。因此該階段氣泡長度隨語音時長的增長需要更加明顯；
- [階段2] 斜率逐漸減小的曲線。此階段對應(yīng)的長語音是低頻場景，此時氣泡長度隨語音時長變化的反饋可以適當(dāng)放緩；
- [階段3] 達(dá)到氣泡長度最大值，不再變化。此時為超長語音階段，用戶已經(jīng)不需要通過氣泡長度來判斷語音時長。
運用更加精細(xì)的氣泡長度變化規(guī)律，讓用戶的高頻語音消息更好拖拽。
5、懂你所需，為你設(shè)計
-“結(jié)束了嗎，有沒有one more thing？”
至此，語音消息的改版設(shè)計似乎已經(jīng)結(jié)束，但我們對于設(shè)計的追求不止于此。語音進(jìn)度調(diào)節(jié)只是語音消息體驗中的一個小小功能。我們希望通過這些精致貼心的體驗設(shè)計，讓用戶產(chǎn)生一種感覺——QQ懂我。因為懂你，所以希望為你的溝通做更多事情。
關(guān)于語音消息，設(shè)計團(tuán)隊也在發(fā)散更多貼近用戶真實生活的場景：
- 1）更加貼近場景的體驗：未來我們是否可以利用傳感器檢測到用戶所處的環(huán)境和狀態(tài)，根據(jù)不同的環(huán)境和用戶行為狀態(tài)，確定這些消息是以語音還是文本顯示；
- 2）更加豐富的語音表達(dá)：語音比文本承載了更多的情感信息，基于這個屬性，我們能否通過特殊聲音編輯、視覺化表達(dá)、手機觸感等方式，幫助發(fā)送方傳達(dá)更加豐富的信息；
- 3）無障礙化體驗：對于視障人群、運動障礙人群、老年人群體來說，語音是很好的溝通選擇。我們是否能夠更進(jìn)一步，通過語音指令更好的協(xié)助他們使用QQ…
做最懂你的語音消息，我們還在繼續(xù)。
6、未來可期：最美的QQ正在路上
QQ新版語音氣泡iOS上線當(dāng)天喜提微博熱搜?？吹接脩魝兊幕ㄊ娇洫?，我們的心情美滋滋。但同時網(wǎng)絡(luò)上也出現(xiàn)了一些負(fù)面的評價，這些聲音也在鞭策設(shè)計團(tuán)隊持續(xù)打磨語音消息體驗。
一花一世界，一樹一菩提。語音消息氣泡改版只是體驗升級的第一步，但它可以折射出整個QQ8.0版本所遵循的設(shè)計原則：降噪、生機和精致。沿著這些原則，我們依舊在打造最美QQ的路上奮力前行。
什么，你還沒有下載手機QQ8.0？那你豈不是沒法體驗到史上最簡潔的QQ頁面，也不能發(fā)現(xiàn)底部tab小驚喜了？你更沒法知道我們的語音消息馬上就支持<(ˉ^ˉ)><(ˉ^ˉ)><(ˉ^ˉ)>和(>▽<)(>▽<)(>▽<)兩個超贊功能（頂級機密，手動打碼）。
附錄：更多即時通訊產(chǎn)品的實踐總結(jié)、感悟分享
《技術(shù)往事：微信估值已超5千億，雷軍曾有機會收編張小龍及其Foxmail》
《QQ和微信兇猛成長的背后：騰訊網(wǎng)絡(luò)基礎(chǔ)架構(gòu)的這些年》
《閑話即時通訊：騰訊的成長史本質(zhì)就是一部QQ成長史》
《2017微信數(shù)據(jù)報告：日活躍用戶達(dá)9億、日發(fā)消息380億條》
《騰訊開發(fā)微信花了多少錢？技術(shù)難度真這么大？難在哪？》
《技術(shù)往事：創(chuàng)業(yè)初期的騰訊——16年前的冬天，誰動了馬化騰的代碼》
《技術(shù)往事：史上最全QQ圖標(biāo)變遷過程，追尋IM巨人的演進(jìn)歷史》
《技術(shù)往事：“QQ群”和“微信紅包”是怎么來的？》
《開發(fā)往事：深度講述2010到2015，微信一路風(fēng)雨的背后》
《開發(fā)往事：微信千年不變的那張閃屏圖片的由來》
《開發(fā)往事：記錄微信3.0版背后的故事（距微信1.0發(fā)布9個月時）》
《一個微信實習(xí)生自述：我眼中的微信開發(fā)團(tuán)隊》
《首次揭秘：QQ實時視頻聊天背后的神秘組織》
《為什么說即時通訊社交APP創(chuàng)業(yè)就是一個坑？》
《微信七年回顧：歷經(jīng)多少質(zhì)疑和差評，才配擁有今天的強大》
《前創(chuàng)始團(tuán)隊成員分享：盤點微信的前世今生——微信成功的必然和偶然》
《即時通訊創(chuàng)業(yè)必讀：解密微信的產(chǎn)品定位、創(chuàng)新思維、設(shè)計法則等》
《QQ的成功，遠(yuǎn)沒有你想象的那么順利和輕松》
《QQ現(xiàn)狀深度剖析：你還認(rèn)為QQ已經(jīng)被微信打敗了嗎？》
《[技術(shù)腦洞] 如果把14億中國人拉到一個微信群里技術(shù)上能實現(xiàn)嗎？》
《QQ和微信止步不前，意味著即時通訊社交應(yīng)用創(chuàng)業(yè)的第2春已來？ 》
《那些年微信開發(fā)過的雞肋功能，及其帶給我們的思考》
《讀懂微信：從1.0到7.0版本，一個主流IM社交工具的進(jìn)化史》
《同為IM社交產(chǎn)品中的王者，QQ與微信到底有什么區(qū)別》
《還原真實的騰訊：從最不被看好，到即時通訊巨頭的草根創(chuàng)業(yè)史》
《QQ設(shè)計團(tuán)隊分享：新版 QQ 8.0 語音消息改版背后的功能設(shè)計思路》
《社交應(yīng)用教父級人物的張小龍和馬化騰的同與不同》
《專訪馬化騰：首次開談個人經(jīng)歷、管理心得、技術(shù)創(chuàng)新、微信的誕生等》
《一文讀懂微信之父張小龍：失敗天才、顛覆者、獨裁者、人性操控師》
《微信純血鴻蒙版正式發(fā)布，295天走完微信14年技術(shù)之路！》
>> 更多同類文章 ……
（本文已同步發(fā)布于：http://www.52im.net/thread-2539-1-1.html）