很多年前我所在团队的设计总监告诉我们：“如果设计师把设计稿做到足够完善，那开发同学看着都会不好意思做不好”。

在我个人的经验和作为设计团队管理者的经历中，不同部门的人员就产品沟通过程中最常见的痛点是发生在设计到开发人员的对接中。

由于以下几个原因，将设计稿件单纯的移交给开发人员时可能很困难：

1. 缺乏技术知识：设计人员可能不具备创建可被开发人员轻松解释、识别、理解并最终实现的模型所需的技术知识。在开发过程中可能会出现误解或错误。
2. 缺乏或过多的细节：有些设计师所创建的设计稿对于开发人员来说不够详实，这就可能给开发人员带来一定的学习成本，甚至难以理解其用意，导致反复的沟通和修改。
3. 不相容的文件-数据：设计师创建设计稿的工具可能与开发人员的工具相互不兼容或识别不出设计稿文件的数据信息，这将直接减慢开发过程。
4. 缺乏一致性：如果没有明确且清晰的需求文档，将会将设计师引向创建一个整体风格与品牌目标不一致的产品设计模型。
5. 不同的工作流 -（工作语境）：开发人员和设计人员可能有不同的工作流和流程，而且他们都已习惯，这可能是的两个群体之间需要更复杂的过程来切换到对方的方式上。
6. 缺乏文件和注释：在设计稿件中如果没有明确清晰且完整的注释说明，开发人员可能会不那么容易理解某些元素，控件背后的设计意图，也就无法按照设计稿来进行开发。这将是沟通成本的一大隐患。

需要注意的是，整个团队的所有成员都专注于产品和用户体验的不同方面，所以开发人员与设计之间发生信息脱节是常见的情况，而大多数开发人员都明白一点：设计稿提供了产品最终的视觉表达，并且可以帮助在其实际开发前识别出潜在问题。

注意下面五个方面的工作，可以在设计师与开发人员进行产品对接过程中减少一些问题的出现，使其整个开发实现过程更为流畅。

1. 解决设计与开发之间的差距；当然这一点上因人而异，因为人之间的认知，知识储备等大有不同。
2. 改善协作和沟通方式，甚至是工具。
3. 将用户体验可视化，使开发人员更容易理解每个页面和功能的上下文和目标;
4. 更有效地计划和执行开发人员的工作;
5. 确保设计和开发工作保持一致和对齐。

此外，构建用户流程对设计师、利益相关者和整个团队也是有重要价值的，因为这种方法有助于未来的工作参考，它们提供了设计和开发决策的视觉历史。

显示内容的各个条件情况。

向开发者展示出内容的各个条件情况对于开发者完全理解产品的预期行为和设计，至关重要。这里的"条件" 指的是正常用户行为之内外的或在系统功能边界内发生的条件。例如，当用户在表单字段中输入无效数据或尝试与禁用的按钮交互时会发生什么？

通过呈现多种条件情况，开发人员可以在潜在问题出现之前预测和解决它们，从而改善应用程序的整体用户体验和稳定性。

以下是在界面中展示不同状态方面的要考虑的：-

• 当用户输入不正确的数据（如无效的电子邮件地址或电话号码）时会发生什么？
• 界面如何处理意外错误，如Internet连接丢失或服务器错误？
• 界面如何处理意外的用户行为，如快速单击按钮或滚动过快？
• 该界面如何处理残疾用户，例如使用屏幕阅读器或仅使用键盘导航的用户？
• 界面如何处理不同设备上不同的屏幕尺寸、分辨率和宽高比？
• 界面如何处理高流量或缓慢的加载时间，以及它如何保持响应和流畅的用户体验？
• 当用户达到输入限制（例如文本字段中的最大字符数）时会发生什么？

我认为在对接过程中展示边缘情况对于创建一个健壮且用户友好的网站或移动应用至关重要。通过查看边缘情况，设计师可以帮助开发人员构建和维护一个符合产品需求和用户需求的设计和功能要求的高质量产品。这一方面在元素状态中也会有所体现（后面会讲到）。

不同的设备及屏幕尺寸

随着移动设备的日益更新，你的web或移动产品在不同设备尺寸的屏幕上展示优良效果已至关重要。设计师想开发人员提供不同屏幕的效果，也同样有帮助。例如一个页面在不同尺寸屏幕下所能展示的内容范围，响应式规则如何表现，各个元素之间的间距是否让浏览过程舒适。

识别和修复与响应式设计相关的任何问题，例如布局或字体大小问题;

不同分辨率的模型还有助于确保界面符合无障碍指南，例如确保文本可读并且按钮足够大，便于轻松点击。

此外，提供一个界面在不同的屏幕分辨率的体现效果来支持开发工作，可以使开发人员能够以更高效和有效的方式测试和实现设计。

State of elements 元素状态

在整个设计文件中所交付的内容里最关键的部分是：每个元素的所有可能状态。

提供元素的状态可以帮助开发人员理解这个UI元素在设计中可能具有的不同状态。

所呈现方式可以是：将所有UI元素都分门别类的放在一个专门页面中，或者作为一组元素放置在第一次出现的那个页面旁边。并且在理想的情况下，添加注释或描述来解释每个状态的预期行为是很有帮助的。如果在Figma中，可以将产品或系统中的通用控件制作成组件变体组来放在设计团队的资源库里，供开发人员参考引用，及其他设计师在同品牌下的产品里复用该控件。（关于从控件到组件的制作选定问题我会另写文章来讲。）

以下是一些基本元素所要展示的不同状态示例：

1. 按钮：正常、悬停、激活和禁用；
2. 表单字段：正常、焦点、错误和成功；
3. 文本：正常、悬停、激活和禁用；
4. 图像：正常、悬停和激活；
5. 模态框：打开和关闭；
6. 选项卡：正常、悬停和激活；
7. 下拉菜单：正常、打开和关闭；
8. 加载器：加载中和已加载；
9. 滑块：正常、拖动和释放。

关于状态类型，同一元素可能因设备或产品目标的不同而在命名或状态上有所差异。在这种情况下，需要与开发人员沟通，明确每个UI元素的确切状态。

通过提供元素的不同状态，设计师可以帮助开发人员了解UI元素在响应不同设备类型的用户交互时应该如何行为。这些状态有助于创建动态且交互式的用户体验。

现在许多公司会共享他们的设计系统和UI工具包，这有助于理解屏幕上每个元素可能的类型和名称。同时可以用来学习和参考，用于指导设计团队话语权较弱的公司开展设计工作。

细节问题：Spacing, inset, offset 间距、插入、偏移

仍然很难读懂对方的想法，所以这是设计师和开发人员通常面临的另一个问题。在设计过程中，设计师可以对一些元素在不同屏幕尺寸上有不同行为有所设想。原因是不同的背景、截然不同的任务，以及他们解决问题的经验等等。

开发人员应该注意稿件中的间距、插入和偏移，因为它们在确定用户界面的视觉层次、平衡和整体设计方面起着重要的作用。通过理解这些概念，开发人员可以确保他们的实现与预期的设计相匹配，并在不同的设备和屏幕尺寸之间保持一致性。此外，对这些元素有深入了解使开发人员能够在进行更改以改善用户体验时做出明智的决策。

设计人员应向开发人员提供有关间距、插入和偏移的以下信息：

1. 用于间距、插入和偏移的测量单位，如像素、dp或rem；
2. 每个元素的大小值，包括边距、填充和其他空白空间的大小；
3. 不同元素之间的关系，例如应该对齐哪些元素以及它们之间的间距；
4. 使用特定间距、插入和偏移的原因，以及它们如何有助于整体设计的论据；
5. 关于元素在不同屏幕尺寸和方向（如桌面或移动设备）中的外观和行为的上下文。

通过提供这些信息，设计人员可以确保开发人员清晰了解设计意图，并能够在最终产品中准确实现。

Icons 图标

图标的切换也是由于几种方法而导致的最常见的痛点，但在一开始设计师和开发人员之间通过沟通，所有这些问题都可以得到解决。适当将图标交给开发人员确保了网站或移动应用程序设计的一致性和准确性。不正确的图标文件或缺少规范可能导致不一致或不正确的呈现。正确的图标切换有助于实现内聚性和视觉吸引力的设计。

以下是一些建议，可以使设计师更轻松地传递图标的过程：

1. 以首选格式导出图标（例如SVG、PDF、PNG或基于字体的图标系统）;
2. 提供清晰的网格和尺寸规格以保持一致性;
3. 以标准颜色提供图标，并为任何变化提供规格;
4. 将图标组织成一个逻辑集合或系统，并有明确的命名约定;
5. 为可访问性提供指南，例如为屏幕阅读器添加替代文本;
6. 提供CSS代码片段或使用工具，如Sketch中的Symbol sets或Figma中的Icon库;
7. 考虑使用SVG图标系统，例如Iconify或Font Awesome;
8. 在可能的情况下，将独立路径合并为单一路径。

可以客观的的去考虑这些建议，并非所有建议都适用于所有情况，但通常开发人员可以帮助设计师澄清什么最适合特定情况。需要设计师根据所在地区，所处团队的情况选取适用于本地化的方式进行维护设计资源。

最后想说的

有时候，我觉得设计师无缘无故地把开发人员当作敌人，或者是一个死板且不懂美学的一群人是非常不对的。但我相信，开发人员是设计师稿件的初次用户，因此我们要尽力帮助他们从稿件中获取所需的一切。

因此，为了使产品对接过程更加完美，就需要多向开发人员询问是否有任何不清楚的地方，以及是否需要任何额外的信息。