4月16日，QQ语音消息的新特性突然成为微博热搜，引发QQ粉丝的关注。是什么让超过129万人为QQ点赞？而微信为何让吃瓜群众纷纷艾特？现在，让我们揭秘QQ语音消息改版背后的设计之旅。
QQ已陪伴用户20年，但我们从未停止思考如何让用户的交流更加高效。语音作为人与人之间最自然的方式，也一直是我们反思现有体验的源泉。语音消息是否只能采用这种传统的泡泡体验？
当前的语音泡泡需要点击才能播放，真的能满足所有用户的需求吗？Emm…
归纳总结：发送语音一时爽，接收语音想撞墙。
针对这些用户反馈，业内已有一些解决方案，但其目标用户量和场景远不如QQ丰富。在此次改版中，我们回归QQ本身，探索在QQ语音场景下存在的痛点。
针对这些痛点，本次改版将需求聚焦在：
- 长语音被打断可以重听；
- 识别有效的语音片段；
- 重点语音片段反复收听。
功能上，我们将提供语音的暂停和进度拖动功能，并可视化音量，以满足语音接收者的使用效率需求。体验上，语音作为用户的高频沟通操作，其设计必须符合QQ 8.0中精致这一设计原则，为用户提供极致的体验。
美妙的体验，从第一眼开始。
“如此简单的操作，用户试用一次就知道怎么用了吧！”
QQ拥有广泛的用户群，所有功能都应尽量降低用户的学习成本。更何况，由于没有其他国民级APP的类似特性可以类比，对于用户来说，语音进度调节不只是一项新功能，更是一种新模式。在此背景下，功能的易学性显得尤为重要。
如何让用户一眼就理解语音消息可以暂停和拖动？如何让操作更加直观？不妨从用户熟悉的元素入手，进行联想。
暂停和拖动在语音中并不常见，但在播放器中却是通用的功能。在播放器设计中，有三个引导用户行为的关键元素：
- 按钮——播放和暂停的指示；
- 游标——拖动指示；
- 颜色——进度指示。
在本次语音泡泡的设计中，我们也沿用了按钮、游标、色彩作为指示性元素。
这些元素的加入无疑会加重泡泡中的信息负担，并且当多个语音泡泡同时出现时，我们更需要确保聊天页面有适当的信息密度。在声纹样式设计中，降噪至关重要。在探索多种样式后，我们最终选择了这种简约的声纹形式。它既能很好地展示进度信息，又能平衡泡泡内的信息密度，让QQ 众多用户群都能直观地掌握语音进度拖动操作。
“声纹是程序直接生成的，难道还需要设计？”
朋友，你有看过买家秀和卖家秀对比吗？
原始声纹无法满足预期中的流畅视觉体验，反而会让用户感受到多变声纹信息带来的压力。回到设计目标，声纹是为了帮助用户识别有效语音片段，因此有声音和无声音的声纹对比很重要。这也意味着对于正常音量范围的声音，我们可以适当地牺牲准确性以保证良好的视觉体验。
收集大量用户真实语音声纹后，我们发现最“丑”的声纹来自两类声音。一类是当用户语音连续达到最大音量时，大量声纹达到最高高度并撑满语音泡泡，这种情况经常发生在用户对着手机麦克风说话时。
为了解决这个问题，我们将达到最大音量的声纹高度进行削减。削减的高度按照正弦曲线做随机值处理，再加回到这些声纹的上方。优化后，所有达到最高值的声纹，都能在顶部产生流畅的曲线。
另一类“丑”声纹则来自音量忽高忽低造成的声纹高度跳变。这是因为人们说话是非连续的，会存在语气词和用户思考的停顿。解决这个问题的关键是，让高声纹和低声纹之间的落差减少，因此我们定义当相邻声纹高度差超过 50% 时，就对这两个声纹高度进行平滑处理，保证所有音量的声纹都有流畅的过渡。
经过与产品和开发团队多轮参数调整后，这些精心优化的声纹可以让用户在任何说话情况下都能“看到”自己最美的声音。
点击拖拽是常规操作，调用系统交互应该就可以了，对吧？
拖拽的确是常规操作，但在功能之外，我们能否让用户的操作体验更流畅呢？
流畅意味着无拘无束，翻译成交互语言就是赋予用户更大的操作区域，但手指宽度和控件大小往往无法匹配。
例如：8.0 UI改版后的语音泡泡高度为 118 px，而成年手指宽度范围在 110 px-180 px 之间。如果拖拽只能在泡泡范围内进行，就意味着用户需要小心谨慎地操作。为了实现“无拘无束”的拖拽体验，我们根据用户的行为阶段对响应范围进行了两次放大。
- 一方面，用户无需再沿着气泡狭窄的区域拖拽，操作更为顺畅；
- 这有效减少了手指对气泡的遮挡，便于用户更清晰地查看当前进度。
“语音越长，气泡越长，so easy~”
气泡长度代表语音长度，但此前并未注意的是，气泡长度随语音时长呈现线性变化。虽然原本运作良好，但在加入拖拽功能后却出现了不妥。
分析灰度用户数据显示，大多数用户的语音时长在 10 秒以内。此时的语音气泡较短，拖拽操作颇有难度。我们既需延长短语音气泡，又要确保用户能够感知到气泡始终随着时长增长而变长。由于气泡最大长度无法更改，就必须改变原有的线性变化规律，改为更细致的分阶段曲线变化。
- 阶段 1：曲线斜率逐渐增大。此阶段对应短语音，也是用户的常用场景，因此该阶段气泡长度随语音时长的增长需要更加明显；
- 阶段 2：曲线斜率逐渐减小。此阶段对应长语音为低频场景，此时气泡长度随语音时长变化的反馈可以适当放缓；
- 阶段 3：达到气泡长度最大值，不再变化，此时为超长语音阶段，用户已无需通过气泡长度来判断语音时长。
运用更加精细的气泡长度变化规律，优化用户在高频语音消息中的拖拽体验。
结束了吗？有没有意外惊喜？
虽然语音消息的改版设计看似已告一段落，但我们的追求远不止于此。语音进度调节只是语音消息体验中的一个小功能。我们希望通过这些贴心细致的体验设计，让用户感受到——QQ懂我。因为懂你，所以希望为你的沟通尽一份绵薄之力。
关于语音消息，设计团队正在探索更多贴近用户真实生活的场景。
- 更贴切的体验。未来，能否利用传感器检测用户所处的环境和状态，根据不同的环境和用户行为状态，确定这些消息是以语音还是文本显示？
- 更加丰富的语音表达。语音承载的情感信息比文本更多，基于此，能否通过特殊声音编辑、视觉化表达、手机触感等方式，帮助发送方传达更加丰富的信息？
- 无障碍化体验。对于视障人群、运动障碍人群、老年人群体来说，语音是很好的沟通选择。是否能够更进一步，通过语音指令更好地协助他们使用 QQ……打造最懂你的语音消息，我们的探索还在继续。
QQ 新版语音气泡在 iOS 上线当天，荣登微博热搜。看到用户的各种夸赞，我们欣喜不已。但与此网络上也出现了部分负面评价，这些声音也在鞭策设计团队不断打磨语音消息体验。
一花一世界，一树一菩提。语音消息气泡改版只是体验升级的第一步，却能反映出整个 QQ8.0 版本所遵循的设计原则：降噪、生机和精致。沿着这些原则，我们仍在打造最美 QQ 的路上奋力前行。