解析微信浮窗的交互细节
source link: http://www.woshipm.com/pd/5387957.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
编辑导读：近日，微信浮窗功能改版后上线。对此，我们做了些许研究，本文就从七个方面层层递进解析微信浮窗的交互细节。一起来看看吧。
一、浮窗的意义
作为体量如此大的一个App，微信的任何一项改动都影响巨大，更何况是如此重要的一个功能。
那么微信为什么会推出浮窗这个功能？首先要明白它要解决的是什么问题。
这个功能解决了微信作为社交工具常常被吐槽的一个痛点：
用户在阅读公众号文章时，经常要为了回复聊天信息而在聊天页和文章页之间来回切换。
特别是在涉及各种内部链接的多级跳转后，想要再次返回之前阅读的文章，并不是一件容易的事。
一句话，解决用户“边聊天边看公众号”的需求。
对微信内的两大重要应用场景的连接——即时通讯和公众号内容。
即时通讯本身是一个高频，碎片化场景。而公众号的内容消费则是一个沉浸式，专注场景，相对垂直的纵深体验。
二、浮窗的应用场景
场景1：用户看到一篇好看的文章，文章太长了来不及看完，这时他会先加入悬浮窗，回头慢慢看，相当于稍后再看。
对于那些喜欢屯文章看的用户来说简直太方便了。
场景2：用户正在看文章，突然收到朋友发来的信息，需要及时处理，那么可以把文章加入悬浮窗，等处理完聊天信息再接着看。
有浮窗前vs有浮窗后
某天，你下班回家的路上在地铁上看订阅号看得入迷，突然传来“叮咚”一声，尽管你万般不愿意，但还是怕万一错过什么重要的信息，于是你退出文章，回到订阅号列表，再回到消息列表，看了一眼，原来是一个免打扰群里的群主说了一句跟你无关的话“@所有人”，顿时心中一万只草泥马奔腾而过……
于是你再次打开订阅号列表，找到订阅号，点击文章标题，加载半天终于加载完了，又一声“叮咚”，你看了几行字还是按捺不住内心的好奇心，于是又左上角返回返回返回，回到消息界面，一看，向来对你直呼其名的对象发来一句“亲爱的”，你就知道事情没有那么简单，于是回复了几颗小红心，等半天对方没回复，你再一次进入文章，又一声“叮咚”，接下来的操作你们都知道了…
而有了浮窗以后，当你再收到家里领导的消息后，直接加入浮窗，便可优雅的跟领导对话，不会怠慢，岂不是方便多了？
三、旧版浮窗的3个缺点
1. 狗皮膏贴，逼死强迫症
在加入浮窗后，这个浮窗在微信界面里无处不在，不管你需不需要它。
张小龙在微信十年的演讲中说：浮窗其实我挺不喜欢的，它特别像一个狗皮膏药，占了你的屏幕一个位置，很多朋友看文章看不完，一边处理消息一边看，这不是一个好的解决方案。
2. 权重太高，不匹配其使用频次
这个浮窗是全局式的，存在于微信的每个界面，通讯录、私聊页、朋友圈、搜索、视频号、个人详情页……
在寸土寸金的移动端界面，每一块地方都是及其宝贵的。仅仅为了解决一个“边聊天边看文章”的需求，而设计了这么一个浮窗，是否权重太高了？
与其使用频率并不匹配，可能在大多数时间里用户并不需要它，可它就一直在那里。
3. 数量太少
旧版的浮窗最多只支持5篇文章，这个数量其实太少了。数量达到这个极值后再添加，还会提醒你要先删除才能再添加，徒增麻烦。这便是数量少的缺陷。
四、新版浮窗的6个优点
1. 数量增加了20倍
旧版最多只能支持5篇，而新版最多可以支持100篇，这个数量是足够的，在达到这个极值后，新添加的会自动替代之前添加的。
2. 自动清除机制
当文章数量达到了100的极值后，还可以继续增加，不会提示你删除，而是自动替换，这对于用户来说是无感的，这才是好的体验。
弹窗反馈不是产品刷存在感的工具，对于产品设计来说，让用户感觉不到你的存在才是好的设计。
事无巨细都要询问用户的交互并不友好，深入思考用户使用场景，处处为用户考虑，体贴周到。
3. 特殊的空状态
对于空状态一般的界面会有一个情感化的插画设计，而这里并没有这么做。
当把浮窗的最后一篇文章删掉时列表会关闭，首页左上角的“浮窗”按钮也会消失，并不会刻意声张自己的存在，把不打扰做到了极致 。
这是微信一贯的调性了，就像没有关注任何订阅号，首页就不会有“订阅号消息”这个入口；若从未使用过小程序发现界面就不会有小程序这个入口。
4. 巧妙的动效，创新的交互
看多了各种狂拽酷炫吊炸天的动效后，最终明白要回归到本源，动效的存在不是为了炫技，而是要服务于功能设计。
来看看微信是怎么做的，当用户添加到浮层时，页面会变成一个圆形然后从导航栏的左上角滑出去。
用动效巧妙的传达了入口位置，富有创意又指示明确，每一次加入悬浮窗的动作都是在暗示你悬浮窗的入口位置，堪称教科书式动效设计。
这是一个极具创新的交互形态，从未在其他产品上看到过，一个看似简单的交互，背后是大量的用户研究和用户测试的支撑。
5. 右下角的扇形
在移动端，左右两边是单手可触控的区域。而右下角刚好跟侧边右滑返回的手势相关联。
这里还有一个小细节，侧边右滑到右下角会出现一个小的扇形区域，移过去扇形区域会出现放大，产品预判你可能要加入浮窗。
6. 流畅的操作过程
右滑加入浮窗，右滑返回，右滑呼出浮窗，由于都是相同的手势，整个流程是很顺畅的，用户在操作过程中并不会遇到太大的麻烦。
五、浮窗不浮，不如“稍后再读”
微信 8.0 将原本吸附于屏幕边缘的浮窗，改为了主界面侧边右滑进入“浮窗”界面。
这种改动虽然解决了“狗皮膏药”的问题，但却让“浮窗”变得有名无实。
毕竟它不再是悬浮在界面上的窗口，而变成了类似“稍后阅读”的书架。
因此，与其叫“浮窗”不如叫“稍后再读”。我觉得这跟B站的“稍后再看”类似。
就算是加入了“浮窗”，用户也有可能不会再去看，但他依然会不断的重复这个操作。这源于损失厌恶心理学：比起得到，用户更害怕失去。
六、其他解决方案
1. QQ的浮层
当用户在看文章时收到了新消息时，到底要不要马上回？
这取决于来信息的人或事情的重要性，如果是比较重要紧急的事情，那么必须马上回复。
可问题在于当前的信息内容是未知的，因此无法作出判断。
当你在浏览qq空间时，如果来信息了，会直接在当前页面显示出来个圆圈小浮层，显示消息条数。
可以选择回复或继续当前任务，聊天和看qq空间两不误。但是没有解决未知信息的问题。
2. iOS顶部横幅
iOS系统，在收到信息后，顶部会出现一个横幅信息提示，可以看到发件人和内容，你可以选择下拉回复或关闭。
当你看到这些内容后可以决定要不要回复，省去了来回切换的繁琐。
对于一些不重要的消息，完全可以专注于当前任务，稍后回复。
可新的问题又来了，不断的短信提醒会打扰到用户当前的沉浸式阅读体验。
如何平衡阅读体验和信息回复是个巨大的挑战。
3. 知乎最近阅读
很多产品都会有一个叫历史记录的功能，自动记录下用户的浏览记录。比如知乎的最近阅读，会自动保存最近3k条阅读过的文章。
该功能的目的在于方便用户找回某个曾经看过的内容。其最大的优点在于不需要用户过多的操心，自动保存。这对微信也是有一定的借鉴意义。
目前的微信的浮窗解方案是否为最完美的解决方案？我看未必，需要用户触发是它的最大缺陷。
上面2、3是一个不错的方向，可以在此基础上做适当的改进。
七、番外：知乎浮窗，东施效颦
当初，微信推出浮窗功能后，知乎产品经理大喜，直接像素级抄袭过来。无论交互、视觉还是动效，也是最多五篇回答，就改了个图标，跟微信的悬浮窗简直如出一辙。
却闹出了东施效颦的笑话，我为什么说它是东施效颦？
首先这两个产品的定位是完全不一样，前者是一个社交工具，而知乎是个内容平台，其本身已经有一个最近浏览的功能，想要找回过去看过的文章也并非难事。
请问这个浮窗的意义何在？
另外，知乎还有“下一个”悬浮图标（我觉得这个功能挺好，方便用户快速切到下一个回答。），再加上iPhone自带的狗皮膏药（辅助触控），在这巴掌大的屏幕上，聚集了三个狗皮膏药……
本文由 @ 产品汪儿 原创发布于人人都是产品经理。未经许可，禁止转载。
题图来自Unsplash，基于CC0协议。
Recommend
-
86
任何设计层面的改动都是在解决产品中的问题，本文作者主要是看微信团队是如何来解决了产品中的问题点：浮窗和返回键变更。enjoy~ 5月23日iOS 用户可以升级到最新版本微信，Android用户也可用通过微信的内测文章下载微信测试版。与以往大多数小功能迭代不同，
-
25
平时的工作中，经常会遇到一些不舒服但是又说不上理由的交互问题。本文作者从争论的点出发，有理有据的说明这些问题，并给出了修改建议，当然作者也说了他的观点并非就一定正确，只是希望能够提供一些思路，但我相信大家应该还是能够从作者的观察中学到不少干货的...
-
47
阅读公众号或其他文章,经常需要暂时退出文章. 在新版微信中,可以把浏览的文章缩小为浮窗.点击浮窗继续阅读.对于经常在微信里阅读的人来说,这简直就是人类之光. 微信效果如下
-
20
细节决定成败，也许一个小小的细节，就能够让用户对你的产品情有独钟，弱水三千只取一瓢。也能够让你的用户从此陌路，再无关联。 昨天上网，偶然发现一个国外的网站，Tumblr（可能很多人都已经用过了）。我觉得这个网站让我有一种眼前一亮的感觉，视觉体验相当的好...
-
35
该内容已被发布者删除
-
33
用户体验设计中，需要注意哪些交互细节呢？本文笔者将与大家分享自己在交互设计工作中对遇到的一些交互细节的思考和总结。 之前一直想写些学习和从事用户体验工作的收获和心得，一方面是对自己快三年工作的总结，另一方面也希望提出一些观点，供大家一起探讨学习，...
-
31
结合CPU理解一行Java代码是怎么执行的根据冯·诺依曼思想，计算机采用二进制作为数制基础，必须包含:运算器、控制器、存储设备，以及输入输出设备，如下图所示。我们先来分析CPU的工作原理，现代CPU芯片中大都集成了，控制单元，运算单元，存储单元。控制单元是CPU...
-
47
新浪科技讯7月16日晚间消息，微信iOS7.0.5版本更新，此次更新对微信浮窗功能进行了升级，新增支持浏览文件、收藏笔记、小程序时设置浮窗，并且最多可同时设置5个浮窗。此外，在微信内播放音乐时也会自动悬浮音乐浮窗，方便用户随时切换播放状态。
-
60
呱呱_182019.08.08 15:57:31字数 4,515阅读 8,925 应用浮窗由于良好的便捷性和拓展性，在某些场景下有着不错的交互体验。...
-
9
一日一技 | 不是浮窗，胜似浮窗，用快捷方式包装你的脚本 - 少数派
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK