原型系统的入门介绍

功能介绍
部件 注释 站点 地图 工作 区介 绍 Balsamiq Mockups 功能 介绍
部件 交互
控件 注释 页面 注释 模块 注释
其它 介绍 属性 窗口 2 Data Grid Para grap h of text
基本 格式
Axure RP
公用 元素
规格 书
工作 区介 绍
属性 窗口 1
Men u
原型系统的入门介绍
Axure RP Balsamiq Mockups
2015-3
前言
原型系统，用最简单的话来说，就是用一套工具 来快速描述系统的界面和交互，而不需要涉及底层业 务的真正代码开发实现。 原型系统在软件的开发和实施项目中，可以有效 降低需求交流过程中可能发生的信息衰减或失真，以 最快的方式让系统用户或软件工程师了解系统的功能 组成和业务交互关系。 本PPT介绍Axure RP以及Balsamiq Mockups这2 个工具，供入门级使用。
Tree
功能介绍-Balsamiq Mockups
工作区介绍
功能介绍-Balsamiq Mockups
工作区介绍 Application Bar:主要包含Tool Bar 和Quick Add。 Tool Bar即为复制、粘贴、删除等快捷工具 Quick Add类似搜索工具，支持快速定位控件，如在输 入框中输入控件含有的英文，即会检索出建议控件， 支持对其进行搜索 如右图 UI Library即为各种控件库，如各种按钮形状的控件、 各种文本形式的控件、各种容器形状的控件等，可以 根据分组进行查找，也可以全部进行查找，是查找控 件的另一种方法，对需要的控件拖动至画布即可。 Mockup Canvas 为工作区，把需要的控件拖动此区域 进行设置调整即可。
1.定义
2.功能介绍
3.实例演示
4.对比
定义
Balsamiq Mockups是快速原型的建立软件，可以做为 与用户交互的一个界面草图，一旦客户认可可以作为 美工开发HTML的原型使用。 其中的原型图都是手绘风格的图像，它支持几乎所有 的HTML控件原型图，比如按钮、文本框、下拉菜单、 树形菜单、进度条、多选项卡、日历控件、颜色控件、 表格、Windows窗体等。 Axure RP是一个专业的快速原型设计工具，让负责定 义需求和规格、设计功能和界面的专家能够快速创建 应用软件或Web网站的线框图、流程图、原型和规格 说明文档
功能介绍-Axure RP
工作区介绍
功能介绍-Axure RP
工作区介绍
主菜单和工具栏：执行常用操作，如文件打开、保存文件、格式 化控件，自动生成原型和规格说明书等操作 站点地图面板：对所设计的页面（包括线框图和流程图）进行添 加、删除、重命名和组织页面层次 控制面板:包含了线框图控件和流程图控件，如按钮、图片、文本 面板、矩形框等，可用这些控件进行线框图和流程图的设计。另 外，还可以载入已有的部件库和创建自己的部件库 模块面板：是一种可以复用的特殊页面，在该面板中可进行模块 的添加、删除、重命名和组织模块分类层次 线框图工作区：进行原型设计的主要区域，在该区域总可以设计 线框图、流程图、自定义部件、模块 页面注释和交互区:添加和管理页面级的注释和交互 控件交互与注释面板：定义控件的交互（如链接、弹出、动态显 示和隐藏）和对控件的功能进行注释说明
功能介绍-Balsamiq Mockups
其它介绍-属性窗口1
功能介绍-Balsamiq Mockups
其它介绍-属性窗口1
举例： 添加图标、链接（控件的右下角将会有一个下图所示 的小箭头Icon）
链接已经完成，进入全屏演示模式就可以点击ห้องสมุดไป่ตู้立的 链接，悬停时会显示一个大的手型指针
功能介绍-Balsamiq Mockups
字符
_XXX_ [XXX] *XXX* -XXX&XXX& {color} 斜体 链接 粗体 不可用 下划线 颜色 颜色数值像 HTML 一样使用 16 进制，如 {color：#FF0000} 在字符前添加“ \ ”来避免字符别识别 为分隔符
作用
备注
XXX为你实际要填写的内容
\
显示转义字符
举例
功能介绍-Balsamiq Mockups
举例
功能介绍-Balsamiq Mockups
基本格式-Menu的使用
字符 作用 备注 xxx> 子菜单箭头 Xxx为实际菜单名称
---,=
菜单分割线
--或者=都可以
o
单选类型菜单
x
复选菜单
-
不可用状态的菜单
open,ctrl+o
菜单文字和快捷键写法
举例
功能介绍-Balsamiq Mockups
其它介绍-属性窗口2
功能介绍-Balsamiq Mockups
基本格式-Data Grid的使用
字符 \n \ ^,v , 回车换行 显示转义字符 列排序标记 列数据分隔符 ^为升序，v为降序 如果需要显示“，”用“\,”转义显示 作用 \r也可以实现换行 备注
[X],[] (X),() {}
复选框 单选框 列宽设置
带X表示选中，不带X表示不选 带X表示选中，不带X表示不选 总写在在最后一行 0为自适应 数值为%单位 R 为 右 对 齐 ， L 为 左 对 齐 ， 不 写 为 Property Inspector设置
举例
功能介绍-Balsamiq Mockups
基本格式-Paragraph of text 的使用
基本格式-创建公用元素 将多个控件进行分组，支持模板内重复利用，一旦 其中一个分组变更，其他同时变更，减少重复操作。 举例
1、选择需要分组的多个控件 2、在属性框中的Editing中选择Group 3、对Group进行命名并进行Convert To Symbol(转化)
4、在UI Library中会出现Project Assets选项卡，其中 会存在刚才新增的Group 5、可以对其进行编辑、重复使用，一旦被编辑修改， 对应所有的组都会被修改
基本格式-Tree的使用
字符 f,F [+],[-] [x],[] (x),() > B _ . 文件夹标识 加减号标识 复选框 单选框 右方向箭头 下方向箭头 页图标 右缩一格 右缩一格 只能用一次，不能连用 可以连续使用，做多格缩进效果 作用 备注 F为关闭的文件夹,F为打开的文件夹 [+]为加号，[-]为建好 带X表示选中，不带X表示不选 带X表示选中，不带X表示不选