最近微信更新的浮窗功能让我印象深刻。

目的与场景

浮窗的设置很简单，比如在阅读公众号文章时，选择右上角的功能菜单，就可以看到浮窗的按钮。

我认为浮窗功能的目的是满足对话信息流与浏览器行为任务并行。

典型的场景比如：

（1）边聊天边看公众号文章

（2）通过内置浏览器查资料以辅助聊天（或者反之）

微信这个平台越来越大，功能越来越多，承载的信息也越来越繁杂，用户在微信上会很容易出现多任务并行的情况。其中最明显的多任务并行就是公众号文章。微信做了很多优化来提高公众号阅读的体验，而对其体验影响最大的反而是对话信息流。

没有浮窗及类似功能之前是如何进行阅读与消息之间的切换呢？正在看一篇文章——来了新消息——回到微信（消息页）看消息——进入订阅号——找到公众号——找到原来的文章。

有了浮窗以后是这样做切换的：正在看一篇文章——来了新消息——设置浮窗——回到微信（消息页）看消息——通过浮窗回到原来的文章页面。

这样对比，浮窗通过建立了一座连通对话消息和浏览页面的桥梁，带来的是效率上的提高。微信里需要这种桥梁的地方很多，只是现在这个桥梁需求最迫切。

设置及取消浮窗的功能，这对于产品设计人员来讲不困难，但浮窗有个细节却体现了微信产品人员不是孤立的设计产品功能。

细节

为了提高浮窗的可见性，微信把它做成了全局性的，好处自然是在任何时候都可以直接进入页面，那坏处呢？我认为最大的坏处就是干扰。干扰的意思就是说，这个全局浮窗干扰到用户当前的页面空间和操作。比如在对话页面和别人聊天的时候，这个浮窗的存在和位置会产生干扰，我当然可以调整浮窗的位置，我也当然可以取消浮窗，而且微信对浮窗取消的方式做的很简单。但它依然是一种干扰，而这种干扰是用户不太容易感知的，只会在某种时候突然觉得不爽了。

产品设计人员不需要帮用户理解这种干扰是怎么回事，也不需要告诉用户怎么取消干扰，要做的是引导用户消除这种干扰。微信是怎么做的呢？

让浮窗变色！

浮窗默认样式 浮窗变色后的样式

熟悉色彩心理学的人应该知道，对绝大部分人而言，不同的颜色会产生不同的情绪，这种情绪可能会诱导人做一些事情。比如红绿灯，再比如应用角标，都是通过颜色来引导用户情绪继而引导其行为的设计。同样，微信把浮窗变成红色，也是通过颜色引导用户打开浮窗或者取消浮窗，以减少浮窗带来的干扰。

不让浮窗变色行不行，肯定行，大不了就是一个浮窗一直在那儿，当用户意识到不方便了自己手动取消就行了。但是对于微信这种特别在乎用户体验，同时又有如此大的用户数的产品而言，需要也应该想一些更聪明的方法。

既然选择了变色，又延伸出了两个问题：变色时间和变色方式。

变色方式

变色方式的常见选择有两种：渐变和直接变化。

从体验上来讲，渐变是优于直接变化的，渐变会给用户一个缓冲的时间，不至于突然变化显得突兀。

变色时间

如果用一个指标来衡量变色功能的效果，我觉得可以用取消浮窗人数曲线来衡量。

这个曲线是指，假设一定数量（有统计意义的数量）的用户同一时间设置浮窗，然后在时间进行中相继取消浮窗，在某一个时间点累计取消的人数（每个用户只操作单次）。我个人估计这个曲线图像样式可能如下。

变色时间涉及到两个，m表示开始变色的时间，n表示完全变色的时间。o不是一个设置时间。

这个图像的意思是浮窗默认状态下，取消浮窗人数在缓慢的提高，当开始变色后，取消浮窗的人数开始明显增多，当完全变色后，取消浮窗人数进一步增多，当到一定程度后增长速度又开始变得缓慢。

m、n这两个节点的变化是因为颜色引导了用户行为，o这个节点是因为总有一些用户不太受这种引导。

m值取0不合适，0意味着浮窗的默认颜色就是那种警示类的红色，这是不可取的，干扰更强烈，而且时间一久，用户也不会想用这个功能了。这个m、n的值具体是多少不重要，因为我相信这必然是经过微信内部大量讨论验证的一个值，我只说一下我的思路。

1、用户单次浏览页面的时长大概是符合正态分布的，m值取μ-σ，n值取μ+σ。

2、不做变色，内部或者找部分测试用户测试，从设置浮窗到取消浮窗的间隔时间大体符合正态分布的，m值取μ-σ，n值取μ+σ。

3、如果有条件，可以对这两组值的曲线对比，要区分取消浮窗的方式。根据侧重点不同，来选择某一组值。