如何有效地将设计交给开发人员
2023 年 10 月 19 日

首先,让我们来看一下设计师如何有效地将他们的工作交给开发人员。这是Joana Boavida的文章。

你是否曾经在将设计交给前端开发人员时遇到困难?他们能理解你的设计吗?他们能轻松地浏览你的文件吗?他们会查看正确版本的设计吗?他们会来找你问一些你以为他们已经知道的事情吗?

老实说,我们都曾经有过这样的经历... 我认为,设计师在成功交付给开发人员所需的所有重要视觉资产(样式、组件和模型)方面发挥了巨大的作用。

在我们深入探讨之前,让我们先来看一下这篇文章的原始标题和图片链接。 首先,值得一提的是,尽管设计师和开发者的角色不同,但我们都追求同一个目标:打造最好的产品。因此,我们之间的差距越小,就越好。

设计师们想要缩小这个差距,需要意识到一些重要的事情:

  1. 文件结构至关重要 📄

无论你使用Figma (opens new window)还是其他类似的工具,都要努力保持文件的有序性。将你的资源(样式、组件和模型)分别放入3个不同的文件中。

3个不同的文件:样式指南;组件和模型

在每个文件中,你还可以为不同类型的内容创建不同的页面。页面的命名应该是自解释的。这样,开发者就不必浪费时间在你的画板上寻找他们需要的东西。

  1. 样式指南必须提供所有内容 📐

在这个文件中应该包括什么内容呢?当你进行设计时,需要包含你想到的一切内容。 整理你的组件,以合适的方式组织它们👌

在这个第二个文件(组件文件)中,您将构建整个设计系统。因此,找到最好的组织方式至关重要。我会说这与个人偏好或项目的规模有很大关系。你更喜欢基于Atomic Design (opens new window)的结构吗?还是更喜欢更简单的方法?无论如何,让我告诉你需要避免的事情:请不要 4. 更多页面,每个页面的模型较少 💯

即使对于我们设计师来说,浏览一个只有少量模型的Figma页面要好过在一个页面上有数百个模型。对于开发人员来说也是一样的 - 点击所需的页面更容易让他们查看他们真正想要查看的模型。当一个功能有多个版本时,您还可以将它们分成页面(并明确指出哪个是最新的,以确保他们知道!)

交付您的模型文件的一种可能方式(所有功能都分成不同的页面)

  1. 提供用户流程 🤓

为什么不呢?这些类型的流程可能在开发主要功能时对开发人员有所帮助,因为它们提供了一些有用的信息,这些信息他们在设计文件中找不到。 6. 给原型一个机会 💻

原型可以澄清很多关于系统行为、动画和交互的事情。对于开发人员来说,原型化主要特性可能会有所帮助,但确实有一些其他的特性并不完全需要进行原型化。

  1. 开发人员必须发表意见 🗣

沟通是关键。由于这是一个团队合作,你应该收集关于开发人员对这个过程中可能需要改进的事情的意见,这样下次你就能做得更好!

请记住,所有这些都需要从头开始,从产品的最初开始进行。 不仅仅在“移交”本身的时刻才需要与开发人员取得平衡,而且更重要的是,这不应该给你带来太大的压力。你真正需要找到自己的工作流程和开发人员需求之间的平衡。

如果对这个问题有其他建议,请随时留言,这样我也能改进自己的流程。