美文网首页PMskill
上传和相册.md

上传和相册.md

作者: huglee | 来源:发表于2015-01-29 23:01 被阅读243次

    概况

    简介
    这份文档用来管理上传图片相册的产品设计、开发进度和改进。妈妈咪呀,感谢微信官方开放了js-sdk,使得开发者可以调用微信各种接口,因此我们决定改进目前匹配系统的上传方式,并增加相册功能。
    目的
    1.确保所有用户都能上传照片,消除历史性bug;
    2.增加相册模块,相册会极大增加匹配系统的粘性和吸引力;
    3.相关技术积累,之后我们可以实现更多功能;


    产品设计

    在原个人资料页增加了上传入口和相册入口。上传入口包括:更换头像更换背景管理个人相册

    HKQLVSNDU@48HDFB$GVE`90.png

    【注意】在这里,点击更换头像更换背景,都是调用微信的上传接口。@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.手指按住下滑显示全局。
      clipcss属性。
    • pjax实现在OnLine中进入用户资料后返回不改变之前浏览位置,优化用户体验。Qzone触屏版,导航栏切换时没刷新,点击某人动态再返回还是留在原点。

    结论

    1.pjax前后端都看,学习
    2.点击个人资料页头像,弹出框两个按钮:头像/背景。再进入上传页面

    相关文章

      网友评论

        本文标题:上传和相册.md

        本文链接:https://www.haomeiwen.com/subject/stjlxttx.html