1.微信朋友圈的小更新

Shot

- MeoW！Design Shots -

特别说明

此栏目内截屏所用手机为iPhone Xs Max。

使用的画布大小为：414 X 896（1倍图）。

所以标注的内容为元素在1倍图下的尺寸。

另：由于是比照截图佛系标注，故尺寸很可能有1-2px的偏差。

1

在我看来，微信经常是悄无声息地就更新了些什么小小的功能。

今天要说的这个大约是在上周刷微信朋友圈的时候看到的。

看到第一眼的感觉是：“嗯？这个？这个...”

它

是

这

样

的

我没有把今天要讨论的那一块圈出来，但是通过我的神奇测量，相信也都应该能知道是哪一部分了吧。

按钮背景吸取出来是#F7F7F7，但按标准说法应该为：#000000 3%.

从视觉上很容易可以看出来，其实就是放了一个全圆角的小按钮。

在微信UI规范里，正常次按钮的背景色是 #000000 5%，但这个使用的背景色却更浅 #000000 3%，这也足以体现出它的不重要性了。

虽然是相当不重要的操作，但仍要让用户一眼识别并保证不会误点，所以给这个留了很大一块区域；并且遵守朋友圈格式（分割线、背景色、间距），多了功能，却还是保持风格样式的统一性。

然后看到全圆角，我就顺带思考了一下为什么是全圆角的呢？为什么不是用已有样式里圆角为4的圆角呢？

于是我把它们放在了一起，看效果：

单从视觉对比效果我们就可以看出来，左边的全圆角按钮明显要更吸引注意力。

天天刷朋友圈的我们都能发现，在朋友圈这一页里，头像与操作按钮均为圆角按钮，图片均为直角，而这里的跳转按钮为全圆角按钮。

为什么要使用这些不同的格式呢？

既然说到这里，我们不如仔细分析一下：

当边角带弧度之后，就会更容易进入人的肉眼，而当弧度为全圆角的时候就非常引人注目了。

1.朋友圈中的图片，它只是一个内容的展示用途，比起通过圆角引起用户的注意，它已经有丰富的内容吸引用户点击了，所以使用直角即可。

2.头像和操作按钮，均可点击进行相关（带选择性）的操作，故使用圆角，一个是从视觉上符合用户对于按钮的既定认知，第二个则是在含图片（带直角）的朋友圈内容中更能吸引用户的注意力。

3.全圆角本身更适合使用在只含一个操作点的按钮上，提供单一简单交互，这样看来明显就很适用于“跳到还没看的位置”这个操作。

...

其实上面80%的内容是我在写第一个字的时候完全没想到要展开的内容，不过现在看来似乎也挺不错的，那么我还想说什么呢？

就是我当时看到微信朋友圈跳转按钮的第二反应：“这...这不是微博的那...那什么吗？”

从含义上来看，这是两个意义完全不同的按钮。

微信的跳转是告诉你，点了之后，可以跳转到之前还未看的部分。

而微博的按钮是告诉你，之前的你都看完了，点我给你一点新鲜的。

对于微信的设计我们刚刚已经聊过了，那现在就来看看微博的，同样是一个按钮，微博比起微信的简约，稍稍多了一些设计感（嗯？好像不只稍稍？），首先从使用背景底色将按钮与微博的卡片内容区分开来，按钮旁边还使用了虚点分割线，并且按钮本身应该还是有一点描边/阴影的，加之还是一个文字+图标的按钮。

比起微信的轻，微博可以说是很丰富了。

唯一让人有些不太理解的也是文字旁边的向下箭头的图标，我琢磨了很久想给这个按钮一个解释，或许是想告诉用户点击拥有更多内容？又或者是为了提醒用户这个是可点击的？还是说仅仅是个下拉刷新的图标？

作为一名深度脑洞用户，我看到这个的第一感觉就是：老觉得点击以后会出来一个下拉选择什么最新/最热新闻之类的菜单，虽然想想不可能。

其实点击后的样子：就是开始加载的提示。

于是我尝试将那个向下箭头去掉、换成其他的图标。

去掉以后瞬间感觉清爽了很多，也不会让人产生歧义，但结合微博的风格来看的话，似乎就会略显单调了一点。

更换了个图标以后能避免有像我一样‘憨厚’的用户会脑洞式误解，也符合整体风格，我替换的图标或许不是表达最清楚的，但从这点可以发现其实使用一个更贴近语境的图标，在丰富设计的同时才会帮助用户减少无谓思考的时间，更加直观的简单明了的告知用户信息。

关于微信这个新的功能点就说到这里啦，（似乎顺带也说了一下微博的相关内容），倒是意料之外的说了这么多，算是开了个好头？～

真是棒极了！

以上分析内容均带个人色彩，欢迎不同意见一起讨论研究，新公号没有留言功能，如要battle只能委屈在公号里把菜单切换成键盘发送文字过来啦！相互切磋！

如果有任何关于UI设计的问题也欢迎通过上面说的方式直接提问，收到后一定会认！真！回！复！