宝贝账本项目复盘② - 多图上传组件
上一次我们聊到宝贝账本社区图片展示规则。这次我们来聊聊多图上传组件。
先聊聊组件的概念。我们应用内部有很多的账本，为了后续账本的扩展，减少无谓的工作（有些账本其实会使用同一个功能，避免重复开发）我们会将一些现在或者未来使用频次高的功能抽成组件来做，然后打包封装，以便后续能快速移植到其他账本上，比如应用内部的记一笔功能，流水列表，弹窗，导航栏等。
而这次我们在宝贝账本上新增的多图功能，也同样希望未来能快速地复用到其他的账本上。要上传多图展示，就无法忽略上传多图的流程，而在这次改版中，我也顺便对这个交互流程做了梳理。
下面我分几个点来说
1.图片上传流程
2.用户可能会遇到的问题
3.问题处理
4.这个细节别忘记
5.图片完成上传后，我们还需要做什么
1.图片上传流程
我在研究以朋友圈的上传图片方式后，画了个流程图
tip：这是个方法，如果有什么功能你不知道怎么做的，就是看看别人是怎么做的
上传图片流程
通过这个流程图，可以帮助我更清晰的看到中间每一个用户接触点，知道我们有哪些页面要做。
2.用户可能会遇到的问题
此次我的设计目标是帮助用户，在宝贝账本-相册页上传多张图片。
下面我从用户的角度，从体验流程出发，提出一些用户会遇到的问题，也算是设计的关键点吧。
1.要拍照还是要上传图片？
2.如何选中图片&取消选择？
3.最多可以选择多少张图片？
4.已选择图片还能选视频吗？
5.想看大图怎么办？
6.全部图片太难找图了，我想换到相册里去找？
3.问题处理
上面所列举的这些其实都是用户在上传图片的流程中的疑惑点，我们来逐个解决
1.要拍照还是要上传图片？
虽然大部分的用户想要上传手机里面的照片，但也不能忽略部分想要当下记录（拍照）的需求，各平台的处理方式主要是有两种，第一种先弹出选择控件，用户当下做选择，第二种是合到相册页，相册的第一个图是拍照或者作为一个tab，和相册并列排布（这时拍照会比较重）其实采取哪种我觉得都可以，但要考虑平台属性（如果平台对于图片有尺寸要求，也要考虑进去）
我这里采用的是第一种，因为原来随手记也有相关控件，就重复使用了，避免二次开发。
2.如何选中图片&取消选择？
选中和非选中都需要有明确的指示，默认状态为未选中，选中状态要明确，这里可以通过颜色，形态来表现，比如未选择是线性，选中状态可以是实心等，颜色的话根据每个app的色调来定。
3.最多可以选择多少张图片？
各平台目前最常见的最多9张图片，之前随手记只能上传一张图片，此次同样增至9张。关于图片展示规则，我上篇写了，可以看看。
设计主要注意两点：
①明确当前数量（有些平台图片的时候标上序号，我这里处理方式是在完成的地方标明张数）
②当用户选择了9张图片时，我们需要做一件事情，告诉用户不可以再选了。
处理方式：先对图片进行置灰处理，必要时加入弹窗提醒
4.已选择图片还能选视频吗？
相册除了图片，还有就是视频了。这里主要看平台支不支持展示视频了。
①如果不能支持，可以做个判断，直接隐藏视频，不用让用户看到，也不存在能不能选择视频的问题了。
②如果支持，出于最终展示和图像视频处理的考虑，目前视频和图片是不能共存的，就是选择了图片就不能选择视频
5.想看大图怎么办？
在相册列表中，一般一行是3或4张图片，图片会比较小，我们都有预览大图的需求。那预览时如何展示，这里还需要多考虑几个点
①图片预览下，只是预览，还是可选择&取消？
预览下，可以选择或取消，在流程体验上会更流畅，减少了返回再选择的一步，注意样式上与外面保持一致
②如果已选择了的几张图片，预览时可以看到吗
预览状态下，支持预览已选择的图片，是可加快用户决策的，此时用户能更明确当前选择的图片张数，以及已选的图片。
注意的是：如在预览状态下，取消图片选择时，需要有状态变化
③常规图片，长图，全景图如何处理？
常规图片和全景图处理下，处理方式一致。如果图片宽度小于屏幕宽度，按原尺寸整体居中展示，如图片宽度大于等于屏幕宽度，贴边展示
长图下，长图如果居中展示只能看到看到图片中间部分，我们浏览图片顺序是从上到下，我采取的处理方式是，定位到图片顶部，滑动查看全图
在预览状态下，应该都支持手动放大
6.全部图片太难找图了，我想换到相册里去找
需要有切换相册的入口，样式上同样根据设计规范来就行
头部可切换相册
4.这个细节别忘记
云端图片如何处理
如果是苹果用户可能会遇到部分图片传到iCloud需要下载的问题，当用户点击时发现迟迟没有相应，需告知其状态，即当前正在下载中，下载失败也应有提醒
5.图片完成上传后，我们还需要做什么
当用户上传到云端后，可能因为网络问题，出现上传不成功，或上次较慢的情况，也要说明
差不多就这些了，最后展示一下宝贝账本内部从相册页到各种上传的所有的设计稿吧
