Axure Pro 是专门用来制作界面原型的工具。
我们在跟用户进行软件系统需求沟通时,如果使用文字,一般的最终用户是很难理解与想象你未来产品模样的。因此通常我们会设计界面原型,界面原型表达软件系统能做什么,也就是系统的功能性需求,因为是原型,并不是真正的系统,但又可以达到与系统真正运行起来相同的效果。
通过界面原型与用户沟通,让其能提前看到未来系统是什么样子的,这样用户才能告诉我们其真正的需求是什么,制作界面原型是需求获取的必要条件,通过界面原型与用户沟通,可以起到事半功倍的效果。
制作界面原型的方法很多(我掌握的):
1)使用网页制作软件创建:可以直接操作HTML文件,更接近真实。缺点,你需要掌握HTML语法,掌握复杂的网页制作工具。操作复杂性高。
2)visio,可以快速的创建单个页面,也可以用创建,缺点:最多只能做到页面直接的关联,按钮,链接上无法创建事件,死板。无法作出接近真实的效果,无法生成HTML文件。
3)Axure,Axure可以以所见即所得的方式创建界面原型,优点:操作者无须懂的HTML语法,无须懂得控制人机交互的事件处理,例如页面跳转时、命令按钮按下时系统响应 程序脚本(JAVA Script)。因此很适合业务需求分析人员使用。生成的页面,串接在一起,可以进行操作,模拟场景,让系统“动”起来。
本节通过一个简单页面的创建,讲解Axure的基本操作。下一节讲解人机交互事件处理。

百度经验:jingyan.baidu.com

工具/原料

  • Axure 试用版。

百度经验:jingyan.baidu.com

步骤/方法

  1. 1
    启动Auxre。成功后如图:
    首次启动,打开了所有的工具栏及相关视图。界面可以分为9个部分:
    (1) 菜单栏,所有应用程序(C/S模式)都有的内容。File菜单包括了关于文件的操作,例如保存,另存为,最近打开设计,退出等。Edit菜单,重做,撤销,复制,粘贴,剪贴,查找与替换。View菜单:设置界面中工具栏的出现,隐藏,各种视图③、⑤、⑥、⑦、⑧、⑨的出现与隐藏。默认全部出现;Wireframe菜单:全局性系统设置菜单;object菜单:页面中对象的对齐,分组,转换等;Generate菜单:生成原型与说明书功能。Share菜单:配置管理相关功能(团队设计时使用)。Help菜单:在线帮助、版权信息。
    (2) 工具按钮栏:工具按钮栏中按钮组是否出现,通过View菜单控制。View->toolbars 进行设置。
    (3) 页面地图栏:此栏显示你设计的页面及页面之间的树状关系,页面的上下文菜单可以删除页面,改名等。
    (4) 页面工作区:页面设计区,可以打开多个页面,点击页面标签,右键上下文菜单包括了打开关闭页面的操作。双击页面地图栏的页面,工作区打开该页面。
    (5) 页面属性栏:输入页面注释,设置页面事件,页面属性。
    (6) 控件栏:构成页面的元素,各种控件,拖动到页面上需要的位置。
    (7) 控件属性栏:每个控件的属性设置栏,包括三项:A:控件说明B: 事件设置 C控件属性:包括位置、字体、对齐、分组。
    (8) 模板栏:在整个系统界面的设计中,有一些内容可能会在多个页面中重复出现,这些内容可以被组织成一个Master,Master可以通过包组织管理。拖动Master到页面中,master中的控件一起作为一个整体出现在页面中。简单说Master就是为了重用。另外修改master内容后,使用了master的页面内容也被修改(从生成原型的效果上来看)。
    (9) 动态面板管理栏:动态面板是Axure的核心概念,使用好可以做出很好的效果。动态面板包括多个状态,每个状态里边可以放置不同的内容,通过事件切换状态,使页面表现不同状态的内容。我的一篇经验中讲解了如何使用动态面板制作TABPAGE效果。这只是一种用法,陆续会介绍一些其他用法。
    页面中的view等,右上角的叉,点击可关闭,在view菜单上可以再打开(页面除外)。
    View之间及view与页面设计工作区之间的上下,左右分割线,都可以点击拖动,调整区域的大小。左右分割线上的小三角可以隐藏区域,再点可打开,试试就知道。
    步骤阅读
  2. 2
    系统默认建立4个页面:Home及其下级页面page1、page2、page3,联系比较紧密的页面可以分层组织在一起,例如一个功能模块。点击页面、右键可以修改页面的名字,改成你满意的名称。可以删除,复制(duplicate),移动页面(向上,向下,移出,移入:自己试试效果)
  3. 3
    点击保存按钮,保存为设计文档,后缀为.rp。
  4. 4
    如图我在页面上放置了5种控件:
    (1)文本(text panel)控件:如图所使用的,作为静态文本显示。
    (2)图片控件:image,在页面上,右键选择 Edit image-->Import image可以插入具体的图片。
    (3)矩形控件:通常用来进行界面分割,但也可以很多其他用法,比如tab页面的标签,总之当你想画个框框,就可以使用它。
    (4)文本框:需要输入内容的文本框,最常用的一个控件;
    (5)按钮:系统中需要执行某些命令时使用,例如提交内容,计算等。途中右上角黄色的1表示这个按钮上有一个事件(我加上的)。
    步骤阅读
  5. 5
    控件直接的对齐,你可要通过输入控件的位置数据来控制,也可以把多个控件选中,然后点击工具栏上的对齐命令(按钮),对齐控件。如图:
    根据图标基本可以看出其功能:从左到右为:选中的控件以上边第一个为准右对齐;水平居中对齐;向右对齐;向上对齐(控件有可能积压在一块,如果在垂直方向不重叠则不会);垂直居中,向下对齐;平均分配控件间垂直间距;平均分配水平间距。
    步骤阅读
  6. 6
    完成这个简单的页面后,可以生产HTML页面了,点击Generate-->prototype,打开对话框如图:
    左边选择默认,选择生成页面的目录,点击Generate按钮,生成HTML页面,并打开使用IE打开第一页(你也可以根据需要决定是否打开以及你的系统默认的浏览器打开)
    步骤阅读
  7. 7
    效果如图:
    步骤阅读
  8. 8
    保存原型,点击Exit退出Axure。

    本节讲解Axure的基本操作,后续会讲解一事件,master等高级应用。

    END
经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。
举报作者声明:本篇经验系本人依照真实经历原创,未经许可,谢绝转载。
投票(184)已投票(184)

+1

有得(0)
我有疑问(0)

说说为什么给这篇经验投票吧!

  • 写的太赞
  • 帮到了我
  • 作者很棒
  • 因为任性

我为什么投票...

你还可以输入500字

看了这篇经验,你有一些独到的心得要分享给大家?
或是,你按照作者的指导,做出了一模一样,甚至更棒的结果?
不管是“有心得”,还是“有所得”,都快分享给经验的小伙伴们看看吧!

非回享用户暂时不能发布经验“有得” 如何加入回享?你还可以输入1000字

如对这篇经验有疑问,可反馈给作者,经验作者会尽力为您解决!

你还可以输入500字

换一批相关经验

  • axure创建界面原型方面的经验52012.01.05
  • axure教程之十如何显示axure左右工具栏:[10]52014.06.19
  • cad绘图教程:[1]cad工具栏及界面的设置02013.10.30
  • swishmax教程傻瓜flash简易基本操作工具箱02016.03.07
  • PCI软件使用教程——文件管理工具的基本操作0202016.06.08

界面原型创建工具Axure使用教程之一:基本操作相关推荐

  1. 界面原型创建工具Axure 基本操作

    Axure Pro 是专门用来制作界面原型的工具. 我们在跟用户进行软件系统需求沟通时,如果使用文字,一般的最终用户是很难理解与想象你未来产品模样的.因此通常我们会设计界面原型,界面原型表达软件系统能 ...

  2. 界面原型设计工具 Axure RP开发环境搭建

    Axure RP 是一个界面原型设计的得力工具.类似于DreamWare对于网页设计的关系. [下载]:官方下载链接 :http://www.axure.com/ 百度搜索一下Axure RP,也很容 ...

  3. 推荐一款界面原型设计工具-axure

    Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格.设计功能和界面的专家能够快速创建应用软件或Web网站的线框图.流程 ...

  4. 原型设计如何直接生成html,使用原型设计工具 Axure RP创建一个web页面框架

    前言 什么是原型呢? 原型设计是交互设计师与PD.PM.网站开发工程师沟通的最好工具.而该块的设计在原则上必须是交互设计师的产物,交互设计以用户为中心的理念会贯穿整个产品.利用交互设计师专业的眼光与经 ...

  5. 界面原型设计工具开源软件

    界面原型图绘制工具 Pencil Pencil 是一款开源的原型图绘制工具,手绘风格的,就像自己在纸上画的那样.Pencil 还可以用来绘制各种架构图和流程图,同时还提供 Firefox 的插件(点击 ...

  6. 工具推荐 10款移动界面原型设计工具

    首先,一款优秀的 移动APP界面原型设计工具应该具备: ①.支持移动端演示(随时随地演示给BOSS,厕所&食堂&电梯-以体现我是那么的敬业--长点工资必备) ②.组件库(高效复用,谁用 ...

  7. 快速原型设计工具-Axure

    快速原型设计工具-Axure sf2gis@163.com 2016年1月5日 2016年1月7日添加闪烁效果 2016年1月15日增加团队项目 1  目标:快速构建GUI,具备基本演示功能,帮助确定 ...

  8. 推荐两个界面原型设计工具--GUIDesignStudio 和 Mockups For Desktop

    前段时间,有幸参加一次高级软件架构师的培训,授课老师介绍了两个很好玩的界面原型设计工具:GUIDesignStudio 和 Mockups For Desktop,现分享一下,截图说明,洗洗眼球,权当 ...

  9. 界面原型设计工具使用系列(三)-Mockup Builder

    继续试用,今天测试了一个用silverlight编写的工具:Mockup Builder,自称杀手级的界面原型设计工具,个人感觉总体比Lumzy差些,但是其支持的控件同样很丰富,支持网页界面设计和桌面 ...

最新文章

  1. LeetCode之All Possible Full Binary Trees(Kotlin)
  2. python中requests的常用方法_python3 Requests常用操作
  3. U3D的飞船太空射击例子中,使用coroutine
  4. 2017\National _C_C++_C\1.哥德巴赫分解
  5. unique_ptr使用简介
  6. 深入分析驴子系列(2)
  7. SAP License:CO生产订单
  8. PC端 二维码/条形码扫描器1.1-支持截图+摄像头+本地图片+扫描枪识别
  9. ac1900 linksys 恢复_linksys思科WRT1900ACS刷机变砖维修
  10. 读《活着》余华---笔记
  11. 【千律】OpenCV基础:图像边缘检测 -- Roberts 算子
  12. 项目中使用docker部署xxl-job
  13. 《数据结构与算法》——Java版
  14. 思岚科技邀你2017日本东京国际机器人展
  15. 什么是字母表和串---编译原理
  16. tensorfow/model下object_detection训练错误记录
  17. android 通话的log分析,Android实例]通话接通后震动提示 (转载)
  18. 社群运营——你专属的新媒体流量入口! | 黎想
  19. 输了这四年你就输了一生
  20. 前端程序员Mac超快装机指南

热门文章

  1. 教你一招,element表格行轻松上下移动
  2. 计算机组织与体系结构_计算机体系结构中的内存组织
  3. 中国省市区三级城市列表
  4. CrackMe 之 006
  5. 常用工具箱:打开手机日志界面
  6. 光纤耦合透镜的设计与公差分析
  7. MATLAB中ode45()和Runge-Kutta算法(4阶)的比较
  8. c语言中用for循环解决鸡兔同笼问题
  9. 贪心算法解决tsp问题
  10. 开源项目-房屋租赁管理系统