mfc动态改变clip风格_动态组件设计指南

​简化符号的技巧是平衡动态元素和约束的使用。这使你可以最大程度地减少设计系统中所需的符号数量。使它更容易维护和更改变。设计人员需要创建重复的符号来覆盖单个组件的每个状态的日子已经一去不复返了。

按钮样式指南

动态组件还允许你使用Sketch的内置调整大小功能来修改其内容，而不会破坏整体布局。这样可以提高所有组件的灵活性，而无需根据其内容不断调整符号的需要。

在本文中，我将指导您创建以下动态组件：

• 按钮
• 下拉列表
• 文字栏位

按钮

我将向您展示如何使用Sketch的智能布局创建单个按钮的步骤，该按钮可以转换为任何大小、状态、颜色或类型。

第1步

创建将用于所有按钮状态的颜色列表，并将其另存为图层样式。对于命名约定，你可以根据自己的工作风格将它们保存在“颜色”或“按钮状态”下。如果你打算在设计系统中包括重影按钮，则还可以创建大纲层样式。

第2步

为每个按钮状态创建文本样式，确保将对齐方式设置为自动宽度，以防止在水平调整按钮大小时自动换行。

第3步（可选）

只有在按钮样式包含图标时才需要执行此步骤。在创建图标时，确保允许覆盖，这样你就可以使用图层样式轻松地改变图标的颜色。

第4步

现在，你可以将所有内容放在一起并开始设计按钮。框架、图标和文字。对外观感到满意后，将其转换为符号并选择水平居中作为布局选项。转换后，转到符号设置，并确保允许所有元素都替代。

一旦你完成了，你的符号面板就会有一个像这样的文件夹，很简单，对吧？

最终产品

下拉列表

我将向您展示如何创建一个响应式智能下拉列表，该列表可以根据项目数量自动调整大小，更改列表项目数量以及编辑项目内容。

第1步

创建带有图标和文本字段的列表项。确保将文本字段的对齐方式设置为自动宽度，然后将图标固定在左侧。

第2步

将列表项转换为符号，然后从左到右选择水平作为布局选项。转换后，转到符号设置，并确保允许所有元素都替代。

第3步

现在该创建下拉列表组件了，你可以根据自己的喜好设置样式。根据你的下拉列表的最大高度放置列表项的最大数量，按顺序重命名。

第4步

将你的下拉列表转换为符号，然后从上到下选择垂直作为布局选项。这将根据你选择显示的列表项数来调整列表高度。

最终产品

文本字段

第1步

为所有文本字段状态创建图层样式列表；默认、焦点、悬停、错误、禁用等。还要确保每个州都有匹配的文本样式。

第2步

将所有不同的元素组合在一起以形成一个灵活的文本字段。现在看起来可能很怪异，但实际上它可以让你做任何事情。

第3步

将文本字段转换为符号，然后不选择任何一个作为布局选项。转换后，转到符号页面并执行以下操作：

• 搜索图标应固定在左上方
• 占位符文本应具有自动高度，这样可以将文本包装在文本字段中
• 对搜索图标和占位符文本进行分组，然后将布局选项从左到右设置为水平
• 眼睛和错误图标应固定在右上角
• 对除错误图标以外的所有元素进行分组，并将布局选项设置为从上到下的垂直布局

最终产品

文中所用图片来自网络，如侵权，请联系删除

想要了解汽车更多内容，就留言联系我们吧！

译文来源：Jeremiah Lam：Creating dynamic components: buttons, dropdown lists, text fields

- 服务内容 -