每日最新頭條.有趣資訊

為了讓你自由拖拽語音,QQ策劃操碎了心

來源 /本文系產品獵人“Hunter”計劃投稿作品

在QQ最新的8.0.0版本中,新增的“語音進度條”功能引發關注,用戶可以在QQ上對語音進度進行暫停和拖動。

QQ語音改版消息一度登上熱搜,收到各類吃瓜群眾的花式“彩虹屁”:

在改版策劃背後,潛藏著哪些故事?

我們邀請負責QQ語音改版設計的騰訊ISUX團隊,分享進度條背後的設計歷程。

語音消息真的降低用戶溝通成本了嗎?

不論在QQ還是微信上,“語音”都已經成為用戶間最自然的交流方式之一。

看到“氣泡”視覺圖形,用戶會下意識地點擊進度條,播放語音。

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

總之:發送語音一時爽,接收語音想撞牆。

我們先探索在QQ語音消息中,存在的那些痛點。

面對這些痛點,我們決定將QQ最新改版的需求聚焦在:

1. 長語音被打斷可以重聽

2. 識別有效的語音片段

3. 重點語音片段反覆收聽

功能層面上,我們將通過提供語音的暫停和進度拖拽能力,並可視化音量,以滿足語音接收者的使用效率需求。

在體驗層面上,語音作為用戶的高頻溝通操作,我們希望給用戶帶來極致、流暢的體驗。

如何兼顧視覺體驗和使用體驗?

1. 易學性——讓功能更加直覺化

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

對用戶來說,語音進度調節不只是一個新功能,更是一種新模式。

QQ用戶基數較為龐大,所有功能都要盡量降低用戶的學習成本。在這種背景下,功能的易學性顯得尤為重要。

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

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

a.按鈕—播放和暫停的指示

b.遊標—拖動指示

c.顏色—進度指示。

d.本次語音氣泡的設計中,我們依舊沿用了按鈕、遊標、色彩作為指示性元素。

但是這些元素的加入無疑會加重氣泡內的信息負擔。並且當同時出現多個語音氣泡時,我們更加需要保證聊天頁面有適當的信息密度。因此在聲紋樣式設計中,降噪成為了關鍵。

在發散了多種樣式後,我們最終選擇了這種簡約的聲紋形態。它既能很好地展示進度信息,又可以平衡氣泡內的信息密度,讓QQ多樣化的用戶群都能對語音進度拖拽有更直覺化的操作。

2. 準確or美——提升直觀體驗很重要

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

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

呈現準確音量的聲紋無法滿足我們預期中的流暢視覺體驗,反而會讓用戶感覺到多變聲紋信息帶來的壓力。

回歸設計目標,聲紋是為了幫助用戶識別有效語音片段,因此有聲音和無聲音的聲紋對比很重要。這也意味著對於正常音量區間的聲音,我們可以適當犧牲準確性以確保良好的視覺體驗。

在收集了大量用戶真實語音聲紋後,我們發現最“醜”聲紋來自於兩類聲音。一類是當用戶語音連續達到最大音量時,大量聲紋達到最高高度並撐滿語音氣泡。這種現象常發生在用戶對著手機收音孔處說話的場景中。

為了解決這個問題,我們將達到最大音量的聲紋高度進行削減。被削減的高度按照正弦曲線做隨機值,再加回到這些聲紋的上方。經過這樣的優化後,所有達到最高值的聲紋都能夠在頂部產生流暢的曲線。

另一類“醜”聲紋則來自於音量忽高忽低造成的聲紋高度跳變。這是由於人們說話是非連續的,會存在語氣詞和用戶思考的沉默點。解決這個問題的關鍵是讓高聲紋和低聲紋之間的落差減少。

因此我們定義當相鄰聲紋高度差超過50%時,就對這兩個聲紋高度做平滑處理,保證所有音量的聲紋都有流暢的過渡。

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

如何平衡手指寬度和控件大小?

1. 更大的響應區域

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

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

暢快意味著無拘無束,翻譯成互動語言就是要賦予用戶更大的操作區域。但是我們的手指寬度和控件大小有時難以匹配。例如,8.0UI改版後的語音氣泡高度為118px,而成人手指的寬度範圍則在110px-180px。

如果拖拽只能在氣泡範圍內進行,就意味著用戶需小心翼翼地去操作。為了實現“無拘無束”的拖拽體驗,我們根據用戶的行為階段對響應範圍進行了兩次放大。

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

第二次放大:拖拽中,拖動行為的響應範圍擴大到全屏。一旦用戶觸發拖拽,系統將屏蔽聊天頁面的所有操作,包括右滑返回、上下滾動和頁面內的所有點擊操作。確保用戶在手指未離開螢幕的前提下,可以在整個頁面範圍內控制進度拖拽。

一方面用戶不再需要沿著氣泡的小小區域去拖拽,體驗更加順暢;另一方面這也可以減少手指對於氣泡的遮擋,讓用戶更好地看清楚當前進度。

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

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

氣泡越長代表語音越長。但你可能沒注意過,其實氣泡長度是隨著語音時長呈線性變化。這個本來運行良好的規則在加入了拖拽功能後卻出現了問題。

從灰度用戶的數據來看,大部分用戶的語音時長在10s以內。此時語音氣泡較短,十分不易於進行拖拽。所以我們既需要短語音氣泡變長,又要保證用戶可以感知到氣泡始終隨著時長增長而變長。

在氣泡最大長度無法改變的前提下,必須改變原有的線性變化規律,轉變為更精細的分階段的曲線變化。

[階段1]斜率逐漸增加的曲線。此階段對應著短時長語音,也是用戶的高頻使用場景。因此該階段氣泡長度隨語音時長的增長需要更加明顯;

[階段2]斜率逐漸減小的曲線。此階段對應的長語音是低頻場景,此時氣泡長度隨語音時長變化的反饋可以適當放緩;

[階段3]達到氣泡長度最大值,不再變化。此時為超長語音階段,用戶已經不需要通過氣泡長度來判斷語音時長。

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

未來,或用傳感器檢測用戶所處環境和狀態

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

至此,語音消息的改版設計似乎已經結束,但語音進度調節只是語音消息體驗中的一個小小功能。

關於語音消息,我們未來也會探索更多貼近用戶真實生活的場景,比如:

(1)更加貼近場景的體驗。未來我們是否可以利用傳感器檢測到用戶所處的環境和狀態,根據不同的環境和用戶行為狀態,確定這些消息是以語音還是文本顯示。

(2)更加豐富的語音表達。語音比文本承載了更多的情感信息,基於這個屬性,我們能否通過特殊聲音編輯、視覺化表達、手機觸感等方式,幫助發送方傳達更加豐富的信息。

(3)無障礙化體驗。對於視障人群、運動障礙人群、老年人群體來說,語音是很好的溝通選擇。我們是否能夠更進一步,通過語音指令更好的協助他們使用QQ… 做最懂你的語音消息,我們還在繼續。

獲得更多的PTT最新消息
按讚加入粉絲團