Axure RP 互联网产品原型设计课件 第4章 使用元件和元件库.pptx

AxureRP10汇报人：互联网产品原型设计(微课版)

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

04使用元件和元件库

AxureRP10的元件都放在“元件库”面板中，默认情况下，“元件库”面板位于工作界面的左侧，如图所示。“元件库”面板中默认显示Default（预设）元件库，Default（预设）元件库将元件按照种类分为常用、互动、表单、菜单和表格、标记5种类型，如图所示。4.1了解“元件库”面板

打开“全部元件库”下拉列表，用户可以在其中选择其他的元件库。在默认情况下，AxureRP10为用户提供了5个元件库，如图所示。选择“Flow”（流程图）选项，“元件库”面板将只显示Flow（流程图）元件库，如图所示。4.1了解“元件库”面板提示：每种类型的元件库名称右侧都有一个黑色箭头，箭头向右时，代表当前元件库中有隐藏元件；箭头向下时，代表已经显示了所有隐藏元件。用户可以单击元件库名称切换显示和隐藏元件。

单击“元件库”面板顶部的“搜索元件”按钮，图标后面将显示一个搜索栏，用户在搜索栏中输入想要搜索的元件名，即可快速将其显示在面板中，如图所示。再次单击“搜索元件”按钮，搜索栏将隐藏。4.1了解“元件库”面板

4.2将元件添加到页面在“元件库”面板中选择要使用的元件，按住鼠标左键不放，将鼠标指针拖曳到合适的位置后松开，即可完成将元件添加到页面的操作，如图所示。

“01为元件命名一个原型通常包含了很多元件，要在众多元件中查找其中的某一个元件是非常麻烦的。为元件命名就能很好地解决这个问题。将元件拖曳到页面中后，可以在“样式”面板中为其命名，如图所示。为了更便于使用，元件名称应尽量使用英文或者拼音，并且首字母最好大写。4.2将元件添加到页面提示：为元件命名除了便于用户管理、查找外，在制作交互效果时，也便于进行程序的选择和调用。

“02缩放元件为元件命名除了便于用户管理、查找外，在制作交互效果时，也便于进行程序的选择和调用。4.2将元件添加到页面提示：用户在移动、缩放和旋转元件时，元件的右下角会显示辅助信息，能帮助用户实现精确的操作。

“03旋转元件按住【Ctrl】键的同时拖曳控制点，即可以任意角度旋转元件，如图所示。用户如果要获得精确的旋转角度，可以在工具栏的“旋转”文本框中或者“样式”面板中设置，如图所示。4.2将元件添加到页面

“03旋转元件如果元件内有文本内容，文本内容将与元件同时旋转，如图所示。右击，在弹出的快捷菜单中选择“变换形状＞重置元件文本为水平”选项，即可将元件中的文本恢复到0°，如图所示。4.2将元件添加到页面

“03旋转元件如果希望矩形与文本保持一致的高度，可以单击“样式”面板上的“适应文本高度”按钮，效果如图所示。如果希望矩形与文本保持一致的宽度，可以单击“样式”面板上的“适应文本宽度”按钮，效果如图所示。4.2将元件添加到页面

“04设置颜色和不透明度将元件拖曳到页面中后，用户可以在顶部工具栏中或“样式”面板中设置其填充颜色和边框颜色，如图所示。用户还可以修改拾色器面板底部的不透明度值，实现填充颜色或边框颜色的不透明效果，如图所示。4.2将元件添加到页面

“05设置边框宽度和类型除了可以设置元件的颜色外，用户还可以在顶部工具栏中或“样式”面板中设置元件的边框宽度和类型，如图所示。4.2将元件添加到页面

AxureRP10一共提供了16个常用元件，如图所示。将鼠标指针移动到元件上，元件右上角将出现一个问号图标，单击该图标将弹出该元件的操作提示，如图所示。4.2将元件添加到页面4.2.1常用元件

“01矩形AxureRP10一共提供了3个矩形元件，分别命名为矩形1、矩形2和矩形3，如图所示。这3个元件没