金海马商城手机端改版分享

【前言】

五年来第一次在站酷分享项目经验，承认懒了。

【项目总结】

以下5点是设计过程中花了较多精力而且觉得很重要的几点，所以详细分享下。

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

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

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

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

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

截取部分UI规范：

项目视觉