微信聊天界面分析

一直以来，用我们的app聊天有种奇怪的感觉，但具体哪里奇怪，也说不上来。
直到开发iPad版，遇到各种问题，仔细研究微信聊天页面，才发现问题出在哪里。

微信聊天页面

微信聊天页面

微信聊天页面结构图

iPad版问题

• additionView出现时，遮住toolView（已解决）
• additionView出现时，chatTableView看不到最新消息（已解决）
• toolView、qqFaceView、attachmentView不能根据屏幕调整自身大小（已解决）
• 不能自适应屏幕旋转（有待优化）
• 事件响应，视图切换不够流畅（有待优化）

微信聊天页面五种状态

微信聊天页面五种状态

说明：下表只考虑一个按钮的点击事件，不考虑多个按钮之间相互切换的情况。
以tap voiceButton为例，当2n+1次tap voiceButton时，为状态1；当2n次tap voiceButton时，为状态2。

状态详情

这不知道是不是微信的bug：当第2n+1次点击attachmentButton时，attachmentButton应该要变成键盘图标，而不是现在的默认状态（表中状态4）。

微信 VS app

• 针对不同设备，不同屏幕尺寸。微信qqFaceView每页qq表情数发生变化，qqFaceView页数发生变化；而app不变。下图是iPhone6中的截图对比。

iPhone 6 对比

• 当没有有草稿的情况下，进入聊天页面。微信键盘弹出（表中状态2），而app键盘隐藏（表中状态5）。

有草稿、无草稿，对比

• 当第2n+1次点击qqFaceButton时，微信qqFaceButton变成键盘图标（表中状态3），而app qqFaceButton默认状态。
• 当第2n次点击voiceButton时，微信键盘弹出（表中状态2），而app键盘隐藏（表中状态5）。
• 某些特殊操作顺序，app事件处理方式有点奇怪。

相同操作顺序，对比

• 事件响应，视图切换微信更流畅。

总结

什么是健康？就是你感觉不到身体器官的存在。
什么是幸福？就是你感觉不到痛苦的存在。
什么是好的用户体验？就是你感觉不到异常的存在。

平时用微信聊天，很自然，没有任何不舒服的感觉。
直到研究微信聊天界面，才发现微信的变态之处：细节处理的如此细致。
就仅仅聊天页面事件响应处理，其中都暗含着如此之多的细节！
逻辑其实不是特别复杂，但真正要把所有的细节都处理好，还是有点难度的，需要花点时间精力来处理。
而成功不就是把复杂的事情做到简单，简单的事情做到极致么。
正是这一个个的细节，才形成了今天的微信。