跨终端实践:丢掉你的数据线吧(售后维权图片上传功能增强改造)

背景

在“我的淘宝”中发起售后维权后,需要上传举证图片。我们通常的做事是,先手机拍好照片,然后用数据线导入到电脑中,最后上传提交。淘宝成立10年了,大家一直都这么操作,觉得没什么问题。

“举个栗子”

某天,你愤怒的用手机拍了几张卖家寄过来假货的照片,准备作为凭证提交。
突然,发现数据线忘带了,真是悲剧!!
肿么办?肿么办?
找同事借一根啊!好吧,你狠。
要是你的micro usb接口坏了呢,你肿么办??告诉我你要肿么办??

当然有办法,而且非常简单。
下面就来告诉你,我们是怎么做到的!

二维码传图

通过手机扫描二维码后上传。
是不是很简单,是不是有种恍然大悟、如沐春风、醍醐灌顶、茅塞顿开、大彻大悟的感觉?

什么??没弄明白如何使用二维码上传??
好吧,看来我有必要详细解释下我们的方案。

继续看图

1、首先,在需要上传图片的地方嵌入一个与该页面有特殊关联的二维码。比如你已经发起了一个维权,那么这个URL里面就需要带上维权编号。我们还可以通过token、session失效时间、加密等方式实现免登录和防止出现安全漏洞。

2、用户通过手机或者PAD扫描该二维码,进入图片上传界面。说到这里不得不给大家讲下我在开发过程中遇到的各种坑。

开始我做了一个还比较酷的界面:http://satans17.github.io/fragment/upload.html
放到手机上测试,发现各种兼容性问题。

  • 部分手机(android2.3下的360,UC)浏览器不能fire file控件的click事件,所以没办法使用fileAPI实现预览,更没办法使用formData,XMLHttpRequest实现异步上传。建议直接使用最原始的form表单提交的方式。
  • 使用android2.3下的微信二维码扫描,也不能使用file控件,别的版本没试过。初步估计是微信定制了一些系统自带浏览器的功能,目前还不明真相。 这个比较好解决,就推荐他使用淘宝APP或者一淘火眼,还能顺便推广下我们自己的应用。
  • 部分浏览器没有支持拍照功能,只能选择已有的图片,比如android下的360,chrome表现得比较好,可惜android4.0才能装。

由于设备有限,可能还有其他问题。如果有人遇到,请一起讨论下。

3、用户在手机上提交图片后,提示他返回电脑上继续操作。如果想用户体验做得更好,可以在网页上轮询,看看是否有新图片提交,如果有,就直接显示在网页上。粗暴点的做法就是手机上传成功后,提示他返回刷新电脑上的网页。

思路有了,功能实现起来不难。
从有了这个想法到产品上线,我们只有了三天时间。
下面的截图是上线后的效果

第一步:扫描二维码

第二步:手机上传相册中的图片 或者 直接拍照

第三步:凭证上传成功

小结

几年前,PC机是我们的主要终端设备,相机、麦克、扫描仪、摄像头等都是以PC机的辅助设备出现的。
随着科技的发展,出现了智能手机、iTV、PAD、google glass、kindle等产品,他们都能以独立的终端形式出现,每种设备都有自己的特点和特长,能满足用户的不同需求。而且这些设备越来越多的被人接受和普及,很多人往往在同时使用好几种终端。
例如:你可能在用PC机看电影的同事,还在用手机微信泡妹子。

利用这些不同的终端,不同终端的特性,我们一定可以创造出更多更棒的跨终端操作的用户体验!