QQ 8.0 語(yǔ)音消息改版設(shè)計(jì)策劃故事

 

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

 

 

回歸溝通：語(yǔ)音消息能否更方便

QQ已經(jīng)陪伴了大家20年，但是我們?nèi)匀辉诔掷m(xù)思考怎樣讓用戶(hù)的溝通更加高效。語(yǔ)音作為人與人之間最自然的交流方式，也不斷引起我們對(duì)現(xiàn)有體驗(yàn)的反思。是否語(yǔ)音消息只能采取這種經(jīng)典的氣泡體驗(yàn)？

 

 

現(xiàn)有的這些點(diǎn)擊播放的語(yǔ)音氣泡真的滿(mǎn)足了所有用戶(hù)需求嗎？emm…

 

 

總結(jié)一下：發(fā)送語(yǔ)音一時(shí)爽，接收語(yǔ)音想撞墻。

針對(duì)這些用戶(hù)聲音，業(yè)內(nèi)已有一些解決方案。但是其目標(biāo)用戶(hù)量和場(chǎng)景遠(yuǎn)沒(méi)有QQ這樣豐富。在此次改版中，我們回歸QQ本身，探索在QQ語(yǔ)音消息場(chǎng)景中存在的那些痛點(diǎn)。

 

 

面對(duì)這些痛點(diǎn)，此次改版將需求聚焦在：

1. 長(zhǎng)語(yǔ)音被打斷可以重聽(tīng)

2. 識(shí)別有效的語(yǔ)音片段

3. 重點(diǎn)語(yǔ)音片段反復(fù)收聽(tīng)

功能層面上，我們將通過(guò)提供語(yǔ)音的暫停和進(jìn)度拖拽能力，并可視化音量，以滿(mǎn)足語(yǔ)音接收者的使用效率需求。在體驗(yàn)層面上，語(yǔ)音作為用戶(hù)的高頻溝通操作，其設(shè)計(jì)必須滿(mǎn)足QQ8.0中精致這一設(shè)計(jì)原則，給用戶(hù)帶來(lái)極致體驗(yàn)。

 

 

體驗(yàn)設(shè)計(jì)：打磨精致的語(yǔ)音消息進(jìn)度體驗(yàn)

 

美好體驗(yàn)，從第一眼開(kāi)始

1. 易學(xué)性——讓功能更加直覺(jué)化

-“這么簡(jiǎn)單的操作，用戶(hù)試一次就知道怎么用了吧！”

QQ擁有廣泛的用戶(hù)群，所有功能都要盡量降低用戶(hù)的學(xué)習(xí)成本。更何況由于沒(méi)有其他國(guó)民級(jí)APP的相似特性可以類(lèi)比，對(duì)用戶(hù)來(lái)說(shuō)語(yǔ)音進(jìn)度調(diào)節(jié)不只是一個(gè)新功能，更是一種新模式。在這種背景下，功能的易學(xué)性顯得尤為重要。怎樣讓用戶(hù)一眼就明白語(yǔ)音消息可以暫停并拖動(dòng)呢？怎樣讓操作更加直覺(jué)化？我們不妨從用戶(hù)熟悉的事物入手，進(jìn)行聯(lián)想。

暫停和拖動(dòng)在語(yǔ)音中不常見(jiàn)，但它卻是播放器的通用功能。在播放器設(shè)計(jì)中，有三個(gè)用戶(hù)行為引導(dǎo)的關(guān)鍵元素：a.按鈕—播放和暫停的指示 b.游標(biāo)—拖動(dòng)指示 c.顏色—進(jìn)度指示。本次語(yǔ)音氣泡的設(shè)計(jì)中，我們依舊沿用了按鈕、游標(biāo)、色彩作為指示性元素。

 

 

但是這些元素的加入無(wú)疑會(huì)加重氣泡內(nèi)的信息負(fù)擔(dān)。并且當(dāng)同時(shí)出現(xiàn)多個(gè)語(yǔ)音氣泡時(shí)，我們更加需要保證聊天頁(yè)面有適當(dāng)?shù)男畔⒚芏?。因此在聲紋樣式設(shè)計(jì)中，降噪成為了關(guān)鍵。在發(fā)散了多種樣式后，我們最終選擇了這種簡(jiǎn)約的聲紋形態(tài)。它既能很好的展示進(jìn)度信息，又可以平衡氣泡內(nèi)的信息密度，讓QQ多樣化的用戶(hù)群都能對(duì)語(yǔ)音進(jìn)度拖拽有更直覺(jué)化的操作。

 

 

2. 準(zhǔn)確or美——直觀體驗(yàn)至上

-“聲紋是程序直接生成的，難道還需要設(shè)計(jì)？”

盆友，買(mǎi)家秀和賣(mài)家秀了解一下？

 

 

呈現(xiàn)準(zhǔn)確音量的聲紋無(wú)法滿(mǎn)足我們預(yù)期中的流暢視覺(jué)體驗(yàn)，反而會(huì)讓用戶(hù)感覺(jué)到多變聲紋信息帶來(lái)的壓力?；貧w設(shè)計(jì)目標(biāo)，聲紋是為了幫助用戶(hù)識(shí)別有效語(yǔ)音片段，因此有聲音和無(wú)聲音的聲紋對(duì)比很重要。這也意味著對(duì)于正常音量區(qū)間的聲音，我們可以適當(dāng)犧牲準(zhǔn)確性以確保良好的視覺(jué)體驗(yàn)。

在收集了大量用戶(hù)真實(shí)語(yǔ)音聲紋后，我們發(fā)現(xiàn)最“丑”聲紋來(lái)自于兩類(lèi)聲音。一類(lèi)是當(dāng)用戶(hù)語(yǔ)音連續(xù)達(dá)到最大音量時(shí)，大量聲紋達(dá)到最高高度并撐滿(mǎn)語(yǔ)音氣泡。這種現(xiàn)象常發(fā)生在用戶(hù)對(duì)著手機(jī)收音孔處說(shuō)話(huà)的場(chǎng)景中。為了解決這個(gè)問(wèn)題，我們將達(dá)到最大音量的聲紋高度進(jìn)行削減。被削減的高度按照正弦曲線(xiàn)做隨機(jī)值，再加回到這些聲紋的上方。經(jīng)過(guò)這樣的優(yōu)化后，所有達(dá)到最高值的聲紋都能夠在頂部產(chǎn)生流暢的曲線(xiàn)。

 

 

另一類(lèi)“丑”聲紋則來(lái)自于音量忽高忽低造成的聲紋高度跳變。這是由于人們說(shuō)話(huà)是非連續(xù)的，會(huì)存在語(yǔ)氣詞和用戶(hù)思考的沉默點(diǎn)。解決這個(gè)問(wèn)題的關(guān)鍵是讓高聲紋和低聲紋之間的落差減少。因此我們定義當(dāng)相鄰聲紋高度差超過(guò)50%時(shí)，就對(duì)這兩個(gè)聲紋高度做平滑處理，保證所有音量的聲紋都有流暢的過(guò)渡。

 

 

經(jīng)過(guò)與產(chǎn)品和開(kāi)發(fā)團(tuán)隊(duì)的多輪參數(shù)調(diào)整后，這些精心優(yōu)化后的聲紋可以讓用戶(hù)無(wú)論怎樣說(shuō)話(huà)都能“看到”自己最美的語(yǔ)音。

 

不止拖拽，更要暢快感受

 

1. 更大的響應(yīng)區(qū)域

-“點(diǎn)擊拖拽是常規(guī)操作，調(diào)用系統(tǒng)交互就好了吧？”

拖拽的確常規(guī)，但是在功能之外，我們能否讓用戶(hù)的操作體驗(yàn)更暢快呢？

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

 

 

第一次放大：開(kāi)始拖動(dòng)階段，放大觸發(fā)拖動(dòng)的范圍。拖拽事件的觸發(fā)范圍由氣泡本身擴(kuò)大到氣泡的外邊緣區(qū)域。

 

 

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

 

 

2. 更合理的氣泡長(zhǎng)度變化規(guī)則

 

-“語(yǔ)音越長(zhǎng)，氣泡越長(zhǎng)，so easy~”

氣泡越長(zhǎng)代表語(yǔ)音越長(zhǎng)。但你可能沒(méi)注意過(guò)，其實(shí)氣泡長(zhǎng)度是隨著語(yǔ)音時(shí)長(zhǎng)呈線(xiàn)性變化。這個(gè)本來(lái)運(yùn)行良好的規(guī)則在加入了拖拽功能后卻出現(xiàn)了問(wèn)題。從灰度用戶(hù)的數(shù)據(jù)來(lái)看，大部分用戶(hù)的語(yǔ)音時(shí)長(zhǎng)在10s以?xún)?nèi)。此時(shí)語(yǔ)音氣泡較短，十分不易于進(jìn)行拖拽。所以我們既需要短語(yǔ)音氣泡變長(zhǎng)，又要保證用戶(hù)可以感知到氣泡始終隨著時(shí)長(zhǎng)增長(zhǎng)而變長(zhǎng)。在氣泡最大長(zhǎng)度無(wú)法改變的前提下，必須改變?cè)械木€(xiàn)性變化規(guī)律，轉(zhuǎn)變?yōu)楦?xì)的分階段的曲線(xiàn)變化。

 

 

[階段1] 斜率逐漸增加的曲線(xiàn)。此階段對(duì)應(yīng)著短時(shí)長(zhǎng)語(yǔ)音，也是用戶(hù)的高頻使用場(chǎng)景。因此該階段氣泡長(zhǎng)度隨語(yǔ)音時(shí)長(zhǎng)的增長(zhǎng)需要更加明顯；[階段2] 斜率逐漸減小的曲線(xiàn)。此階段對(duì)應(yīng)的長(zhǎng)語(yǔ)音是低頻場(chǎng)景，此時(shí)氣泡長(zhǎng)度隨語(yǔ)音時(shí)長(zhǎng)變化的反饋可以適當(dāng)放緩；[階段3] 達(dá)到氣泡長(zhǎng)度最大值，不再變化。此時(shí)為超長(zhǎng)語(yǔ)音階段，用戶(hù)已經(jīng)不需要通過(guò)氣泡長(zhǎng)度來(lái)判斷語(yǔ)音時(shí)長(zhǎng)。

運(yùn)用更加精細(xì)的氣泡長(zhǎng)度變化規(guī)律，讓用戶(hù)的高頻語(yǔ)音消息更好拖拽。

 

懂你所需，為你設(shè)計(jì)

-“結(jié)束了嗎，有沒(méi)有one more thing？”

至此，語(yǔ)音消息的改版設(shè)計(jì)似乎已經(jīng)結(jié)束，但我們對(duì)于設(shè)計(jì)的追求不止于此。語(yǔ)音進(jìn)度調(diào)節(jié)只是語(yǔ)音消息體驗(yàn)中的一個(gè)小小功能。我們希望通過(guò)這些精致貼心的體驗(yàn)設(shè)計(jì)，讓用戶(hù)產(chǎn)生一種感覺(jué)——QQ懂我。因?yàn)槎?，所以希望為你的溝通做更多事情?/p>

關(guān)于語(yǔ)音消息，設(shè)計(jì)團(tuán)隊(duì)也在發(fā)散更多貼近用戶(hù)真實(shí)生活的場(chǎng)景。（1）更加貼近場(chǎng)景的體驗(yàn)。未來(lái)我們是否可以利用傳感器檢測(cè)到用戶(hù)所處的環(huán)境和狀態(tài)，根據(jù)不同的環(huán)境和用戶(hù)行為狀態(tài)，確定這些消息是以語(yǔ)音還是文本顯示。 （2）更加豐富的語(yǔ)音表達(dá)。語(yǔ)音比文本承載了更多的情感信息，基于這個(gè)屬性，我們能否通過(guò)特殊聲音編輯、視覺(jué)化表達(dá)、手機(jī)觸感等方式，幫助發(fā)送方傳達(dá)更加豐富的信息。 （3）無(wú)障礙化體驗(yàn)。對(duì)于視障人群、運(yùn)動(dòng)障礙人群、老年人群體來(lái)說(shuō)，語(yǔ)音是很好的溝通選擇。我們是否能夠更進(jìn)一步，通過(guò)語(yǔ)音指令更好的協(xié)助他們使用QQ… 做最懂你的語(yǔ)音消息，我們還在繼續(xù)。

 

 

未來(lái)可期：最美的QQ正在路上

 

 

QQ新版語(yǔ)音氣泡iOS上線(xiàn)當(dāng)天喜提微博熱搜?？吹接脩?hù)們的花式夸獎(jiǎng)，我們的心情美滋滋。但同時(shí)網(wǎng)絡(luò)上也出現(xiàn)了一些負(fù)面的評(píng)價(jià)，這些聲音也在鞭策設(shè)計(jì)團(tuán)隊(duì)持續(xù)打磨語(yǔ)音消息體驗(yàn)。

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

什么，你還沒(méi)有下載手機(jī)QQ8.0？那你豈不是沒(méi)法體驗(yàn)到史上最簡(jiǎn)潔的QQ頁(yè)面，也不能發(fā)現(xiàn)底部tab小驚喜了？你更沒(méi)法知道我們的語(yǔ)音消息馬上就支持<(ˉ^ˉ)><(ˉ^ˉ)><(ˉ^ˉ)>和(>▽<)(>▽<)(>▽<)兩個(gè)超贊功能（頂級(jí)機(jī)密，手動(dòng)打碼）。

掃碼下載，即刻體驗(yàn)手機(jī)QQ8.0。