qq语音传感器 QQ 80语音消息改版设计和它的策划故事

发布时间：2024-11-25 03:11:00

QQ 80语音消息改版设计和它的策划故事

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）

来源：https://mp.weixin.qq.com/s/JGOIWbf6UnyTIm3kNc_KVg

题图来自腾讯ISUX官网

索尼「无声语音识别」大法：脖颈贴合传感器，AI 转换皮肤震动信息

如今，对于听力有障碍的群体来说，听不到的声音，可以触摸到了。

“触摸”听不到的语言，是由东京大学和索尼计算机科学研究所（CSL）共同研发的 AI 系统「Derma」实现的。有了 Derma 系统，只要在喉咙周围的皮肤上贴上传感器，利用喉咙和下颚的皮肤震动，就能将口形转化为语音。

可“触摸”的语言

根据病症的严重程度，现阶段治疗听力障碍的主流手段包括：

药物治疗：通过静脉点滴或局部滴药（如激素、抗菌素、抗病毒药物等）消退炎症，使听力尽快恢复；

手术治疗：主要针对外、中耳畸形、各种压迫咽鼓管疾病、耳外伤等进行手术；

仪器辅助：如助听器（听力损失程度≤80dB）、人工耳蜗（听力损失程度>80dB）。

其中，人工耳蜗植入是当前让重度、极重度耳聋患者恢复听力的唯一有效办法。

雷锋网了解到，早在 1957 年，法国科学家首次将电极植入一位全聋病人的耳蜗内，使该患者感知到周围的环境音。直到上世纪 90 年代，人工耳蜗进入临床应用阶段，给极重度耳聋患者带来了“新生”。

实际上，人工耳蜗的发展离不开电子技术、计算机技术、语音学、电生理学、材料学、耳显微外科学的发展。在这些学科兴起、发展之前，针对听力障碍患者，科学家给出的应对措施是一种叫做 Tadoma 的触诊唇读法。顾名思义，这种疗法是指——听力障碍患者通过用手指触摸说话者的嘴唇、下巴、脖颈处，读取说话者想表达的内容。

而上述日本团队研发 AI 系统 Derma 的灵感，最初正是源于 Tadoma。

通过机器学习将 Tadoma 自动化

该团队的设计其实就是将 Tadoma 疗法的过程通过机器学习自动化了。

就其原理而言，如下图所示，在喉咙周边的皮肤上贴上一个加速度/角速度传感器，获取无声发声时下颚、舌肌运动引起的从下颚到喉咙的皮肤颤动信息，采用深度学习进行分析识别，最终实现将无声语音转换为语音输入的无声语音交互 （Silent Speech Interaction，SSI）。

雷锋网注意到，该传感器可获取 12 维的皮肤运动信息，深度学习可以分析、识别 35 种发声类型。实验表明，识别皮肤颤动信息的精准度超过 94％。

值得一提的是，研究团队训练模型用到了连接时间分类（Connectionist Temporal Classification, CTC）。

实际上，在训练语音识别器的过程中，受说话者语速等因素影响，将输入与输出对齐是一个难点。为解决这一问题，连接时间分类就派上用场了。

就其外形而言，与现有的一些无声语音交互设备相比，这一设备体积小、重量轻、并不显眼。此外，这一系统耗电量低，不易受到环境亮度等因素的影响，不会影响到佩戴者的正常生活，可以说是非常实用了。

另外研究团队表示，经转换后的语音合成不仅可以输入到具有语音识别功能的数字设备（语音助手），同时也能帮助有语言障碍的患者进行交流。

将来，该团队的研究方向则是可穿戴电子设备和体内嵌入式计算集成。

基于 AI 的无声语音交互

近年来，无声语音交互领域方兴未艾，当前产业和学界在该领域的思路主要有 2 条——通过感知气流识别话语（气流采集）和通过感知肌肉运动的方式识别话语（EMG 信号采集）。以下是该领域发展的大致时间线：

2009 年，麻省理工学院感知交流组研发的触觉设备能够克服读唇语无法清晰识别的障碍，成本比人工耳蜗植入手术低几个数量级；

2016 年，牛津大学人工智能实验室、谷歌 DeepMind 和加拿大高等研究院（CIFAR）联合开发了结合深度学习技术的唇读程序 LipNet；

2016 年，DeepMind 经 1 万小时的新闻视频训练，将 AI 唇读准确率提升至 46.8%；

2019 年，世界知识产权组织公布了微软申请的“无声语音输入”（Silent Voice Input）专利，丰富了“机器听懂人话”的场景；

2020 年 3 月，浙江工业大学、中科院计算技术研究所智能信息处理重点实验室及中国科学院大学共同提出了在局部特征层和全局序列层上引入互信息约束，增强口型特征与语音内容的关系，将计算机唇读精度提升至 84.41%。

实际上，无声语音识别不仅可以帮助有听力、语言障碍的人群，也适用于包括灾害现场、舱外探索、水下作业、工厂车间在内的场景。

不过，无声语音交互设备要想真正成为消费级产品，还需打磨。正如微软全球资深技术院士、微软云与人工智能事业部负责人黄学东博士曾表示：

公开的测试、已发表的学术文章，虽不能与现实完全割裂，但相比消费级产品与商业场景，仍需要不一样的评判标准。

关于索尼 CSL

正如上文所述，Derma 由东京大学和索尼 CSL 共同研发。

在中国人民大学出版社 2011 年出版的一本名为《索尼研究所的经营哲学》的书中，索尼 CSL 董事长所真理雄便讲述了索尼 CSL 的经营管理理念。所真理雄写道，索尼 CSL 遵循“小即是美”的经营理念，坚持不扩大规模，因此诞生了众多的“异类和天才”，同时也支持人才的“流通”。

雷锋网了解到，索尼 CSL 成立于 1988 年，作为索尼公司的“创新工厂”，广泛关注计算机科学、生命科学、脑科学和经济学等多个领域。当前索尼 CSL 的研究方向包括「全球议程」（涵盖从能源到食品和医疗保健的问题）、「人类增强」（包括探索人类创造力和人机交互/集成的研究）与「网络智能」（AI）。

2019 年 11 月，索尼宣布成立索尼 AI 部门，以“利用 AI 激发人类的想象力和创造力” 为使命，旨在推进 AI 技术的基础研发，而索尼 CSL 总裁兼 CEO Hiroaki Kitano 便是索尼 AI 的全球负责人。

引用来源：

[1] https://www.itmedia.co.jp/news/articles/2003/18/news046.html

[2] https://www.sonycsl.co.jp/

[3] https://mp.weixin.qq.com/s/qvq2H7d0p0slydZpXWeJCQ

[4] https://baike.baidu.com/item/%E5%90%AC%E5%8A%9B%E9%9A%9C%E7%A2%8D/5155092?fr=aladdin#5

[5] https://baike.baidu.com/item/%E4%BA%BA%E5%B7%A5%E8%80%B3%E8%9C%97/250269?fr=aladdin#1