设置元件样式 | 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. 元件样式的等级

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

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

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

2.2. 更新和创建样式

快速更新

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

快速创建

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

2.3. 元件样式管理器

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

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

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

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

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

2.4. 团队项目中的样式

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

3. 复制粘贴样式

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

复制第一个元件，
在第二个元件上点击鼠标右键，
选择“粘贴选项-粘贴样式”。

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

3.1. 格式刷

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

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

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

4. 交互样式效果

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

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