header_v0.7.32

手机WEB改版项目分享

1年前发布

原创文章 / 多领域 / 观点
szmtsun 原创,如需商业用途或转载请与szmtsun联系,谢谢配合。

金海马商城近一年来,移动端销售日均已占据55%左右,UV占据30%左右,可是对于家具这种低频消费购物网站,让用户下载安装APP可能比较不现实,所以移动WEB的优化改版上线变得非常重要。

【前言】

五年来第一次在站酷分享项目经验,承认懒了,欢迎猛喷~


【项目总结】

以下5点是设计过程中花了较多精力而且觉得很重要的几点~


· 项目UI规范文档——这个非常重要,除了有效提高设计师和前端的工作效率,更重要是让整个产品风格统一,也是项目多部门团队合作必不可少的规范。规范还要在项目上线后根据市场反馈不断优化,作为产品后续优化的依据标准。


· 数据分析——移动端的多分辨率是最头疼的问题,iphone还好,安卓各种尺寸,外加手机WEB那么多浏览器……所以,请分析项目用户数据,比如金海马商城移动端用户浏览器占比大致前几位如下( safari>QQ浏览器>微信内嵌浏览器>UC浏览器),所以这几个浏览器的bug都必须一 一解决的。


· Iconfonts字体图标——为了解决变态的各种分辨率导致的icon锯齿问题,哪个伟人发明了字体图标,反正好好利用就行了,不过在PS做icon还是比较吃亏的,要一个个拉到AI里面再保存成svg格式,所以建议在AI上直接做icon,上传到阿里的字体图标库网站上,就可以建立项目库了,这里这里http://www.iconfont.cn/ 还可以下载很多常用icon。


· 沟通——整个项目的重点流程页面一定要组织技术啊产品啊运营啊客服等小伙伴们一起一页页地讲解和讨论优化,只有团队成员都认同的东西,大家才会积极把东西一起做好,大家都有比较深入的全面了解,后面的工作才可以顺利进行。


· 最后,也是最重要的, UI和平面很大的区别是,并不是追求多绚丽多过目不忘,而是在整个设计过程中,务必时刻要以用户的思维来思考每个页面元素,想清楚用户在这个页面上会做什么?希望得到什么?页面的重点是否清晰?是否简单易用?各个页面之间的流程是否顺畅?视觉上,要追求界面简单!好用!重点功能明确!


希望大家立即打开网站体验一番,多提意见~以便我们不断优化完善。商城地址m.kinhom.com (请用手机打开)




截取部分UI规范:



57
    Hello PM 意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功