菜鸟进阶 Axure入门教程
关关 2018-06-28 来源 : 阅读 2036 评论 0

摘要:Axure是一款设计原型文档的软件,原型文档可以理解为是一个页面(或者应用、甚至软件)的草图。希望阅读本篇文章以后大家有所收获,帮助大家对Axure的掌握更加深入。

1、 Axure是什么:Axure是一款设计原型文档的软件

原型文档是什么?

    原型文档可以理解为是一个页面(或者应用、甚至软件)的草图。以图形形式等比例展现出你想要的页面效果,比如各栏目的安排、各栏目的展现形式(文字列表或者缩略图等)。设计者只需要在意整个页面布局是否合理、用户体验如何,不用在意背景要什么颜色、用什么图形。这是美工的工作。

2、Axure有什么特色:与其他设计工具不同的是

    ①、Axure除了能设计出页面原型表现形式,他还能做出一些交互效果。实现本地交互功能。让美工和程序员快速理解你要的效果,减少沟通成本。

    ②、Axure能生成一个网页形式展现的页面,能更清楚直观地看到页面的布局。

二、Axure设计规范 

1. 视觉封装 

封装方法: 

    Master封装:公用的控件组,例如页头、页脚、标签页、向导等,可以作为Master。只要修改母版,在所有引用这个母版的页面中的模块也会跟着同步更新。若后期需要制作成高保真原型,那么按钮、图标等也可以封装成Master,在最后统一替换即可。 优点:项目一开始启动,如果可以稍微掌握哪些区块未来将是共享区块,那么就开始建立Master,比如网站的Header / Footer / 导览选单(Navigation),或者广告版位等等。越早使用,越可以节省其它页面设计的重复工作。有利于保持相同内容的一致性。 

    ‚组件库封装:常用的控件,例如按钮、日历、搜索框等可以作为组件库封装,便于直接添加到页面使用。 

2. 布局和排版常规化  

3. 交互设计规范 

三、Axure需求分析流程 

1. 业务需求分析 

业务需求列表、用例图、思维导图等 

2. 功能分析 

产品规划图 

本期功能范围 

产品组成部分 

产品部署图

网络拓扑图 

各部分的功能结构图——站点地图按照模块功能结构组织

典型使用场景图、流程图、泳道图  

3. 初步原型设计 

创建共享工程,添加组件库和封装母版  

最粗略的原型图,可使用简单文字描述、截图、按钮等表示每一导航页面的功能,只做非常重要的交互操作。  

在用AxureRP做布局设计的时候,可以用默认组件库里面的占位符组件来设计(关于占位符组件的使用,参照这里),先将需要设计的区块用占位符布局,然后标上文字标示,以此来表示这里将来需要设计放置的内容。这个步骤基本决定了一个页面的布局。 

4. 页面流程图(注重交互流程) 

在确定主要页面之后,我们可以开始细化页面流程了。页面流程图有利于向大家展示自己的想法,也有利于思路的整理。毕竟axure上面的交互点是散的,通过页面流程图,我们可以整理所有的页面上的交互行为,避免遗漏;在向他人展示的时候,也可以一目了然的看出需要的操作步骤是多少。 

我倾向于将主要任务列出来,然后画出所有任务的页面流程图。  

5. 细化原型 

细化原型阶段的工作:

    页面布局和排版:仅排布功能,不代表最终产品的页面布局效果。实际效果需UI设计。

    ‚整理页面内容,补充必要的交互和反馈窗口,填写页面注释。 

    ƒ细化组件的自身可变效果,如鼠标移入、移出、悬停等,交互的事件,如鼠标单击事件等,逻辑的设定,包括判断逻辑,跳转逻辑,反馈逻辑等。  

 

细化原型阶段需要重点考虑用户体验,从细节上优化,例如列表字段排列前后顺序、按钮摆放位置等等。拿幻灯片效果来说,是否需要设计数字导航键,是否需要自动播放,是否需要设计缩略图等等,这些都需要仔细考虑之后再做决定,这个可以在设计产品时候多多讨论沟通,多看看别人的设计效果。譬如电子商务网站首页的 Flash图片轮播效果,其实就是幻灯片效果,各个电商网站的设计大同小异,就完全可以借鉴参考。 

6. 原型维护 

    反复琢磨推敲,保证提交给开发的原型功能的正确性,有时需要配合文档的编写和参与开发讨论发现问题。 

7. 制作高保真原型 

    如果重要客户在交流需求时就想看到产品的实际效果,此时需要UI设计人员的介入,提供一套接近最终产品效果的UI效果,然后切换到原型上去。 

8. 需求文档编写 

两种方法: 

    使用AxureRP自带的文档生成功能去生成PRD文档:要了解组件注释和页面注释的使用方式,以及这些注释会出现在文档的什么位置,在Axure制作过程中添加描述;原型修改过程中,也需要对描述进行维护;导出的文档格式需要按照公司需求模板进行调整。 Ø 

②基于AxureRP原型的PRD文档编写:使用公司需求文档模板,用截图+文字的形式来书写PRD文档。 

 

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标常用软件Axure频道!

本文由 @关关 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程