微信新版本（6.6.7）功能设计背后的逻辑及需求

用户需求，作为产品设计的核心要素，贯穿产品的整个生命周期。除此之外，是否还有别的因素影响着产品设计？本文就以微信新版改动为例，谈谈这个话题。

2017年末，微信用户量在9.89亿左右，而到了2018年第一季度，其数量突破10亿达到了10.4亿，月活跃用户同时也突破了10亿大关。《微信2018影响力报告》中，列举了流量占比、驱动经济、就业、医疗、微信支付、小程序等多个模块的成果。

这些都在陈述一个事实：微信作为当前群众生活中不可或缺的一款App，已经深深影响并改变着人们的日常行为习惯。

正因为庞大的用户数量，微信在每一次版本更新后，都会引起广泛讨论，影响用户使用体验。

因此，在每一次产品迭代后，我们都需要从改动中思考其本质，考虑产品经理如此设计的原因和目的，以及这样的设计是不是更符合大多数人的需求，再做进一步优化来提高用户使用体验。

一、此版本新功能：Floating Window（悬浮窗口）

之所以先谈这个，是因为在官方给出的版本更新日志中（Andriod中文版本），只提到了这一个功能，如下左图所示；从用户的角度来说个人认为此功能的使用体验比较好，但依然有可以改进的地方。而针对IOS系统的更新说明中提到了三处功能，首先是悬浮窗口的变化（另外两个分别是扫码翻译和语音转文字支持英文与粤语，不在本文的讨论范围内）如下右图所示。

在版本6.6.6之前，微信的文章有文章置顶功能，在新版本中该功能被取消，增加了悬浮窗功能。如下左右两图对比。

但问题是，文章置顶功能真的被取消了吗？

其实并没有，文章置顶的功能只是被悬浮窗代替了，进一步做到了更好的交互体验。之所以这么说，是因为在操作逻辑上，这两个功能的本质是一样的。我们先来看看这两个功能的操作逻辑，流程图如下：

通过上面两个流程图的对比，我们会直接得到一个结论：新版的悬浮窗功能，与旧版本的文章置顶功能相似，同时为用户增加了更为灵活的选择。

之所以做这样的改动升级，我们先从用户的使用场景出发，寻找用户的根本需求。

用户使用场景1：职场新人小A，对互联网产品非常感兴趣，关注了很多相关的公众号。工作两小时后趁休闲时间打开公众号，浏览了其中一个公众号X，往前翻了翻历史记录，找到一篇比较感兴趣的文章。刚打开，老板发消息让她立刻把个人具体信息通过微信发给另一个人。这时候小A只好叉掉刚打开的文章，一级级返回到聊天主界面，完成任务。之后再想去看那篇文章却发现已经找不到了。晚上睡前躺在床上，小A刷着朋友圈，翻了很久忽然发现朋友分享了一篇很好的文章，刚点进去，男朋友发来消息有要紧的事情要商量，小A只好关闭文章。等聊完再回过头去朋友圈找，又需要往下翻很久才能找到。于是小A很生气，果断和男票分手，此时小A的内心独白：影响我学习的男票才不要哈哈哈哈哈

生活中类似的场景非常多（那些有大把空闲时间，一次性能读完文章的请闲人不在该使用场景和用户需求的讨论范围内），我们发现其共同特点是：用户选择在碎片化的时间里阅读公众号等文章，恰巧有人发消息有事情要处理。此时，用户用两个选择：①直接叉掉链接，处理事情。显然这种做法不是我们希望的；②选择收藏或者发送给自己，或者发送到文件传输助手里，留着后面看。但这个体验并不好，需要点开右上角的菜单，选择发送，在弹出的选项列表中找到自己或者文件传输助手，如果找不到就必须创建新的对话才能发送成功。对于多数用户来说这样的流程是很难容忍的，对于产品经理来说，简直是灾难。除了体验外，还有个大家公认的问题：收藏的东西几乎等同于被打入冷宫，再也不会被翻牌23333333。

其实很早之前，各个论坛，公众号推文中就盛行着一种标题党叫做：那些你不知道的微信隐藏代码之类的文章，其中提及到一条代码：//multiwebview，即可以将微信聊天页和文章页划分成多任务来相互切换互不干扰。因此我们知道用户很早就有类似的需求，因此相对应的出现了文章置顶功能。忽然发现，这件事其实可以很简单，妈妈再也不用担心我找不到读到一半的文章啦~但，新的问题出现了。。。

用户使用场景2：同样是小A。她加的群越来越多，微信几乎被这些消息占领，只好选择屏蔽。但依然会按照时间排序的微信，会让这些聊天窗口占据她的整个屏幕。于是她选择了将常用的人聊天置顶，像爹妈，男票，好胖友等等还有一大帮好基友，哦不好闺蜜BCDEFG。。。之后她置顶了一篇文章。这时候一个不常联系的人发消息，小A只好把聊天页面往下拉，处理完事情想起来还有个置顶文章，返回聊天主界面发现为什么看不到！好吧，只好往上拉，或者双击微信顶部，终于看见啦。文章看到一半，忽然发现这个内容和另一个公众号的一篇文章很有关联。于是小A叉掉文章，到公众号里找到另一篇做对比。但被叉掉的文章里的小细节记不清楚，又退出去回到置顶文章点进去看好，之后又回到公众号。。。来回几次后小A受不了了，扔了她的手机。啊悲剧的小A。。

上面的场景体验起来绝对令人抓狂。置顶文章只能从聊天页面的顶部才能进入，一旦切换到别的页面，根本找不到置顶文章的影子不是么？

于是，我们可爱的产品经理，将置顶功能改为了悬浮窗。

啰里啰嗦这么一大堆，看客们应该能体会到新版悬浮窗的功能有多可爱了吧~最大的优势在于，快捷访问可以在微信内所有的页面上以悬浮按钮的方式显示出来，做到随时随地点开看，叉掉后依然能返回当前页面。这可以认为是并行任务处理，阅读文章与聊天等其他事务做到无缝对接和切换，是很赞的设计啊。

还有一点做的很棒，即悬浮窗颜色的改变，如下图三个阶段的颜色变化。

刚创建悬浮窗时，其边框是灰色的，与背景色接近，尽量做到在视觉领域内的隐身；如果用户不点击悬浮窗，边框的颜色会开始渐变，时间越长，颜色会变得越多；等到一定时间，大约两小时后吧可能还更少（有兴趣可以自己测一下），悬浮窗边框完全变成红色。在视觉领域内很显眼，甚至很扎眼。提醒用户：小主很久没来看我啦，是不是把我忘了快来看看我啊~

这样的设计，即使没有从根本上改变收藏即冷宫的状态，但配合悬浮窗的使用，在很大程度上可以督促用户将没看完的文章及时看完，而不是在收藏中随着时间的推移而真的变成了收藏。

这个微小的设计，让我想到了safari浏览器的多窗口切换。与其他手机的平铺窗口不同，因为屏幕显示面积限制，在切换窗口时，窗口以一个倾斜角堆叠在一起，可以滑动查看各窗口的标题。在手机本身不同的倾斜角下（比如躺床上），浏览器窗口的倾斜角会发生微调，以适应人眼的方向。如下图所示，从左到右分别是正常角度，向左倾斜和向右倾斜下切换窗口的变化。而在iPad上则没有这样的设计，因为屏幕有足够的显示面积，这个时候广阔的视觉效果是最重要的。苹果之所以好用，不仅仅是技术的支持，还有诸没被用户察觉的细节设计，但在使用过别的产品后会有一种，哇，还是苹果用起来舒服。

说不出好在哪里的那种感觉，很重要。

举这个例子是题外话，就是想表达一个真正为用户考虑的产品，是要精致到细节上的，要有那种给用户“哇”的感觉，就是所说的“哇点”。回到微信悬浮窗的颜色改变上。这虽然是个很小的设计，但应用了用户的行为心理，用颜色来唤醒用户的认知。

有一部分用户提出了一些问题，即通过悬浮窗进入的文章，左上角的返回键不能返回到文章的前一个层级（指的是公众号消息页面）我有些想法。暂不说之前的版本通过置顶文章的返回键，也不能返回到文章的前一个层级（公众号），而只能返回到微信聊天页面（没注意过的朋友们可以去试试）。问题是，当用户创建一个快捷访问时，叉掉之后发现，咦？怎么返回公众号页面了而不是快捷入口所在的页面？如果是这样，那么快捷访问的后处理显得繁琐而没有意义。

第一，如果要返回的是公众号主页面，首先给人一种错位的感觉。明明是从这进来的，出来却变成另一个样子。我认为，从哪来的回哪去很重要。其次，这和在公众号打开文章的后续效果一样，唯一不同的是访问方便了。

第二，如果用户的需求是返回公众号，以便继续浏览其他内容，那么这个需求本身是不是可以说明使用者当前有足够的时间去阅读这篇文章，那么为什么还要创建快捷访问呢？

对比总结一下，悬浮窗相比于置顶功能，有以下优势：①访问更加快捷灵活，可在任意页面进行访问，不会因为聊天页面下翻或是在其它页面不能访问；②和其它任务可以无缝切换，在聊天的同时可以进行有效阅读；③颜色渐变，时刻提醒有未完成阅读；④要取消悬浮窗也很简单，将悬浮窗拖拽至右下角即可。这个和win8下系统应用的关闭效果很类似。另外打开和关闭文章页面的过渡动画也很好。

最后关于文章悬浮页的不足和改进，我有些个人的想法

不足：一次只能悬浮一篇文章！！！之后悬浮的会覆盖之前悬浮的文章有木有！

使用场景3：改版后的微信让小A很高兴。有一天她在浏览公众号文章，对某一页面的三篇文章感兴趣，但这时候任务来了。小A依次把三篇都设置了悬浮。忙完回来查看，什么？为什么只有一篇？？？另外两篇呢被吃了么？？？

其实，这种情况，完全可以将文章收藏或者发送给自己，但依然是之前说的，这个体验并不好甚至可能会忘记再回头去看。

因此，从用户的角度来讲，就需要将这个功能做一个扩展，可以同时悬浮多个文章；但对于产品经理来说，这个需求还需要仔细考量，需要收集大量的数据，包括该需求是否是大众需求、其目标人群主要有哪些、该需求的优先级、资源分配是否足够等等方面，最后才要确定这个需求是否需要做。

暂且先不管这些，关于本需求的改进，我简单的将自己的想法做出一个原型出来，方便大家讨论指正。如下图：

原型功能描述：在点击悬浮窗后，悬浮窗颜色改变，弹出二级页面（添加边框阴影效果），尺寸大小约与原型图示一致。同时父窗口颜色做浅灰度处理。二级页面中按照页面悬浮窗设置顺序显示，包含文章标题，图标，及后面的删除按钮（表示删除悬浮窗内的此条文章，即取消该文章的悬浮设置）。

为了将该功能和收藏功能加以区别，应该限制设置悬浮窗文章的数量，根据页面大小，设置上限为10篇左右或者8篇。（如果不加以限制数量，则用户会出现无限次设置悬浮而放着不看，成为变相的收藏功能）

以上就是本文对窗口悬浮功能的一些说明，主要是以用户需求为出发点分析该功能的设计思路。

二、朋友圈顶部的改变

朋友圈顶部的改变主要有两方面。

第一：将原先朋友圈顶部64dp深色主题的bar及系统状态栏改成了透明色，同时为了防止白色背景图将返回和相机Icon掩藏掉，系统吸收背景图顶部的颜色，拉出渐变色；如果封面是白色，就以默认的灰色代替。如下图的对比：

新版的改动确实使得整个封面图与界面更好的融合在一起。相较于之前的深色主题，新版界面在视觉上更完整。

至于朋友圈下拉后，会出现一些不能驾驭的颜色。个人测试了很多不同风格的封面图，对于色彩比较丰富的封面，确实会出现不协调的渐变色；对于色彩比较均匀而单一的封面图，这样的处理效果就很不错，没有那么明显的断层感。如果是白色封面图，则几乎不会出现类似的情况。

我个人认为，这个改变整体利大于弊，因为没人或只有很少的人会把朋友圈向下拉到屏幕中间不放手的。。。其优点则提升了整体的视觉感官效果。

如果真的要进一步修改，则应在取色及对色彩的处理上更智能化。或者采用封面图放大的效果也不错。

第二，浏览朋友圈时返回和发布功能隐藏，标题缩小。这个改动，我个人体验觉得很棒。老规矩，没有对比就没有伤害，先来三张图：

首先顶部bar的颜色由深色主题变为浅色主题，将整个屏幕的显示效果很好地整合起来。而在旧版中，深色bar与朋友圈内容形成了隔断。其次，为了有更多的显示内容，新版的顶部bar尺寸可变。上滑浏览内容时，顶部尺寸缩到最小，仅保留“朋友圈”三个字，且字号相当小；页面稍微下滑时，弹出正常尺寸的bar，显示返回和发布按钮。但仔细比较，就会发现，新版正常尺寸的bar，也比旧版深色主题的bar尺寸小一些。

当然，会有一部分人抱怨这种改变使得浏览朋友圈时发状态变得繁琐：首先要下拉一下，或者点击顶部弹出发布菜单。即使是这样，为什么但依然选择这样的改变，那么背后的原因是什么？

以上谈及的两点改变，其目的都是为了获得更好的视觉效果以及更广阔的显示范围。那么为什么在之前长达四年的版本中从未做出相关的改变？

我认为：这是一种趋势，设备改变是基础，与之相伴的是用户使用习惯的改变，即更简洁宽广的视觉要求。

1、设备的改变

去年下半年开始陆续发布的全面屏手机，极大地提升了消费者的视觉享受。全面屏的终极目标是要达到100%的屏占比。在这样的视觉冲击下，如果产品依然保持原来的设计会怎么样？

有天晚上我走在回家的路上，路人丁从旁边走过。看到他的手机在微信朋友圈界面，看上去和之前普通的安卓机没什么两样，上下各两条大约1厘米的额头和下巴，中间是白色的矩形内容区。然而，走近仔细看了看，路人丁用的是安卓全面屏，额头那个黑色的条其实就是微信的深色主题。。。（没有更新微信版本）

然后再看了看我的，还好，我没有233333

当时就觉得，还是新版界面能带给人更具冲击的视觉体验：缩小的顶部bar，能让我们更多关注上下滑动的内容上，而忽略无关紧要的东西。假设能够达到100%的全面屏，如果微信依然沿用最初的设计，在查看朋友圈时，自然在额头会多出一块深色区域，影响整体感官。

2、简洁的视觉和操作趋势

现代人越来越不喜欢复杂的事物，产品设计也将会朝着越来越简单的方向发展（代价是后台看不见的东西会越来越复杂），用户最喜欢的产品，一定会贯彻一个理念：Don’t make me think. 也就是说，给用户看到的，一定要是最简单的。

我立刻想到了两件事：一个是英剧《黑镜》第三季第一集中给人们展现的一种产品，类似手机，但除了一块半透明的薄板外，什么都没有。只需要上下左右滑动，就能完成所有操作，如下左图。另一个是之前用过的一款音乐App，乐流（可惜现在软件正在重大更新，无法体验）。大概是我见过的最简单的音乐播放器：上滑分享，下滑切换下一首，左滑暂停，右滑播放，整个界面没有多余的东西，甚至第一次用的时候会摸不着头脑，但是用过一次便会喜欢上这款产品，界面如下右图所示。

因此，当微信新版本将边缘化的元素减小时，就会给人带来极简的感觉。随着电子设备交互方式越来越丰富，未来App的一些元素就可以被舍弃。如微信顶部的返回和发布按键。事实上，现在多数手机已经加入了全屏手势，返回的操作完全不需要顶部的返回按键（如一加的上滑返回，小米8的左右滑动返回等）。当然微信自带的右滑返回上一界面的操作也已经被用户熟练使用。

所以想象一下，当有一天你刷朋友圈时，顶部没有多余的东西甚至连系统状态栏那窄窄一条都不需要的时候，整个手机屏幕全是你想看的内容，是一件很享受的事。

另外，有些用户会将支付宝等软件（原来在顶部的功能按键会在上滑时改变布局）与微信做对比，虽然是几种不同类型的应用，但在交互设计上还是有可比性的。他们提出微信也可以这样做。但这种提案可能忽视了一个最基本的点。先上一组对比图：

未向上滑动时顶部功能按键的状态

向上滑动后顶部功能按键的改变

很明显，被忽视的一个事实是：这两者顶部功能按键所占的空间完全不一样。

支付宝在滑动收缩后，顶部按键占用的屏幕宽度，和未滑动状态下微信顶部的宽度相当。正因为如此，支付宝等软件才可以对功能按键进行上滑右移的设计；但是当该区域宽度进一步减小到微信顶部的收缩状态时的宽度呢？想必支付宝等产品的产品经理也没法进行更好的处理吧。也没必要再进一步缩小不是么？

因为两种类型的产品目标不同，关注点不同。

支付宝不需要将多达57个的功能全部显示在主界面，仅仅是将用户常用的功能显示在主界面（共计11个，足够了），不常用的功能放在二级页面，页面里多余的空间放置推广、生活服务和抢购等信息；但是微信朋友圈不同：其显示内容非常单一，因此唯一注重的是内容展示。因此让不相关的元素尽可能的小才是重点。

上面讲了那么多，归纳起来就是，为了匹配全面屏设备的普及，提高用户的视觉享受，因此将微信朋友圈顶部的深色主题换为浅灰白色以配合阅读界面；将顶部功能按键区在滑动查看时进一步缩小尺寸。

这在一定程度上牺牲了发状态的便捷性，但其带来的使用体验是很好的。毕竟你可能隔几分钟就要刷次朋友圈，但不是每隔几分钟就要发一次状态不是么？需要向下稍微滑才能发状态的牺牲，是可以接受的。

当然如果技术可行，是不是可以使用手势来发状态？如果真是如此，那么顶部的所有元素都可以去掉了。

三、单独列出最近使用的emoji表情

本人是版本更新后隔了两天才发现这个新功能的。为什么隔了两天？

因为在微信里点开表情时，默认打开的是用户上次打开的表情。这个传统从很早就有了，以至于，本人更新后每次打开的表情，都是emoji表情的最后一页（因为本人经常用那一页的表情），就是你们下面看到的左图。所以过了两天我才无意间发现，在emoji首页增加了9个最近表情，如下右图：

实际上，这个新功能有点鸡肋，原因主要有两点：

①只有9个表情。按照本功能的定义，是显示最近使用过的9个表情。那么，在聊天高峰期，这9个表情几乎是随时不断变化的。每发出去一个emoji表情，就会变化一次。实际上这对于用户来说没有太大用处；

②中间那条强行分割线，很突兀。对于强迫症来说，实在是灾难。

思考后，我认为，修改方案如下：

第一：重新定义这9个表情。这里放置的表情不应该是最近使用的表情，而应该是使用频率最高的表情。该表情页主要是针对emoji表情的使用（其大小规格和风格一致。而收藏的自定义表情，包括图片表情，动态表情等不在讨论内）。微信内emoji表情共5页，每页20个，总计100个表情。对于不同的用户来说，每个人都有属于自己的使用习惯。比如我更多的使用最后一页的几个表情，有的人更喜欢用前两页的表情等等。因此，这9个表情更应该被定义成用户使用频率最高的表情，做到为每个用户的私人订制，才更符合用户的使用习惯，提高该表情页的使用体验。

第二：9个表情不够多，或许将第一页全部重新定义为频率最高的表情会不会好点？总计100个表情，对于每个用户来说，20个表情能够覆盖用户使用习惯，是大概率事件。这样做的好处有，可以去掉中间那条强行分割线，并且可以省掉不必要的换页：如果这9个表情没有覆盖用户大部分的习惯表情，那么每次聊天都必然会出现切换表情页以获取没有显示的常用表情。那么定义这样的表情页也就失去了意义。

四、其它改变

其它的改变如一些图标、字体元素等更加精细。如聊天室顶部的箭头样式由“→”变为了“<”；箭头与备注名之间的那条竖线消失了，箭头和备注名靠得更紧；备注名后面多了个听筒模式的符号；最右侧的查看个人资料也由一个人形，变为了最通用的“···”；公众号顶部除了这些变化外，右侧的公众号资料图标由实心人形改成了类似简笔画的人形等。

这些简单的并非视觉重点的元素变化，虽然没有带来本质的功能提升，但用户体验好了，用起来更舒服。

最大的变化是公众号查看资料页面的变化：

6.6.6版本：

6.6.7版本：

上图对比中，可以明显看到变动的地方：

公众号资料首页中，将不重要的东西放在了三级菜单里（即将账号、账号主体、客服电话放进了公众号资料-资料首页菜单-更多选项中； - 将接受文章推送、置顶公众号放进了公众号资料-资料首页菜单-设置选项中），而多显示了部分历史消息，同时最下面有查看所有历史消息的选项。
在资料首页菜单中，除了保留原先的推荐给朋友和不在关注选项，其余的清空历史、投诉及添加到桌面选项放在了公众号资料-资料首页菜单-设置选项中。
查看历史消息页没有变化。

此次变动的优点：

1、将原先不重要的选项和内容放在了三级菜单里，取而代之的是关于该公众号的历史推文。使得用户能在少操作一步的情况下看到该公众号的具体内容，提高公众号的推送效率；

2、将一次性使用或者不常用的选项如置顶、投诉、添加到桌面、接受历史消息等放在三级菜单，在不影响用户体验的前提下，减少了二级菜单的常用选项，也就是仅仅保留了推送名片这一常用选项。

不足之处：

可以很明显看到，公众号资料首页和查看历史消息页几乎是一样的（历史消息页多出一个搜索栏）。因此为什么多此一举在资料首页最下方设置一个查看历史消息的选项呢？我认为可以将这两者统一起来，在资料首页最上方添加搜索栏，同时历史消息全部放在下面，通过滑动查看是不是更方便？

当然这里提及的公众号变化，是针对Andriod系统的最新版本。而在IOS微信客户端，对于公众号的改动可以说是颠覆性的，对于质量不高的公众号运营者来说，是毁灭性的。这部分分析，有兴趣的盆友可以阅读相关的文章。

以上就是我对本次Andriod微信6.6.7版本更新的一些体会和想法。对于产品我只是菜鸟小白。所以本文中有诸多不足和错误的地方，欢迎各位朋友批评和指正，也希望大家能多多交流~

—-菜鸟小白