QQ 8.0語音消息改版設(shè)計和它的策劃故事

10 評論 6330 瀏覽 54 收藏 14 分鐘

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

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

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ù)收聽。

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

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

美好體驗,從第一眼開始。

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

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

QQ擁有廣泛的用戶群,所有功能都要盡量降低用戶的學(xué)習(xí)成本。更何況由于沒有其他國民級APP的相似特性可以類比,對用戶來說語音進(jìn)度調(diào)節(jié)不只是一個新功能,更是一種新模式。在這種背景下,功能的易學(xué)性顯得尤為重要。

怎樣讓用戶一眼就明白語音消息可以暫停并拖動呢?怎樣讓操作更加直覺化?我們不妨從用戶熟悉的事物入手,進(jìn)行聯(lián)想。

暫停和拖動在語音中不常見,但它卻是播放器的通用功能。在播放器設(shè)計中,有三個用戶行為引導(dǎo)的關(guān)鍵元素:

  1. 按鈕—播放和暫停的指示;
  2. 游標(biāo)—拖動指示;
  3. 顏色—進(jìn)度指示。

本次語音氣泡的設(shè)計中,我們依舊沿用了按鈕、游標(biāo)、色彩作為指示性元素。

點滴匠心,聲入人心

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

點滴匠心,聲入人心

點滴匠心,聲入人心

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)化后的聲紋可以讓用戶無論怎樣說話都能“看到”自己最美的語音。

不止拖拽,更要暢快感受

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)度。

點滴匠心,聲入人心

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ī)律,讓用戶的高頻語音消息更好拖拽。

懂你所需,為你設(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ù)。

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

點滴匠心,聲入人心

QQ新版語音氣泡iOS上線當(dāng)天喜提微博熱搜??吹接脩魝兊幕ㄊ娇洫?,我們的心情美滋滋。但同時網(wǎng)絡(luò)上也出現(xiàn)了一些負(fù)面的評價,這些聲音也在鞭策設(shè)計團(tuán)隊持續(xù)打磨語音消息體驗。

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

 

作者:Sha 素菜,公眾號:騰訊ISUX(ID:tencent_isux)

來源:https://mp.weixin.qq.com/s/JGOIWbf6UnyTIm3kNc_KVg

題圖來自騰訊ISUX官網(wǎng)

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 貌似釘釘早就是這種帶聲紋的

    來自湖北 回復(fù)
    1. 錯了是帶進(jìn)度條的

      來自湖北 回復(fù)
  2. 好棒啊,果斷關(guān)注,期待更多~

    來自北京 回復(fù)
  3. 大廠和小廠還是有區(qū)別的,我們的小廠,不說一個次要的功能,就算是主要的功能,每當(dāng)讓反復(fù)推盤,推敲的時候,設(shè)計一臉黑線,開發(fā)更是罵罵咧咧

    來自江蘇 回復(fù)
    1. +1~

      來自北京 回復(fù)
    2. 小廠也沒那么多精力人力去考慮用戶心理最深處

      回復(fù)
  4. 小功能,大設(shè)計,真的很棒了????

    回復(fù)
    1. ??????

      回復(fù)
  5. 寫的好棒啊

    回復(fù)
  6. 很有意思的設(shè)計邏輯,確實能解決語音接收的部分痛點問題,很細(xì)致

    回復(fù)