ui sketch_Sketch中具有“符号”和“共享样式”的更快的UI设计

ui sketch

在本教程中，您将使用移动购物车设计来练习在Sketch中使用两个非常重要的功能。 我们将密切注意：“符号”和“共享样式”。

素描符号

使用符号可以复制设计元素并重新使用它们。 您对符号内容所做的任何更改都会反映在该符号的所有实例中。

要创建一个选择了一组对象的对象，请单击创建符号 ：

有效使用符号有两个重要提示。 首先，请确保您的符号不复杂。 让我们以标题符号为例：

您将看到背景，状态栏，标题标签和图标，所有这些都在此处显示在标题栏符号内的子文件夹中：

进度条不会包含在符号中，因为其状态在每个屏幕上都会改变。

第二件事是检查“ 符号”中每个文本层的“ 从符号中 排除 文本 值 ”选项。 这样，您可以分别编辑每个重复符号的文本。

草图共享样式

“共享样式”功能与“符号”一样简单。 一次单击即可更改多个符号和对象之间的多个元素的外观，这很有用。 让我们再次看一下标题和进度条。 在这里，您可以看到我更改了进度条的背景，但是在标题背景下看起来并不好：

为避免手动更改每个进度条背景，可以设置共享样式。 在这里，我们通过选择标题背景时单击“ 创建新的共享样式” ，来应用我之前准备的header-bg样式：

然后，我们对需要反映相同样式的每个图层都应用相同的样式。 现在，当您编辑进度条背景时，所有具有共享样式的元素的背景都会被修改：

结论

借助工具包中的这两个功能，在Sketch中设计下一个应用程序UI会节省很多时间！

感谢您的阅读，请随时在下面的评论中提问。

翻译自: https://webdesign.tutsplus.com/tutorials/faster-ui-design-with-symbols-and-shared-styles-in-sketch--cms-24352

ui sketch