设置元件样式 | Styling Widgets

1.     样式属性

你可以通过编辑以下属性来自定义元件的视觉样式,你可以在“样式”面板或顶部样式工具栏中的找到这些属性。

1.1.   不透明度

使用滑块或数值输入框来设置目标元件的不透明度,不透明度将同时作用于元件的填充色以元件上的文本颜色。

1.2.   排版

字体设置:字体控件可以设置文本内容的字体、字号、颜色。

注意:如果你使用了字体选择器中列出的本地字体,将原型发布到网络上时,又想保留本地字体,可以参考网络字体参考指南来学习如何操作。

行间距:调整文本行之间的间距。你可以设置指定的像素值,也可以保持“自动”选项,使用默认的行间距。

字间距:调整元件文本中字符之间的艰巨。你可以设置指定的像素值(以0.1像素为单位),也可以保持“0”以使用默认间距。

其他文字选项:这个菜单包含以下几个选项。

  • 项目符号列表粗体斜体下划线删除线
    • 基线:上下移动所选文本的基线。从Normal(普通)Superscript(上标)Subscript(下标)中选择。
    • 字母大小写:转换所选文本中所有字符的大小写。从Normal(普通)Uppercase(大写)Lowercase(小写)中选择。
  • 文本阴影:为元件文本中的每个字符设置阴影。
  • 对齐:六种对齐选项可以控制文本在元件边框内的对齐方式,你也可以设置文本为水平对齐和垂直对齐。
1.3.   填充

颜色:设置元件的填充色,填充色可以是纯色,也可以是线性渐变色或径向渐变色。

图片:设置形状元件的图片填充,以及设置图片的对齐、缩放和平铺。

1.4.   线段

颜色:设置线段或二维元件的边框的颜色和不同明度,线条颜色可以是纯色,也可以是线性渐变色或径向渐变色。

厚度:设置线段或二维元件的边框粗细。

线型:设置元件边框的线段类型。

可见性:控制矩形元件的四个边框的可见性。

箭头样式:设置线段或开放的线条形状的一端或两段的箭头。

1.5.   阴影

给选定的元件添加内部或外部阴影,你可以控制阴影的X和Y的偏移量,以及模糊程度和阴影颜色,你还可以控制阴影的扩散程度。

1.6.   圆角

设置半径的数值,则可以将矩形元件的直角设置为圆角(你也可以通过拖动画布中元件上的黄色小三角来实现该效果)。

如果要控制哪个角呈现为圆角,则可以通过设置可见性来选择某个角。

1.7.   边距

通过这些数字来控制元件内文本与上下左右四个边框的间距(以像素为单位)。

2.     元件样式

元件样式是可重用,集中管理的样式属性集合。你可以将一个元件样式用于多个元件上,以统一它们的样式。如果你在元件样式中修改了一个属性,那么这个修改将会应用都所有使用了这个元件样式的元件上。

将元件样式应用到一个或多个元件上,请选中一个或多个元件,然后在“样式”面板或样式工具栏中的元件样式下拉列表中选择一个元件样式。

你可以通过以下方法查看和管理原型中的元件样式,打开“项目-元件样式管理器”,或点击“样式”面板或样式工具栏中元件样式下拉列表旁的管理元件样式图标。

2.1.   元件样式的等级

在不同位置设置的元件样式属性,其影响范围不同,等级也不同,以下是根据元件样式的等级从低到高排列:

  1. “元件样式管理”对话框顶部的“Default”样式,其样式属性将作用于原型中的每个元件。
  2. 应用在元件类别的元件样式,例如“Box 3”,其样式属性将作用于原型中每个“Box 3”元件,并且会覆盖“Default”样式。
  3. 通过“样式”面板或样式工具栏中的设置,应用在具体某个元件上的样式,其样式属性只会作用于当前元件,并且会覆盖元件类型上的元件样式以及“Default”样式。

注意:当某个元件的样式属性和其元件类别的样式属性不同时,在“样式”面板或样式工具栏中的元件样式名称后会带有一个星号(“*”)。

2.2.   更新和创建样式

快速更新

要快速更新样式,只需要在当前元件上完成了样式设置后,在“样式”面板中,点击样式名称右侧的“更新”即可。此更新将应用于所有使用了该样式的元件,以及未来要添加的使用该样式的元件。

快速创建

要快速创建样式,在任意一个元件上完成样式设置后,在“样式”面板中,点击样式名称右侧的“创建”,此时会打开“元件样式管理”对话框,在左侧的列表中,会将当前编辑的样式添加为“新的样式”,你可以修改样式名称,也可以在右侧对样式进行其他设置。

2.3.   元件样式管理器

点击“样式”面板或样式工具栏中的“管理元件样式”图标,打开“元件样式管理”对话框,你也可以通过“项目-元件样式管理器”来打开次对话框。

点击对话框顶部的“添加”即可添加新样式,或者,你也可以点击“复制”,从现有的样式中复制出一个新样式。

要删除样式,选中样式后,点击“删除”即可。你可以使用“上移”箭头和“下移”箭头来排序样式。

要编辑元件样式的属性,首先在左侧选中样式,然后在右侧的栏目中,勾选要编辑的属性,即可进行编辑。

你有额可以一次编辑多个样式。即当选择左侧的样式时,按住CTRL或CMD键,然后在右侧的栏目中进行编辑。

2.4.   团队项目中的样式

可以在不签出项目样式的情况下编辑团队项目中的样式。通过“团队-提交变更到团队目录”可以将更新后的样式同步给项目团队中的所有用户。

3.     复制粘贴样式

你可以复制一个元件的样式,将其粘贴到另外一个元件上。操作如下:

  1. 复制第一个元件,
  2. 在第二个元件上点击鼠标右键,
  3. 选择“粘贴选项-粘贴样式”

这时会把第一个元件所有的样式属性(包括设置在第一个元件本身上的样式属性)应到到第二个元件上。

3.1.   格式刷

点击主菜单中的“编辑-Format Painter(格式刷)”可以使用格式刷,它可以让你更灵活的复制和粘贴样式。

你可以选择复制单个样式属性,也可以同时将复制的样式属性粘贴到多个元件上。

另外,格式刷还可以允许你复制和粘贴样式效果。

4.     交互样式效果

“样式效果”是在Web浏览器中产生交互时的元件样式,当元件处于特定状态(如:鼠标悬停或禁用)时,它们就会使元件从基本样式变为特定样式。

想要了解更多内容,请查看样式效果章节。

评论(0)

发表评论

电子邮件地址不会被公开。 必填项已用*标注