产品经理必备 Axure 7部件详解.docx

产品经理必备 Axure 7部件详解.docx

《产品经理必备 Axure 7部件详解.docx》由会员分享，可在线阅读，更多相关《产品经理必备 Axure 7部件详解.docx（62页珍藏版）》请在冰豆网上搜索。

产品经理必备Axure7部件详解

产品经理必备

Axure7详细图解

目录

产品经理必备1

Axure7详细图解1

一、Axure7部件详细图解4

一、图片（image）4

二、水平线和垂直线（Horizonal&VerticalLines）15

三、图片热区（HotSpot）16

四、动态面板（Dynamicpanel）17

五、动态面板状态（Dynamicpanelstates）17

六、动态面板交互19

七、内部框架（InlineFrame）26

八、中继器（Repeater）29

九、文本段落（TextArea）38

十、下拉列表（DropList）38

十一、列表选择框（ListBox）40

十二、复选框（CheckBox）41

十三、单选按钮（RadioButton）42

十四、提交按钮（HTMLButton）43

十五、树部件（Tree）44

十六、表格（Table）47

十七、经典菜单（Menu）49

二、Axure7部件操作51

一、添加、移动和改变部件大小51

二、编辑部件样式52

三、部件属性面板详解54

四、部件特定属性55

五、部件样式面板详解57

六、部件样式编辑器（WidgetStyleEditor）57

七、格式刷（FormatPainter）58

三、页面样式60

一、页面样式（PageStyle）60

二、页面样式编辑器（PageStyleEditor）62

三、网格、辅助线和对象对齐63

四、预置设置创建辅助线（CreateGuidesfromPreset）63

五、网格设置（GridSettings）64

六、辅助线设置（GuideSettings）65

七、对象对其设置（ObjectSnapSettings）66

四、交互基础67

一、事件（Events）69

二、用例（Cases）74

三、动作（Actions）77

四、交互基础案例80

一、Axure7部件详细图解

线框图是由一系列部件构成的，要添加部件，只需将需要的部件拖放至设计区域即可。

不过这Axure中内建的部件分别有着不同的属性、特性和局限性，要想学好Axure这款软件，首先要熟悉这些基础部件。

一、图片（image）

图片部件可以用来添加图片和插图，显示你的设计理念、产品、照片和更多。

●导入图片和自动大小：

拖放一个图片部件到设计区域并双击导入图片。

Axure支持常见的图片格式，如GIF、JPG、PNG和BMP。

当询问你是否自动调整图片大小时，点击“是”将图片设置为原始大小，点击“否”图片将设置为当前部件的大小，见图1。

图1

●粘贴图片：

图片还可以从常用的图形设计工具（如Photoshop）和演示工具中复制粘贴到Axure中。

此外当我们从CSV或Excel复制内容时，可点击右键，选择“粘贴为图片/表格/纯文本”；或直接按Ctrl+V，在弹出的对话框中选择，见图2。

图2

●添加&编辑图片文字：

你可以给导入的图片添加编辑文字，双击导入图片后，右键点击图片然后选择“编辑文字”；还可以给添加的文字编辑样式，如颜色、大小、字体等，见图3。

图3

●保持比例缩放图片：

按住Shift键，同时用鼠标拖动图片部件边角的小手柄，可以按纵横比例缩放图片，见图4。

图4

●图片交互样式：

图片可以添加交互样式，如鼠标悬停时、鼠标按下时、选中时和禁用时。

右键点击图片，并选择“交互样式”或者在部件属性面板中进行设置。

当添加完交互样式后，在图片的右上角会出现一个黑白的小方块，鼠标悬停在小方块上（或点击小方块）可以预览交互效果，见图5。

图5

●图片选择组：

和单选按钮组相似，图片也可以被分配到图片选择组，当选择组中的图片设置了选中样式后，点选其中一张图片，其他图片都会被设置为默认样式。

要将图片设置到选择组，先选择图片，然后点击右键选择“指定选择组”，或者在部件属性面板底部设置选项组名称，见图6。

图6

●分割/裁切图片：

图片部件可以被水平或垂直裁切，这样可以非常方便地处理导入的截图。

右键点击图片，选择“分割图片”或“裁切图片”或在部件属性面板中选择，见图7。

分割图片（Slice）：

将图片分割成多个水平或垂直的部分。

裁剪图片（Crop）：

选择你想保留的图片区域。

裁剪保留选中部分，裁切去除选中部分。

图7

●图片边界和圆角：

通过选择工具栏中的线宽和线条颜色就可以给图片添加边框。

也可以通过拖动部件左上角的圆角半径控制手柄，或是进入部件的样式面板设置图片圆角，见图8

（A:

自左至右分别是图片线条颜色、线条宽度、线条样式；

B:

圆角半径控制手柄）。

图8

●图片的不透明度：

图片可以调整透明度，在部件样式面板中输入不透明度百分比即可，见图9。

图9

●优化图片：

大图片会使你的RP文件增大，还会影响浏览质量，使用优化图片可以在不改变图片大小的前提下减小图片大小，但是这有可能影响图片质量。

要优化图片，右键点击图片并选择“优化图片”，见图10。

图10

●H1、H2、标签、文本、矩形、占位符、形状按钮：

这几个部件都属于形状部件，默认的标签和文本的样式可以在部件样式编辑器中进行编辑。

·添加文本：

选中形状部件后点击右键，选择“编辑文字”，即可添加文本，也可以双击形状部件后进行编辑添加。

选择形状：

形状部件可以改变各种形状，包括矩形、三角形、椭圆形、标签、水滴和箭头等。

要改变部件形状，先选择该部件，然后单击部件右上角灰色圆圈选择形状，或者在部件属性面板中选择形状，见图11。

图11

形状部件的格式：

形状部件允许使用富文本格式，包括编辑字体、字体大小、字体颜色、粗体、斜体、下划线，并改变对齐方式。

你也可以改变填充颜色、线条颜色、线宽和线模式。

要更改形状的格式，点击控件，在顶部的工具栏格式中进行设置，见图10。

图12

自定义样式：

自定义样式：

使用部件样式编辑器可以集中管理部件，包括形状的格式。

例如，创建一个蓝色按钮的样式并将其指定给一些形状按钮，然后在部件样式管理器中修改填充颜色，这样所有使用蓝色按钮样式的形状按钮都会更新到最新样式，见图13。

图13

●设置交互样式：

形状按钮可以像图片部件那样添加鼠标悬停时、标按下时、选中时、禁用时的交互样式。

右键点击形状部件并选择“交互样式”，打开交互样式对话框，你可以添加任何可用的格式和样式，见图14。

一旦提交样式，在设计区域中部件的右上角会增加一个由黑白色块，将鼠标悬停在小方块上（或者点击小方块）可以预览交互样式，见图14

图14

●指定形状按钮到选择组：

与单选按钮组效果类似，当选项组中的一个形状部件点击设置为选中状态后，选项组中的其他形状部件都会切换到默认样式。

要将形状部件添加到选择组，首先选中要添加到选项组中的形状部件，点击右键，设置选项组名称，或者到部件属性面板底部设置选项组名称。

●圆角：

使用形状部件可以添加圆角效果。

要添加圆角效果，选中形状按钮部件，拖动部件左上角的黄色小三角调整圆角半径，或者到部件样式面板中设置圆角半径，见图15。

图15

●转换形状/文本部件为图片：

若想使形状部件转换为图片且保留形状按钮部件上已经添加的注释和交互，可以使用“转换为图片”功能。

右键点击想要转换的形状按钮，选择“转换为图片”，见图16。

图16

●自适应宽高：

形状部件拥有自适应宽高属性，这是为了自适应其文字内容的宽高，取代手动指定尺寸和文字换行。

设置自适应宽高的快捷操作是，双击大小调整手柄。

双击左右手柄会自动调整宽度，双击上下手柄自动调整高度适应其内容高度，双击左上、右上、左下、右下4个角会自动调整宽度和高度适应其文字内容，见图17。

图17

●阴影：

通过添加外部阴影、内部阴影和文字阴影可以增加原型的保真度。

要添加阴影，可以在顶部的工具栏和部件样式面板中设置，见图18。

图18

●不透明度：

要设置形状部件的不透明度，在部件样式面板中设置不透明度的值，如50%（数值越小透明度越高），见图19。

图19

形状部件的局限性

●单独的边框样式：

没有办法给形状按钮的不同边框分别设置样式。

一种解决方法是使用水平线和垂直线画出边框。

比如，创建一个形状按钮，顶部线条设置为白色，左右和底部的线条设置为黑色。

●矢量图：

通常可以将线条和形状组合起来接近想要的形状，但是没有钢笔工具绘制自定义形状。

一个解决方法是使用矢量图绘制工具，如Photoshop，制作好图片后复制粘贴到Axure中或者导入图片。

●复制形状样式：

当复制形状按钮部件的时候，形状的样式也会被复制过来。

不过可以使用格式刷工具复制样式，并粘贴给其他指定部件。

二、水平线和垂直线（Horizonal&VerticalLines）

最常见的用法是将原型中的内容分解成几个部分，比如，将页面分为header和body。

●给线条添加箭头：

线条可以通过工具栏中的箭头样式转换为箭头。

选中线条，在工具栏中点击箭头样式，在下拉列表中选择你想要的箭头样式，见图20。

●线宽、颜色和样式：

线条可以添加颜色、设置宽度和添加样式，在工具栏中设置即可，见图20。

●旋转箭头：

要旋转线条或箭头，PC机按住Ctrl，Mac机按住Cmd，同时将鼠标悬停在线条末尾拖拽，或者在部件样式面板中设置旋转角度，见图21。

图20

图21

三、图片热区（HotSpot）

图片热区是一个不可见的（透明的）层，这个层允许你放在任何区域上并在图片热区部件上添加交互。

图片热区部件通常用于自定义按钮或者给某张图片添加热区。

●图片热区可以用来创建自定义按钮上的点击区域。

比如使用多个部件（图片部件、文字部件、形状按钮部件）来创建一个保真度较高的按钮，只需在这些部件上面添加一个图片热区并添加一次事件即可，无需在每个部件上都添加事件。

●如果你想给一张图片上添加多个交互，或者给一张图片的某部分区域添加交互，就可以通过给图片添加图片热区部件来实现，见图22。

图22

●编辑图片热区：

图片热区在生成的原型中是透明的（不可见的），如果想在设计区域中也将其设置为透明，点击菜单>视图>遮罩，取消勾选“图片热区”即可。

四、动态面板（Dynamicpanel）

动态面板是一个可以在层（或状态）中装有其他部件的容器。

可以将动态面板比喻成相册，相册的每个夹层中又可以装进其他照片，每个夹层和里面的部件可以隐藏、显示和移动，并且可以动态设置当前夹层的可见状态。

这些特性允许你在原型中演示自定义提示、灯箱效果、标签控制和拖拽等效果。

在实际工作中你会发现，动态面板是在原型设计中使用最多的部件。

五、动态面板状态（Dynamicpanelstates）

动态面板可以包含一个或多个状态，并且每个状态中可以包含多个其他部件。

不过，一个动态面板状态只能在同一时间显示一次。

使用交互可以隐藏/显示动态面板及设置当前动态面板状态的可见性。

添加和调整动态面板大小最好的方法，就是将已有的部件转换为动态面板。

选择想要放入动态面板状态的部件，右键单击，选择“转换为动态面板”，这个动作将自动创建一个新的动态面板，并将你选择的部件放入动态面板的第一个状态中。

也可以拖拽动态面板部件到设计区域中，并使用部件上下左右的提示来调整大小。

设计区域中