本文，我们将讨论4个具体问题，你可以在打开设计软件之前询问开发团队，以确保你们能更好的配合以及设计的落地。
问题1：期望以哪种方式交接工作？
我总是喜欢询问开发人员习惯使用哪些程序来交接工作，这直接关系到我用哪款软件来切图标注。
我曾多次见过设计师（包括我自己）对最终交接文档作出充分假设，但是当真正交接工作时，不得不返工。当你完成设计并开始开发时，发现不得不重新保存或重新设计并保存成不同格式的文件。
以下是在开始设计之前需要与开发团队一起考虑和讨论的几个问题和场景。
应该如何准备文件？
他们喜欢把所有文件都放在同一个文件夹里，还是放在不同的文件夹里？
他们是否愿意收到一个分层的源文件，以便他们从中提取图像？
如果是这样的画，他是哪种类型的源文件？PSD？ai，eps还是分层pdf？Sketch？
他们手里的软件版本跟你的是否一样（即他们能否打开它）？
你如何分组和命名这些图层以便他们快速理解并找到图层？
他们希望你从 Dreamweaver 或其他 WYSIWYG 编辑器输出 html 吗？
如果这是你正常的工作流程，请询问他们是否适合他们的工作。10次中有9次他们可能不喜欢这种方法。
从图形界面程序生成的代码通常很丑、没有组织和甚至不可用。根据我的经验，这种方法通常会降低设计师和开发人员的工作效率，因此避免使用图形界面程序生成代码。如果您认为它是一种选择，则应首先与开发人员进行讨论。
是否需要其他说明文件？
你如何计划记录原型中不明显的设计元素？像颜色代码，高度/宽度尺寸，字体，字体大小，间距，Alpha值，悬停效果，动效和其他数据点等事情必须定义和记录，以便开发人员不需要猜测和/或作出假设。
一些有用的应用程序来帮助这个方面：
OmniGraffle。可以很容易地绘制箭头，添加符号和其他关键点解释设计的细节。
Avocode。我从来没有亲自使用过这个，但它可以帮助你从 photoshop 或 Sketch 导出颜色，图像，字体，文本，CSS，尺寸和唯独。可以消除前面讨论过的许多麻烦。
Inspect from InVision。Inspect 是另一种令人惊讶的交接工具，具有上述产品中可用的功能组合，如果您使用invision 进行原型设计，则特别有用。我个人迫不及待地想将这添加到我的工作流程中。
问题2：网站是否会使用前端框架构建？
有许多流行的框架可以避免从设计和开发过程中花费很多繁琐的工作。知道开发人员正在使用哪个（如果有的话）对于正确设置您的设计文档至关重要。
许多流行的框架如 Bootstrap 和 960网格 采用12列系统。为什么12列？12是保证可分割性的最小数字。您可以有12,6,4,3,2或一列均匀间隔的列，这让你在处理这些限制时可以更轻松地进行设计决策。
根据这些框架的结构来自预先设定的维度。清楚框架的所有数值，从开始 - 全局填充，列宽度，装订线宽度到媒体查询断点。
我的设计中生产中断，因为我在 SKetch 板上设置的边距比 Bootstrap 中设置的边距大5px。这对任何人来说都没有什么乐趣，因为设计必须重新配置，然后记录下来解决一个本来不存在的问题。了解该网站将构建在哪个框架上，并找出它如何转化为您的图形布局软件的画板或画布。
“从一开始就知道你的框架尺寸的价值。”
除了网格之外，许多框架都带有内置的设计元素，如按钮、表单工具、提示等等。如果你想修改或者覆盖这些预设风格（我比较建议你把它们修改成适合你们的品牌）确保你的开发人员都知道这一点。
几乎每次我设计的输入表单，都具有特定边框颜色、半径和宽度，开发人员还是会使用框架默认值，因为我没有明确指出修改。
不要指望开发人员注意到你为达到更友好的感觉为按钮精心选择的2px边框半径差异。他们没有接受过这样的训练，但他们可以像机器一样遵循说明文件。
一些最流行的框架：
Bootstrap
Foundation by Zurb
Pure by Yahoo
Skeleton
Semantic UI
…还有更多
在开始设计之前知道你应该清楚开发人员喜欢哪种框架。
大多数框架都有模板资源，你可以轻松通过设置使其与 Photoshop 或 Sketch 文档完全匹配。这会让每个人的生活更轻松，所以请使用他们！
问题3：哪些语言和库构成了开发环境，具有哪些限制？
即使你不知道如何自己编写代码，你也可以找到一个好的部件或插件。代码片段随时可用 - 它们使您的网站的功能比过去几十年更加便捷。注意：插件并非一成不变。
如果你尝试为网站找到预先构建的小部件，那很好，而且通常很有帮助。但是，你之前需要做的是找出要在其中搜索的语言。
“在开始设计之前知道你的开发者喜欢哪个框架。”
每个插件或小部件都是用作者选择的特定编码语言编写的。很多时候，一个小部件或插件的编写语言与网站所在的语言或环境不匹配，正如你可以想象的那样，这会导致问题 - 至少会导致开发人员脾气暴躁。
如果你的网站在 PHP上运行，那么 Ruby 里的天气应用程序将无法工作。一个 WordPress 的幻灯片插件不会在一个建立在 .net 中的网站上实现某些功能。角度加载条模块在使用 backbone.js 的站点上不会起作用，尽管这两个模块都根植于 JavaScript 。
如果你找到的小部件和开发环境相匹配，可以用它作为解释你期望团队行为的案例。你的开发人员可能会选择完全按照原样来实现它，但是向他们提供一个包含代码的 zip 文件并要求他们“弹出”，就像让客户端向你发送一系列100px 宽的缩略图并要求你“创建一个那些大幻灯片。“这是放肆的，不可能实现的。
问题4：我们需要支持哪些浏览器？
好的，你可能知道，如果你遇到过开发者，你可能知道 Internet Explorer 是他们存在的祸根。
幸运的是，在整个设计和开发社区中，过去困扰在线创作者的浏览器差异正在迅速缩小到一小部分违规者。即使微软已经放弃了 IE 浏览器，现在正在所有新计算机上发布新版的，友好的标准。
了解你需要支持的传统浏览器可以显着改变你的设计决策。以下是一些旧版浏览器无法支持的CSS属性列表。看看你是否注意到了一种趋势。
Border-radius: IE8
text-shadow: IE8, 9, Firefox 2, 3
box-shadow: IE8, Firefox 2, 3
RGBA (color transparency): ie8
Flexbox (more on this later): IE8, 9. Needs adjustments for older versions of Safari and Firefox
Multiple backgrounds: IE8, Firefox 2-3.5
SVG: IE8 (many others for specific things)
CSS Animation: IE8, 9, Firefox 2-4, Safari 3.1 – 3.2
CSS 2D transforms (rotation, scale): IE8, Firefox 2, 3
Media Queries: IE8, Firefox 2, 3
如果你发现必须支持 IE8 或极其旧版本的 Firefox 和 Safari 时，请考虑如何在没有附加效果的情况下显示元素。你所有的圆角都是正方形的，动效是静止的，阴影不可见等。
希望这些问题能够帮助您在设计流程开始时与您的开发人员建立清晰的沟通渠道。提前知道约束有助于提供一套“规则”来进行设计和正确决策，可以解决设计和开发阶段之间发生的许多问题，即使不是大多数。
