浅尝微信朋友圈的细节之美

本文出自：http://blog.csdn.net/zhaizu/article/details/51048983。

今天，从一个安卓开发工程师的视角，来欣赏下微信朋友圈在 UI 和 交互设计上的精雕细琢之处。

纯属个人观点，不喜勿喷。

1. 可点击之处必有反馈态

用户头像（图片），用户昵称（文字），按钮（图片）等等这些，被按压的时候，其前景色或背景色或字体颜色都有明显的改变，我们称之为反馈态。反馈态给用户一个明确的提示：点击哪个元素或哪个区域，会产生哪些后续效果。

• 用户头像的反馈态采用了前景色，即 FrameLayout 的 foreground 属性；
• 用户昵称、正文和点赞/评论文本采用了背景色变色；
• 右下角的“更多”按钮采用图片变色，即要设计至少两套图片，一套用于未点击状态，另一套用于被点击状态的，放在 selector 文件中；

2. 发状态/传图对用户透明

你有没想过：当你发了一条状态，特别是带有9张图片的状态，在你点击“发送”按钮之后，你在朋友圈里面看到的自己的状态是真的还是假的（真的=服务器端已经持久化并返回的数据；假的=客户端本地数据）？

我们再设想一下，过年回家，当你从 Linus 回归到二狗子的时候，你的手机也从 4G 网路退化为 2G。慢如“闪电”（那只树懒）的 2G，如何承载你那些用动辄千万像素的摄像头拍摄的高清无码大图（即使经过压缩，数据量也是比较大的），并能在点击按钮的瞬间往返服务器？

结果不言而喻。你实时看到状态是纯本地数据。但是，你很少遇到发送失败的情况（例如小视频发送失败会在下次发表状态时进行提示），甚至从未遇到过（本人的手机是移动 2G 网络，从未遇到过发送失败的情况）。微信是怎么做到的？？？细思极恐啊。

你看到的只是冰山一角

3. 网络出错时全屏可点击

全屏可点击

目前为止，并不是所有的常见 APP 都能做到这样。有的甚至只有窄窄的一行提示语能点击，点击屏幕其他的空白地方均没有效果。遇到这种情况（经常发生地铁上或地铁口），不知那些不方便单手操作的大屏手机用户会作何感想（站立的短腿柯基吃不着桌上香肠的即时感）。

4. 优雅的取消点赞弹出框

毋庸置疑，朋友圈的点赞弹出框是用 PopupWindow 实现的。
问题在于，使用原生的 PopupWindow 组件，我们触摸非 PopupWindow 区域取消弹出框时，可以做到两种效果：

1. 在其他区域点击一下，抬起手至再次点击屏幕才能滑动列表；
2. 直接滑动列表，但是 PopupWindow 不会消失，而是随着列表一起滑动；

对比微信的效果，按压非 PopupWindow 区域的同时弹出框消失，并且，不抬起手指就直接滑动列表；用技术层面分析，ACTION_DOWN 事件被 PopupWindow 消费，但是后续的 ACTION_MOVE 被 ListView 消费。

不仅如此，当 PopupWindow A 处于弹出状态时，再点击其他的“更多”按钮 B，A 消失的同时 B 对应的 PopupWindow 弹出。这个效果很自然，但实现起来却有难度。

5. 输入框顶着被回复对象

不管你是回复别人的状态，还是回复某人的评论，键盘弹起之后，输入框顶部紧挨着被回复的对象的底部。这样，用户能够清晰的感知到自己回复的对象是谁，以免回复错误。

6. 自动保存回复内容

当你正在输入评论时候，有消息来到，你按返回键退出朋友圈页面，看完消息你再次进入朋友圈回复刚才的对象时，你会发现退出朋友圈之前写的内容还留在输入框里。

由于在手机上打字本身就是一场灾难，这个设计简直不能太贴心。

7. 记忆浏览位置

正在浏览朋友圈，划呀划，突然有消息来了，退出朋友圈页面，查看完消息再次进入朋友圈页面，发现页面还停留在刚才推出前的那条好友状态，而不用从顶部开始，再次划呀划。就订阅号的文章也是如此，具有记忆上次浏览位置功能。

如果你说：我命名看到朋友圈有更新，结果点进去竟然是我上一次的浏览位置，还要划呀划的回到顶部，咋办？

很简单，双击页面顶部的标题栏，就自动滚到第一条并自动刷新了。

8. 双击顶部返回第一条

这个功能比较隐蔽，但是当你快速上滑时，顶部的状态栏会出现“双击返回顶部”的提示文案，甚为贴心。

9. 总结

在 UI 方面，简洁，让用户快速找到兴趣点。
在交互方面，每个操作对用户透明，所做即所想。

本文出自：http://blog.csdn.net/zhaizu/article/details/51048983。