第7节-元件的样式 | 剑雨Axure RP9系列「基础」

元件可以编辑的样式很多，可以直接在右侧样式 Style栏目中修改，亦可在顶部的样式工具栏中修改。

不透明度

直接拖动右侧的不透明度滑块或者输入百分比即可改动选中的元件的整体不透明度。

注意：此处的不透明度将会与填充颜色及文本颜色中的值进行叠加。

alt StylingOpacity

排版

image

此部分主要为以下几个部分：

• 字体设置:字体的系列,字体大小,字体颜色;
• 行间距:文本段落中各行之间的距离(以像素pixel来表示),默认值为自动;
• 字间距 Character Spacing: 文本中各个字符之间的间距,默认值为0,调整单位为1/10个像素;
• 其他选项:
• 项目符号列表，粗体，斜体，下划线和删除线
• 基线Baseline:可以使选中的文本稍微往上(上标)或者向下(下标), 可供选择的值有:
• 上标Superscript
• 下标Subscript
• 正常Normal
• 字母大小:对英文字母的大小写进行控制。对中文无效。
• 文本阴影：故明思义，此处可对文本设置一个”影子“并可设置其模糊程度；
• 
  
• 对齐：一共七个对齐方式， 水平方向上4个，垂直方向上3个。此处不再赘述。
• 
  

• 
  
• image

填充

9StylingFill.png

可分别设置颜色填充：颜色填充的变化可以是单色（solid),线性（linear)，径向（radial gradient)

&图片填充，图片填充可以设置图片的位置及图像的对齐

边框

StylingBorder.png

• 颜色：设置边框的颜色和不透明度。颜色可以是单色（solid),线性（linear)，径向（radial gradient)
• 线宽：
• 线的类型：有实线，有虚线等等。
• 可见性：控制每一侧边框的显示与隐藏。
• 箭头：将箭头添加到线条窗口元件或打开形状的一端或两端。

阴影

9StylingShadow.png

为选定的元件提供外部和/或内部阴影。您可以控制阴影的X和Y偏移，模糊和颜色。

相当于此处是给该部件增加了一个影子，X 和 Y 分别控制影子的偏移。

角(Corner)

StylingCorner.png

在右侧栏目中输入数字来展示元件的圆角程度，当然也可以在画布上选择元件并拖动黄色三角形来完成此操作

边距（Padding)

控制元件中的文字与该元件的边界之间的距离（左，右，上，下）

元件样式及样式管理器

9WidgetStyle.png

窗口元件样式是可重用的，集中管理的样式属性集。您可以将单个窗口元件样式应用于多个窗口元件，以统一其样式。如果更改窗口元件样式中的某个属性选择，则更改将应用??于使用该样式的所有窗口元件。

要将窗口元件样式应用于一个或多个窗口元件，请选择窗口元件，然后在“ 样式”窗格或样式工具栏的窗口元件样式下拉列表中选择窗口元件样式。

您可以通过转到“ 项目”> “窗口元件样式管理器”或单击“ 样式”窗格或样式工具栏中窗口元件样式下拉列表旁边的“ 管理窗口元件样式”图标来查看和管理原型中的窗口元件样式。

元件样式层次结构

每个窗口元件的可视外观由以下位置中的样式属性选择确定，从最低优先级到最高优先级：

• “ 窗口元件样式管理器”对话框顶部的“ 默认”样式，其样式属性选择应用于原型中的每个窗口元件。
• 窗口元件应用的窗口元件样式 - 例如，Box 3样式 - 其样式属性选择覆盖默认样式中的选择。
• 在样式窗格或样式工具栏中的窗口元件上进行的样式属性选择，它会覆盖默认样式和窗口元件自己应用的窗口元件样式中的选择。

更新和创建样式

快速更新

要快速更新样式，请编辑当前使用该样式的窗口元件的样式。然后在样式窗格中，单击更新的风格名称右侧的更新它。此更新将应用于当前使用该样式的项目中的所有窗口元件。它也适用于使用该窗口元件样式的任何未来窗口元件。

注意：在使用快速更新时，是某一类型的元件样式改变后才能直接快速更新

9StyleUpdate&Create.gif

快速创建

要快速创建新样式，请编辑任何窗口元件的样式。然后在“ 样式”窗格中，单击窗口元件当前应用的窗口元件样式右侧的“ 创建”。该控件样式管理器对话框，其中已加入了新的风格的元件的造型变化打开。在对话框的左列中，重命名新窗口元件样式。在右列中，您可以对样式进行其他更改。> 注意：在使用快速创建时，可以对创建的样式进行命名。详细见上面图片。

元件样式管理器

9WidgetStyleManager.png

单击“ 样式”窗格或样式工具栏中窗口元件样式下拉列表旁边的“ 管理窗口元件样式”图标，以打开窗口元件样式管理器。您还可以通过Project> Widget Style Manager菜单选项访问此对话框。

要添加新样式，请单击对话框顶部的“ 添加 ”。或者，您可以单击“ 复制”以从现有样式创建新样式。

要删除样式，请选择该样式，然后单击“ 删除”。使用向上和向下箭头重新组织对话框中的样式。

要编辑窗口元件样式的样式属性，请在左列中选择它。在右列中，选中样式属性旁边的框以使该属性覆盖默认样式，然后在适用的字段中选择属性。

您还可以一次编辑多个样式。按住CTRL或CMD在左列中选择样式，然后在右列中进行更改。

团队项目中的样式

在样式团队项目，而不检查出该项目的样式进行编辑。要更新项目所有用户的样式更改，请通过“ 团队”>“将更改发送到团队目录”菜单命令发送更改

样式的交互

“样式交互”是基于Web浏览器的交互效果展示。当设置元件处于某种状态（例如鼠标悬停或禁用），元件的样式就会发生相应地变化

要了解更多信息，请查看样式交互的文章。