视觉设计，怎样让前端100%实现设计效果？

还有就是MAC的童鞋们，使用SKETCH的MIRROR~这就不多做赘述，最近风头正劲的设计软件。

使用教程见：《想要一稿过不加班？Sketch绝配神器Mirror抢先体验》

好了~一下午打了那么多内容，还有砖要去搬了~~还有很多内容没空放上来，以后一点点更新，很多疏漏之处，欢迎指正。说了这么多，就是要告诉所有做UI设计的同行新手们，能正确的分析问题，从自身的知识能力出发来看待问题。我们和程序都是项目的执行人，需要相互间的磨合和协助共同输出产品，在对方的结果不尽人意时，请先从上面的几个点力反思，自己有哪些不足，再和对方讨论，这样不但给自己带来进步，也为团队节省更多的时间。

请一起为更好的产品努力吧！！

————————————————分割线————————————————

@谁在富士山下 ：完成视觉稿的定稿和评审并不意味着视觉的工作已经完成，视觉定稿只算是完成了75%的视觉工作进度，要跟进后期的视觉还原直到上线才能算是100%完成。

我跟过一些WEB/iOS项目的视觉还原，觉得「沟通」最重要。

沟通可分为3个阶段：

视觉定稿前的沟通，正常的项目管理中，视觉稿除了要给产品、策划确认之外，还需要和技术沟通确认。把全部页面都和技术过一遍，确保你的视觉稿是可实现的，不然视觉稿定稿后技术做了两天跑过来和你说这里做不了那里做不了，你又要返工修改视觉稿，还要再次和产品、技术确认，这样太没效率。一般视觉还原偏差大的地方往往是动画效果或是一些像素级的视觉呈现，比如iOS端有个加入购物袋的动画，如果你只是口头和技术说点击「加入购物袋」按钮后会有个圆形飞进购物袋的ICON，那后期技术实现出来的效果90%不是你想要的效果，因为技术不知道这个飞的弧线是怎么样的，不知道圆形在飞的过程中有没有大小的变化，不知道需要设定多长时间飞进去等很多细节问题。

你要多站在技术的角度去思考，单凭口头表达他们肯定是无法准确理解视觉的意思，他们需要的是一份直观的动画演示视频。在这里只是举一个动画的例子，实际工作中会遇到很多不同的复杂的页面，你只要把技术想象成一个完全不懂设计的小白然后该如何让他明白你的视觉稿该实现成什么样就行了。

前期的视觉稿和项目组相关的上下游确认后，就该做一份详细的视觉规范和页面标注了。

视觉规范可以理解成视觉和技术之间的书面沟通，越是复杂的大型项目就越需要一份视觉规范。原因有二，其一是大型项目会有好几个技术来同时实现页面，视觉规范可减少沟通成本。其二是详尽有效的视觉规范可以标出细致的视觉状态供技术参考。

至于页面标注，确实是挺让视觉设计师头疼的，这本身是一个很无趣的工作，但是多大情况下还是要花时间去做。至于标注的详细程度，则取决于技术对PSD、视觉的理解了，我遇到过对视觉完全没概念和对PS完全不懂的技术，当时我没标得很仔细，最后还原出来的视觉页面连我都不认识，可以想象后期的跟进有多累？遇到这种技术你就老老实实仔仔细细的标注吧，视觉还原程度取决于你的标注详细程度。

我还遇到过对视觉有一定理解，PS操作也比较熟悉的技术，像这样的技术就比较省心了，只需要大体框架标一下，然后把PSD给他就行了，他会自己去测量间距、色值、字体、字号等，最后技术首次还原的效果至少都80%以上，剩下20%就自己跟进一下就好了，不太费心。

后期的视觉还原跟进最重要的是要有细心和耐心。

技术初步完成页面实现后，就得靠视觉主动去跟进还原了。

如果是在小公司，可以买饮料和零食坐在技术旁边，对照着视觉稿一一修改。

如果是在大公司，一般都会有项目管理平台，需要把看到的视觉问题记录在视觉BUG文档，提交到平台上，技术会对照着文档来修改，一般这种视觉修改会有2次以上才能还原到视觉稿95%的程度。

这个视觉跟进的过程中极其需要细心和耐心，缺一不可。视觉设计师的细心程度要达到像素级才能高度还原，如果你不够细心，每个页面都有一些元素偏移几个像素，那全部页面会有很多出入。如果你不够细心在测试环境下逐一测试不同的状态页面，那很可能到上线后你才发现有些页面的视觉还原有重要的问题。还有，你需要耐下心来把检测到的视觉BUG写进文档里，提交给技术。视觉BUG多的时候可能会写好几十条，够写个半天了，没耐心还真不行。