请选择 进入手机版 | 继续访问电脑版
立即注册 找回密码
查看: 773|回复: 0

暴君本宫来自现代QQ语音进度条背后策划故事:如何让用户“无拘无束”... 太阳报

[复制链接]

172

主题

986

帖子

1199

积分

金牌会员

Rank: 6Rank: 6

积分
1199
发表于 2019-5-19 08:41:52 | 显示全部楼层 |阅读模式
点击上方“腾讯科技”,“星标或置顶公众号”

关键时辰,第一时候投递

ZyDfy55rFrRnanNz.jpg

Ip9UZKIFRV2GG8y5.jpg


来历 /产物猎人(ID:qqchanpin)

作者 /腾讯ISUX

本文系产物猎人“Hunter”计划投稿作品

接待下载腾讯消息APP,检察更多科技热门消息



在QQ最新的8.0.0版本中,新增的“语音进度条”功用激发关注,用户可以在QQ上对语音进度停止停息和拖动。




w3IT66RPDZdPvJ66.jpg



QQ语音改版消息一度登勺嫦妊,收到各类吃瓜大众的花式“彩虹屁”:


B7E0U73fJvueLLvE.jpg



在改版策划背后,潜藏着哪些故事?


我们约请负责QQ语音改版设想的腾讯ISUX团队,分享进度条背后的设想过程。


语音消息真的下降用户相同本钱了吗?


非论在QQ还是微信上,“语音”都已经成为用户间最自然的交换方式之一。


看到“气泡”视觉图形,用户会下认识地址击进度条,播放语音。


wJ8EYYD4DYyze84g.jpg



现有的这些点击播放的语音气泡真的满足了一切用户需求吗?emm…


UZcbTjIpBUJUTGuG.jpg



总之:发送语音一时爽,接收语音想撞墙。


我们先摸索在QQ语音消息中,存在的那些痛点。


tErHzA8V61aZLdNA.jpg



面临这些痛点,我们决议将QQ最新改版的需求聚焦在:

a.按钮—播放和停息的指示


b.游标—拖动指示


c.色彩—进度指示。


d.本次语音气泡的设想中,我们照旧相沿了按钮、游标、色彩作为指示性元素。



Gqqfk0ZLPQiP5Zff.jpg


可是这些元素的加入无疑会加重气泡内的信息负担。而且当同时出现多个语音气泡时,我们加倍需要保证聊天页面有适当的信息密度。是以在声纹款式设想中,降噪成为了关键。


在发散了多种款式后,我们终极挑选了这类繁复的声纹形状。它既能很好地展现进度信息,又可以平衡气泡内的信息密度,让QQ多样化的用户群都能对语音进度拖拽有更直觉化的操纵。


gii0zvvKkBNk88Ku.jpg

FfKTH2HfGXP2KB2h.jpg



2.正确or美——提升直观体验很重要



  • “声纹是法式间接天生的,难道还需要设想?”


盆友,买家秀和卖家秀领会一下?


cblL4xx6U3u56l15.jpg



显现正确音量的声纹没法满足我们预期中的流利视觉体验,反而会让用户感遭到多变声纹信息带来的压力。


回归设想方针,声纹是为了帮助用户识别有用语音片断,是以有声音和无声音的声纹对照很重要。这也意味着对于一般音量区间的声音,我们可以适当牺牲正确性以确保杰出的视觉体验。


在收集了大量用户实在语音声纹后,我们发现最“丑”声纹来自于两类声音。一类是当用户语音持续到达最大音量时,大量声纹到达最高高度并撑满语音气泡。这类现象常发生在用户对动手机收音孔处措辞的场景中。


为领会决这个题目,我们将到达最大音量的声纹高度停止削减。被削减的高度依照正弦曲线做随机值,再加回到这些声纹的上方。经过这样的优化后,一切到达最高值的声纹都可以在顶部发生流利的曲线。


K04lzFs6RL1V2ILf.jpg



另一类“丑”声纹则来自于音量忽高忽低酿成的声纹高度跳变。这是由于人们措辞是非持续的,会存在语气词和用户思考的沉默点。处理这个题目标关键是让高声纹和低声纹之间的落差削减。


是以我们界说当相邻声纹高度差跨越50%时,就对这两个声纹高度做平滑处置,保证一切音量的声纹都有流利的过渡。


BK6AkScMxCX6ELee.jpg



经过与产物和开辟团队的多轮参数调剂后,这些优化后的声纹可以让用户不管怎样措辞都能“看到”自己最美的语音。


P6U5YuIl2iXZ6i0p.jpg
若何平衡手指宽度和控件巨细?



1.更大的响应地区



  • “点击拖拽是常规操纵,挪用系统交互就行了吧?”



拖拽简直常规,可是在功用之外,我们能否让用户的操纵体验更畅快呢?


畅称心味着自在自在,翻译成交互说话就是要赋予用户更大的操纵地区。可是我们的手指宽度和控件巨细偶然难以婚配。例如,8.0UI改版后的语音气泡高度为118px,而成人手指的宽度范围则在110px-180px。


假如拖拽只能在气泡范围内停止,就意味着用户需谨慎翼翼地去操纵。为了实现“自在自在”的拖拽体验,我们按照用户的行为阶段对响应范围停止了两次放大。


xKKofOkrgCCRcKkF.jpg



第一次放大:起头拖动阶段,放大触发拖动的范围。拖拽事务的触发范围由气泡自己扩大到气泡的外边沿地区。


NbJ88DbaAxbXjfHa.jpg


第二次放大:拖拽中,拖动行为的响应范围扩大到全屏。一旦用户触发拖拽,系统将屏障聊天页面的一切操纵,包括右滑返回、高低转动和页面内的一切点击操纵。确保用户在手指未分开屏幕的条件下,可以在全部页面范围内控制进度拖拽。


一方面用户不再需要沿着气泡的小小地区去拖拽,体验加倍顺畅;另一方面这也可以削减手指对于气泡的遮挡,让用户更好地看清楚当进步度。


Js1MMW9l96T4VzTD.jpg



2.更公道的气泡长度变化法则



  • “语音越长,气泡越长,so easy~”


气泡越长代表语音越长。但你能够没留意过,实在气泡长度是随着语音时长呈线性变化。这个原本运转杰出的法则在加入了拖拽功用后却出现了题目。


从灰度用户的数据来看,大部分用户的语音时长在10s之内。此时语音气泡较短,非常不易于停止拖拽。所以我们既需要短语音气泡变长,又要保证用户可以感知到气泡始终随着时长增加而变长。


在气泡最大长度没法改变的条件下,必须改变原本的线性变化纪律,改变成更邃密的分阶段的曲线变化。


YTfv65VIUv5eiE8v.jpg



[阶段1]斜率逐步增加的曲线。此阶段对应着短时长语音,也是用户的高频利用处景。是以该阶段气泡长度随语音时长的增加需要加倍明显;


[阶段2]斜率逐步减小的曲线。此阶段对应的长语音是低频场景,此时气泡长度随语音时长变化的反应可以适当放缓;


[阶段3]到达气泡长度最大值,不再变化。此时为超长语音阶段,用户已经不需要经过气泡长度来判定语音时长。


应用加倍邃密的气泡长度变化纪律,让用户的高频语音消息更好拖拽。


f4JukCU291qNvKI2.jpg
未来,或用传感器检测用户所处情况和状态




  • “竣事了吗,有没有one more thing?”


至此,语音消息的改版设想似乎已经竣事,但语音进度调理只是语音消息体验中的一个小小功用。


关于语音消息,我们未来也会摸索更多切近用户实在生活的场景,比如:


(1)加倍切近场景的体验。未来我们能否可以操纵传感器检测到用户所处的情况和状态,按照分歧的情况和用户行为状态,肯定这些消息是以语音还是文本显现。


(2)加倍丰富的语音表达。语音比文本承载了更多的感情信息,基于这个属性,我们能否经过特别声音编辑、视觉化表达、手机触感等方式,帮助发送方转达加倍丰富的信息。


(3)无障碍化体验。对于视障人群、活动障碍人群、老年人群体来说,语音是很好的相同挑选。我们能否可以更进一步,经过语音指令更好的辅佐他们利用QQ…做最懂你的语音消息,我们还在继续。


假如你既懂产物,又会写,接待标注“Hunter计划+文章称号”投稿至:yannyzhou tencent.com



QNouP4Knv4v4O4Ub.jpg
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|网贷部落_网贷110_51网贷预警_网贷公众号导航_权威P2P网贷行业资讯和数据中心  |网站地图

GMT+8, 2019-8-20 21:04 , Processed in 0.563172 second(s), 35 queries .

Powered by Discuz! X3.2 © 2001-2013 Comsenz Inc & 加田小店

快速回复 返回顶部 返回列表