大厂的设计细节有多精细?来看 QQ 浏览器的实战案例!

释放双眼,带上耳机,听听看~!
手机观看视频已成为大趋势,作者通过实例跟我们分享在升级版播放器的设计过程中的四点思考,帮助我们更好的打磨设计细节。

2020 年 3 季度数据显现,我国移动端在线视频浸透率现已稳定超越了 75%,短视频浸透率也已超越 70%,随时随地运用手机观看视频的方法正逐渐取代 PC 端和电视端时代的观看习气。在视频消费规划快速增长的趋势下,QQ 浏览器作为供给视频消费的渠道,怎么为用户供给更优异的视频观看体会成为了一个重要的课题。

在 QQ 浏览器中,咱们为用户供给了丰厚的视频播映功用,以及三种播映形式,分别是:全屏形式、悬浮形式以及小窗形式。接下来和大家分享咱们在升级版播映器的规划过程中的四点考虑。

大厂的设计细节有多精细?来看 QQ 浏览器的实战案例!

大厂的规划细节有多精密?来看 QQ 浏览器的实战事例!

规划考虑 1:

怎么让功用布局靠近用户运用习气,提高功用的易用性?

横屏播映可以提高观看视频的沉溺感,但横屏状态下对功用布局的挑战也变得更高。依据菲茨规律,手指到方针的间隔(D)和方针的巨细(W),决议了用户完结操作的耗时和难度(物理交互成本),大且近的方针让用户可以轻松触达,反之将给用户留下「难用」的形象。

大厂的设计细节有多精细?来看 QQ 浏览器的实战案例!

大厂的规划细节有多精密?来看 QQ 浏览器的实战事例!

触控热区是一个人机工程学概念,Steven Hoober 在 2013 年发表的研讨中界说了握持时手指舒适的控制规模,团队经过 1300 余次的实地调查,统计了大众用户运用移动设备的操作方法,研讨发现约 75%的点击行为是由拇指驱动的。Hoober 指出为了取得舒适的人机体会,应将重要的点击方针放置在「触控热区」中,但此研讨仅针对了手机竖屏操作,咱们无法确认横屏场景是否相同适用。因此咱们经过用户调研去了解用户在横屏观看视频时的操作习气,界说横屏观看视频时的触控热区规模,意图是确保播映器界面的可用性并让用户乐意去主动探究播映器的优质功用。

大厂的设计细节有多精细?来看 QQ 浏览器的实战案例!

大厂的规划细节有多精密?来看 QQ 浏览器的实战事例!

在调研结果中咱们发现:全屏观看视频时,约 70%的用户习气右手拇指操作,且有一半的用户单手持机,与 Hoober 的研讨结果根本契合。这就意味着咱们应该将用户高频运用的功用入口布局在屏幕右侧。尽管左边相同存在接触热区,但因左手持机的用户较少,所以运用频率较低可以考虑布局在屏幕左边。需求留意的是,人的要素(手的尺度、行走或停止状态、握持姿态)和机器要素(屏幕尺度、重量、造型)都会导致热区规模动摇,所以触控热区指的是人机交互中的触控参考规模,而不是稳定的某块区域。

大厂的设计细节有多精细?来看 QQ 浏览器的实战案例!

大厂的规划细节有多精密?来看 QQ 浏览器的实战事例!

依据上述提到的触控热区,咱们进一步引进栅格体系来细化新版播映器界面布局,由面及点地规划功用按钮方位。考虑到拇指可以触达的触控热区不会随着屏幕尺度缩放,播映器栅格采用“两头固定,中心拉伸”的适配逻辑,确保功用按钮在大屏手机上也可以轻松触达。此外,拇指和屏幕的接触面积遍及在 8-12mm 之间,咱们将单个栅格的宽度控制在 12mm(以 iPhone X 屏幕尺度为例),防止按钮误触影响操作体会。

大厂的设计细节有多精细?来看 QQ 浏览器的实战案例!

大厂的规划细节有多精密?来看 QQ 浏览器的实战事例!

结合接触热区和树立栅格体系,咱们划定了三类功用区域,分别容纳高频、中频、低频的操作按钮。这种布局规矩可以让用户在维持姿态舒适的情况下触发更多常用功用,一起也可以协助咱们验证接下来手势规划的可用性。

大厂的设计细节有多精细?来看 QQ 浏览器的实战案例!

大厂的规划细节有多精密?来看 QQ 浏览器的实战事例!

规划考虑 2:

契合自然隐喻 灵活自在切换

QQ 浏览器渠道内共有三种窗口尺度,分别是小窗形式、悬浮形式以及全屏形式。窗口巨细对应着用户对内容的专心度。咱们期望规划一组通用的手势,让播映器可以在三种形态中自在切换,以满意不同专心程度的观看需求。

大厂的设计细节有多精细?来看 QQ 浏览器的实战案例!

大厂的规划细节有多精密?来看 QQ 浏览器的实战事例!

在研讨手势操作事例时,咱们发现其实许多手势功用的运用率并不高,有相当多的用户从来没有运用过除单指滑动和点击之外手势。其原因是手势相关于点击操作更杂乱且缺少视觉引导、学习成本高,许多用户乃至从未发现手势操作。那么咱们应该怎么规划手势操作到达咱们预期的规划意图呢?这种情况下,咱们恰恰可以将用户常用手势作为规划切入点,树立契合用户心智模型的手势,下降手势操作的发现和学习成本。

大厂的设计细节有多精细?来看 QQ 浏览器的实战案例!

大厂的规划细节有多精密?来看 QQ 浏览器的实战事例!

最终咱们选择了用户最常用的双指缩放手势,控制窗口逐层放大或缩小。

大厂的设计细节有多精细?来看 QQ 浏览器的实战案例!

大厂的规划细节有多精密?来看 QQ 浏览器的实战事例!

规划考虑 3:

优化现有手势 打造控制爽感

新版播映器增加了长按多级倍速功用,用户长按屏幕热区可以依据需求自在选择观看速度。在这种差异化功用的规划时,咱们考虑怎么提高控制的快感、爽感。

在确保可用性的根底上,咱们测验在操作反应的细节里持续打磨。切换倍速时档位热区会跟从用户的手指停留亮起,在此之上又给每次拨动添加了轻度的振动反应,既能清晰感知当时的状态、又能加强用户的控制感。

大厂的设计细节有多精细?来看 QQ 浏览器的实战案例!

大厂的规划细节有多精密?来看 QQ 浏览器的实战事例!

规划考虑 4:

洞悉用户需求 强化隐私认知

隐私维护是浏览器产品为用户供给的服务,咱们在规划播映器的时分也在考虑怎么将隐私维护服务向更深、更细的场景拓宽。经过对用户的行为调查,咱们发现非茕居的年轻人在家看视频忽然遭到爸爸妈妈、室友打扰的时分,会有关掉视频维护隐私的动作。从这个场景,咱们延展考虑到其他移动视频播映的场景,大多是相对独立,但不是密闭的空间,例如合租房客厅、地铁、工位等等,用户都有在忽然遭到外界打扰,快速关闭视频窗口维护隐私的需求。

为了满意用户快速退出播映窗口的需求,一起减短复购途径,在新播映器的全屏场景下规划引进了双指下拉的手势,经过双指下拉既能关掉当时播映窗口,秒回浏览器首页。被关掉的播映内容会保留在多窗口中,点击即可恢复观看。

大厂的设计细节有多精细?来看 QQ 浏览器的实战案例!

大厂的规划细节有多精密?来看 QQ 浏览器的实战事例!

总结

播映器是内容的容器,一切功用都是为营造沉溺观看的体会而服务,交互规划当以「内容优先」为准则,保持规划上的抑制,不断打磨产品细节。

欢迎关注「腾讯FXD」大众号:

大厂的设计细节有多精细?来看 QQ 浏览器的实战案例!

大厂的规划细节有多精密?来看 QQ 浏览器的实战事例!

给TA打赏
共{{data.count}}人
人已打赏
教程分享

新人设计师来收!卡片式设计基础入门指南(附超多案例)

2021-8-25 17:31:01

教程分享

零基础 UI 入门(一):解析UI设计概念和就业形势

2021-8-27 17:30:45

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索