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

这也是提升效率和整体视觉和谐感的重点，你要在大框架下建立小体系，这是你展示自己个性的部分，记得也要用文档记录下来，在以后的改版和开发过程中，严格遵守规范的参数，减少沟（si）通（bi）成本。

例如：主色色值、按钮的大小边框、各文字类型颜色大小、模块间隔距离等等。

请看这个：@souhlin采集到设计规范(76图)_花瓣UI 交互设计

四、学会怎么切图

我一直认为做完PSD还是SKETCH文件，往开发那边一扔，任务搞定的想法，是相当不负责任的一种行为。因为设计不合理的部分导致导出切图的工作变困难，因你的烂摊子，开发效率降低，完全是因为你的失误，不要抱怨和找任何借口。

比如水平可平铺的背景是怎么最优化导出的？安卓适应多屏幕分辨率下，点九图是怎么进行标记和拉伸的，应该使用什么工具？需要应用透明背景的图片知道应该使用什么格式？你必须设计出自己独立也能完成切图工作的设计稿，再要求开发能够完整实现，而不是让他们又来找你抱（si）怨（bi）哪里哪里是不行的你得重做。

五、一定要有标注说明

标注的作用何其重要，开发人员对于元素的间距和文字大小还有透明元素的参数设置，是没有耐心一点点查看和检测的（没错，大部分情况会——凭！！感！！觉！！），你不好好把这些制作成文件白纸黑字，那么这个最重要的还原环节上出差错的几率也是最多的，往后修改最困难的。

下面推荐两软件：

马克鳗

像素大厨

用它们做出详尽的标注文件，交付开发，最后如果出现偏差，就有证据可以找出是谁的问题了。

六、结果对比调适

开发完成视觉部分内容以后，要开始校对，那么尽可能给出参照物，参照物是什么呢？

高保真原型

只有同意平台下可运行的高保证原型可以最直观对比设计到实现之间有什么偏差，并以此检查参数设置上的错误，逐个调整。

在这里强烈推荐——Invision在线原型工具。

Invision

可以制作APP和WEBSITE，并分享远程连接在手机和别的电脑上预览，下面放我之前做过一个小项目的实例（最好翻墙访问比较快）：

传送门——InVision

或者PS PLAY，这个请访问官网看详情，也是可以在移动设备直接查看设计文件的工具，不过更适合设计过程中使用，但不妨结尾的时候做对比。

使用教程见：《腾讯ISUX移动终端设计神器：Ps Play！移动设计零阻力》