Axure介绍与原型案例分享

简介: Axure介绍与原型案例分享

Axure工具介绍与分享


1UI工作概述


a.UI工作定义


为了规范研发类的项目UI设计、UI开发过程管理,界定工作职责,规范设计流程,明确过程交付,从项目过程管控、成本控制出发,特制定本规范,研发类项目组遵照执行。

UI工作分为两大部分:UI设计、UI开发,UI设计属于需求开发阶段工作范围,UI开发属于编码阶段工作范围,定义如下:

UI设计:根据项目功能和非功能性需求,从增强用户体验角度,设计人机交互界面原型,并完整定义界面交互界面元素、交互逻辑。

UI开发:根据人机交互界面原型,从视角效果角度对系统需求进行可视化加工,并根据UI开发工具进行页面开发,生成可供开发人员使用的静态交互界面。


b.职责划分


项目人员职责划分:

项目经理负责UI设计、开发工作的整体组织。

项目需求人员、系统架构师负责UI设计工作。

美工负责UI开发工作。


c.UI工作流程以及工具

2.1.png

UI设计工具统一采用AxureRPProPortable。


2Anxure简介


认识Axure


是美国 Axure Software Solution公司的旗舰产品, 是一个快速的原型工具, 主要是针对负责定义需求、 定义规格、 设计功能、 设计界面的专家, 包括用户体验设计师、 交互设计师、 业务分析师、 信息架构师、 可用性专家和产品经理。

Axure能够快速的进行线框图和原型的设计, 让相关人员对你的设计进行体验和验证,向用户进行演示、 沟通交流以确认用户需求, 并能自动生成规格说明文档。另外, Axure还能让团队成员进行多人协同设计, 并对设计进行方案版本控制管理。  无需编程就可以在线框图中定义简单链接和高级交互。Axure 可一体化生成线框图、HTML 交互原型、规格说明 Word 文档。


b. Axure界面组成


2.2.jpg


页面导航面板(Sitemap)

在绘制线框图(Wireframe)或流程图(Flow)之前,应该先思考界面框架,决定信息内容与层级。

2.3.png

明确界面框架后,接下来就可以利用页面导航面板来定义所要设计的页面。页面导航面板是用于管理所设计的页面,可以添加、删除及对页面层次进行重新组织。

元件库面板(Widgets)

元件是用于设计线框图的用户界面元素。在元件面板中包含有常用的控件,如按钮、图片、文本框等。

2.4.png


操作元件

添加元件后,在线框图中点选该元件,然后可以拖拉移动元件和改变元件的大小,还可以一次同时对多个元件进行选择、移动、改变尺寸。

另外,还可以组合、排序、对齐、分配和锁定元件。这些操作可通过元件右键菜单中进行,也可在 Object 工具栏上的按钮进行。

页面属性面板

2.5.png

这里可以设置当前页面的样式,添加与该页面有关的注释,以及设置页面加载时触发的事件。


元件属性面板

2.6.png

这里可以设置选中元件的样式和属性。


编辑控件元件和属性

有多种方法可以编辑元件的风格和属性:鼠标双击:鼠标双击某个元件,可以对元件的最常用属性进行编辑。例如,双击一 个图片元件可以导入一张图片;双击一个下拉列表或列表框元件可以编辑列表项。工具栏:点击工具栏上的按钮可编辑元件的文本字体、背景色、边框等。右键菜单:控件右键菜单上可编辑元件的一些特定属性,不同元件这些属性也不同。


元件交互面板

定义控件的交互,如:链接、弹出、动态显示和隐藏等,添加与该元件有关的注释。

2.7.png


3Axure 需要了解的地


注释(Annotations)


可以为控件添加注释,以说明控件的功能

2.8.png


在线框图中选择控件,然后在控件注释和交互(Annotations and Interactions)面板中编辑字段中的值,即可为控件添加注释。面板顶部的 Label 字段是为控件添加一个标识符。


自定义字段(Fields)


2.9.png

页面备注和控件备注(Page Notes)

2.10.png

页面备注可是对页面进行描述和说明



                                                基本交互



基本交互包括控件交互定义和页面交互定义

2.11.png


  控件交互面板用于定义线框图中控件的行为,包含定义简单的链接和复杂的 RIA 行为,所定义的交互都可以在将来生成的原型中进行操作执行,分为事件(Events) 、场景( Cases)和动作(Actions)

2.13.png


多个场景



用户操作界面时就会触发事件,如鼠标的 OnClick、OnMouseEnter 和 OnMouseOut;

每个事件可以包含多个场景,场景也就是事件触发后要满足的条件;

每个场景可执行多个动作,例如:打开链接、显示面板、隐藏面板、移动面板。



2.14.png


动态面板


这个是很重要的区域,在这里可以添加、删除动态面板的状态,以及状态的排序,也可以在这里设置动态面板的标签;当绘制原型动态面板被覆盖时,我们可以在这里通过点击选中相应的动态面板,也可以双击状态进入编辑。

2.15.png

动态面板的显示、隐藏、多状态等,都是非常有用的。


动态面板专属事件

☆移动时

☆显示或隐藏时

☆状态改变时

☆开始拖动面板时

☆面板拖动时

☆面板拖动结束时


动态面板用途

隐藏与显示

滑动效果

拖动效果

多状态效果


条件生成器与函数


在axure原型制作的过程中,很多时候我们需要触发一个又一个事件,以交互设计效果展示的需求。在这些事件里我们经常需要在满足某一条件时完成指定的动作。比如:文本框文字为空的时候点击按钮无效。或者拖动动态面板没到达指定位置退回原位等。


2.16.png2.17.png


以上就是Axure的部分介绍,接下来给大家分享一个Axure的原型案例——广告轮播图,下面是演示地址:https://mev9b9.axshare.com(打开安全,无需担心,打开也许有些慢,耐心等一会儿就好了)


相关文章
|
4月前
|
存储 数据管理 数据库
Axure中继器入门:打造你的动态原型
Axure中继器入门:打造你的动态原型
58 0
|
7月前
Axure小技巧,原型能力大提升
Axure小技巧,原型能力大提升
54 0
原型工具Axure和墨刀哪个更好?
原型工具Axure和墨刀哪个更好?
237 1
|
前端开发
前端学习案例-原型3
前端学习案例-原型3
45 0
前端学习案例-原型3
|
前端开发
前端学习案例-原型
前端学习案例-原型
64 0
前端学习案例-原型
|
前端开发
前端学习案例-原型5
前端学习案例-原型5
58 0
前端学习案例-原型5
|
前端开发
前端学习案例-原型4
前端学习案例-原型4
82 0
前端学习案例-原型4
|
前端开发
前端学习案例-原型2
前端学习案例-原型2
63 0
前端学习案例-原型2
|
数据可视化
【Axure教程】在PPT里演示原型模板
【Axure教程】在PPT里演示原型模板
【Axure教程】橡皮擦的擦除效果——刮奖原型
【Axure教程】橡皮擦的擦除效果——刮奖原型