魅族,「高效 x 灵活」Flyme 8 小窗模式 2.0 设计历程

时间: 2019年9月30日

来源：魅族

魅族

高效 x 灵活，一篇文章带你了解 Flyme 8「小窗模式 2.0」设计历程。

小窗模式自 Flyme 7 上线以来，作为一个实用又轻量的功能，深受用户的喜爱。

通知卡片上的「小窗打开」，是一种便捷的回复通知方式，不必切换应用就能快速回复聊天消息。

随着更深入的日常使用，我们逐渐发现小窗功能在一些场景下的表现还不够出色：

比如正在看直播，遇到精彩的时刻准备在微信上与朋友分享，但恰好没有通知来打开小窗，又不想中断直播去打开微信，左右为难。

又或者通知栏有多条未读消息时，若每条通知都去使用「小窗打开」，操作将很繁琐。

类似的场景还有不少，说明小窗模式仍有较大的提升空间。「希望小窗能有更主动的打开方式，可以更方便的处理多条通知」这成为新版小窗中我们想要实现的目标。

在随 Flyme 8 发布的小窗模式 2.0 中，我们着重对「随时可用」和「多条通知」的场景进行了设计，推出了两个重要的功能—「主动呼出」和「通知气泡」。

■早期的主动呼出

我们最初构思的方案是通过手势直接呼出小窗主体，来达到随时可用的目的。在小窗右上方有「选择应用」的按钮。「选择应用」可以让用户在不关闭小窗的情况下，切换不同的应用，让主动使用小窗时目的性更强。

但我们面对最大的难题是：

呼出的小窗里面默认显示什么内容？主动呼出时所包含的可能性非常多，无论是固定一个默认应用，还是显示上一次打开的应用，都不能很好兼容各种主动呼出场景，从而导致了「必须先呼出小窗打开一个应用，才能去选择另一个应用」的情况。这种「绕」的使用方式显然不是我们想要的，然后我们开始寻求更优的解决方案。

■对选择应用的改进

我们尝试跳出了原有的「手势触发→开启小窗→切换应用」方案，在众多的改良方案中，我们选择了「手势触发→选择应用→开启小窗」方案，它有以下特点：

1、「触发→选择→开启」更符合我们日常的使用习惯；

2、选择应用的步骤可以融合到呼出手势中去，与最初的应用选择方式对比它更轻量；

我们希望用户在操作时思路更加清晰和自然，所以以该流程作为基础进一步设计小窗。

通过手势呼出选择应用的菜单，对于菜单上应用的排布方式，我们曾尝试了各种方案以寻求最佳的「操作手感」，包括纵向、横向，块状、扇形、圆形排布等。在众多的排布方式中，我们最终选择了扇形排布。

扇形的好处在于选择应用时手指只需根据不同的角度要沿直线滑动即可，避免了因「拐弯」或「折返」让操作变得复杂。同时，手指滑动的路径上只有一个应用，中间不会经过其他应用图标，避免了误触打开其他应用的情况。

当手指落点在应用图标上，我们特意使用了线性马达的振感来表达反馈，它可以让用户选择应用时心里更「踏实」，盲操更「精准」。酥爽的振感甚至会让人沉迷在扇形菜单上反复滑动。

最后为了提高扇形菜单的适用性，我们让扇形中的应用可以自定义，并且针对应用的数量有不同的排布方式，兼顾不同用户的使用习惯。

■通知气泡的诞生

有多条聊天通知的时候，要使用小窗处理这些通知，可以依次点击每条通知上的「小窗打开」按钮，也可以在小窗打开应用之后，自行在应用中处理各种消息。无论是哪种方式操作都较为繁琐。

我们设想：如果能让所有的未读通知，在小窗开启后仍能以某种形式继续显示，并且点击就能立即查看，那么小窗处理通知的效率将会提升很多。

在探索通知以什么形式继续在小窗上显示的过程中，我们列举了通知的组成部分：

来源的应用、发消息的人、内容、时间。

我们以「发消息的人」作为切入点，因为「发消息的人」能和每条通知一一对应（来源应用、时间则无法和每条通知对应），例如看到某人的头像，就有很大概率知道是谁发来通知，但如果只看到某个应用的图标，就无法很好的知道是谁发来的。

小窗开启后，为了让通知以「发消息的人」的形式继续显示，我们提取了消息发送者的头像，以代表该人发出的通知，显示在小窗的周围。

我们还对通知气泡的显示逻辑进行了较为谨慎和克制的设计—仅显示来源于当前小窗应用的通知气泡，不会同时显示其他应用的气泡。这样做是为了让小窗和通知气泡是一种包含的关系，气泡逻辑更简单，学习成本更低。

同时为了让操作更顺手，我们对通知气泡的排布进行了调整，整体显示在小窗下方，在大屏上操作更舒适。

■小窗的未来

目前的小窗并不完美，我们也不轻易说完美。

在上文中，我们当前采取了较为克制的通知气泡方案，但也不代表会停下探索的脚步。我们对通知气泡有更激进和前卫的尝试。

我们试图突破「仅显示来源于当前小窗应用的通知气泡」这一个限制，于是我们回顾通知的组成部分：

来源的应用、发消息的人、内容、时间。

想要突破这一个限制，我们也将「来源的应用充分利用起来，衍生了下列的方案。

每一个通知气泡除了联系人的头像之外，也会显示来源应用的图标。这样，点击不同应用的气泡，小窗也随之切换到对应应用的会话页面。有多条不同应用的消息时，处理效率大大提升。

我们认为这个方案的想法是非常有远见的。它打通了小窗、通知和应用之间的渠道，让小窗更加灵活和便捷。但目前，我们仍需要解决一些问题，例如用户在主动呼出某个特定的应用小窗时，可能其他应用的气泡反而是一种干扰，又例如，如何去避免气泡数量过多等等。

这种想法仍有「打磨」的空间，我们将在未来的某个时间，给用户带来一个能完美处理各种通知，并且轻量简洁的小窗模式。如果你有好的想法，非常欢迎和我们一起探讨。

同时，我们也在对小窗的其他细节进行完善，希望小窗能永远保持鲜活的生命力，脚踏实地为用户带来更多好用的功能。

内容转载自魅族，如有侵权请联系删除。