Axure RP 互联网产品原型设计课件 第5章 元件的样式和交互.pptx

目录Contents了解互联网产品原型设计1了解AxureRP102页面管理与自适应视图3使用元件和元件库4元件的样式和交互5使用母版和动态面板6变量与表达式7函数的使用8使用中继器9团队合作与输出设计制作网页原型设计制作App原型101112

05元件的样式和交互

“5.1设置元件的属性5.1.1基本属性01元件名为了方便管理元件、区分元件以及在交互脚本中调用元件，通常会为页面中的元件设置一个名称。选中元件后，在“样式”面板顶部的文本框中单击即可为元件命名，如图所示。提示：为了便于制作较为复杂的原型，尽量使用英文或拼音为元件命名。也不要使用毫无意义的字母和数字为元件命名。

“5.1设置元件的属性5.1.1基本属性02显示/隐藏元件选择元件，单击“样式”面板中或工具栏上的“隐藏元件”按钮，即可将选中的元件隐藏；隐藏后的元件将显示为黄色，如图所示，“隐藏元件”按钮也将变成“显示元件”按钮再次单击该按钮，即可显示该隐藏元件，如图所示。

“5.1设置元件的属性5.1.1基本属性03对齐/分布元件该功能与执行“布局对齐”命令和“布局分布”命令一致，已在本教材4.5.1小节中详细讲解，此处就不再赘述。

5.1设置元件的属性5.1.1基本属性“04元件坐标和尺寸对元件的坐标和尺寸进行设置，可以准确地控制元件在页面中的位置和大小，如图所示。用户可以在X文本框和Y文本框中输入数值，确定元件的坐标值；在W文本框和H文本框中输入数值，控制元件的尺寸。单击“锁定宽高比”按钮后，当修改W文本框或H文本框中的数值时，对应的H文本框或W文本框的数值将等比例改变。

5.1设置元件的属性5.1.1基本属性“05旋转元件用户在“样式”面板或工具栏中的“旋转”文本框中输入数值，即可实现元件的精确旋转，如图所示。

5.1设置元件的属性5.1.2不透明度用户可以拖曳“不透明度”选项的滑块或者在文本框中手动输入数值来修改元件的不透明度，以获得不同的元件效果，如图所示。提示：在此处设置不透明度，将同时影响元件的填充和边框效果，如果元件内有文字，则文字也将受到影响。如果需要将各部分分开设置，用户可以在拾色器面板中设置不透明度。

5.1设置元件的属性5.1.3排版除了双击元件为其添加文本以外，在元件上右击，在弹出的快捷菜单中选择“填充乱数假文”命令，也能完成文本的添加，如图所示。填充文本效果如图所示。双击文本或选择快捷菜单中的“编辑文本”命令，可以进入文本的编辑模式。

5.1设置元件的属性5.1.3排版AxureRP10提供了丰富的文本属性。在“样式”面板的“排版”选项组中，用户可以完成对文本的字体、字形、字号、颜色、行间距和字间距等的设置，如图所示。单击“Arial”，用户可以在弹出的“WEB安全字体”下拉列表中选择字体，如图所示。单击“Normal”，用户可以在弹出的下拉列表中选择适合的字形，如图所示。用户可以在字号文本框中输入数值控制文本的字号大小，如图所示。单击色块，可以在弹出的拾色器面板中设置文本的颜色，如图所示。

5.1设置元件的属性5.1.3排版“01行间距当使用文本“段落”元件时，可以设置行间距来控制段落显示的效果，行间距分别为10和20时的文本效果如图所示。

5.1设置元件的属性5.1.3排版“02对齐当使用标题元件、文本标签元件和文本段落元件时，可以单击“排版”选项组中的对齐按钮，将文本的水平对齐方式设置为左侧对齐、居中对齐、右侧对齐和两端对齐，如图所示。文本的垂直对齐方式可以设置为顶部对齐、中部对齐和底部对齐，如图所示。

5.1设置元件的属性5.1.3排版“03更多文本选项单击“更多文本选项”按钮，弹出如图所示面板。用户可以在该面板中完成文本修饰、基线、字母大小写、字符间距和文本阴影的设置。（1）文本修饰单击“项目符号”按钮，会为段落文本添加项目符号。如图所示为添加项目符号的文本效果。

5.1设置元件的属性5.1.3排版“03更多文本选项单击“粗体”按钮，文本将加粗显示；单击“斜体”按钮，文本将倾斜显示；单击“下画线”按钮，文本将添加下画线效果；单击“删除线”按钮，文本将添加删除线效果，如图所示。

5.1设置元件的属性5.1.3排版“03更多文本选项（2）基线用户可以在“基线”下拉列表中选