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.

當開發人員提出問題或有疑問時，請傾聽。 它們使您的工作栩栩如生。