微信浮窗设计的3个层面

微信 版本6.6.7 本次更新： -可以把浏览的文章缩小为浮窗。

就在昨天，微信6.6.7版本，在公众号文章加入了“浮窗”功能，对于我这种喜欢在公交车上读公众号文章的人简直福音。大概体验了一下之后想从3个层面分析一下这个设计。文章中设计思考的顺序是我自己YY的一种可能性，欢迎其他同学一起讨论。

01

—

第1个层面：“置顶”方案的优化

点击文章右上角“…”，选择浮窗，可以退回到打开文章前的页面。单看这里好像是对之前“置顶”功能的一个优化。因为固定浮窗解决了之前必须要回到微信聊天列表最顶部再次点击进入文章的问题。即便对iOS用户来讲可以用点击状态栏快速回到最顶部的交互动作，但这样的设计让用户在任何页面（包括朋友圈）都可以快速回到文章页面继续阅读。同时收起展开的、类似keynote“神奇移动”的动效把页面之间的逻辑形象化了，让用户很容易感知到页面之间的层级和位置关系。

02

—

第2个层面：快速结束，用完即走

如果只是这样一个优化不足以说这个设计优秀。因为如果想取消置顶的话，按照之前的逻辑必须要回到文章内，点击文章右上角“…”，选择取消置顶。这样有些强迫的意思。因为毕竟很多时候我们虽然置顶了文章，但是后来根本也不想看了。所以应该有一个方式是可以在外面就直接Q掉入口的。微信这么做的：把拖动和删除结合在一起。拖动的时候拉起固定在右下角的“垃圾桶”，拖进去就取消置顶了。这一幕是不是特别熟悉，就是安卓手机删除桌面应用的交互操作。

插播两个之前做的项目，其中也有类似的交互： 项目A: 短视频添加背景音乐 在短视频已经添加音乐的情况下，用户在视频编辑页面点击音乐按钮，拉起音乐列表页存在3个可能的操作： 1.编辑：点击音乐弹窗可以展开详情，拖动滑动杆编辑音乐，点击确认使用； 2.重选：上下滑动列表页面，音乐弹窗收起到左下角封面，减少页面遮挡，重新选择其他音乐，确认使用。如果还想继续使用之前的音乐，点击封面可以展开详情。 3. 取消：点击清空音乐按钮，取消使用背景音乐。

项目B: 多人视频公告板编辑 多人聊天室场景下，用户（包括观众）在中途进入群聊房间时，不知道房间内聊天主题，无法快速融入。 公告板由房主设置，起到告知用户聊天主题，并增加趣味性的作用。 三个主要交互操作是编辑、拖动和删除。此处的公告板可以类比浮窗，拖动加删除的交互和微信浮窗异曲同工。

03

—

第3个层面：用心的场景化

如何快速添加文章为浮窗？从右上角“…”点击拉起的交互显然太笨拙了，一方面这个操作太重，另一方面在大屏时代单手操作大拇指基本上是够不着的。这其实衍生出这次改版的另一个优化点：文章左上角由之前的“返回”变成了“X”关闭，这个等下会说。其实大屏时代对于iOS用户而言，右滑返回已经成为单手操作的一个基本手势。对于第一方面我们想到的可能是应该把浮窗按钮拿出来，但是拿出来放在什么位置是个问题，既不能太明显干扰文章的沉浸式阅读，又不能太隐蔽让用户无法发现。所以微信的做法是结合右滑返回手势，在取消置顶的位置去做置顶的触发。不得不说是非常人性化的和用心的。右滑和大屏决定了这个区域只能是屏幕右下角。但是不知道对于习惯左手持机的用户来讲这个位置是不是用起来有点吃力。至于左上角由之前的“返回”变成了“X”关闭，个人感觉“返回”还有一种出去再回来的感觉，但是关闭就是看完即走。

一点补充：

估计是为了和白色的背景有所区分，浮窗用了深灰色的描边，这个看起来没有想象中的好看，感觉应该会有优化空间。另外长时间不点开浮窗颜色会由下到上过渡为红色，提示用户是不是该继续读完还是关掉浮窗。具体时间没有测到，如果有同学知道的欢迎留言。

文章仅为个人观点和思考，欢迎交流～