Over the past few months, my design team at StreetEasy has started experimenting in adding a “design buddy” check-in to the final stages of the design process.

在过去的几个月中，我在StreetEasy的设计团队已开始尝试在设计过程的最后阶段添加“设计伙伴”签到项 。

We were inspired by how engineers use pull requests in their workflows. For those unfamiliar, a pull request is a way for a developer to notify team members that they have completed a feature or update.

工程师如何在工作流程中使用拉取请求启发了我们。 对于不熟悉的人，拉取请求是开发人员通知团队成员他们已完成功能或更新的一种方法。

In addition to notifying, the pull request usually triggers a peer or manager review of the proposed feature. If there are any problems with the changes, teammates can post feedback in the pull request and even tweak the feature by pushing follow-up commits. Once discussion is complete, the project maintainer will merge the feature into the official repository.

除了通知外，拉取请求通常还会触发对等或管理员对提议功能的审查。 如果更改有任何问题，队友可以在拉取请求中发布反馈，甚至可以通过推送后续提交来调整功能。 讨论完成后，项目维护者将把功能合并到官方存储库中。

There are many benefits to this model. It makes for easier collaboration, clear documentation of decisions / updates, and important checks.

此模型有很多好处。 它使协作更容易，决策/更新的清晰文档以及重要的检查。

On our team, product designers have ownership in their individual product pods. While we welcome and seek out feedback from other designers on our individual pod work, we haven’t had this level of peer checks.

在我们的团队中，产品设计师在各自的产品包中拥有所有权。 尽管我们欢迎并寻求其他设计师对我们的个人吊舱作品的反馈意见，但我们还没有达到这一水平的同行检查。

We started this process with the goal of ensuring quality and consistency of all designs being shipped. An extra design eye is always helpful to make sure all bases are covered!

我们开始这一过程的目的是确保所发货的所有设计的质量和一致性 。 额外的设计眼总是有助于确保覆盖所有底座！

这是我们实施“设计伙伴检查”的方式 (Here’s how we implemented the “Design Buddy Check”)

When? As you finalize designs for implementation, reach out to your design buddy (everyone was assigned one person — we may switch every quarter to keep things fresh). After the design buddy check, you are cleared to hot-potato (AKA handoff) with engineers and make any contributions to our feature specs and design system.

什么时候？ 在最终确定要实施的设计时，请与您的设计伙伴联系( 每个人都分配了一个人，我们可能每季度切换一次以保持最新状态 )。 设计伙伴检查后，您将与工程师通关进行热土豆 (AKA交接)工作，并对我们的功能规格和设计系统做出任何贡献。

How? In Covid-19 times, this is all done virtually. Share your Figma link with your buddy, and go through it together, using the checklist below. Compare the designs to our Style Guide. Note down new reusable components that could be added to our Design System (more on this process later).

怎么样？ 在Covid-19时代，这一切都是虚拟完成的。 与您的好友共享Figma链接，并使用下面的清单一起进行浏览。 将设计与我们的风格指南进行比较。 记下可以添加到我们的设计系统中的新可重用组件( 稍后将在此过程中进行更多介绍 )。

The checklist below has been updated to remove any organization-specific checks. Thank you to Lisa Gorn for helping put this checklist together!

下面的清单已更新，以删除所有组织特定的检查。 感谢 Lisa Gorn 帮助将此清单合并在一起！

视觉效果 (Visual)

• Are you using brand colors exclusively?
  您是否仅使用品牌颜色？

• Is relative spacing to UI elements as base unit of 8 (if necessary, 4)?

  UI元素的相对间距是否为8的基本单位(如有必要，为4)？

• Does your relative spacing match the relative spacing of similar UI elements?
  您的相对间距是否与相似的UI元素的相对间距匹配？
• Are you using the right shadow criteria?
  您使用的阴影标准正确吗？
• Does your icon choice communicate effectively?
  您选择的图标是否有效沟通？
• Is your icon the right size?
  您的图标尺寸合适吗？

一致性 (Consistency)

• Do interactions, icons that perform the same actions as others that already exist in the site or app?
  交互，图标执行的功能与网站或应用程序中已经存在的其他图标一样吗？
• Are you using the appropriate sizes and elements for desktop vs. mobile web vs. app?
  您是否针对台式机，移动网络和应用程序使用了适当的大小和元素？

• Are you using our existing controlled vocabulary for similar actions?

  您是否正在使用我们现有的受控词汇表执行类似操作？

  Are you using our existing controlled vocabulary for similar actions?(e.g. close vs. cancel, back vs. go back, view vs. see)

  您是否正在使用我们现有的受控词汇表执行类似操作？ (例如，关闭与取消，返回与返回，查看与查看)

• Are existing patterns being used for similar actions/items?

  现有模式是否用于类似的动作/项目？

  Are existing patterns being used for similar actions/items?(e.g. text link vs. secondary button, back arrow vs. back link, tooltip vs. exposed helper copy)

  现有模式是否用于类似的动作/项目？ (例如，文本链接与辅助按钮，后退箭头与后退链接，工具提示与公开的帮助程序副本)

• Are you using existing elements / components where appropriate?
  您是否在适当的地方使用现有的元素/组件？

• Is your icon placement relative to text appropriate?

  您相对于文字的图标位置合适吗？

  Is your icon placement relative to text appropriate?(e.g. left vs. right, case dependent)

  您相对于文字的图标位置合适吗？ (例如，左与右，视情况而定)

相互作用 (Interaction)

• Are all states accounted for?

  是否所有州都入帐？

  Are all states accounted for?(e.g. default, touch, hover, disabled, etc)

  是否所有州都入帐？ (例如，默认，触摸，悬停，禁用等)

• Are animation curves and durations for enter, exit, and state change defined?
  是否定义了进入，退出和状态更改的动画曲线和持续时间？

版式 (Typography)

• Are you using our typography library?
  您在使用我们的排版库吗？
• Are you using heading, body, eyebrow, and helper copy styles correctly?
  您是否正确使用了标题，身体，眉毛和辅助复制样式？
• Are you using the right colors for the type style that you have chosen?
  您是否为所选的字体样式使用了正确的颜色？

层次结构 (Hierarchy)

• Do the most important UI elements take priority?
  最重要的UI元素优先吗？
• Are you using the correct type elements to communicate hierarchy?
  您是否使用正确的类型元素来传达层次结构？

案例 (Cases)

• What happens to text when it gets too long?

  文本过长会如何处理？

  What happens to text when it gets too long?(e.g. truncation, wrapping, etc)

  文本过长会如何处理？ (例如，截断，换行等)

• Are empty states accounted for?
  空国家占了吗？
• Are error states accounted for?
  是否考虑了错误状态？
• Are loading states accounted for?
  是否考虑了加载状态？

辅助功能最佳做法 (Accessibility Best Practices)

• Ensure the color contrast of text is accessible.

  确保可以访问文本的颜色对比度。

• Write good alt text for your images. (place in annotations for the engineers)

  为您的图像写一个好的替代文本 。 (为工程师添加注释)

• Don’t indicate important information using color alone. Pair messages with an icon.
  不要仅使用颜色来表示重要信息。 将消息与图标配对。
• Don’t indicate state changes using color alone.
  不要仅使用颜色来指示状态变化。
• Always design focus states to help users navigate and understand where they are. At minimum, consider using browser defaults for focus states.
  始终设计焦点状态以帮助用户导航并了解他们的位置。 至少应考虑将浏览器默认值用于焦点状态。
• Help users understand inputs, and help them avoid and correct mistakes.
  帮助用户理解输入，并帮助他们避免和纠正错误。
• If an experience cannot be made accessible, create another route for users to get that information.
  如果无法获得一种体验，请为用户创建另一条途径以获取该信息。
• Place secondary actions inside of menus (or non-modal dialogs), and don’t use hover states to hide the trigger.
  将辅助操作放置在菜单(或非模式对话框)中，并且不要使用悬停状态隐藏触发器。

—

-

And that’s it! Let me know your thoughts.

就是这样！ 让我知道你的想法。

Do you do a similar quality check in your organization? Are we missing anything in the checklist?

您是否在组织中进行过类似的质量检查？ 我们在清单中遗漏了什么吗？