• 设计师如何巧用工具整理文档和稿件并完美交付给研发？
• 设计师如何保证研发拿到我们提供的文档后能真正能落地开发？
• 设计师如何避免研发反复询问，造成不专业的印象？
• 设计师如何提升研发查看文档的效率进而提升开发效率？

是不是有点熟悉的亚子，有没有被研发追着问的恐惧感~~下面的文章就来解决这些问题。

本篇文章是一篇实用型极强的文章，会从体验设计的角度，将工作中需要交付给研发的文档（交互文档和高保真界面）的落地的细节一一叙述，希望对你有所帮助。

需要说明一点的是，因为我的工作包含交互和UI部分，所以下面的文章内容既包含交互部分也包含UI部分。

大纲👇

1、用什么工具？

2、高保真图如何交付？

3、交互说明如何交付？

一、用什么工具？

我是个工具狂魔，能用工具就绝不用…脑子，我觉得大脑应该拿来处理更有意义的工作，至于琐事和普通记忆的话，还是工具更靠谱！我尤其推荐在线工具，即使我用的一些在线软件出了桌面版，我也几乎没用过桌面版，因为…我爱网页版。

为啥网页版这么好用？

因为敏捷。

我的习惯是将所有常用的网站都收藏到谷歌标签，同时分组管理，这样不管在家还是公司都能随时打开，太方便了！

部分谷歌标签👇

所以下文我推荐的工具都是在线工具，同时我更推荐使用网页版，速度是绝对流畅的。这四款工具分别是：摹客、石墨文档、iconfont、processon。

1、摹客

摹客是一个设计师与前端的协作工具，设计师将设计稿传到摹客，前端可以查看标注并且可以使用部分代码。听起来是不是很耳熟？其实它和蓝湖是竞品，这类工具目前国内最火的应该是蓝湖，我身边好多设计师都用的蓝湖。不过我还是推荐摹客，起初我们公司也是用的蓝湖，后来换了。

为啥放弃蓝湖而使用摹客呢？

因为它不免费了，十个人以上要收费，成本太高…

但是这不是主要原因，我在蓝湖开始收费前就已经转移阵营到摹客了。

主要原因有以下几点：

第一：蓝湖树结构华而不实

当我的画板有上百个的时候，蓝湖的树结构可以说是累赘了，节点高度太高，好看是好看了，就是…不够紧凑，鼠标和视线移动距离大，效率不高。

节点高度太高👇

第二：蓝湖标注体验差

在蓝湖中研发查看标注的流程是：点击红色小圆点→查看标注→关闭小圆点→查看下一条标注……

这样一条条点击查看也太崩溃了…尤其是我还会用标注来写交互说明，这样的小红点简直是灾难。

蓝湖的标注小红点👇

所以我推荐摹客。

虽然人家没蓝湖好看（现在好看多了），部分体验也还在完善，但是好不好看我不是很care，好用就完事儿了~而且最重要的是，摹客的树结构和标注功能就让我无法离开他了。标注不仅全部显示，而且可以改变颜色，我们个公司一般UI和交互标注用黄色，接口标注用蓝色。

摹客把所有标注展示出来，方便一眼查看👇

2、石墨文档

石墨文档是一个在线协作的文档工具，他们的宣传语是“文档实时协同 · 知识沉淀管理 · 数据安全可控”。我主要使用它的第一个卖点：实时协同。

它的优点是可以分享一个链接给别人，对方无需登录就可以查看和编辑，这个体验真的很不错，很多时候我需要将文档发给客户看，这样的在线文档是我的首选，对方既不用登录又不用下载。

对研发的交付场景中，石墨的角色主要是辅助说明，比如动效文档，当某个地方需要动效演示时，语言略显苍白，一份包含GIF图的动效文档则能够更好的表达。文档植入也很简单，直接在摹客标注一条链接即可。研发点击就可以查看，十分方便。

附上动效说明文档的链接👇

3、iconfont

iconfont应该是UI设计师绕不开的一个工具，交互设计大概率不用。

iconfont是一个海量的图标库，我们拿来干啥呢？我们主要拿来和研发进行图标协作。官网的说法是iOS、安卓和web端均可使用，但是我的实际工作中iOS和安卓研发同学都使用的切图文件，只有web端和小程序研发会用得到。但是它们的制作过程是一样一样的。

web、安卓、iOS均可使用👇

iconfont图标制作过程：

· 绘制图标

注意需要轮廓化图标，否则无法上传，iconfont有详细的制作教程

iconfont教程：https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d68c573b2&helptype=draw

· 上传图标

在iconfont个人中心新建项目，点击下图上传图标按钮后上传图标。

· 添加人员

项目创建后可以添加人员进入项目，如果添加设计师，可以设置为管理员角色；如果添加研发，可以设置为协同人角色。

需要注意，添加人员时必须输入昵称才能检索到对方。

最后，研发就可以愉快地使用了，由于iconfont字体图标是矢量图标，所以不会造成模糊的情况。

4、processon

这是一个类似于xmind的绘图工具，但不仅仅是思维导图，流程图、组织结构图等都能绘制。

种类繁多👇

优点是流畅，虽说是网页版，但非常流畅。缺点也有，需要付费使用，免费版只能绘制两三个图。为啥不用Xmind呢？因为没有在线版，本地版本不方便多地查看，所以只能放弃本地版。

我主要拿来绘制思维导图和流程图，有一说一，流程图自带样式有点丑，不过……能接受。

工具介绍完毕，总结一下：

摹客：上传设计稿、交互说明标注、研发查看标注【免费的够用】

石墨文档：辅助说明【免费的够用】

iconfont：研发使用字体图标的工具【免费】

processon：好用的脑图和流程图绘制工具【付费159/年】

二、高保真图如何交付？

高保真交付我主要分为三个部部分来说明：交付步骤、高保真图整理和切图技巧。

1、交付步骤

当我们做完高保真图后如何交付给研发查看？这时候就要用到上文提到过的工具了→摹客。

具体的步骤是👇

设计高保真图→将图上传到摹客→邀请研发加入项目→研发查看

只需要到摹客官网查看教程就能了解具体用法了，这里就不赘述了。

我想分享几个值得注意的点：

1）建议将研发设置为“协同人”而非管理员

摹客的协同人只能查看而无法编辑，这样可以避免研发误挪动画板。

2）设计尺寸的宽度：1倍图使用375，二倍图使用750

几乎所有公司都是一稿适配安卓和iOS，而375的尺寸不管向上适配还是向下适配都能较好地适配，不仅如此，研发同学使用的很多框架也是以这个宽度来搭建的，如果我们修改成其它宽度 ，那么研发可能会多出很多处理。

举个例子，之前工作中遇到过一个设计师，使用414的宽度来进行设计，导致研发每次都需要手动转换成375后才能使用，严重降低研发的工作效率，实不可取，规范之所以存在的原因就是能够提升大家的工作效率。

2、高保真图整理

高保真图整理主要包含树结构整理和画板整理。

当我们把图上传到摹客后，摹客会生成一个树结构和画板，如果我们不对它们进行整理，研发拿到后将无从下手…

左侧的树结构和右侧的画板👇

我们上传后必须整理好这些文件，既然作为体验设计师，当然要站在研发的角度来整理了，目的就是让他们能够“无脑”操作。如果研发同学经常来问你某某东西在哪里，那说明我们的文档交付得不合格。

1）树结构整理

两个技巧：按模块划分和使用编号命名。

按模块划分

一款产品会包含多个模块，例如首页、个人中心、我的订单等，我们在整理树结构的时候建议按照模块来整理，一来便于理解，二来研发也是按照模块来开发的，方便他们查找。

按照模块划分👇

使用编号命名

使用编号命名可以方便进行页面内引用。

举个例子，我在做交互标注的时候会将跳转目标页面标注出来，方便研发绑接口，如果写页面名称的话，首先效率低下，其次如果有多个类似的页面名称可能会导致研发同学绑错接口，而直接用编号来代替汉字则不容易出错，因为编号简短好识别且唯一，不容易出错。

使用编号对画板命名👇

页内引用👇

2）画板整理

巧用逻辑线与对齐就能对画板进行很好的整理，建议大家可以试试摹客的对齐线，体验很不错~

利用逻辑线整理画板👇

上述的整理方法虽然看起来简单，但是可别小看这些小技巧，画板少的时候我们可以轻松对付，但是画板多了呢？不整理的话就是一个灾难。

举个例子，我之前做过的一个项目，界面一共有185个，不包括个人中心的大模块就有5个。不整理的话，你能想象研发同学查看文档时候的内心受吗？恐怕是一万头草泥马奔过了……所以时刻记得，我们是体验设计师，需要时刻记得“与人为便”。

一共185个页面👇

3、切图技巧

可别小看了切图，合格的切图应该是不多切也不少切。那么为什么会出现多切少切？

因为切图的时候有些简单的元素无需切图，研发可以自己写，有些元素看似简单却需要我们切图，于是切图时判断失误则可能多切或者少切。

1）如何判断是否需要切图

拿按钮来说，什么按钮需要切图，什么按钮不需要切图？

不需要切图的按钮：纯色的规则形状的按钮、有规律渐变的规则按钮

不需要切图👇

需要切图的按钮：异形按钮、不规律的渐变

需要切图👇

如果实在拿不准可以直接和研发沟通，这是最好的办法。

2）如何切图

先明确两个概念：切图尺寸和设计尺寸。

设计尺寸：图标本身的绝对大小

切图尺寸：交付给研发的切图大小

切图尺寸和设计尺寸👇

为什么要有这两种尺寸？

因为手机屏幕的最小可点击大小是22pt（一倍），小于这个尺寸就很难点击（当然，现在屏幕日新月异，这个尺寸也只能作为一个参考），所以我们的切图最好大于这个尺寸，但是很多地方的图标不能设计得太大，不然会不好看，所以视觉上小于22pt同时又可点击的图标，我们在切图的时候切大一点就好了。

3）切图工具

因为我用sketch设计，下面主要说一下sketch的切图方法。XD我也研究过，它目前只能用自带的切图工具切图，至于PS，也有切图插件，可以上网搜一下，但是不建议用PS设计，有点大材小用了，对于用来设计界面有点笨重。如果无法使用苹果系统最好还是使用XD设计，相比PS轻便很多，不过我觉得还是比不上sketch的，sketch好歹迭代了这么多年，现在它的组件管理系统做得很棒，非常建议体验一下~

sketch设计切图：

如果使用sketch设计的话，建议使用插件sketch measure进行切图。

（下载链接https://oursketch.com/plugin/sketch-measure）

之所以不建议用sketch自带的切图工具，是因为它不太好用（都迭代了这么多次了切图功能竟然还这么不好用……）。

sketch自带的切图工具怎么不好用？

如果使用切片工具进行切图，你会发现切出来背景不是透明的，而是白色的，导致很多图标没法用。

背景不是透明的👇

而如果使用导出项来切图，又没有切图的标识（虚线），图标多了无法分辨哪些切了哪些没切。

导出项切图后没有切图标识（虚线）👇

所以，sketch自带切图很鸡肋……还是使用插件sketch measure吧。

三、交互说明如何交付？

终于到了交互说明板块，这部分包含流程图和交互说明两方面（没有包含高保真，因为上文提到过）。

1、流程图

流程图能够帮助研发理解业务，所以流程图必不可少。如果没有流程图只有页面跳转说明，那么对于整体的业务理解就会大打折扣。

绘制流程图的方法有很多，一个原则：让研发看懂。至于流程图的细致程度没有统一的规范，具体情况还得结合实际工作情况，多看多问多沟通，前期不要怕犯错，要勇于犯错，然后改错以后不再犯。

举个流程图例子，我做过的一个项目里有APP的登录流程，我只把流程和基本的判断画出来，让研发对流程有大概的了解，其它细节会在具体的页面详细标注，这就足够了。

手机号登录流程👇

流程图怎么交付给研发呢？

我的习惯还是上传到摹客，具体操作步骤是使用processon绘制流程图，将流程图截图后粘贴到sketch画板中，然后将画板上传到摹客，命好名，然后在对应的页面做好标注引导，方便研发查看。

听起来有点麻烦，但是其实是非常简单好操作的方法。

2、交互说明

交互说明的作用是告诉研发如何对页面的元素进行交互以及交互后如何反馈。我们需要把页面中所有含交互的地方都详细地写出来。必要时辅助文档说明（比如动效文档）。

下面将从如何标注以及标注注意事项来叙述。

1）如何标注

我的习惯是直接在摹客中使用标注功能进行标注。

使用摹客标注功能直接在画板上标注👇

这样做的好处是简单明了，对于敏捷开发的团队来说，这样直接的标注能够提升开发的效率。甚至还可以标注接口，我目前所做的项目就是这么做的。

我向好几位研发了解情况后，发现他们都不喜欢看长篇的文档，也不喜欢看原型，喜欢直接看着高保真做。针对这一情况直接在高保真标注交互说明和接口信息能够极大提升效率，减少不同文档的切换对照，是一个很不错的方法。

2）标注注意事项

我们在进行标注的时候也要注意阅读人的阅读体验，人们更倾向于阅读段落文字而非一整段内容，所以标注的时候有以下建议：

注意换行、分点描述、明确的指示、辅助链接

注意换行：换行能够帮助阅读和理解

分点描述：使用1、2、3…的分点描述方法，提升表达逻辑性

明确的指示：上文提过将摹客的树结构使用编号命名，这里就派上用场了，例如一个按钮，点击后跳转到另一个页面，这时候“点击去 A-1 ”比“点击去商品详情页-用户评价”来的准确，也方便研发快速寻找，检索字母比检索文字更快。

分点描述👇

辅助链接：当我们需要辅助文档来说明某一个地方的交互时，我们可以辅助链接来补充说明，将在线文档的链接附上即可

辅助链接👇

以上，就是本次全部内容，其实交付的思维就是站在接收我们交付文件的人的角度看，如果觉得这份文档足够清晰，那么就可以，否则就需要完善。另外多看多问多沟通~

如果觉得对你有帮助，点个赞吧~