印刷报价系统源码_皇家印刷术-设计系统案例研究

印刷报价系统源码

重点 (Top highlight)

Typography. It’s complicated. With Product Design, it’s on every screen. Decisions for a type scale affect literally every aspect of a product. When you’re working with an existing product, defining typography can feel like spilled glitter — you can never clean it all up.

版式。 情况很复杂。 使用产品设计，它可以在每个屏幕上显示。 类型规模的决定实际上会影响产品的各个方面。 当您使用现有产品时，定义版式可能会感觉像是溢出的闪光，您永远无法将其全部清理干净。

As our tiny-but-mighty Design Systems team started an effort to document all foundational elements, typography was a major topic on the list that needed solving. I took the lead on this effort, and it was by far one of the most challenging and rewarding projects I have ever worked on.

当我们庞大但强大的设计系统团队开始记录所有基本元素的工作时，排版是清单上需要解决的主要主题。 我带头进行了这项工作，这是迄今为止我从事过的最具挑战性和最有意义的项目之一。

I’ve seen many examples from different Design Systems of beautiful, thoughtful and usable type scales. However, I couldn’t find even one explanation of how other companies came to their conclusions. This is my effort to share the why behind the finished product.

我已经看到了来自不同设计系统的许多示例，它们具有美观，周到和可用的字体比例。 但是，我什至找不到其他公司如何得出结论的解释。 这是我分享成品背后原因的努力。

类型＃目标 (Type #Goals)

All good projects start with clear goals. We made sure to have a few defined areas of focus as we kicked off this project.

所有好的项目都始于明确的目标。 在启动该项目时，我们确保有一些明确的重点领域。

1. Clean up our existing scale and consolidate styles
   清理我们现有的规模并巩固样式
2. Define a naming convention
   定义命名约定
3. Define pairing rules
   定义配对规则

我们从哪里开始 (Where We Started)

Our Design System already had a type scale in place. Our scale followed an 8 point grid, had defined line height and letter spacing, and was accessible to all our designers in our Sketch library.

我们的设计系统已经具有类型比例尺。 我们的比例尺遵循8点网格，定义了线高和字母间距，并且我们的Sketch库中的所有设计人员都可以访问。

However, this scale had no pairing rules. We had zero definition of how to use it. This meant that as new features were designed, we were using different styles to convey the same thing. (I don’t know who needs to hear this, but you don’t need 7 different types of subtitles.) Over time, this was leading to an inconsistent experience.

但是，该比例尺没有配对规则。 我们对如何使用它的定义为零。 这意味着在设计新功能时，我们使用不同的样式来传达相同的内容。 (我不知道谁需要听这个，但是您不需要7种不同类型的字幕。)随着时间的流逝，这导致了不一致的体验。

研究 (Research)

内部审计 (Internal Audit)

I first needed to understand how our existing type scale was being used internally. I started by reaching out to my fellow designers, gathering as many of our screens in Sketch as I could, and comparing the different styles in use.

我首先需要了解如何在内部使用现有的类型标度。 我首先接触了我的同事设计师，在Sketch中收集了尽可能多的屏幕，并比较了使用中的不同样式。