2020年三季度数据显示,我国移动网络视频渗透率稳步超过75%,短视频的渗透率也超过了70%。随时随地用手机看视频,正在逐渐取代PC、电视等端时代的观看习惯。随着视频消费的快速增长,QQ浏览器作为视频消费平台,为用户提供更好的视频观看体验成为重要课题。在QQ浏览器中,我们为用户提供了丰富的视频播放功能和三种播放模式:全屏模式、悬浮模式和小窗模式。接下来,我想和大家分享一下我们在播放器升级版设计过程中的四点思考。设计思路1:如何让功能布局贴近用户的使用习惯,提高功能的易用性?横屏播放可以提升观看视频的沉浸感,但横屏状态下功能布局的挑战也更高。根据菲茨定律,手指到目标的距离(D)和目标的大小(W)决定了用户完成操作的耗时和难度(物理交互成本)。大而近的目标让用户很容易到达,反之则会给用户“难用”的印象。触摸热区是一个符合人体工程学的概念。StevenHoober在2013年发表的研究中定义了手指握持时的舒适控制范围。团队通过1300多次实地观察,统计了大众用户对移动设备的操作情况。Way,研究发现大约75%的点击是由拇指驱动的。Hoober指出,为了获得舒适的人机体验,重要的点击目标应该放在“触摸热点”中。但本研究仅针对手机竖屏操作,无法确定横屏场景是否也适用。因此,我们通过用户研究了解用户在横屏看视频时的操作习惯,定义横屏看视频时的触摸热点范围。目的是保证播放器界面的易用性,让用户愿意主动探索播放器的好坏。功能。在调查结果中,我们发现在全屏观看视频时,约有70%的用户习惯用右手拇指操作,一半的用户单手握住手机,这与Hoober的研究结果基本一致。这意味着我们应该将用户经常使用的功能入口安排在屏幕右侧。虽然左侧也有触控热点,但由于左手手机的用户较少,所以可以考虑放在屏幕左侧,因为使用频率较低。需要注意的是,人为因素(手的大小、行走或静止状态、握持姿势)和机器因素(屏幕大小、重量、形状)都会引起热区范围的波动,所以触摸热区指的是人-machine交互中的触摸参考范围,而不是一个恒定的区域。根据上述触摸热点,我们进一步引入网格系统细化新版播放器的界面布局,并按面点规划功能按钮的位置。考虑到拇指可以触及的触摸热点不会随屏幕尺寸缩放,播放器网格采用“两端固定,中间拉伸”的适配逻辑,保证功能键可以轻松触及大屏手机哒。另外,拇指与屏幕的接触面积一般在8-12mm之间。我们将单个网格的宽度控制在12mm(以iPhoneX的屏幕尺寸为例),避免按键误触影响操作体验。结合触摸热区和网格系统的建立,我们定义了三类功能区,分别容纳高频、中频和低频操作按键。这种布局规则可以让用户在保持舒适姿势的情况下触发更常用的功能,也有助于我们验证后续手势设计的可用性。设计思路二:符合自然隐喻,灵活自由切换QQ浏览器平台有三种窗口大小,分别是小窗模式、悬浮模式和全屏模式。窗口大小对应于用户对内容的注意力。我们希望设计出一套通用的手势,让玩家可以在三种形态之间自由切换,满足不同专注度的观看需求。在研究手势操作案例时,我们发现很多手势功能的使用率并不高,相当一部分用户从未使用过单指滑动和点击以外的手势。原因是手势比点击操作复杂,缺乏视觉引导,学习成本高。很多用户甚至从来没有发现过手势操作。那么我们应该如何设计手势操作来达到我们预期的设计目标呢?在这种情况下,我们可以直接以用户常用的手势作为设计切入点,建立符合用户心智模型的手势,降低手势操作的发现和学习成本。最后,我们选择了用户最常用的双指缩放手势来控制窗口逐层放大或缩小。设计思路3:优化现有手势,营造操控感。新版播放器增加了长按多级多速功能。用户可通过长按屏幕热区,根据需要自由选择观看速度。在设计这个差异化功能的时候,我们思考的是如何提升操控的快感和爽感。在保证易用性的基础上,我们尝试在操作反馈的细节上继续打磨。切换倍速时,档位热区会跟随用户的手指停留点亮。在此之上,每一次拨动都加入了轻微的震动反馈,既能清晰感知当前状态,又能增强用户的操控感。设计思路四:洞察用户需求,强化隐私意识隐私保护是浏览器产品为用户提供的一项服务。在设计播放器的时候,我们也在思考如何将隐私保护服务扩展到更深更细的场景。通过对用户行为的观察,我们发现非独居的年轻人在家看视频时,突然被父母或室友打扰时,会关闭视频以保护隐私。从这个场景出发,我们将思路延伸到其他的移动视频播放场景,大多是相对独立的,但不是封闭的空间,比如合租房的客厅、地铁、工作站等,用户突然被外面的世界,赶紧关闭视频Windows保护隐私的需要。为满足用户快速退出播放窗口、缩短复购路径的需求,在新播放器全屏场景中设计了双指下拉手势,可关闭当前播放窗口并返回在几秒钟内到浏览器首页。关闭的播放内容会保留在多窗口中,点击可以继续观看。综上所述,播放器是内容的容器,所有功能都是为了营造沉浸式的观看体验。交互设计要本着“内容至上”的原则,保持设计克制,不断打磨产品细节。
