微信6.6.7的浮窗设计分析

相信大家一定都有在阅读微信公众号文章时来微信消息的经历，此时只能面临着两个选择：

选择继续看文章的你可说是意志力非常坚定了！

可是你就真的没有一点对于“到底是谁发来消息”的好奇吗？真的能好好阅读文章吗？

退出文章页面查看信息这可能是大多数人的选择了，毕竟求生欲强。

不过回复完信息后，还要努力想一想刚才看的是哪个公众号的哪篇文章？恐怕很多人就此放弃阅读了。

而微信官方千呼万唤始出来的解决方法大家应该都知道了：可以将文章页面缩小成圆形浮窗，随时可以点击恢复阅读。

这样的解决方案你满意吗？

下面我从价值、可用性、适用性、合意性几个方面来说一下自己的体验。

一、价值：这个设计对于用户而言是否有价值？

答案是肯定的。先不论方式是否巧妙，浮窗设计确实能解决文章开篇时我说到的痛点。同时这个功能还催生了其他的用法，产生了新的价值：边聊天边查资料／搜索／写文章。

不过被许多iOS用户诟病已久的“阅读过程中无法得知新消息内容”的问题仍然没有解决。如果你不打开声音和震动，可能根本不知道有新消息来。

在Android版本的微信中，新消息会像普通通知一样出现在顶部。

iOS的版本看来是阅读文章的重要级别优先于处理信息。不过好处是不会打扰你阅读文章。毕竟对于大多数专注力缺失的现代人来说，弹通知的方式会大大减少你看完一篇文章的概率。

二、可用性：用户完成任务是否容易？

这个功能的主要任务可以概括为：处理完信息后继续阅读文章。

首先要说到微信提供了两个方法来将文章缩放为悬浮窗：

1.点击文章页面右上角的点点点，再点击“浮窗”按钮

2.向右滑动页面并拖拽到页面右下角的扇形按钮

在处理完新信息后，用户需要返回阅读，此时只要点击界面上那个显而易见的悬浮球即可。

当然，之前的阅读进度微信也好好的保留着。正因如此方便，才能诞生出上一章提到的新的使用价值。

然后对于我这种无法忍受界面上有任何遮挡的人来说，在阅读后一定会把浮窗关掉。

关掉的方法也有两种：

1通过文章页面右上角的更多进入菜单，此时“悬浮”按钮变成了取消悬浮，点击即可。

2.拖拽悬浮球

这里的删除方法看似简单，其实相当于用户在退出阅读后还需要另外增加一个删除的操作，易用性不高。

这个交互可以有两个优化方案：

1.如用户浏览完这篇文章并退出，则自动关闭浮窗（鼓励完整阅读）

2.在右滑退出（浮窗）文章时，右下角出现取消浮窗的按钮（和拖拽时出现的样式统一）。

下图是我P过的示意图

三、适应性：用户是否能很快顺利使用这个功能？

微信并没有对这个新功能进行引导。

但假设你并不知道这个功能，你在右滑退出文章页面时，就会发现右下角多了个奇怪的扇形。

你可能不知道那是什么意思，不过你猜你会不会将手指移到上面试一试？

对于习惯左手握持手机的我来说，浮窗按钮恰好在我返回时很容易够着的位置，相比平时只多了一点移动距离，增加的操作成本可以忽略不计，可以很快适应。但对于屏幕较大的手机，可能无法够着。

至于通过页面右上角更多按钮进入菜单再点击浮窗按钮的方式，据我大胆猜测，是为了平时习惯在退出文章时点击“返回”（现在是关闭按钮）而不是向右滑动的人（无法在这一环节注意到新功能）。

他们很可能是不习惯拖拽操作的中老年人，热爱分享的他们在打算把一篇精彩文章发送给自己的儿女的时候，也许会注意到分享操作下面多了个“浮窗”的按钮。

四：合意性：界面元素是否美观，体验是否有趣？

这个功能的相关设计和微信的整体基调吻合，比较中性。

要挑毛病的话，个人认为点击浮窗放大到文章的动效不太舒服。

由于最后出现的东西最能引起注意，所以我每次视线都停留在页面四个圆角呼的变成直角的生硬转折。

并且圆形遮罩变成方形遮罩的方式让我想到Material Design，在iOS看到有些违和感。

下图是16年我给一个手机OS做的概念动效，同样也是从圆扩散为方，不过由于圆更早的变成方形，所以最后收尾时不会太突兀。不过开发实现成本较高，可能有技术壁垒。

再说说音效。

嗯？这个功能还有音效的吗。嗯，有的哦。

在文章缩回浮窗时有个像是久远年代里鼠标点击的音效，但在浮窗放大时却没有。

我不太清楚这么设计的原因，我一开始以为是环境音，然后以为是个bug，因为那个声音很小而且和缩回的动效感觉没有关联性。如果不是个bug，如果没有更好的音效选择，个人认为不如不加。

另外还有个细节是：公众号文章的悬浮窗如果放置时间过长，四周的黑圈会变成红色。这个用意我也不太明白。难道是在提醒用户赶快看完文章？

以上是我对微信这个新功能的体验，有不同观点或者不正确的地方，欢迎共同探讨～