文档介绍：Axure 工具介绍与分享一、 UI 工作概述 1. UI 工作定义为了规范研发类的项目 UI设计、 UI开发过程管理, 界定工作职责, 规范设计流程, 明确过程交付,从项目过程管控、成本控制出发, 特制定本规范,研发类项目组遵照执行。 UI工作分为两大部分: UI设计、 UI开发, UI设计属于需求开发阶段工作范围, UI开发属于编码阶段工作范围,定义如下: UI设计: 根据项目功能和非功能性需求, 从增强用户体验角度, 设计人机交互界面原型, 并完整定义界面交互界面元素、交互逻辑。 UI开发: 根据人机交互界面原型, 从视角效果角度对系统需求进行可视化加工, 并根据 UI开发工具进行页面开发,生成可供开发人员使用的静态交互界面。 2. 职责划分项目人员职责划分: 项目经理负责 UI设计、开发工作的整体组织。项目需求人员、系统架构师负责 UI设计工作。美工负责 UI开发工作。 3. UI 工作流程以及工具 UI设计工具统一采用 AxureRPProPortable 。二、 Anxure 简介 1. 认识 Axure 是美国 Axure Software Solution 公司的旗舰产品, 是一个快速的原型工具, 主要是针对负责定义需求、定义规格、设计功能、设计界面的专家, 包括用户体验设计师、交互设计师、业务分析师、信息架构师、可用性专家和产品经理。 Axure 能够快速的进行线框图和原型的设计, 让相关人员对你的设计进行体验和验证,向用户进行演示、沟通交流以确认用户需求, 并能自动生成规格说明文档。另外, Axure 还能让团队成员进行多人协同设计, 并对设计进行方案版本控制管理。无需编程就可以在线框图中定义简单链接和高级交互。 Axure 可一体化生成线框图、 HTML 交互原型、规格说明 Word 文档。 2. Axure 界面组成 页面导航面板( Sitemap ) 在绘制线框图(Wireframe) 或流程图( Flow )之前,应该先思考界面框架,决定信息内容与层级。明确界面框架后, 接下来就可以利用页面导航面板来定义所要设计的页面。页面导航面板是用于管理所设计的页面,可以添加、删除及对页面层次进行重新组织。 元件库面板( Widgets ) 元件是用于设计线框图的用户界面元素。在元件面板中包含有常用的控件,如按钮、图片、文本框等。操作元件添加元件后, 在线框图中点选该元件, 然后可以拖拉移动元件和改变元件的大小, 还可以一次同时对多个元件进行选择、移动、改变尺寸。另外, 还可以组合、排序、对齐、分配和锁定元件。这些操作可通过元件右键菜单中进行,也可在 Object 工具栏上的按钮进行。 页面属性面板这里可以设置当前页面的样式, 添加与该页面有关的注释, 以及设置页面加载时触发的事件。 元件属性面板这里可以设置选中元件的样式和属性。编辑控件元件和属性有多种方法可以编辑元件的风格和属性: 鼠标双击:鼠标双击某个元件,可以对元件的最常用属性进行编辑。例如,双击一个图片元件可以导入一张图片; 双击一个下拉列表或列表框元件可以编辑列表项。工具栏: 点击工具栏上的按钮可编辑元件的文本字体、背景色、边框等。右键菜单: 控件右键菜单上可编辑元件的一些特定属性, 不同元件这些属性也不同。 元件交互面板定义控件的交互,如: 链接、弹出、动态显示和隐藏等, 添加与该元件有关的注释。 3. Axure 需要了解的地方 注释( Annotations ) 可以为控件添加注释,以说明控件的功能在线框图中选择控件, 然后在控件注释和交互( Annotations and Interactions ) 面板中编辑字段中的值, 即可为控件添加注释。面板顶部的 Label 字段是为控件添加一个标识符。 自定义字段( Fields ) 页面备注和控件备注( Page Notes ) 页面备注可是对页面进行描述和说明 基本交互基本交互包括控件交互定义和页面交互定义控件交互面板用于定义线框图中控件的行为, 包含定义简单的链接和复杂的 RIA 行为,所定义的交互都可以在将来生成的原型中进行操作执行, 分为事件( Events )、场景( Cases ) 和动作( Actions ) 多个场景用户操作界面时就会触发事件,如鼠标的 OnClick 、 OnMouseEnter 和 OnMouseOut ; 每个事件可以包含多个场景, 场景也就是事件触发后要满足的条件; 每个场景可执行多个动作,例如:打开链接、显示面板、隐藏面板、移动面板。 动态面板这个是很重要的区域,在这里可以添加、删除动态面板的状态, 以及状态的排序, 也可以在这里设置动态面板的标签; 当绘制原型动态面