服务热线:
15071151002
图文展示
衍果视觉设计培训学校

UI设计中的Sketch创建动态组件实例

简化 Symbol 的诀窍是平衡动态元素和约束的使用。这样可以最小化设计系统中所需的Symbol数量,以便易于维护和更改。


UI设计中的Sketch创建动态组件实例


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

本文将引导你创建如下动态组件:

  • Buttons

  • Dropdown Lists

  • Text Fields

按钮 Buttons

本部分向你展示如何使用Sketch的智能布局分步创建单个按钮,该按钮可以转换为任意大小、状态、颜色或类型。


Step 1

创建将用于所有按钮状态的颜色列表,并将它们存为Layer Styles。对于命名约定,你可以根据自己的习惯将它们保存在「颜色 Color」或「按钮状态 Button State」下。 如果你打算在设计系统中包括幽灵按钮(Ghost Buttons),还可以创建 Outline 图层样式


UI设计中的Sketch创建动态组件实例



Step 2

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


UI设计中的Sketch创建动态组件实例


Step 3(可选)

仅当你的按钮样式包含图标时才需要执行此步骤。创建图标时,请确保允许Overrides,以便你可以使用图层样式轻松更改图标颜色




Step 4

现在,你可以将所有内容放在一起并开始设计按钮。框架,图标和文字。一旦对外观感到满意后便可将其转换为Symbol,然后选择Horizontally Center作为布局选项。转换后,请转到 ymbol设置,并确保允许对所有元素进行Overrides


UI设计中的Sketch创建动态组件实例


完成后, Symbol面板上将有一个看起来像这样的文件夹,简单吧?!


UI设计中的Sketch创建动态组件实例


最终效果


UI设计中的Sketch创建动态组件实例


下拉列表 Dropdown Lists


接下来将向你展示如何创建一个响应式智能下拉列表,该列表可以根据项目数不同自动调整大小、更改列表项数以及编辑项目内容。



Step 1


创建带有图标和文本字段的列表项。确保将文本字段的对齐方式设置为auto-width并将图标固定在左侧。


UI设计中的Sketch创建动态组件实例


Step 2

将列表项转换为Symbol,然后选择Horizontally Left to Right作为布局选项。接着请转到 Symbol 设置,确保允许对所有元素进行覆盖。


UI设计中的Sketch创建动态组件实例


Step 3

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


UI设计中的Sketch创建动态组件实例


Step 4

将下拉列表转换为 Symbol,然后选择Vertical Top to Buttom作为布局选项。这样将会根据选择显示的列表项数来调整列表高度。


UI设计中的Sketch创建动态组件实例


最终效果


UI设计中的Sketch创建动态组件实例


文本字段 Text Fields

Step 1

为所有文本字段状态创建图层样式列表:default, focus, hover, error, disabled等。请确保每个状态下的文本样式都相同。


UI设计中的Sketch创建动态组件实例


Step 2

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


UI设计中的Sketch创建动态组件实例


Step 3

将文本字段转换为Symbol ,然后选择None作为布局选项。接着转到Symbol页面并执行以下操作


  • 搜索图标应固定在Top Left

  • 占位符文本应具有auto-height,这样可以将文本包裹在文本字段中

  • 将搜索图标和占位符文本分组,然后将布局选项设置为Horizontal Left to Right

  • 眼睛和错误图标应固定在top right

  • 对除错误图标以外的所有元素进行分组,并将布局选项设置为Vertical Top to Bottom


最终效果


UI设计中的Sketch创建动态组件实例



联系老师

联系老师

副标题

 
 
 
 
 工作时间
周一至周日 :8:30-21:00
 联系方式
客服热线:15071151002