上传图片交互设计

设计需求

某系统中具有礼品兑换功能，用户可以用积分兑换系统提供的了礼品，在后台由系统管理人员将礼品图片进行上传，在前台礼品列表中展示给用户。

第一版设计

最初设计时完全没有考虑细节，只给了一个选择图片文件的按钮和显示图片路径的标签，在提交整个礼品表单时提交图片。

第一版实现

开发人员直接引用了一个外部的上传图片控件，没有考虑此处的上传图片需求以及UI/UX规范问题，完成了第一版的开发，进行设计检查时发现很多不太合理的问题。

1、没有选择图片时

    

    多余且别扭的上传按钮

2、选择了图片后

    

    路径名过长直接截掉了后半段

3、图片上传完成后

    

    上传的图片伸缩为100*100，不是设计的尺寸

4、其它交互过程中的细节问题

第二版设计

鉴于上述实现中的种种问题，发现上传图片并非一个简单的浏览图片然后提交就完成的功能，中间涉及到很多的细节问题，于是决定对上传图片进行一个完善的交互设计。找了一些有上传图片功能的产品和插件进行了一番体验，结合此处的需求总结了以下一些上传图片需要考虑的功能性和交互性问题，然后从这些问题着手，进行一个完善的交互流程设计。

功能分析：

1、上传图片需要预览吗？

     需要

2、上传图片尺寸固定吗？

     礼品图片是显示在固定的位置空间内的，可以控制为相同的大小

3、上传图片需要进行裁剪缩放等调整吗？

     礼品图片应该经过设计师处理后交给管理员上传，可以保证图片的尺寸和质量，可以省略这个调整的环节

4、上传图片清晰度如何保证？

     礼品图片一般尺寸都较小，原图上传即可

5、选择和上传图片要分两步进行吗？

     分开

6、允许选择多个图片吗？

    只选择一张图片

7、能够删除图片吗？

    可以删除图片，重新载入新的图片

8、显示上传图片的路径吗？

    显示，当名称过长时显示前半部分和后半部分，中间以省略形式显示，鼠标移入后通过tip显示完整路径

     

交互分析：

1、上传图片过程交互？

    给出图片上传进度

2、上传图片成功状态交互？

    显示上传的礼品图片

3、上传图片失败状态交互？

    给出上传失败的提示

4、删除图片交互？

    删除当前礼品图片，跳转到浏览图片文件的状态

设计结果

1、未上传图片时默认状态

2、选择要上传的图片后

3、上传图片

4、上传成功

5、删除图片

6、再次选择要上传的图片

7、图片路径过长、移入使用浏览器默认tip显示完整路径

8、上传图片

9、上传失败