设计师与开发工程师的配合

图片发自App

ui设计师如何让开发心服口服

笔者在初期做ui设计过程中，经常被开发找，有时候是设计稿颜色、字体不统一，交互方式不清晰，文件更新不同步，版本变动考虑太少，导致经常需要请开发喝咖啡。

在markman时代，我们自己的设计标注都很乱，开发也不愿仔细看，后来就凭开发感觉写代码了，最后做出来的东西是“开发的设计”。

后来有了sketch，没有重要情况不需要标注了，设计师从美工脱离出来，这时候设计稿的统一性就非常重要了，如果首页字体颜色还是333333，进入二级页面就是303030。这种情况不要怪开发做出来的东西不能看。在设计的源头没有做好，这是最差设计师的做法。

随着工作的深入，开始学习md design的组件库的做法，在昨晚设计稿后，把设计共同的元素提取出来，保证这些控件、模块可以复用、颜色字体统一标注，开发看后也会一目了然。

在最基本的做好之后，我开始思考开发工程师的实现逻辑。工程师在搭建一个页面的时候，会先去架构布局，一块内容一块内容划分好，接着填充进内容，最后来修改视觉的样式。所以我也按照这个顺序，先开大每个模块的间距，字体和颜色，布局标注，样式标注和距离。再一次改版时间后，开发群里给了一阵好评。

总结下，做完设计稿后，输出给开发的是：

1、设计总稿sketch和png

2、设计标注稿，设计标注稿要包括：（摘）

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

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

（3）视觉样式：字体、字号、行高、颜色、透明度、圆角等

举个例子：

图片发自App

标注信息分类之后，给标注本身设置共享样式：块面通常用蓝色的遮罩，区别不同百分比时则用红黄绿的遮罩，数字间距用红底白字，视觉样式则用蓝底白字。

这样的好处是：对于设计师，可以快捷修改所有标注样式；对于工程师，快速建立对这套标注视觉语言的认知，明白不同颜色所代表的信息属性，更方便的找到所需要的信息。

3、组件库

设计实现之前，就和工程师们一起统一一套样式规范，除了常见的颜色和字体之外，把通用的 UI 组件拿出来，一半是针对系统原生控件的样式定制（alert/toast/radio btn/switch…），一半则是完全自定义的 UI 组件（产品自己的 UI kit）可以是任何会高频复用的产品功能性的东西，比如这里的 SKU 选择器和按钮。

在项目进程中，甚至会和工程师们沟通好，然后在每个组件旁写上这个组件是谁正在实现或已经实现，附在项目共享文件或者邮件里，避免重复劳动。

统一标注的好处不仅是我们自己在后续的设计中可以复用和遵守， 对于 web/iOS/Andriod 的工程师而言，也能提高代码效率同时保持不同平台最终效果的统一，后续迭代的时候也不会出现莫名其妙的样式和代码。如果遇到产品的大版本更新，也正好趁此机会和工程师们一起好好梳理一遍现有的样式，清除掉不再使用的样式，指定好新的层级。

图片发自App

以下是一个牛的标注，我觉得开发一定很爱他，转到我日记里了：

图片发自App

图片发自App