微信聊天界面分析

作者: 栗子烤肉 | 来源:发表于2016-04-02 22:49 被阅读1905次

一直以来,用我们的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事件处理方式有点奇怪。
相同操作顺序,对比
  • 事件响应,视图切换微信更流畅。

总结

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

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

相关文章

  • 微信聊天界面分析

    一直以来,用我们的app聊天有种奇怪的感觉,但具体哪里奇怪,也说不上来。直到开发iPad版,遇到各种问题,仔细研究...

  • html5仿微信web版|仿微信客户端聊天

    h5仿微信实战项目|仿微信web端聊天界面|仿微信电脑端界面 之前做了一个手机端 h5仿微信聊天 界面,最近又开发...

  • iXShot样张

    测试机型iPhone SE 1.微信朋友圈支持朋友圈界面的拼接 2.微信好友列表 3.微信聊天界面2 4.微信聊天...

  • 微信小助手

    批量添加标签 微信聊天界面,点击内容,选择更多,选中同类标签内容,标注标签。 常用微信功能界面 聊天文件查找 设为...

  • 微信搜索长按文字方案

    微信聊天界面长按文字搜索方案 一、当前版本概况 当前版本的微信版本在聊天界面不能长按文字直接对文字进行搜索的功能。...

  • iOS类似微信聊天界面时间转换

    iOS类似微信聊天界面时间转换 下面这个大家不用看,仅供参考,类似微信聊天界面每隔5分钟显示一次时间

  • 微信自动抢红包(一):界面

    一、界面分析 要在微信中加入功能,首先要分析界面找到切入点。假如我们要在微信的设置界面加入自动抢红包的配置。进入设...

  • 微信界面

    随着微信的普及,微信聊天也成为了人们每天必不可少的活动。打开微信首先引入眼帘的是微信聊天界面,而每个人也有着自己的...

  • h5聊天室weChatRoom|仿微信群聊天室(多人聊天)

    html5+css3聊天室实战开发|h5仿微信聊天室界面|仿微信群聊/单聊 这个项目是利用h5开发的仿微信聊天室,...

  • 变本加厉【随笔】

    继昨晚把手机中微信聊天界面做了彻底清理,如法炮制,今晚又将电脑版微信中的那些用过的聊天或信息界面也清除干净。 不同...

网友评论

    本文标题:微信聊天界面分析

    本文链接:https://www.haomeiwen.com/subject/cqzllttx.html