前期：多方沟通确认

丨原型很重要
视觉定稿前的沟通很依赖原型，在正常的项目管理中，视觉稿除了要给产品、策划确认之外，还需要和技术沟通确认。因为设计师天马行空的大脑会迸发出各种奇思妙想，例如一个看起来酷炫的动画，结果跑到工程师面前，工程师很犯难的表示做不了，或者硬着头皮做到最后也发现不尽人意。

所以在原型步骤就要想好对应的图层结构，交互特效，并和开发人员做好交流，是否可以实现，功能的评估一定要细致，否则会浪费大量的人力成本。

原型图

丨熟悉设计环境规范
在这里提到设计环境是因为如果你的原型不遵循设计规范，那就没有沟通可言。无论是 Web 还是 iOS、安卓等等，都有对应的设计规范文档，如果连最基础的设计规范都不知道就开始做设计，那么你要自己承担项目拖延和被整个开发组人员问责的后果。所以在你动手前，请做好功课，并且在每次环境大升级时跟进关注（例如新的 iPhone6、6+发布的尺寸变更等）。

举个例子，在Web设计下，12 PX以下的中文字体无法被正常显示，文本只支持本地客户端已有字库，iOS的 Tabbar、Topbar 等高度是不能被随意变更任意增减层级等等。这样的稿子如果被交付，并没有强有力的逻辑说服别人，只会让你的团队感受到你的不专业，增加矛盾隐患。

遵循设计规范设计

中期：制定明确的项目设计规范**

前期的视觉稿和项目组相关的上下游确认后，就该做一份详细的视觉规范和页面标注了。视觉规范可以理解成视觉和技术之间的书面沟通，越是复杂的大型项目就越需要一份视觉规范。原因有二，其一是大型项目会有好几个技术来同时实现页面，视觉规范可减少沟通成本；其二是详尽有效的视觉规范可以标出细致的视觉状态供技术参考。

这里推荐一种知友@匡雪婷的做法：

用2个页面解释布局，再用1个页面解释样式

制定规范

视觉稿完成后，每一个页面拿出来放在左边，再用三个画板来说明它。

• 横向布局：解释元素左右的外间距、内间距和横向宽度。（这里要考虑到针对不同宽度屏幕的适配，标注是给固定值还是百分比）

• 纵向布局：解释元素的上下间距和高度。（有时要确保页面里最重要的信息——比如一个 CFA btn——在不同屏幕大小中是否都出现在了首屏，判断标注是向上定位还是向下定位 ）

• 视觉样式：字体、字号、行高、颜色、透明度、圆角。

单独拎出可复用的组件，统一标注

统一标注

至于标注说明更是必须的，统一标注的好处不仅是我们自己在后续的设计中可以复用和遵守， 对于 web/iOS/Andriod 的工程师而言，也能提高代码效率同时保持不同平台最终效果的统一，后续迭代的时候也不会出现莫名其妙的样式和代码。

市面上有很多插件可以帮助设计师实现标注，为避免广告嫌疑这里不做推荐，感兴趣的朋友可以自行了解或者来后台跟丁丁讨论交流心（ren）得（sheng）。

标注

后期：还原跟进、反复验收

开发完成视觉部分内容以后，就要开始校对，这时候就需要尽可能给出参照物，这个参照物就是你的高保真原型。对着高保真原型还原跟进最重要的是要有细心和耐心，视觉设计师的细心程度要达到像素级才能高度还原，如果你不够细心，每个页面都有一些元素偏移几个像素，那全部页面会有很多出入。如果你不够细心在测试环境下逐一测试不同的状态页面，那很可能到上线后你才发现有些页面的视觉还原有重要的问题。

 

综上，「跟进还原能力」对一个设计师来说是很重要的，会做「好看」的设计师一抓一大把，但能做好商业设计，所需的能力远远不止于此，一个不具备将事情由始至终合格完成的设计师在任何时候都是不及格的，从结果导向上来看，甚至不如一个「你认为比你低级很多」的设计师，拥有全方位的素质才是「稀缺物种」。