概况
简介
这份文档用来管理上传图片
和相册
的产品设计、开发进度和改进。妈妈咪呀,感谢微信官方开放了js-sdk,使得开发者可以调用微信各种接口,因此我们决定改进目前匹配系统的上传方式,并增加相册功能。
目的
1.确保所有用户都能上传照片,消除历史性bug;
2.增加相册模块,相册会极大增加匹配系统的粘性和吸引力;
3.相关技术积累,之后我们可以实现更多功能;
产品设计
在原个人资料页增加了上传入口和相册入口。上传入口包括:更换头像
,更换背景
和管理个人相册
。
【注意】在这里,点击更换头像
和更换背景
,都是调用微信的上传接口。@striving,你和@strong的工作要合并。头像和背景的更换,流程和周五讲基本一致:
用户操作流程
1.在上面出现的弹出框中点击更换头像
或更换背景
,底部出现微信自带的拍照/相册模块。
![Q(NR]HJR3ZU{H_G55$]29FJ.png](https://img.haomeiwen.com/i36968/cc3d430008c6b48d.png)
2.若用户选择两幅或以上图片,alert“只能选择一张图片哟请重试”
3.步骤2的用户界面显示。由于后台过程耗时会很长,所以得在页面上显示点东西。
a.“上传中”进度条显示。
b.alert“照片已经上传成功啦,稍后刷新才能显示哦~”
相册
在现行个人资料页
的背景图片右下角显示相册图标和照片数量。点击图标进入相册页面,这个页面由微信接口调用,我们无法修改。
相册管理页面
![OSD]EAYMV~X{`CR}JKDSNWF.png](https://img.haomeiwen.com/i36968/29aa45237dc6e432.png)
说明:
1.点击删除,这个div被hidden,其他图片自动填补它的位置。同时ajax发送删除请求,数据库删除相关条目。
2.添加照片按钮,类似上传头像/背景的按钮,但是可以同时上传多张。限制最大数量。设相册容量是m(或者8,或者12,不确定),已上传的是n,若选择的照片超过m-n张,alert“个人相册只能保留m张照片,目前已上传n张,你还能上传m-n张”。
【问题】@skyway,关于缩略图,直接请求是不是比saveas更快?若是,直接访问缩略图链接,若不是,每次都同时保存缩略图。缩略图用居中裁剪。
技术细节
- 以上说明,相应的前后端修改
- access-token临界的问题什么时候搞定
- 图片处理相关七牛的文档。怎么压缩,是否需要一律转jpg,是否需要渐进显示。
- 初步确定:头像压缩100-100,背景400-250.相册等比例压缩,分辨率和质量设定待定。
进度
1.striving已经写了选择图片-上传-保存七牛-保存数据库基本框架OK
2.草图基本搞定OK
3.喵喵设计草图已OK
4.striving和skyway继续完善细节,相册管理页面的后台实现
5.strong根据现有说明预研。先解决pjax吧~~~
6.strong基本前端实现OK
7.后端不稳定,还需完善
优化
-
用户检测
。点击OnLine,若用户未上传头像,跳转至上传页面;点击相册,若用户未上传背景,跳转至相册管理页面。用户检测
的优化在BigBang臆想
一文中给出,这里无视 - 不切割背景图,个人资料页的背景初始状态显示400 * 250.手指按住下滑显示全局。
clip
css属性。 - pjax实现在OnLine中进入用户资料后返回不改变之前浏览位置,优化用户体验。Qzone触屏版,导航栏切换时没刷新,点击某人动态再返回还是留在原点。
结论
1.pjax前后端都看,学习
2.点击个人资料页头像,弹出框两个按钮:头像/背景。再进入上传页面
网友评论