【Axure】--原型设计简易手册

1 设计规约与建议

1.1 工具

Axure RP 8.0 + Chrome

注：当使用RP生成html文件时，谷歌浏览器需要安装插件才能访问。

打开谷歌浏览器（或360等其他非IE浏览器），地址栏输入chrome://extensions/，使用插件文件进行离线安装，安装完成后点选RP插件的“允许访问文件网址”，见截图：

 

1.2 设计规约

原型设计在于进一步解释和验证需求编写的合理性，阐述所需构建系统的逻辑完整性、可操作性，以及提供便于与用户直观交流的素材。原则上不应该加入过多的视觉元素。

 注：原型设计伴随需求规格说明的编写，上下左右的内外边距、视觉颜色、图片等除非为了说明需求的内容和特定功能，否则不需加入。

 

1.3 建议

以下为制作原型时可以采纳的建议。

• 原型设计侧重内容展示与界面交互，建议先通过Visio构建出界面流程图，以确定各个界面的跳转，从而能够将页面的静态展示、页面相互的跳转链接落地确定。
• 对于表单构建，涉及较多字段重复使用，建议优先考虑点击选中控件，按住Ctrl进行复制。该方法比使用Ctrl C+Ctrl V的好处是利于复制后的定位；多个页面、组件、动作Case间的复制倾向于使用Ctrl C+Ctrl V。
• 需要使用“确定”、“取消”等按钮时，宜使用【矩形框】（box），而不是RP原生携带的【按钮】（button）。
• 文本框提供了多种类型的表示方法（Text、Number、密码、日期等），按需进行选择。
• 对于原型进行功能设计较难实现、但功能通用强并较易说明的（如身份验证、手机号验证等），建议进行备注说明，不应投入更多时间。
• 需要实现单选功能时，选中多个单选框，在属性中的【指定单选按钮组名称】中输入自己想命名的组名称，这样将实现单选功能。
• 理解动态面板的作用。动态面板多用于通过交互设计（按钮点击等）实现不同内容的展示、作为内容容器放置大量表单字段。简单的例子如标签的切换，实现的原理为：

       1.交互逻辑：点击多个矩形框（交互过程），展示不同标签页中的内容（动态面板的状态切换）。

       2.添加多个矩形框构成标签，添加动态面板作为内容容器。

 

3.添加用例，为了实现点击第一页矩形框，展示第一页的内容，只需对【第一页边框】添加用例-动作【设置动态面板状态】-勾选所需动态面板（这里的动态面板已命名为“动态面板演示”）-设置为状态【第一页】。

同理，设置【第二页边框】的用例动作。

4.通过以上步骤实现了通过点击矩形框以切换动态面板的功能实现，可以进行预览以验证功能的实现。

 

对于大多数的页面切换、对话框显示、表单内容切换、多级菜单展开等功能，都是基于以上原理完成功能实现，区别只是多增加几个动作等。

这里延伸一下【推动/拉动元件】这个动作选项，本质上动态面板相当于一个广告板，广告板按照一定时间展示不同的内容，动态面板通过不同的动作触发不同的内容展示（这些内容包含在动态面板的不同状态中）。【推动/拉动元件】做的事情是实现页面纵向、横向元件的伸展与收缩，比如多级菜单的展开采用类似于手风琴的交互方式，原理就是通过一个动作控制元件的排列，如果原先菜单是收缩的，那么应该推动元件，把原本收拢的元件展开，这样就出现了下级菜单；反之，若果原先菜单是展开的，通过拉动元件，把原本展开的元件收拢，类似于做了一个拉回来的动作。当然配合元件的隐藏、显示，可以带来更流畅的交互过程。

 

• 理解RP的交互设计，通过【交互】、【用例】、【动作】完成。

动作分为【添加动作】、【组织动作】、【配置动作】完成。

这里有一个技巧，放置在页面上的任何元件初始状态都是未命名的，当你需要对元件配置动作前，可以只针对所需元件进行命名（并不需要每个元件都命名，大量的表单字段其实是没有交互设计需求的），然后勾选【隐藏未命名的元件】，这样就可以过滤出命名过的元件（而命名过的元件已经是你因需要进行交互设计而可以命名了的）进行动作配置。

大量的【动作】使用需要一定的制作经验，给出的建议是：明确所需动作（连接跳转、动态面板切换、显示与隐藏、文本设置等），按照先后顺序组织动作以及动作的细节（通过【配置动作】完成）。

 

• 至于RP更多的功能这里不展开，可以参考百度经验、http://www.iaxure.com/、人人都是产品经理等网站。

 

• 若要进行更深入的学习使用，可以参考《Axure RP 7.0从入门到精通Web+APP产品经理原型设计》、《AXURE RP8网站和APP原型制作从入门到精通》、《AXURE RP8实战手册  网站和APP原型制作案例精粹》，业界导师为：小楼一夜听春语。

 

1.4 快捷键汇总

1. 通用快捷键

剪切： Ctrl+ X。

复制： Ctrl+ C。

粘贴： Ctrl+ V。

保存： Ctrl+ S。

退出： Alt+ F4。

查找： Ctrl+ F。

替换： Ctrl+ H。

打印： Ctrl+ P。

新建： Ctrl+ N。

打开： Ctrl+ O。

全选： Ctrl+ A。

重做： Ctrl+ Y。

撤销： Ctrl+ Z。

 

2. 功能快捷键

 

快速预览

F5 键： 效果预览。

Ctrl+ F5 键： 预览设置。

 

发布生成

F6 键： 发布到 Axure。

F8 键： 生成 HTML 文件。

Ctrl+ F8 键： 在HTML文件中重新生成当前页面。

F9 键： 生成规格说明书。

 

选择模式

相交模式： F3。

包含模式： Ctrl+ F3。

连接模式： Ctrl+ Shift+ F3。

 

3. 编辑快捷键

 

复制元件

复制元件到指定位置： Ctrl+ 鼠标拖曳。

复制元件： Ctrl+ D。

 

元件移动

方向键： 将元件每次移动一个像素。

Shift 或 Ctrl+ 方向键： 将元件每次移动10像素。

 

元件旋转

旋转元件角度： Ctrl+ 鼠标左键（鼠标指针点中元件任意边界点不放，拖动调整角度）。

 

层级切换

元件上移一层： Ctrl+]。

元件下移一层： Ctrl+[。

元件移至顶层： Ctrl+ Shift+]。

元件移至底层： Ctrl+ Shift+[。

 

边界对齐

元件左对齐： Ctrl+ Alt+ L。

元件右对齐： Ctrl+ Alt+ R。

元件顶端对齐： Ctrl+ Alt+ T。

元件底端对齐： Ctrl+ Alt+ B。

元件水平居中： Ctrl+ Alt+ C。

元件垂直居中： Ctrl+ Alt+ M。

 

文字对齐

左对齐： Ctrl+ Shift + L。

右对齐： Ctrl+ Shift + R。

居中： Ctrl+ Shift+ C。

 

文字样式

粗体/非粗体： Ctrl+ B。

斜体/非斜体： Ctrl+ I。

下画线/无下画线： Ctrl+ U。

 

平均分布

横向平均分布： Ctrl+ Shift+ H。

纵向平均分布： Ctrl+ Shift+ U。

 

元件组合

组合： Ctrl+ G。

取消组合： Ctrl+ Shift+ G。

 

位置与尺寸

编辑位置和尺寸： Ctrl+ L。

切换编辑项： Tab。

锁定位置和尺寸： Ctrl+ K。

解锁位置和尺寸： Ctrl+ Shift+ K。

 

已打开页面间切换

下一页： Ctrl+ Tab。

上一页： Ctrl+ Shift+ Tab。

 

页面操作

放大缩小页面： Ctrl+ 鼠标 滚轮 或 Crtl+「+/-」。

页面 左右 移动： Shift+ 鼠标 滚轮。

页面 移动： Space+ 鼠标 左键 拖动。