QQ 8.0語音訊息改版設計和它的策劃故事
4月16日QQ語音訊息新特性突然登上微博熱搜，QQ鐵粉瞬間集結。是什麼讓129萬人為QQ花式彩虹屁？為何微信卻被吃瓜群眾瘋狂艾特？現在，讓我為你揭秘QQ語音訊息改版的設計旅程。
迴歸溝通：語音訊息能否更方便
QQ已經陪伴了大家20年，但是我們仍然在持續思考怎樣讓使用者的溝通更加高效。語音作為人與人之間最自然的交流方式，也不斷引起我們對現有體驗的反思。是否語音訊息只能採取這種經典的氣泡體驗？
現有的這些點選播放的語音氣泡真的滿足了所有使用者需求嗎？emm…
總結一下：傳送語音一時爽，接收語音想撞牆。
針對這些使用者聲音，業內已有一些解決方案。但是其目標使用者量和場景遠沒有QQ這樣豐富。在此次改版中，我們迴歸QQ本身，探索在QQ語音訊息場景中存在的那些痛點。
面對這些痛點，此次改版將需求聚焦在：
長語音被打斷可以重聽；
識別有效的語音片段；
重點語音片段反覆收聽。
功能層面上，我們將透過提供語音的暫停和進度拖拽能力，並可視化音量，以滿足語音接收者的使用效率需求。在體驗層面上，語音作為使用者的高頻溝通操作，其設計必須滿足QQ8。0中精緻這一設計原則，給使用者帶來極致體驗。
體驗設計：打磨精緻的語音訊息進度體驗
美好體驗，從第一眼開始。
1。 易學性：讓功能更加直覺化
“這麼簡單的操作，使用者試一次就知道怎麼用了吧！”
QQ擁有廣泛的使用者群，所有功能都要儘量降低使用者的學習成本。更何況由於沒有其他國民級APP的相似特性可以類比，對使用者來說語音進度調節不只是一個新功能，更是一種新模式。在這種背景下，功能的易學性顯得尤為重要。
怎樣讓使用者一眼就明白語音訊息可以暫停並拖動呢？怎樣讓操作更加直覺化？我們不妨從使用者熟悉的事物入手，進行聯想。
暫停和拖動在語音中不常見，但它卻是播放器的通用功能。在播放器設計中，有三個使用者行為引導的關鍵元素：
按鈕—播放和暫停的指示；
遊標—拖動指示；
顏色—進度指示。
本次語音氣泡的設計中，我們依舊沿用了按鈕、遊標、色彩作為指示性元素。
但是這些元素的加入無疑會加重氣泡內的資訊負擔，並且當同時出現多個語音氣泡時，我們更加需要保證聊天頁面有適當的資訊密度。因此在聲紋樣式設計中，降噪成為了關鍵。在發散了多種樣式後，我們最終選擇了這種簡約的聲紋形態。它既能很好的展示進度資訊，又可以平衡氣泡內的資訊密度，讓QQ多樣化的使用者群都能對語音進度拖拽有更直覺化的操作。
2。 準確or美：直觀體驗至上
“聲紋是程式直接生成的，難道還需要設計？”
盆友，買家秀和賣家秀瞭解一下？
呈現準確音量的聲紋無法滿足我們預期中的流暢視覺體驗，反而會讓使用者感覺到多變聲紋資訊帶來的壓力。迴歸設計目標，聲紋是為了幫助使用者識別有效語音片段，因此有聲音和無聲音的聲紋對比很重要。這也意味著對於正常音量區間的聲音，我們可以適當犧牲準確性以確保良好的視覺體驗。
在收集了大量使用者真實語音聲紋後，我們發現最“醜”聲紋來自於兩類聲音。一類是當用戶語音連續達到最大音量時，大量聲紋達到最高高度並撐滿語音氣泡，這種現象常發生在使用者對著手機收音孔處說話的場景中。
為了解決這個問題，我們將達到最大音量的聲紋高度進行削減。被削減的高度按照正弦曲線做隨機值，再加回到這些聲紋的上方。經過這樣的最佳化後，所有達到最高值的聲紋，都能夠在頂部產生流暢的曲線。
另一類“醜”聲紋則來自於音量忽高忽低造成的聲紋高度跳變。這是由於人們說話是非連續的，會存在語氣詞和使用者思考的沉默點。解決這個問題的關鍵是，讓高聲紋和低聲紋之間的落差減少，因此我們定義當相鄰聲紋高度差超過50%時，就對這兩個聲紋高度做平滑處理，保證所有音量的聲紋都有流暢的過渡。
經過與產品和開發團隊的多輪引數調整後，這些精心最佳化後的聲紋可以讓使用者無論怎樣說話都能“看到”自己最美的語音。
不止拖拽，更要暢快感受
1。 更大的響應區域
點選拖拽是常規操作，呼叫系統互動就好了吧？
拖拽的確常規，但是在功能之外，我們能否讓使用者的操作體驗更暢快呢？
暢快意味著無拘無束，翻譯成互動語言就是要賦予使用者更大的操作區域，但是我們的手指寬度和控制元件大小有時難以匹配。
例如：8。0UI改版後的語音氣泡高度為118px，而成人手指的寬度範圍則在110px-180px。如果拖拽只能在氣泡範圍內進行，就意味著使用者需小心翼翼地去操作。為了實現“無拘無束”的拖拽體驗，我們根據使用者的行為階段對響應範圍進行了兩次放大。
第一次放大：開始拖動階段，放大觸發拖動的範圍。拖拽事件的觸發範圍由氣泡本身擴大到氣泡的外邊緣區域。
第二次放大：拖拽中，拖動行為的響應範圍擴大到全屏。一旦使用者觸發拖拽，系統將遮蔽聊天頁面的所有操作，包括右滑返回、上下滾動和頁面內的所有點選操作。確保使用者在手指未離開螢幕的前提下，可以在整個頁面範圍內控制進度拖拽。
一方面使用者不再需要沿著氣泡的小小區域去拖拽，體驗更加順暢；
另一方面這也可以減少手指對於氣泡的遮擋，讓使用者更好的看清楚當前進度。
2。 更合理的氣泡長度變化規則
“語音越長，氣泡越長，so easy~”
氣泡越長代表語音越長，但你可能沒注意過，其實氣泡長度是隨著語音時長呈線性變化。這個本來執行良好的規則，在加入了拖拽功能後卻出現了問題。
從灰度使用者的資料來看，大部分使用者的語音時長在10s以內。此時語音氣泡較短，十分不易於進行拖拽。所以我們既需要短語音氣泡變長，又要保證使用者可以感知到氣泡始終隨著時長增長而變長。在氣泡最大長度無法改變的前提下，必須改變原有的線性變化規律，轉變為更精細的分階段的曲線變化。
階段1：
斜率逐漸增加的曲線。此階段對應著短時長語音，也是使用者的高頻使用場景，因此該階段氣泡長度隨語音時長的增長需要更加明顯；
階段2：
斜率逐漸減小的曲線。此階段對應的長語音是低頻場景，此時氣泡長度隨語音時長變化的反饋可以適當放緩；
階段3：
達到氣泡長度最大值，不再變化，此時為超長語音階段，使用者已經不需要透過氣泡長度來判斷語音時長。
運用更加精細的氣泡長度變化規律，讓使用者的高頻語音訊息更好拖拽。
懂你所需，為你設計
結束了嗎，有沒有one more thing？
至此，語音訊息的改版設計似乎已經結束，但我們對於設計的追求不止於此。語音進度調節只是語音訊息體驗中的一個小小功能。我們希望透過這些精緻貼心的體驗設計，讓使用者產生一種感覺——QQ懂我。因為懂你，所以希望為你的溝通做更多事情。
關於語音訊息，設計團隊也在發散更多貼近使用者真實生活的場景。
更加貼近場景的體驗。
未來我們是否可以利用感測器檢測到使用者所處的環境和狀態，根據不同的環境和使用者行為狀態，確定這些訊息是以語音還是文字顯示。
更加豐富的語音表達。
語音比文字承載了更多的情感資訊，基於這個屬性，我們能否透過特殊聲音編輯、視覺化表達、手機觸感等方式，幫助傳送方傳達更加豐富的資訊。
無障礙化體驗。
對於視障人群、運動障礙人群、老年人群體來說，語音是很好的溝通選擇。我們是否能夠更進一步，透過語音指令更好的協助他們使用QQ… 做最懂你的語音訊息，我們還在繼續。
未來可期：最美的QQ正在路上
QQ新版語音氣泡iOS上線當天喜提微博熱搜。看到使用者們的花式誇獎，我們的心情美滋滋。但同時網路上也出現了一些負面的評價，這些聲音也在鞭策設計團隊持續打磨語音訊息體驗。
一花一世界，一樹一菩提。語音訊息氣泡改版只是體驗升級的第一步，但它可以折射出整個QQ8。0版本所遵循的設計原則：降噪、生機和精緻。沿著這些原則，我們依舊在打造最美QQ的路上奮力前行。
作者：Sha 素菜，公眾號：騰訊ISUX（ID：tencent_isux）
題圖來自騰訊ISUX官網