使用照片
1.有相册权限
微信、QQ:保存图片
APP:不保存图片
2.没有相册权限
微信:保存图片
QQ、APP:不保存图片
3.总结
- 优化:当没有相册权限时,是否保存图片影响不大,但出于尊重用户权限的角度,还是以QQ为准,不保存图片。
选择图片时,预览图片
操作
- 在相册页面,点击某个图片,预览图片
- 在相册页面,选择多张图片后,再点预览按钮,预览图片
1.放大缩小
- 微信、QQ、APP:有
2.保存图片
- 微信、QQ、APP:无
3.删除图片
- 微信、QQ、APP:选中、取消选中
4.导航栏
- 微信、APP:有,无标题
- QQ:有,5/8(选中一张图片时,标题为预览)
5.滚动时,导航栏显示
- 微信、QQ、APP:有
6.总结
- APP优化:导航栏参考QQ
选择图片后,预览图片
操作:
- 当选择多张图片后,点完成或发送按钮,进入到图片上传页面,再点图片预览图片
当选择长图后,图片页面展示
- 微信:图片模糊
- QQ:图片非常清晰
- APP:图片叠在一起,看不清楚
上传多张图片
- 微信:无此功能
- QQ:该页面不能滚动,中间图片区域可以滚动
- APP:原来APP的处理方式与QQ一致,后改为,图片区域自动撑高,整个页面可以滚动
- 思考:这两种展示方式侧重点不同:QQ的重点在图片下面的其他设置,弱化图片;而APP的重点在图片的展示,弱化设置。
1.放大缩小
- 微信、QQ、APP:有
2.保存图片
- 微信、QQ:无
- APP:有
3.删除图片
- 微信:删除按钮
- QQ:选中、取消选中
- APP:长按图片,有删除按钮
4.导航栏
- 微信:有,1/8
- QQ:无,底部有2/8(划动页面才出现。此处,QQ的UI不统一)
- APP:有,11/12(只有一张图片时,标题为查看大图)
5.滚动时,导航栏显示
- 微信:无导航栏
- QQ:无导航栏,但是有选中、取消选中
- APP:有导航栏
6.总结
- APP优化:从相册中选择图片,其实没有必要再保存图片到相册,因此不再提供保存功能
- APP优化:长按,这种方式不够直观,改成删除按钮。
发布图片后,查看大图
操作:发布图片后,在动态页面查看大图
UI展示
- 微信:根据屏幕大小,缩放图片尺寸,每行三张。留白较多。
- QQ:根据屏幕大小,图片张数,缩放图片尺寸。没有留白。
- APP:不同的页面,展示方式不一致。部分页面每行四张,根据屏幕大小,缩放图片尺寸。部分页面图片尺寸固定,不同屏幕大小,动态调整每行展示图片数量。
-
思考:以上3中UI展示方式,个人比较喜欢微信的风格:简洁统一。QQ没有留白,感觉页面比较杂乱。而我们APP则风格不统一,每行张数不一样,圆角直角不统一。
1.放大缩小
- 微信、QQ、APP:有
2.保存图片
- 微信、QQ、APP:有
3.删除图片
- 微信、QQ、APP:无
4.导航栏
- 微信:无,底部有page control
- QQ:无,底部有2/8(划动页面才出现)
- APP:有,11/12
5.滚动时,导航栏显示
- 微信、QQ:无
- APP:有
6.总结
- 思考:微信、QQ为了让用户的焦点在图片,因而隐藏导航栏,弱化图片张数与当前位置?
上传图片张数/是否有原图功能
1.微信
- 聊天页面、上传电脑:9/原图
- 发朋友圈:9/无原图
2.QQ
- 聊天页面:20/原图
- 上传电脑:50/无原图
- 发说说:20/预览时,没有原图选项,但选好图片后,可以设置图片质量
- 发照片:400+/预览时,没有原图选项,但选好图片后,可以设置图片质量
3.APP
- 聊天页面:9/原图
- 发布动态等页面:一次选8张图片,可以选多次/原图
4.总结
- APP 优化:聊天页面和发布动态等页面一次选择的最大张数统一
图片上传
1.微信
- 无网络、弱网、正常 :直接显示,没有loading的过程,保存图片上传队列,恢复网络后,在后台继续上传
2.QQ
- 无网络、弱网、正常 :直接显示,没有loading的过程,并在界面提示已保存图片上传队列,恢复网络后继续上传
3.APP
- 无网络、弱网、正常 :有loading的过程,上传成功后会显示勾,当网络条件差的情况,上传失败显示叉,点图片,可以重新上传
4.总结
- APP 优化:因为目前图片上传都是先将图片上传到腾讯云或万象,获取到图片的url后,再进行后续操作。所以图片上传还是按照以前的主要逻辑,但UI部分重构,优化图片上传体验,尽量减少用户等待时间
其他功能
1.上传图片后,点取消按钮
- 微信:弹框确认:退出此次编辑?
- QQ:弹框提示:是否保存草稿。保存后,下次写说说,图片和文字均保留。
- APP:直接页面跳转,没有提示
2.最近图片提示
- 微信:你可能要发送的照片
- QQ:你可能想传
- APP:无此功能
3.正常图片滚动方向
- 微信、QQ:水平滚动
- APP:水平滚动,垂直滚动
4.长图滚动方向
- 微信、QQ、APP:水平滚动,垂直滚动
5.总结
- APP 优化:弹框确认:退出此次编辑?
- APP 优化:后续可以考虑加上最近图片提示
- APP 优化:只需要水平滚动
- APP 优化:展示长图UI待优化