视觉设计师怎样让前端100%实现设计效果?

所有的项目和产品都会有开发计划，虽然很多情况下计划总是赶不上变化（需求变更啦，上线时间提前啦），但是大体上每个开发人员对自己所负责的部分有自己的优先级排序。在我所做的产品和项目中，研发人员大部分情况下的关注度是：功能实现>效果实现。这个时候其实更重要的是统一对优先级的认识。

如果开发计划已指定，同时研发人员也认可交付时间点，那么在开发任务内的计划，视觉设计师撒泼打滚躺地卖萌，晓之以情动之以理，怎么打动前端工程师，网上也有很多同仁的经验技巧，总是能实现的。

设计的实现，不仅仅是前端工程师的工作，有时候也需要后台的配合，想要实现，那就得给咱们工程师时间，不能又想马儿跑，又不给马吃草吧？

同时设计和程序是息息相关的，有时候并不是不想实现这样的设计，而是因为确实有一些问题，比如说在 Digg 还流行的那段时间，他们的首席设计师和首席程序员之间的争论：

丹尼尔·博卡（Daniel Burka）（Digg 的首席设计师）和乔·思汤普（Digg 首席程序员）之间有一场非常著名的争论。那个时候丹尼尔想要在 Digg 的「按钮」上做出一次设计上的变动。对于丹尼尔来说，这个变动就是微小的一点；但对于首席程序员乔来说，即便设计上微小的一点变动都会对整个网站的响应时间产生巨大的影响。为了适应这一点点的变化 Digg 网站必须提升自己的处理效率，改善服务器的内部架构：http://tech2ipo.com

所以在我们团队做一些设计咨询项目时，会把技术人员引入进来。

沟通不到位

切好图，标注好。

用对方听得懂的语言。前面说了很多视觉设计师并没有技术基础，但是理解一些术语对于和程序员沟通是非常有效的。比如说动效里有很多，你说了半天「从这里到那里」，「速度稍微慢一点」，可能也很难做到你想要的那种效果。但是如果你说，这个动画的 Tension（拉力） 数值，Friction（摩擦力）数值，cubic-bezier函数是多少，那程序人员相对会比较好理解。

可以参考这个网站，找到很多动画效果的名称： Form Follows Function

不断跟进。设计给完图之后不能不闻不问，等到代码写完后才傲娇地说：“哎呀，没按我的设计效果来”。确保设计效果的实现也是设计人员的职责，建立 Bug 文档，贴图对比，描述清楚，因为并不是每个人都是像素眼，对美的认识也不一样。

总结一下

过程：沟通—>设计评审—>交付设计图—>再次沟通—> 跟进追踪

每一份工作都不是看上去的那么简单，设计不仅仅只是个画图把东西变得好看些的人，程序员也不只是写写代码（在我们团队的一些项目中，很多设计不合理的地方都是程序员指出来的），最重要的相互间的沟通和理解。

其实我建议能修改下这个问题的说辞，什么叫「是怎样让前端工程师100%实现设计效果的呢」，这并不只是前端工程师的工作，不是「怎么样让人去实现的」，而是「怎么配合」的问题。