任何设计层面的改动都是在解决产品中的问题，本文作者主要是看微信团队是如何来解决了产品中的问题点：浮窗和返回键变更。enjoy~

5月23日iOS 用户可以升级到最新版本微信，Android用户也可用通过微信的内测文章下载微信测试版。与以往大多数小功能迭代不同，微信这次改动可以说是较大版本更新。

以下为详细更新点：

1. 公众号文章可以以「浮窗」形式存在在界面上；
2. 朋友圈个人主页头部取消了黑色的导航栏，改成透明栏；
3. 公众号主页和文章阅读页顶部导航栏改为了白底；
4. 文章阅读页返回键由“<”修改为“×”；
5. 发送图片、视频等发送按钮修改成了文字按钮；
6. 朋友圈上滑浏览时，顶部导航栏缩小；
7. ……

任何设计层面的改动都是在解决产品中的问题，我们重点讨论第1和第4更新点，看看微信团队是如何来解决了产品中的问题点。

第1点：公众号文章可以以「浮窗」形式存在在界面上

首先「浮窗」从表现形式上与Android上的浮动按钮一致。浮动按钮material design 规范定义为：浮动按钮一般是产品中最重要频率最高的操作，浮动按钮是为了更便于操作。就像一个圆形的图标漂浮在界面上，它会在聚焦时改变颜色，在选中时改变空间高度。按下时，它可能会包含更多相关的操作。

而微信此次重新定义了浮动按钮，「浮窗」没有点击状态，不承载操作，只作为一个文章链接。浮窗的样式也是根据微信公众号的头像来决定。小小的「浮窗」却承载着至关重要的作用。

先从交互层面上分析一下「浮窗」，首先假设一个使用场景，今天自己喜欢的订阅号推送新的文章，看到一半觉得这篇文章写的很好，发送给好友看看并且想好友讨论一下。

原流程我们得这样做。（以订阅号的文章为例）

1. 一旦关闭文章，必须重新回到订阅号聊天框中找到该公众号，重新打开文章。流程繁琐复杂，不断重复之前的操作流程。中途关闭文章十次，那就得重新打开十次。（现在在这种碎片化的世界中，很难专注一件事很久，特别是在手机这种移动场景下。很容易就被打断或者被其他事物吸引走。所以这种频繁关闭文章，打开文章的操作肯定会频繁出现。该问题严重影响公众号文章的阅读完成率。）
2. 公众号的使用场景和好友聊天的使用场景是断开的，没有链接在一起，容易导致频繁重复操作。

为了解决这个问题，微信团队使用「浮窗」来作为链接公众号阅读文章场景和好友聊天场景这两个使用场景的衔接器。

我们看下更新后的使用流程：

发送朋友后，可以采用浮窗的控件作为文章链接。随时随地都可以重新打开。不在需要重走一遍打开文章详情4步的流程。用户可以通过浮窗自由切换文章与聊天这两个使用场景。这是用户在这两个使用场景中的最大的痛点。那些看文章被中途打断的用户，再回来时不需要繁琐重复操作，只需点下浮窗即可很流畅的打开之前的文章继续阅读。场景链接连续性提高了，相信文章的阅读完成率会提高不少。

在频繁的退出切换的使用场景下，还存在一个爽点Recognition rather than recall（尼尔森十大可用性原则）。就是当用户退出文章时，再次进入文章时记忆住上次退出的位置而不是让用户自己去找上一次退出的位置。（在笔者写此篇文章时，该功能还未上线。今天再次使用时，发现微信团队已更新该功能点。）

 从产品层面出发分析，微信三大功能点，通讯，朋友圈，公众号，都只是线性链接，相互之间没有真正的融合贯穿。产品流程很容易就被中断。在这碎片化的世界，产品使用流程必须是具有高度连续性。

就像游戏一样是一环扣一环的，一直走下去。有时候我们玩游戏一不小心被打断或者是被迫去做别的事情，再回来时游戏还能很连贯地进行下去，就是因为游戏产品的连续性很连贯，所以我们继续时毫无阻碍。好的产品连续性一定不能差，如果连续差，当用户被某些事情打断时，回来的时候就很难继续上一个任务了。慢慢地，用户就会放弃之前的任务。这也是我们在做产品中需要思考的地方。（连续性和沉浸式体验有着本质的区别，沉浸式体验讲究的是用户不容易被打断，不会受到别的事物所干扰。而连续性讲究的是即使你在使用我的产品过程中被别的事物所干扰打断，当你再次回来时，还能流畅的接着上一个未完成的任务。）

小小的「浮窗」却承载着至关重要的作用：

1.  将碎片化的使用场景链接起来，可以连贯切换场景。
2. 保证整个产品的内容模块的连续性，用户可以更快的完成他的任务。这也比较符合张小龙之前说的，他希望用户用完即走。而不是在产品上停留太久，浪费过多不必要的时间。

第4点：文章阅读页返回键由“<”修改为“×”

虽然只是一个ICON的更换，这里面的含义缺大不相同，“<”代表的是返回，返回是指去了另外一个地方再回到原来的地方，是离开了再回来。

之前打开文章详情是跳出了文章的场景。点击返回键则回到文章的场景。文章列表和文章详情都是同一个使用场景。

返回隐喻用户是离开了当前场景去了另一个场景下，再回到原来的场景下“×”代表的是关闭，通常代表的含义是打开了某某某东西，要关闭它，比如打开了窗户，打开了门。要关闭窗户，要关闭门。

所以这里改用“×”，更多的在暗示用户，你没有离开文章列表的场景，而是基于该场景下打开了文章详情。

虽然是一个icon的变化，但是给用户的感受是完全不同的。一个是离开了当前场景，一个是继续再当前场景。让用户感受到没有离开当前场景，可以继续其他的操作，而不是让用户感受到去了另外一个陌生的场景下。

可惜的是微信此次更新对于页面的切换动画没有做修改，当你打开文章详情时，页面切换依然是从右到左的切换，点击关闭时也依然是从左到右关闭页面。和更新前是保持一致的。

当使用“×”表示没有脱离场景时，页面切换的动画，最好是从下往上覆盖，关闭是从上往下退出。Icon和页面切换的动画两者的配合才能真正打造出没有脱离当前场景的效果，这样才能真正给用户一种隐喻，告诉用户你没有离开文章列表的场景。Airbnb的筛选条件也是利用这样的设计来隐喻用户，还未脱离当前场景。相信微信团队后续会做出调整。

总结

重点分析了1、公众号文章可以以「浮窗」形式存在在界面上；第4点文章阅读页返回键由“<”修改为“×”。微信此次改版对于用户连续性操作以及沉浸式体验是一个提升，但是一些细节有待完善。

有人分析指出微信此次更新是打响了时间保卫战，希望把用户留在微信内。而我的观点恰恰是相反的，从连续性以及沉浸式这两点看，微信是希望用户能更快更愉悦地完成任务，也比较符合张小龙的主张，希望用户用户即走。

本文由 @火炬 原创发布于人人都是产品经理。未经许可，禁止转载。

题图来源于网络