特别引人注目的头像

If you look at companies like Dropbox, Google, and Twitter you’ll notice that they each have their own unique aesthetic. Across all their products, both mobile and web, there is a sense of consistency and uniformity in their design.

如果您查看Dropbox，Google和Twitter这样的公司，您会发现它们各自都有自己独特的美学。 在他们所有的移动产品和Web产品中，其设计都具有一致性和统一性。

The way that companies and products achieve consistency is through styleguides. A styleguide is a set of standards that aligns designs with a company’s voice and mission.

公司和产品实现一致性的方式是通过样式指南。 样式指南是一套使设计与公司的声音和使命保持一致的标准。

Consistency is important because it creates trust. And design is all about creating relationships between products and users.

一致性很重要，因为它可以建立信任。 设计就是要在产品和用户之间建立关系。

The goal of this article is to introduce you to some well-thought-out styleguides and branding guidelines. It also details some of the most important elements every styleguide should have.

本文的目的是向您介绍一些经过深思熟虑的样式指南和品牌指南。 它还详细介绍了每个样式指南应具有的一些最重要的元素。

Hopefully, these elements and examples will serve as a source of inspiration and influence how you design sustainable products in the future.

希望这些元素和示例将成为灵感的来源，并影响您将来设计可持续产品的方式。

在我们开始之前... (Before we get started…)

Here are a few suggestions for when you’re designing styleguides.

这是设计样式指南时的一些建议。

• Design your product first and then create a styleguide. Don’t start by creating a styleguide. First figure out what works and what doesn’t work. Then standardize it.首先设计产品，然后创建样式指南。 不要从创建样式指南开始。 首先弄清楚什么有效，什么无效。 然后将其标准化。
• You’ll never be fully happy with your styleguide. That’s okay. Creating a universal design language is an iterative process.您永远不会对自己的样式指南感到完全满意。 没关系。 创建通用设计语言是一个反复的过程。
• Have a strong understanding of the voice and message you want your product to convey before writing a styleguide.在编写样式指南之前，对要产品传达的声音和信息有深刻的理解。

原则 (Principles)

Styleguides should always have a page on design principles. Design principles are a set of guidelines that influence how designers approach and solve problems when building a product.

样式指南应始终包含有关设计原则的页面。 设计原则是一组准则，这些准则会影响设计人员在构建产品时如何处理和解决问题。

One of the key characteristics of a good design principle is that it isn’t obvious or too broad. A good design principle should be specific enough to help a designer make decisions.

好的设计原则的关键特征之一是它不明显或太宽泛。 好的设计原则应足够具体，以帮助设计人员做出决定。

Let’s take a look at Apple’s Human Interface Guidelines, which has a section on design principles. One of their principles is direct manipulation.

让我们看一下苹果的《 人机界面指南》 ，其中有关于设计原理的部分。 他们的原则之一是直接操纵 。

The direct manipulation of onscreen content engages people and facilitates understanding… Through direct manipulation, they can see the immediate, visible results of their actions.

对屏幕内容的直接操作可以使人们参与并促进理解……通过直接操作，他们可以看到其操作的直接可见结果。

This description explains that direct manipulation is a principle that governs and mediates physical and digital interactions. It helps designers choose modes of interactions, such as swiping and rotating.

本说明解释了直接操纵是控制和调解物理和数字交互的原理。 它可以帮助设计人员选择交互方式，例如滑动和旋转。

When coming up with design principles, less is more. Start off with three guiding principles and iterate from there.

提出设计原则时，少即是多。 从三个指导原则开始，然后从那里进行迭代。

For more on design principles, check out Julie Zhuo’s A Matter of Principle article. It has hugely influenced how I think about design principles.

有关设计原则的更多信息，请查看朱莉卓的“原则问题”文章。 它极大地影响了我对设计原则的看法。

版式 (Typography)

Typography is key to achieving unity across multiple products and designs. Every styleguide should have a few sections detailing typography specifications.

字体印刷是实现多个产品和设计统一的关键。 每个样式指南都应有几节详细说明印刷技术规范。

It’s important to limit the number of typefaces and sizes you use in order to keep your designs simple. As a general rule of thumb, start with at most two fonts — one for your headers, and one for your bodies. Most of the time, you won’t need any more than that.

限制您使用的字体和大小的数量很重要，以使设计更简单。 根据一般经验，最多使用两种字体-一种用于标题，另一种用于正文。 在大多数情况下，您将不需要更多。

Also, include example use cases of typography to help other designers and developers understand when to use things like bold or italics.

另外，包括印刷术的用例示例，以帮助其他设计师和开发人员了解何时使用粗体或斜体之类的东西。

If you have trouble picking fonts, check out Typewolf and FontPair. For font sizing check out Modular Scale and its accompanying article More Meaningful Typography.

如果您在选择字体时遇到问题，请查看Typewolf和FontPair 。 有关字体大小的信息，请查看“ 模块化比例”及其随附的文章“ 更有意义的字体” 。

Also keep in mind that fonts aren’t set in stone. You can always change them later.

另外请记住，字体不是一成不变的。 您以后可以随时更改它们。

意象 (Imagery)

Show, don’t tell. Imagery is a powerful tool in the hands of a designer. Images are dynamic. They convey meaning at first glance, and evoke emotions.

显示，不要告诉。 图像是设计师手中的强大工具。 图像是动态的。 他们乍一看就传达了意义，唤起了情感。

If you have have the assets, consider including a section that details what kinds of images other designers should use to convey your product’s voice and identity.

如果您拥有这些资产，请考虑提供一个部分，详细说明其他设计师应使用哪种图像来传达您产品的声音和身份。

Nike is a good example of a company that uses images to convey their brand. Their photos have a cinematic quality that inspires you to participate in their mission and brand.

耐克公司就是一个很好的例子，该公司使用图像来传达他们的品牌。 他们的照片具有电影般的画质，激发您参与他们的使命和品牌。

Imagery isn’t only limited to photographs. Companies like Dropbox rarely use photographs in their designs. Instead, they convey their personality through illustrations.

图像不仅限于照片。 像Dropbox这样的公司很少在设计中使用照片。 相反，他们通过插图传达自己的个性。

Here is an example of Hubspot’s imagery styleguide.

这是Hubspot图像样式指南的示例。

Notice how they describe the tone and goal of the photography before providing examples.

在提供示例之前，请注意它们如何描述摄影的色调和目标。

With guidelines for what images to use, designers can better communicate meaning to users and ultimately immerse them into a cohesive experience.

借助有关使用哪些图像的准则，设计人员可以更好地向用户传达含义，并最终将其沉浸于凝聚力的体验中。

网格和间距 (Grids and spacing)

Good design cares about whitespace as much as content. Styleguides should reflect this mentality and include a section on grids and spacing.

好的设计与内容一样，在乎空白。 样式指南应反映这种心态，并包括有关网格和间距的部分。

It’s important to establish a grid system that works for every use case. In the section on grids, include information like the number of columns and rows, margins, and example uses.

建立适用于每个用例的网格系统非常重要。 在网格部分，包括诸如列和行数，边距和示例用法之类的信息。

For reading on grids, see A guide to creating grid systems that are built around your content as a primer. And follow it up with Modular Design For Grids.

有关网格的阅读，请参阅创建围绕您的内容构建的网格系统的指南，作为入门。 并通过网格的模块化设计跟进。

Spacing should have its own section. Consistent spacing across a product creates a sense of uniformity and balance.

间距应有自己的部分。 整个产品上一致的间距会产生均匀感和平衡感。

Having a list of margin sizes is useful to both designers and developers. In particular, developers can codify the space scale into Sass variables.

列出边距大小列表对于设计人员和开发人员都非常有用。 特别是，开发人员可以将空间比例编码为Sass变量。

For example, using the Marvel spacing styleguide as a reference, the Sass counterpart might look like this:

例如，使用Marvel间隔样式指南作为参考，Sass对应项可能如下所示：

$space-smaller: 5px;$space-small: 10px;$space-medium: 20px;$space-large: 40px;$space-larger: 80px;$space-largest: 240px;

颜色 (Color)

Color is another essential element in styleguides. Color helps establish visual hierarchies and create emotional resonance.

颜色是样式指南中的另一个重要元素。 颜色有助于建立视觉层次结构并产生情感共鸣。

Color sections in styleguides make the lives of designers easier. Instead of spending time fretting about which colors to use, designers can reference the styleguide. This allows them to focus on content.

样式指南中的颜色部分使设计师的生活更轻松。 设计人员可以参考样式指南，而不必花时间为使用哪种颜色而烦恼。 这使他们可以专注于内容。

As Buffer puts it in their styleguide:

正如Buffer在其样式指南中所说的那样：

Using colors consistently brings a sense of familiarity and unity to a product. Buffer’s color scheme aims to be clear, unobtrusive and friendly.

始终如一地使用颜色会给产品带来熟悉感和统一感。 Buffer的配色方案旨在保持清晰，醒目和友好。

In the example above, Buffer names each of their colors. This is particularly useful to developers because they can turn the colors into Sass variables:

在上面的示例中，缓冲区为每种颜色命名。 这对于开发人员特别有用，因为他们可以将颜色转换为Sass变量：

$primaryColor = #168eea;$headingColor = #323b43;$bodyColor = #59626a;$borderColor = #ced7df;$lightBorderColor = #eff3f6;$fillColor = #f4f7f9;

Notice how Buffer uses primaryColor instead of a name like brandBlue. Choose names that describe the role of the color instead of the color itself. This approach makes it easier for both designers and engineers to adjust their color values without having to change the name.

注意Buffer是如何使用primaryColor而不是brandBlue之类的名称的。 选择描述颜色作用的名称，而不是颜色本身。 这种方法使设计人员和工程师都更容易调整其颜色值，而不必更改名称。

If you want to learn more about choosing color, check out the article I wrote on Designing in Color.

如果您想了解有关选择颜色的更多信息，请查看我在Designing in Color中撰写的文章。

组件 (Components)

A lot of designers and developers think about UIs as collections of components. The idea is that each UI component is its own entity. For example, a card is a single component.

许多设计人员和开发人员都将UI视为组件的集合。 这个想法是每个UI组件都是其自己的实体。 例如，卡是单个组件。

Using this approach, designers can re-use components across multiple products and designs. This creates design consistency. It also minimizes the amount of time designers spend re-inventing the wheel designing UI components that already exist within an organization.

使用这种方法，设计人员可以在多个产品和设计中重复使用组件。 这样可以创建设计一致性。 它还将设计人员花费在重新设计轮子上的组织现有UI组件上的时间减至最少。

Component-based thinking also helps engineers. Design components can translate neatly into code. From an engineering perspective, components are like lego blocks that you can compose together.

基于组件的思维还可以帮助工程师。 设计组件可以将代码整洁地转换为代码。 从工程角度看，组件就像可以组合在一起的乐高积木。

While you’ll often see components in UI and pattern libraries, it’s also useful to include components in styleguides for other designers to reference.

尽管您经常会在UI和模式库中看到组件，但在样式指南中包含组件以供其他设计者参考也很有用。

For example, Mapbox has a styleguide that includes all of their commonly used components. This includes buttons, inputs, and forms. This way their designers and developers know what UI components are already available.

例如， Mapbox的样式指南包括其所有常用组件。 这包括按钮，输入和表格。 这样，他们的设计人员和开发人员就会知道哪些UI组件已经可用。

If you want to learn more about components check Brad Frost’s Atomic Web Design article.

如果您想了解有关组件的更多信息，请查看Brad Frost的Atomic Web Design文章。

Principles, typography, imagery, grids and spacing, color, and components. This list isn’t exhaustive, but these six topics form the basis of a good styleguide.

原理，版式，图像，网格和间距，颜色和组件。 该列表并不详尽，但是这六个主题构成了良好的样式指南的基础。

What are your thoughts on styleguides? What are some of the lessons that you’ve learned in the process of creating styleguides? Leave a note below or tweet at me.

您对样式指南有何想法？ 在创建样式指南的过程中您学到了什么？ 在下面留言或发推文给我。

If you enjoyed this article, you might enjoy Photos and stories from a designer.

如果您喜欢本文，则可能会喜欢设计师的照片和故事。

Photos and stories from a designerSome of the best designers are also some of the best storytellers.medium.com

设计师的照片和故事 一些最好的设计师还是一些最好的讲故事的人。 medium.com

You can find me on Medium where I publish every week. Or you can follow me on Twitter, where I post non-sensical ramblings about design, front-end development, and virtual reality.

您可以在我每周出版的Medium上找到我。 或者，您可以在Twitter上关注我，在该处我发布有关设计，前端开发和虚拟现实的无意义的杂谈。

P.S. If you enjoyed this article, it would mean a lot if you click the ? and share with friends.

PS：如果您喜欢这篇文章，那么如果单击“？”将有很多意义。 并与朋友分享。

翻译自: https://www.freecodecamp.org/news/designing-a-styleguide-elements-that-go-into-functional-and-beautiful-products-ff1621e00a0e/

特别引人注目的头像