【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+ 鼠标 左键 拖动。
【Axure】--原型设计简易手册相关推荐
- Axure 原型设计QQ简易登录
注意看红色圆圈,共有28步骤,按顺序操作下去 拉一个矩形出来 2.拉一个三级标题居中 3.把三级标题改为QQ登录 4.再拉两个三级标题出来改为账号和密码 5.拉两个文本框对齐账号和密码 6.给两个文本 ...
- 微信小程序优惠劵功能（包含用户需求，axure原型设计，数据库设计，后台功能，微信小程序功能）
1.用户需求 优惠券功能有: 1.后台可以设置优惠券和查看已发出优惠券的状态 2.平台自动给新用户发放优惠劵,或者手动给某些用户发放优惠券 3.用户在小程序中手动领取优惠券 4.用户中心新增" ...
- Axure设计html,从零开始学Axure原型设计（进阶篇）_html/css_WEB-ITnose
从零开始学Axure原型设计(进阶篇) Axure不仅能制作静态的视觉稿.页面,还能添加交互动作,是进行原型设计的最佳软件之一.在认识了Axure的界面和部件库之后,我们可以用它来画线框图了,但是静态 ...
- axure原型设计入门_应用程序原型：Facebook折纸入门
axure原型设计入门 In the world of software development a prototype is a working, rudimentary version of an ...
- Axure原型设计工具介绍
Axure原型设计工具介绍 1759230茅杭斌 目录 1.前言 2.下载与激活 3. Axure相关功能介绍 4.Axure案例演示 5.结语 一.前言 在我们进行程序开发的时候,原型图是必不可少的 ...
- Axure财务出纳管理系统Axure原型设计
作品名称:财务出纳管理系统Axure原型设计 软件版本:Axure 8.Axure 9.Axure 10 作品类型:Axure原型 文件类型: .rp 文件大小:5.46MB 适用场景: PC 点击下 ...
- Axure原型设计小案例的制作
注意看红色箭头,按顺序操作下去 先是在电脑页面打开Axure原型设计,然后看到老师给的小案例观察案例. 观察案例后,看到Axure原型设计左边的元件库有一些小元件,把图片小元件拖出来. 3,点击图片小 ...
- 画布之轮播图片HTML5,Axure原型设计之轮播图
轮播图是网页设计或者APP设计常见的元素,学会使用axure原型工具制作轮播图对制作PC端或者移动端的原型都非常有帮助.现在讲讲如何使用axure8.0制作轮播图原型~~ 步骤一:(轮播图动态面板) ...
- Axure原型设计导出到PDF文件
Axure 没有直接导出PDF文件的功能,可以通过Axure 的打印功能,选择PDF打印机,以间接的方式将原型设计导出到pdf文件里. 操作步骤 以Axure9为例 打印 Axure9---文件--- ...
- Axure原型设计相关资源网站（不断更新中……）
今天开始,在使用Axure过程中,搜集一些经常使用的圆形设计资源网站: 2012年10月29日 网易用户体验设计中心:http://uedc.163.com/ Axure官网:http://www.a ...
最新文章
- MariaDB10和MySQL5.6社区版压力测试
- ALV通过F4事件，实现自定义搜索帮助F4
- Shell脚本编程详解
- 解决夜神模拟器无法联机调试 adb server version (**） doesn't match this client (**); killing...
- python可以处理多大的数据_科多大数据之Python基础教程之Excel处理库openpyxl详解...
- 三大运营商公布11月运营数据：中国移动固网业务表现亮眼
- 晨风机器人对接php_php封装实现钉钉机器人报警接口的示例代码
- foxmail占cpu 100%解决办法
- 通过反射认识泛型的本质
- Halcon教程十二:回形针识别进阶
- K3S高可用安装体验
- 新手网站建设优化，这些网站为你提供数之不尽的免费素材！（3）
- Android JVM和DVM的区别
- systemd service unit
- win10 安装mysql5.7 超详细（亲测成功）
- MFC模拟 Windows 文件可视化系统
- vue 配置文件不打包
- weblogic 忘记密码重置密码
- 来自一位程序员的经验之谈（三）
- 新Chrome浏览器不支持html5的问题