It’s 2020. We’re supposed to have flying cars and space travel. We should at least have our process for design handoff nailed down at this point.

现在是2020年。我们应该有飞行汽车和太空旅行。 在这一点上，我们至少应该确定我们的设计移交过程。

From my experience at multiple agencies in the last few years, we don’t.

根据我过去几年在多家机构的经验，我们没有。

At my current job, I’ve had multiple conversations with our developers to better understand their needs, pain points and ways designers can help make the process better. Armed with all of this information, I started to make a checklist we use for every web design project we tackle.

在我目前的工作中，我与开发人员进行了多次对话，以更好地了解他们的需求，痛点和设计师可以帮助改善流程的方式。 掌握了所有这些信息后，我开始制作一份清单，用于我们处理的每个Web设计项目。

Here are some of the pieces of the process we often miss:

以下是我们经常错过的一些流程：

图像优化 (Image Optimization)

Web sites are files. These files vary in size. The larger a website, the slower it may load. This impacts page ranking, overall site performance, and the credibility of the site in the eyes of search engines.

网站是文件。 这些文件的大小各不相同。 网站越大，加载速度越慢。 这会影响页面排名，网站整体性能以及在搜索引擎看来网站的信誉。

About 21% of any given websites file size comes from images. Part of my workflow now is to compress images before sending them to developers.

任何给定网站的文件大小中约有21％来自图片。 现在，我的工作流程的一部分是压缩图像，然后再将其发送给开发人员。

I use a free tool called ImageOptim for this.

为此 ，我使用了一个名为ImageOptim的免费工具。

With this tool you can reduce image file size by 20–80%. Make sure all of your images are organized in a folders by page and named appropriately.

使用此工具可以将图像文件的大小减小20–80％。 确保将所有图像按页面组织在一个文件夹中并正确命名。

This step might seem insignificant, but every optimization you can make will help your website stand out from the competition, and speed is huge.

这个步骤看似微不足道，但是您可以进行的每次优化都会帮助您的网站在竞争中脱颖而出，而且速度非常快。

版式 (Typography)

First and foremost: Make sure you have the appropriate licenses.

首先也是最重要的： 确保您具有适当的许可证。

Most type foundries document licensing instructions on their site. If you can’t afford it, don’t try and steal it. The penalties hurt, and piracy is not a victimless crime. Just use a Google Font instead.

大多数类型代工厂在其站点上记录许可说明。 如果您负担不起， 请不要尝试偷它。 处罚很痛苦，盗版并不是无害的犯罪。 只需使用Google字体即可 。

Have the proper license? Good. Now get that font into the hands of your developers. To do this on a Mac:

有适当的执照吗？ 好。 现在，将该字体交到开发人员手中。 在Mac上执行以下操作：

Open Font Book, select the fonts you want to export, click “File” > Export Fonts and select where you want them to be saved on your computer. Then shoot these files over to your development team.

打开“字体书”，选择要导出的字体，单击“文件”>“导出字体”，然后选择要将其保存在计算机上的位置。 然后将这些文件发送给您的开发团队。

Not sure what font file type you should be using? Learn more here.

不确定应使用哪种字体文件类型？ 在这里了解更多。

文字样式 (Type Styles)

Licensing and getting developers the right fonts is the first step. The next step is proper documentation of your type styles. Apply them throughout your design file to ensure an efficiency and simple design & development process.

许可和使开发人员获得正确的字体是第一步。 下一步是正确记录您的字体样式。 将它们应用于整个设计文件中，以确保效率和简单的设计与开发过程。

Here’s how I do this in Figma. It’s not exactly the same in Sketch, InVision or Adobe, but it’s very similar.

这是我在Figma中进行的操作。 在Sketch，InVision或Adobe中并不完全相同，但是非常相似。

创建文字样式 (Create type styles)

If you aren’t familiar with how type sizing works for web and mobile apps, here are a couple resources to start:

如果您不熟悉Web和移动应用程序的类型大小调整工作原理，请参考以下两个资源：

Apple’s Human Interface Type Guidelines

苹果的人机界面类型指南

Material Design Type Guidelines

材料设计类型准则

When I put together a typography system, I like to visually show the type styles, sizing, spacing and other details, like this:

当我组合一个版式系统时，我喜欢直观地显示字体样式，大小，间距和其他细节，例如：

为类型样式创建响应式规则 (Create responsive rules for type styles)

If you have an H1 on desktop that is 72px, you may not want it to be the same size on mobile. When I make type styles I usually create a desktop and mobile set of type sizes.

如果台式机上的H1为72像素，则可能不希望它在移动设备上具有相同的尺寸。 制作字体样式时，通常会创建一组桌面和移动字体类型。

Then you need to set rules to clarify how typography works in responsive. Does the type scale up dynamically? Or does it jump to a different size when it reaches a break point. Make sure you clarify how you want the type to behave before you hand off the files.

然后，您需要设置规则来阐明排版在响应式中的工作方式。 类型会动态扩展吗？ 或达到断点时会跳到其他大小。 在移交文件之前，请确保阐明类型的行为。

将字体样式应用于设计 (Apply type styles to Design)

Once you have set all of your rules, make sure the design links back to these global styles. Here’s why this is so important:

设置所有规则后，请确保设计链接回这些全局样式。 这就是为什么如此重要的原因：

It ensures your design is consistent: If you take the time before diving in on a project to get your system right, you won’t waste time needing to think about type sizing or spacing. A strong system frees you up to design faster.

它可以确保您的设计是一致的：如果您花时间在一个项目上，以使您的系统正确，那么您就不会浪费时间考虑类型大小或间距。 强大的系统使您可以自由地进行更快的设计。

Revisions are much quicker: Imagine you have an app with 120 screens and a stakeholder decides halfway through the design they want to change the font. If type styles are used this is a 5 minute change, if not it will take hours.

修订要快得多：假设您有一个具有120个屏幕的应用，而一个涉众则在他们要更改字体的设计中进行决定。 如果使用文字样式，则更改时间为5分钟，否则将花费数小时。

Here’s an example of a Figma file with type styles applied. You can see in the right panel I have all of the styles, and when I click on any given text layer it links back to a style.

这是一个应用了字体样式的Figma文件的示例。 您可以在右侧面板中看到所有样式，当我单击任意给定的文本层时，它会链接回样式。

组件 (Components)

The overall principle is similar to typography. If you are using a design element over and over again, it should be a component. Why use components? If you have an app with 120 screens and you need to change the header, it’s much easier to make this change to a global component instead of applying that change manually to every screen.

总体原理类似于印刷术。 如果您反复使用设计元素，则它应该是组件。 为什么要使用组件？ 如果您的应用程序具有120个屏幕，并且您需要更改标题，则将更改更改为全局组件要容易得多，而不必手动将更改应用于每个屏幕。

建立元件库 (Building a Component Library)

Using components, is one piece of the puzzle. but as important is the use of a component library. Instead of components appearing here and there throughout your design, there should be a single source of truth other designers and developers can reference.

使用组件是难题的一部分。 但是使用组件库同样重要。 不应在整个设计中四处出现组件，而应有其他设计师和开发人员可以参考的唯一事实来源。

Taking the time to document your work and components properly means fewer questions for everyone, and a more efficient building process for your development team.

花时间来正确记录您的工作和组件意味着对每个人的疑问减少了，对您的开发团队而言，则是一个更高效的构建过程。

颜色样式 (Color Styles)

Consistent use of color is as important as typography for designers when handing off to dev. If you have 30 different colors of gray in your file, developers are going to be annoyed and confused.

在移交给开发人员时，对于设计师来说，一致使用颜色与版式一样重要。 如果文件中有30种不同的灰色，开发人员将很烦恼和困惑。

Instead of doing what you see above, create color styles as well as a guide that shows the hex codes. In addition to having the styles in the sidebar in Figma, I like to lay it out in a frame. Giving two consistent means of accessing color information makes the job easier.

无需执行上面的操作，而是创建颜色样式以及显示十六进制代码的指南。 除了在Figma的侧边栏中具有样式外，我还喜欢将其布置在框架中。 提供两种一致的访问颜色信息的方法可以使工作更加轻松。

With color, a little bit of self discipline goes a long way. The client suddenly decides everything blue needs to be purple? With color styles that‘s only a couple of clicks away.

有了颜色，一点点的自律就会大有帮助。 客户突然决定所有蓝色都必须是紫色？ 使用颜色样式，只需单击几下即可。

网格系统 (Grid System)

For the sanity of yourself, your design team and the developers you collaborate with you need to establish a grid system. There are a wide range of approaches to a successful grid system. Whatever you do, make sure it is documented in your design file to ensure there isn’t any miscommunication or confusion within the handoff process.

为了您自己的理智，您的设计团队和与您合作的开发人员需要建立网格系统。 成功的网格系统有多种方法。 无论您做什么，都要确保将其记录在设计文件中，以确保移交过程中没有任何沟通不畅或混乱的情况。

Get used to having your grids on. It can feel annoying at first, but once it becomes a habit you don’t even see them. Grids are a crucial part of building a consistent, scalable design system.

习惯于使用网格。 一开始它会让人很烦，但是一旦成为一种习惯，您甚至都不会看到它们。 网格是构建一致，可扩展的设计系统的关键部分。

响应式设计 (Responsive Design)

For new designers, the prospect of building something that works on mobile, desktop and even tablet can be daunting. Here are a couple things to do to make sure your design is ready for responsive:

对于新设计师来说，构建可在移动设备，台式机甚至平板电脑上使用的产品的前景令人望而生畏。 为了确保您的设计已做好响应准备，请执行以下几项操作：

• Clearly articulate the breakpoints in your design

  在设计中清楚表达断点

If you want the design to switch from desktop to tablet at 1024, let your developers know that. Be as specific as you can so that there aren’t any surprises when you see the live site.

如果您希望设计在1024下从台式机切换到平板电脑，请告知开发人员。 尽可能具体，以便在看到实时站点时不会出现任何意外。

• Consider which screen will receive the most traffic, and start there

  考虑哪个屏幕将获得最多的流量，然后从此处开始

Are you building an online store that receives 85% of traffic through mobile? Definitely start with building a great mobile first site. From there you can account for tablet and desktop designs as well. Prioritize your efforts where users will see them.

您是否正在建立一个在线商店，通过手机接收85％的流量？ 绝对从构建一个出色的移动优先站点开始。 从那里，您还可以考虑平板电脑和台式机的设计。 优先考虑用户将在哪里看到它们的工作。

• Be as consistent as possible when switching between breakpoints

  在断点之间切换时尽可能保持一致

When creating responsive modules consider the technical level of effort that will go into building it, and also consider if this changes or gets more complicated across multiple breakpoints. Unless there is a strong reason for a unique design, keep responsive simple.

在创建响应模块时，请考虑将其构建的技术工作水平，并还要考虑在多个断点上这是否有所改变或变得更加复杂。 除非有强烈的理由要求采用独特的设计，否则应使响应保持简单。

动画参考与微交互 (Animation Reference & Microinteractions)

There are 3 primary ways I give animation reference to developers when building a website or application.

在构建网站或应用程序时，我会通过3种主要方式为开发人员提供动画参考。

Visual Reference: Dribbble, Muzli, Behance

视觉参考：Dribbble，Muzli，Behance

This is what I would consider to be the least helpful. Why? Because it is often difficult for a developer to rebuild something when all they have to reference is a visual. I recommend only using this approach with highly skilled front-end developers.

我认为这是最没有帮助的。 为什么？ 因为当开发人员必须参考的只是视觉对象时，通常很难对其进行重建。 我建议仅对熟练的前端开发人员使用此方法。

Code Reference: CodePen

代码参考：CodePen

If you are a designer and don’t know what CodePen is, drop and everything and go explore. It’s an amazing resource for designers and developers. Instead of rebuilding components from scratch based on reference, CodePen provides HTML, CSS and Javascript so interactions can be quickly tweaked.

如果您是设计师并且不知道CodePen是什么，请放下所有内容并继续探索。 对于设计师和开发人员来说，这是一个了不起的资源。 CodePen提供了HTML，CSS和Javascript，而不是根据引用从头开始重建组件，因此可以快速调整交互。

DIY: After Effects, Principle, Protopie

DIY：后效应，原理，原型

Last, but certainly not least is the DIY route. If you have any experience in animation, this can be a game changer. When I do app animations, I use After Effects and Lottie to export a JSON animation for developers.

最后，但同样重要的是DIY路线。 如果您有动画方面的经验，那么可以改变游戏规则。 当我做应用动画时，我使用After Effects和Lottie为开发人员导出JSON动画。

No matter what route you take, showing how you want interact design to work will save time, resources and bring your app to a new level of polish.

无论采用哪种方法，展示您希望交互设计如何工作都会节省时间，资源，并使您的应用程序达到新的高度。

交接会议 (Handoff Meeting)

You’ve done the work. The designs are properly documented, all of your styles are in place. Everything is pixel perfect. Now what?

您已经完成了工作。 设计文件已正确记录，所有样式均已到位。 一切都是像素完美的。 怎么办？

Context is a powerful thing. When handing off designs you need to provide information to help your team succeed. To make sure everyone is on the page, I’ve found it helpful to have a handoff meeting to do the following:

上下文是强大的东西。 交付设计时，您需要提供信息以帮助您的团队成功。 为了确保每个人都在页面上，我发现召开交接会议来执行以下操作会有所帮助：

• Provide background on the project

  提供项目背景

• Walk through the design system and prototype

  遍历设计系统和原型

• Briefly explain the design documentation

  简要说明设计文档

• Touch on how success will be measured

  谈谈如何衡量成功

• Clarify timeline and set project milestones/goals

  明确时间表并设定项目里程碑/目标

• Answer any questions

  回答任何问题

• Inspire the team

  激励团队

The last point is less tangible, but not less important. How you present is as important as what you present. You could handoff the most incredible design work ever created, but if you deliver in an uninspiring way you’ve killed the project before it got off the ground.

最后一点不是很明显，但同样重要。 呈现方式与呈现方式同样重要。 您可以移交有史以来最令人难以置信的设计工作，但是如果以一种鼓舞人心的方式进行交付，那么您在项目开始之前就已经杀死了该项目。

Speak with confidence. Be proud of the work you’ve made. Include everyone, and frame the project as an opportunity to drive value for the team and the client (whoever they might be).

自信地说。 为您所做的工作感到自豪。 让所有人参与进来，并将项目构架为为团队和客户(无论他们可能是谁)带来价值的机会。

系统化沟通 (Systematize Communication)

Just like your designs, you need to create a system to communicate effectively with your development team. Here are two ways to make sure communication runs smoothly when collaborating with development:

就像您的设计一样，您需要创建一个与开发团队进行有效沟通的系统。 与开发协作时，有两种方法可以确保通信顺畅运行：

确定如何以及何时给出反馈 (Establish how and when feedback will be given)

Slacking the lead frontend, “it doesn’t look like the design” is counterproductive and likely distracting them from their current work.

拖延领先的前端，“它看起来不像设计”适得其反，并可能使他们分心于当前的工作。

Instead, use software like Jira or Asana to conduct visual QA once you’ve reached a certain point in the development process. Be as descriptive as possible in documenting both the problem you are perceiving as well as the proposed solution. Bonus points if you include pictures.

相反，一旦达到开发过程中的特定点，就可以使用Jira或Asana之类的软件进行视觉质量检查。 在记录您所感知的问题以及建议的解决方案时尽可能地具有描述性 。 奖励积分，如果您包括图片。

By recording feedback you ensure accountability for everyone involved.

通过记录反馈，您可以确保对每个参与人员负责。

确定创意团队和开发团队的联络点 (Identify points of contact on creative and dev teams)

Select one person to act as the bridge between development. Otherwise you create room for redundancies and gaps in communication.

选择一个人作为发展之间的桥梁。 否则，您将为冗余和沟通空白创造空间。

If the project you are engaged in is so large one person cannot reasonably be expected to own the communication, distribute the responsibilities amongst team members.

如果您从事的项目如此之大，则无法合理地期望一个人拥有该交流，则应在团队成员之间分配职责。

要有耐心，表现出同理心和倾听 (Be Patient, Show Empathy & Listen)

Creating design in live code is never a seamless experience. The way we respond to our team members and how we address feedback has a direct impact on our working relationships.

用实时代码创建设计从来都不是无缝体验。 我们对团队成员的回应方式以及如何处理反馈意见，直接影响我们的工作关系。

Push for great work, but have patience along the way. Don’t assume you have all the answers. You are going to make mistakes and your response matters. Others will make mistakes too, hold your team accountable, but show empathy.

努力工作，但是要有耐心。 不要以为你有所有答案。 您将犯错误，而您的响应很重要。 其他人也会犯错，要求您的团队负责，但要表现出同理心。

When developers raise an issue or have questions, listen. They are the ones making your work come to life.

当开发人员提出问题或有疑问时，请倾听。 它们使您的工作栩栩如生。