写在前面:

Axure8软件下载地址:https://download.csdn.net/download/Alalafan/12351831

注:这是我本人使用的8.0版本Axure软件,安装包中包含了该版本软件的账户、密钥以及中文汉化补丁(补丁经过本人优化,更加适配)

一、Axure界面介绍

1、页面导航面板(Pages)

Axure的页面管理采用类似操作系统的文件夹和页面文件的管理方式,不同点是,页面文件可以存在子页面,这一点是考虑了页面与页面跳转或者嵌套页面等网页特点。

2、元件库(Libaries)

Axure的元件库,类似与PPT的模板,或者是Office提供的各种形状、图标,可以通过拖拽的方式,帮助我们快速创建原型。

2.1 元件库导入

Axure提供了多种元件库的导入功能,包含官网下载,本地导入、导入共享原件、手工创建等方式。其中手工创建可将我们日常用到较多的图形、样式、效果等管理成元件库,使用是,可直接拖拽到画布中,这里的原件不是简单的图形、形状、样式,还包含了网页所支持的特效,如渐进渐出、隐藏显示、幻灯片、链接跳转等

2.2 元件库使用

元件库提供了方便的导航筛选和元件名称搜索功能。

a. 元件库筛选

b. 元件库检索

c. 拖拽使用元件

3、工具栏(ToolBar)

工具栏提供了常用按钮的快捷入口,既可以通过鼠标点击激活,也可以通过快捷键激活。

选择有两种模式,相交模式:鼠标按住拖动选择多个元素时,只要鼠标滑过的区域与元素有相交,该元素即被选中;包含模式:鼠标按住拖动选择多个元素时,只有鼠标滑过的区域完全覆盖了该元素,该元素才能被选中。

默认为相交模式,该模式类似与PPT中的选中模式。

锁定位置的作用主要是将元素锁定在特定位置,以方便处理其他元素,元素一旦锁定后,变无法拖动位置。

预览功能是将当前涉及的原型发布到浏览器浏览,其原理是Axure搭建了一个小型的静态文件服务器,创建的原型转成HTML文件,发布到服务器上,浏览器进行访问预览。

发布功能是将设计的原型图转成HTML静态文件,如果设置了各类动作,Axure会自动生成js的方法帮助实现HTML中的特效。

4、检视器面板(Inspector)

在画布中,选中元素,右侧可看到样式面板,包含了三部分:样式,类似与CSS所需的各类属性。

4.1 样式面板(Style)

面板提供了元素所需的各种样式属性设置功能,包含了元素名称、盒子模型中的边框、内外边距、圆角、透明度、字体、着重号、对齐方式等。

4.2 备注面板(Notes)

可对元素设置元素备注,备注后效果如下图:

4.3 交互面板(Properties)

属性面板提供了完整的web页面所需的各类事件绑定所需的设置,如点击事件、双击事件、显示、隐藏、链接等。

5、大纲面板(Outline)

Axure提供了所有元素的大纲导航面板,类似于PS中的图层管理面板,可完成各个元素的组合,取消组合,元素压盖顺序调整,元素名称命名,组名称命名,删除、选中、多选等操作。为控制多个图层、元素提供了边界的入口。

二、基础操作

1、使用元件

1.1 设置元件名称

可通过检视面板修改元素名称,也可以通过大纲面板,选中修改。

1.2 设置元件大小、位置、角度

在样式面板可设置元件的大小,位置,也可以通过拖动的方式设置。

x:从左侧到右侧的距离,单位px

y:从上到下的距离,单位px

w:元件的宽度,单位px

h:元件的长度,单位px

R:元件的角度,单位度

T:文字的角度,单位度

1.3 设置元件的颜色和透明度

选择要改变颜色的元件,点击快捷功能区中的背景颜色设置按钮,选取相应的颜色,或者在元件样式中进行设置。

1.4 设置元件的盒子模型属性

Axure完美的支持Web页面的布局中的盒子模型属性的设置。

1.5 设置元件默认隐藏

在检视的样式面板中,右上角的隐藏选择框,如果勾上,则该元件默认为隐藏,在画布中则以浅色的形式存在。

1.6 标记元件文字

对需要添加文字的元件,双击该元件,即可输入文字。

2、元件交互

2.1 设置元件的类型、Tips、约束

可以通过检视面板中的属性面面板,设置元件的类型(如Text、Email、Password)、占位符、Tips、长度、是否隐藏边框、是否只读、是否禁用、表单提交按钮等信息

2.2 元件事件设置

选择元件后在检视的交互属性界面,选择事件类型(点击、双击、右键、鼠标滑过、点击后等),在弹出的对话框中,可设计页面跳转、界面元素显示隐藏、渐入渐出效果等各类动作。

2.3 设置下拉列表值

通过元件库选择List Box元件,在检视的交互属性面板点击添加项菜单,可以批量添加下拉值。

2.4 单选按钮唯一选中

可以对多个单选按钮设置唯一选中效果,选中多个单选按钮,设置按钮组名即可。

3、其他常用操作

3.1 转换元件为图片

右键中可支持元件转化为图片的操作

3.2 元件组合和取消组合

在实际的原型绘制过程中,需要将多个元件组合成一个整体,比如多个单选框需要组成一组、文字描述和按钮元件、页面的header、footer、导航条等。

3.3 调整元件的层级

类似与HTML中的Z-index一样,多个元件存在压盖的层级顺序,默认的顺序是先拖入的元件被后拖入的元件压盖,也即后来居上。可通过右键调整层级,也可以在概要(Outline)处拖拽调整,概要出的层级是靠上部的元件压盖靠近下部的元件。

a. 右键调整元件层级

b. 概要(Outline)拖拽调整

3.4 添加事件执行的条件

在事件设置页面,可通过添加条件的方式,来满足复杂的交互

a. 设置条件的入口

b. 条件设置面板

3.5 设置变量

a. 局部变量

b. 全局变量

4、常用功能设置

4.1 设置形状并排显示时边框是否重叠

4.2 显示和隐藏交互和说明编号

一个元件设置了备注或者添加了交互时间后,默认显示编号,可设置显示或不显示

4.3 显示/隐藏两侧的功能面板

点击可展开左侧或右侧的面板

4.4 响应式布局设置

通过设置自适应视图,使得原型HTML在多种分辨率设备中查看时,系统会根据自身分辨率,自动与分辨率相适合的原型进行匹配,并显示出来。

a. 自适应视图

b. 多终端分辨率设置

三、使用Axure撰写需求文档

需求文档的撰写已经从最开始的纯文字,逐渐转变到图文结合,再到线框图,再到原型图,再到JS高仿真Demo等形式,为的是保证客户需求的传达和落地不偏离,环节交接无抛接。

总的来说,需求文档有三个作用:

1. 传达客户、功能、应用、产品开发需求;

2. 保证各环节沟通有理有据

3. 软件及产品质量控制有具体标准

很多程序猿在开发时,一般都是看着效果图和原型图写代码,只有在遇到问题时,才会查看word文档。也就是说,开发需要一边写代码,一边看效果图,一边看原型,还要时不时查看文档。

而且,大多数程序猿都不会逐字逐句去读产品经理的长篇大论。那需求写word真的合适吗?这样的用户体验真的好吗?花费大量时间写word真的有价值吗?在Axure画原型的同时,我们为什么不能直接在旁边标注呢?这样岂不是方便快捷很多吗?

其实,流行一种直接在原型图上标注的需求文档撰写方式。在新版的Axure8中,也已经推荐了原型加标注的需求文档样式。Axure8新增了一组部件—不干贴,就是方便产品设计人员进行功能标注。

以下方式仅供参考:

a. 需求文档结构

b. 脚注模式

c. 不干胶模式

Axure8超详细使用教程(含安装包)相关推荐

  1. myeclipse超详细安装教程+图文+安装包获取

    软件介绍: <名称>:MyEclipse <大小>:1.5GB <安装环境>:兼容win7.win8.win10 <安装包链>:(攻:)牛油果软件 安装 ...

  2. linux安装nginx1.21.1全教程(含安装包)

    linux在线安装nginx1.21.1全教程(含安装包) 大家好,我是酷酷的韩金群~ 1.检查是否已安装nginx find -name nginx 如果系统已安装nginx,那么卸载: yum r ...

  3. linux mysql5.7.36 离线安装使用全教程(含安装包)

    linux mysql5.7.36 离线安装使用全教程(含安装包) 大家好,我是酷酷的韩~ 1.前期准备: mysql版本5.7.36 百度网盘下载地址如下: 内含 mysql-5.7.36-linu ...

  4. ArcGIS 10.5安装详细教程含安装包

    安装包解压前需要关闭电脑的杀毒软件 安装包解压前需要关闭电脑的杀毒软件 安装包解压前需要关闭电脑的杀毒软件 安装包下载:安装包下载地址安装包下载地址-桌面系统文档类资源-CSDN下载 一.需要关闭电脑 ...

  5. ArcGIS10.2 安装教程(含安装包)

    本文转载自<https://blog.csdn.net/bigemap/article/details/52860743> ARCGIS安装教程(arcgis10.2(含ARCGIS安装包 ...

  6. JDK1.8下载与安装(完整图文教程含安装包)

    1.下载JDK1.8安装包 官网下载地址:https://www.oracle.com/java/technologies/downloads/ 同时提供一份网盘下载地址,大家按需自取:点击下载 2. ...

  7. indesign2019怎么存低版本,InDesign CC2019下载+详细安装教程(附安装包)

    adobe InDesign CC2019 软件功能: 1.印前检查 在设计时进行印前检查.连续的印前检查会发出潜在生产问题的实时警告,以便您快速导航到相应问题,在版面中直接修复它并继续工作. 2.链 ...

  8. 最新MDK软件安装包和芯片包及超详细图文教程来咯!!!

    注意啦!注意了!最新MDK软件安装包和芯片包及详细图文教程来咯!!! 欢迎使用最新MDK软件安装包和芯片包及超详细图文教程 如何安装KEIL5 1.1 温馨提示 1.2 获取KEIL5 1.3开始安装 ...

  9. 【CSDN云IDE】个人使用体验和建议(含超详细操作教程)(python、webGL方向)

    [CSDN云IDE]个人使用体验和建议 (含超详细操作教程)(python.webGL方向)  文章目录: 一.CSDN云IDE简介 二.新建工作空间 三.管理你的工作空间 (3.1).工作空间基本信 ...

  10. linux jdk1.8 rpm安装全教程,含安装包

    linux jdk1.8 rpm安装全教程,含安装包 大家好,我是酷酷的韩金群~ 1.linux系统jdk安装包准备 这里是jdk-8u311-linux-x64.rpm 百度网盘地址(永久有效): ...

最新文章

  1. oracle dump 转储
  2. 接口中也可以有方法了
  3. 单片机课程设计——《基于AT89S52单片机和DS1302时钟芯片的电子时钟(可蓝牙校准)》...
  4. 使用python制作ArcGIS插件(3)ArcPy的使用说明
  5. @PropertySource注解获取配置文件值
  6. 渗透测试工具——BurpSuite
  7. Matlab实现Hermite插值多项式
  8. 微信公众号跳转到关注页面
  9. graphpad怎么修改图片大小_Graphpad作图小技巧:如何统一图片尺寸
  10. 用计算机用鞋码算年龄,尺寸换算厘米对照(尺寸和厘米换算计算器)
  11. 257套工业机器人SW设计3D图纸 焊接机械手/发那科ABB安川臂模型
  12. Arduino(5) 使用Mega2560设计上下位机串口通信系统的下位机
  13. 【SPSS】【Python】“发生严重错误客户端无法再与服务器通信”无法导入表格
  14. 程序员是如何开灯的 白话闲聊mqtt协议
  15. 联想笔记本如何关闭Fn功能键
  16. 华为私有云的搭建方案_网盘限速太坑爹,用它小白也能搭建私有云
  17. ios label文字行间距_iOS 设置label的行间距教程
  18. 关于SEO的一些浅认识
  19. Windows 罕见技巧全集1
  20. 含文档+PPT+源码等]精品微信小程序家教信息管理系统+后台管理系统|前后分离VUE[包运行成功]微信小程序毕业设计项目源码计算机毕设

热门文章

  1. 代码随想录第十一天 LeetCode 20、1047、150(栈)
  2. 【学术】分享几种论文写作神器,提高你的写作效率
  3. 树莓派笔记12:通过SPI操作OLED显示屏
  4. GPU通用计算与CUDA
  5. 一年级下册计算机教学计划,人教版一年级数学下册教学计划
  6. Excel-VLOOKUP函数的进阶使用
  7. 51单片机游戏(俄罗斯方块)
  8. 什么是技术债,为什么要还技术债?
  9. Hulu在Content Embedding的探索与实践
  10. BZOJ 1208 宠物收养所 Splay树