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浏览器中产生交互时的元件样式,当元件处于特定状态(如:鼠标悬停或禁用)时,它们就会使元件从基本样式变为特定样式。
想要了解更多内容,请查看样式效果章节。