cad设计草图_草图和乐高积木如何启动您的设计系统

cad设计草图

Here in the Product Design team at Hotstar, Sketch is our workhorse. Chances are that you use Sketch as much as we do. To kickstart our design system, we recognized the need to make our Sketch files smarter and more semantic. We designers strive for consistency, and want our UI elements to look and behave consistently across our design.

在Hotstar的产品设计团队中，Sketch是我们的主力军。 您可能会像我们一样经常使用Sketch。 为了启动我们的设计系统，我们认识到有必要使Sketch文件更智能，更语义化。 我们的设计师追求一致性，并希望我们的UI元素在我们的设计中始终保持一致。

Think of UI elements as Legos we can reuse to build interfaces. Legos are modular and repeatable — which are great for consistency.

将UI元素视为Legos，我们可以重复使用以构建界面。 乐高积木是模块化且可重复的，这对于保持一致性非常有用。

建设健壮的乐高积木 (Building Robust Legos)

To build robust Legos, we need to make robust symbols. If your design uses a few symbols to fulfil many use cases, while making semantic sense, your symbols are robust.

要构建健壮的乐高积木，我们需要制作健壮的符号。 如果您的设计使用一些符号来满足许多用例，并且在语义上有意义，那么您的符号就很健壮。

Let’s make a robust symbol of the humble tray thumbnail.

让我们对不起眼的托盘缩略图做一个有力的象征。

使用图像填充 (Use Image Fills)

Create a rectangular shape, and then apply an image fill. This lets you:

创建一个矩形，然后应用图像填充。 这使您可以：

• Replace images by overriding symbols.
  通过覆盖符号替换图像。
• Resize images without stretching (choose the “Fill” option in Display)
  调整图像大小而不拉伸(在“显示”中选择“填充”选项)
• Have border radii without any extra fuss.
  具有边界半径，无需大惊小怪。
• Add dark overlays and scrims without extra layers (click the “+” icon to create an additional fill)
  添加没有额外图层的深色覆盖物和稀松布(单击“ +”图标以创建其他填充)

Now, add other symbols within your symbol. If there’s an instance where you don’t need that particular symbol, you can remove it using an override.

现在，在符号内添加其他符号。 如果存在不需要该特定符号的实例，则可以使用替代将其删除。

使用约束 (Use Constraints)

When you make a symbol with elements in it, add constraints to them so they’re 100% responsive.

当您制作一个包含元素的符号时，请向它们添加约束，以使它们100％响应。

Take the overflow menu icon on the top right. We want this icon to always be on the top right, no matter what.

采取右上角的溢出菜单图标。 无论任何情况，我们都希望该图标始终位于右上角 。

The constraints will be:

约束将是：

• It should always stay at a fixed distance from the top and right edge, so we pin to the top and right edge.

  它应该始终与顶部和右侧边缘保持固定的距离，因此我们固定到顶部和右侧边缘 。

• It should never get stretched, so we fix the height and width.

  它永远不会被拉伸，因此我们确定了height和width 。

You can distort the instance all you want and the icon stays put. Your symbol is now totally responsive! Constraints work on groups, too.

您可以扭曲所有想要的实例，并且图标保持原状。 您的符号现已完全响应！ 约束也适用于组。

Photo by HONG LIN on Unsplash

洪 弘在 Unsplash上的 照片

乐高积木 (Putting Legos Together)

Our basic Legos are now ready. Let’s take a new example to see how we can put these basic Legos together to make complex UI elements.

我们的基本乐高玩具已经准备就绪。 让我们以一个新的示例来看一下如何将这些基本的Legos放在一起以构成复杂的UI元素。

Let’s build a system of bottomsheet menus.

让我们构建一个底表菜单系统。

Settings menu

设置菜单

We want to make a bottomsheet menu using just one master symbol.

我们希望仅使用一个主符号创建一个底表菜单。

创建一个主符号 (Create a Master Symbol)

The master symbol holds the basic layout of the bottomsheet.

主符号保留底页的基本布局。

Let the base layer also function as a mask. This will let us reveal more action items as we increase the height of the symbol.

让基础层也充当遮罩。 当我们增加符号的高度时，这将使我们显示更多的动作项。

创建动作项乐高玩具 (Create Action Item Legos)

Menus need to support many kinds of action items. Let’s build a library.

菜单需要支持多种操作项。 让我们建立一个图书馆。

These need to have the same height and width, else Sketch will not recognize them as potential overrides.

它们需要具有相同的高度和宽度，否则Sketch不会将它们识别为潜在的替代。

This is how a well stocked library should look:

这是库存充足的图书馆的外观：

约束 (Make Constraints)

Every action item needs to be able to handle stretching. We pin them to the top, left, and right, while fixing their heights — their widths change predictably, but their heights do not.

每个动作项目都必须能够应对伸展运动。 我们将它们固定在顶部，左侧和右侧，同时固定它们的高度-它们的宽度可以预测地变化，但是它们的高度却没有变化。

您的模块化主表已准备就绪！ (Your Modular Master Bottomsheet is Ready!)

It’s ready for anything you throw at it.

它可以随时随地扔给您。

• Change list items by overriding them
  通过覆盖列表项来更改它们
• Replace icons with icons from your icon library
  用图标库中的图标替换图标
• Resize vertically to add or remove more action items
  垂直调整大小以添加或删除更多操作项
• Resize horizontally for a wider or narrower bottomsheet
  水平调整尺寸以扩大或缩小底板

Painlessly change list items

无痛地更改列表项

Painlessly resize bottomsheets

无痛调整底片大小

These were all derived from one modular master:

这些都源自一个模块化主站：

命名符号 (Naming Symbols)

Name symbols in the format “Element Type / Variant / Variant”. This helps in two ways.

以“元素类型/变体/变体”格式命名符号。 这有两个方面的帮助。

它在菜单中组织它们 (It Organizes Them in the Menu)

This symbol is named “Thumbnail / Poster / Vertical”

该符号名为“缩略图/海报/垂直”

它在“符号”页面中组织它们 (It Organises Them in the Symbols Page)

For this, you need the amazing Symbol Organizer. It sorts symbols by “/”. Want all thumbnails in one column? Let all the symbols names begin with “Thumbnail /”.

为此，您需要出色的Symbol Organizer 。 它将符号按“ /”排序。 要将所有缩略图放在一栏中？ 让所有符号名称以“缩略图/”开头。

命名层 (Naming Layers)

Name and arrange symbol layers the right way and life gets easier for everyone, especially for other designers working with your file.

以正确的方式命名和排列符号图层，每个人的生活都会变得更加轻松，尤其是其他处理您文件的设计师。

A layer’s name in the symbol will be its name in the Overrides menu. Their arrangement in the symbol will also reflect their order in the instance’s Overrides menu.

符号中的图层名称将是“替代”菜单中的名称。 它们在符号中的排列还将在实例的“替代”菜单中反映其顺序。

We hope your Sketch workflow will make your work semantic, modular, repeatable, and consistent. You’ve now set the foundation of your design system.

我们希望您的Sketch工作流程将使您的工作语义化，模块化，可重复且一致。 现在，您已经为设计系统奠定了基础。

翻译自: https://uxdesign.cc/how-sketch-and-legos-can-kickstart-your-design-system-daaeea481878

cad设计草图