一款APP设计的从0到1：视觉还原篇

　　《一款APP设计的从0到1》这是一篇系列文章干货，上次U妹讲的是关于切图标注篇，今天U妹来说一下，视觉还原。

　　

　　这次U妹接着上次的茬继续，继续之前先来看看整个目录(满满的干货)

　　U妹列了一个小小的目录：

　　一、项目立项(点击查看)

　　二、项目预估时间(点击查看)

　　三、界面设计

　　四、切图标注

　　五、视觉还原

　　六、上线准备

　　一款完整的APP，经过这样的一个流程：项目立项启动设计产品原型设计效果图进入开发阶段开发成功后进入测试阶段测试将问题反馈给开发人员进行调试多次测试确认没有bug提交市场、正式上线。

　　我们都知道，无论设计师的标注稿多精确，开发出来的产品，多多少少都会有误差，专业来说就是视觉效果落地还原度，视觉还原度越高，与设计稿越接近，APP就越精细;反之，就越差。

　　所以，就需要我们在这个时候，去配合开发对UI进行调整，来更加的接近我们做的效果图了(简单了说，就是给开发挑毛病，指出和效果图不一致的地方，是不是很开心哈)

　　差1px，我也要挑出来(像素眼就是这样炼成的)

　　一、设计师如何做视觉还原?

　　1. 设计视觉调整文档

　　团队较大，建议设计一份视觉调整文章，这样对整个开发进度和效率都是比较高的，因为团队人数多，你不可能跑到iOS开发哥哥那里说一次要调整的地方，然后再去跟Android哥哥再说一次，你有时间，人家不一定有时间，所以设计视觉调整优化文档是很有必要的。

　　

　　视觉调整优化文档，要一目了然，需要注明和效果图不一样的地方是哪里，应该改成什么样，是iOS调整、Android调整还是h5调整等，输出为png和jpg图片格式，最好输出为PDF格式，开发看起来也方便，比如你写了一个颜色值，开发就可以直接复制了。

　　

　　2. 带上你的板凳，过去和开发一起调UI

　　这种方法很适合3-4人的小团队，亲自上阵，口述问题，效率也是比较高的，你需要备好你的效果图和开发后的雏形，有对比才有伤害(有图有真相，不一样的地方就得让开发改)

　　二、如何让效果图高还原度落地?

　　1、规范的视觉界面设计

　　必须按照各平台的UI设计规范去规范的设计界面，用设计规范去知道开发，才是提高视觉还原的的基本前提。

　　

　　2、视觉UI控件的规范输出

　　在绝大多数的情况下，为了赶项目进度，都是界面先行，设计规范后出，所以要竟可能的保持界面设计和规范是同步进行。

　　

　　以u妹目前的项目经验，可以先输出基础控件元素规范，包括(颜色、文字、图标、蒙板、投影、按钮、输入框、或个别控件)，规范是一个庞大而繁琐，极需耐心的工作;过程中注重每一个细节的精准与合理性。

　　3、规范的切图与精确的标注

　　我们的切图和标注，是否规范和精确，直接影响视觉效果的还原度，所以切图和标注一定要做的细致，这样更加有利于提升还原度

　　

　　4、多和开发沟通交流

　　U妹一直说的一句话：沟通是解决问题的最有效方法，所以多和开发哥哥接触沟通交流，如果有条件允许的话，请与开发坐一起;遇到问题及时面对面协商解决、达成共识、修改、敲定、解决。

　　关于视觉还原篇就说到这里，U妹这里说的只是一种工作方法，好的工作方法才能自己事半功倍，在具体工作中也要灵活拥有，一定要多和开发沟通交流，良好的沟通才是解决问题的唯一方法，有疑问题也可给U妹留言，我们下期再见!

　　作者：U妹，一个不要命的UI设计师，等你，来撩妹哟

　　来源：微信公众号UI妹儿(ID：Ifaner)

　　本文由 @U妹 授权发布，未经作者许可，禁止转载。

　　题图来自 Pexels，基于 CC0 协议

*请认真填写需求信息，我们会在24小时内与您取得联系。