【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+ 鼠标 左键 拖动。