毫无疑问，设计人员和开发人员之间存在着不可避免的设计交付工作，设计和开发的沟通优劣会直接影响一款产品的好坏。完美的设计交付必然是产品迈向成功的一个里程碑，然而在实际的工作中，设计和开发的交付却存在很大问题，沟通难、协同难、设计意图被误解的问题困扰着很多设计团队。

但其实，这些问题是可以很好解决的，我们一起来看看设计和开发之间究竟该如何协作。

1. 邀请开发人员参与设计流程

在项目最初就该意识到这一点，设计需要开发的加入。想想你的团队，是不是也是这样呢？项目的设计往往缺乏开发人员的参与，这就像是在前进的路上直接走了翻墙的捷径路子，埋下了一颗苦果。

为什么开发人员需要参与设计？其实很简单，团队需要更多的人（参与产品却又专业不一样的人员）来确认设计的可行性问题以及探讨潜在的问题。要确定设计的可行性以及产品的发展趋势并不容易，仅靠单个部门就能全权决定风险太大。

比如说，有时你在其他地方看到的那种复杂的交互元素其实也就是开源库的一部分，而且实行起来并没有看上去的那么复杂。但往往很多时候，一些看起来很简单的东西反而会让这个整个项目从头开始，因为调子可能是错的。开发人员的加入可以很大程度的解决产品设计定调误区的问题。

此外，开发人员参与早期设计，还可以在创建设计时就开发并使用一些设计元素。这个也可以看做是一种最早期的反馈，有利于开发理解设计，并发现真正有价值的东西以及潜在的问题。

2. 使用正确的工具

能百分百做到“浏览器兼容性”的工具其实并不多，为了提高效率，建议使用专门的工具，比如网页设计，就可以选择诸如Adobe Illustrator或InDesign等工具，它们也是许多设计师在使用过程中感到最舒服的工具，但这些工具并不是为了创建Web用户界面，建议不要以这些格式向开发人员提供文件，而是提交Adobe Photoshop或Sketch文件格式（开发人员更倾向于你使用后者）。

3. 进行良好的档案管理

选择了正确的工具后就进入最要紧的设计环节了。对于开发人员而言，解码设计师的设计文件系统并不是一件好玩或者轻松的事情，所以一定要使用常用技术和文件管理，以减小设计师和开发之间的“语言差异”。

就目前来看，使用Photoshop做设计还是最大的一个现状，因此使用无损技术（如图层样式）非常重要。（无损文件可以让开发人员在不更改原始信息或图层的情况下进行更改。）

小Tips：

要记得创建图层蒙版，有利于单独编辑或变换形状和蒙版。

将矢量元素导入为智能对象，有利于维护原始文件的属性。

4. 合理使用设计插件

用于Photoshop和Sketch的设计插件可以增强设计工具的功能，同时使设计开发过程更加顺畅。现在的设计插件可以说是数不胜数，选择太多反而容易不知道如何选择？别急，这里有几款精选插件：

Photoshop插件：

Duplllicator：克隆图层或组并支持移动。（非常适合制作小元素或按钮的副本）

GuideGuide：这个小工具可以让你更轻松地使用设计指南，并从过程中消除一些不便的地方。

Perspective Mockups：此工具可以更改透视图并在实际界面中查看Photoshop设计。

PSD Cleaner：如果缺少文件管理，此工具可以帮助切换到之前清理过文件。

摹客iDoc：支持智能标注，一键切图，交互原型。

Sketch插件：

Dynamic Button：可以为随内容更改而变化的按钮创建自动换行和样式。

Sketch Measure：此工具可以以快速且易于管理的方式将你的设计转换为样式指南。

Sketch Palettes：可用于保存和加载颜色的调色板管理器。

Sketch Toolbox：号称Sketch插件必备。

摹客iDoc：支持智能标注，一键切图，交互原型。

真的不要忽略插件的使用，一旦你使用得当，简直就升级加速的必备神器，有时候往往需要消耗大能量的问题，小小插件瞬间搞定，比如说，iDoc插件，对于交付最繁琐的标注和切图，就可以自动搞定，之所以拿这个插件示意，是因为它同时适用于Sketch和Photothsop，甚至Adobe XD和原型图（Mockplus、Auxre、Justinmind）也可以支持。

智能标注，解放双手

智能切图，一步到位

交互原型，动效迷人

全新状态图

状态图，即在一个页面中上传多个副本，保留不同的状态。

状态图是我个人最喜欢的，在做原型的时候，经常遇到只想切换按钮状态，并不想复制多个画板的情况，比如“开始游戏”、“暂停”、“重新开始”这种。可现有的工具都需要复制画板来表达多种状态，这就让人有些头大。现在介意很好的解决这个问题了，iDoc状态图都可以快速实现，还提供切换、轮播各种方式。

5. 开发和使用网格

现在已经有很多不同类型的网格，网格是一种通用语言，可帮助设计和开发人员高效交流，比如空间，透视和宽高比如何设置和显示。

建议设计中加入网格，这里推荐Tuts +类型，是我比较倾向的。

6. 组织文件

设计交付最重要的目的之一是让开发人员能够理解设计者的设计意图。良好的文件管理就很有必要了，即将文件夹结构组织成具有描述性名称的逻辑子文件夹和图层。 （如果命名为文件夹1，图层1其实是没有任何作用的，必须以其中包含的内容标记命名，例如Home Button。）在分组文件时考虑HTML结构，这会使设计稿看起来更合乎逻辑。

记住：每一个图层都要命名。

颜色代码、图层名称和文件夹添加前缀以暗示交互性，例如悬停状态。这个视觉提示对开发人员非常有用，因为开发要筛选数百或更多的图层，很容易错过某些东西（特别是隐藏层）。

最后，记得删除未使用的图层。

7. 准备交互元素

如果你认为你可以直接向开发人员提供PSD文件，那就错了。每个图像，插图，字体，颜色样本包括图标也需要准备好。如果没有这些信息，你的设计稿一定会被退回来。

单独整理所有高分辨率图像文件，并以3倍于你期望的分辨率注明。

字体也不要忘记。虽然你可以在技术上使用任何具有Web使用许可证的字体，但重要的是要认识到字体是一种需要与其他所有内容一起加载的大型文件类型。否则，请考虑使用基于Web的通用工具，如Adobe Typekit或Google Fonts。在Google字体和Typekit之间，你也可以选择数百种高品质字体。

准备一个包含所有已批准副本的单独文档。文本文件可以让你轻松返回并查找某些文本元素，并根据需要进行复制和粘贴。

为开发人员制作PDF证明。开发人员可以打印出来，用于做笔记或在整个过程中进行可视化引用，还有助于确保开发人员看到你的全部设计。（也可以随意做笔记。）

将文件托管在可访问的位置。虽然你可以将所有内容通过电子邮件发送给开发人员，但文件还需要公开出来，以便团队中的每个成员都可以随时访问他们需要的任何内容。可以选择 Dropbox或Google Drive，开放访问权限给团队的所有成员。

除了免费使用以外，你也可以通过升级码获得升级体验插件和设计工具，感受更加高阶的功能体验。

福利

福利一：前往

https://idoc.mockplus.cn/get-idoc/?hmsr=uicnn，注册后输入福利码 uicnn，免费升级iDoc高阶版，解决设计最后“一公里”的技术对接。

福利二：前往

https://www.mockplus.cn/user/upgrade, 注册后输入激活码Mockplus2019，领取Mockplus专业版。

工具的使用时希望最大化的帮助你解决设计问题，让你不断地释放更多的时间和精力，投入到更有价值的研究上面。

以上就是我的一些经验总结，希望大家喜欢。