原型系统的入门介绍

1、lAxure RPlBalsamiq Mockups原型系统的入门介绍2015-3前言 原型系统，用最简单的话来说，就是用一套工具来快速描述系统的界面和交互，而不需要涉及底层业务的真正代码开发实现。 原型系统在软件的开发和实施项目中，可以有效降低需求交流过程中可能发生的信息衰减或失真，以最快的方式让系统用户或软件工程师了解系统的功能组成和业务交互关系。 本PPT介绍Axure RP以及Balsamiq Mockups这2个工具，供入门级使用。1.定义定义2.功能介绍功能介绍3.实例演示实例演示4.对比对比Balsamiq Mockups是快速原型的建立软件，可以做为与用户交互的一个界面草图，一

2、旦客户认可可以作为美工开发HTML的原型使用。其中的原型图都是手绘风格的图像，它支持几乎所有的HTML控件原型图，比如按钮、文本框、下拉菜单、树形菜单、进度条、多选项卡、日历控件、颜色控件、表格、Windows窗体等。Axure RP是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档定义Balsamiq MockupsAxure RP工作区介绍其它介绍基本格式工作区介绍功能介绍属性窗口1属性窗口2Data GridParagraph of textTreeMenu公用元素站点地图部件注释部件交互控件注释页

3、面注释模块注释规格书功能介绍功能介绍-Balsamiq Mockups工作区介绍功能介绍-Balsamiq Mockups工作区介绍Application Bar:主要包含Tool Bar 和Quick Add。Tool Bar即为复制、粘贴、删除等快捷工具Quick Add类似搜索工具，支持快速定位控件，如在输入框中输入控件含有的英文，即会检索出建议控件，支持对其进行搜索 如右图UI Library即为各种控件库，如各种按钮形状的控件、各种文本形式的控件、各种容器形状的控件等，可以根据分组进行查找，也可以全部进行查找，是查找控件的另一种方法，对需要的控件拖动至画布即可。 Mockup Can

4、vas 为工作区，把需要的控件拖动此区域进行设置调整即可。功能介绍-Balsamiq Mockups其它介绍-属性窗口1功能介绍-Balsamiq Mockups其它介绍-属性窗口1举例：添加图标、链接（控件的右下角将会有一个下图所示的小箭头Icon）链接已经完成，进入全屏演示模式就可以点击建立的链接，悬停时会显示一个大的手型指针功能介绍-Balsamiq Mockups其它介绍-属性窗口2功能介绍-Balsamiq Mockups基本格式-Data Grid的使用字符字符作用作用备注备注n回车换行r也可以实现换行显示转义字符 ,v列排序标记为升序，v为降序,列数据分隔符如果需要显示“，”用“

5、,”转义显示X,复选框带X表示选中，不带X表示不选(X),()单选框带X表示选中，不带X表示不选列宽设置总写在在最后一行0为自适应数值为%单位R为右对齐，L为左对齐，不写为Property Inspector设置举例功能介绍-Balsamiq Mockups基本格式-Paragraph of text 的使用字符字符作用作用备注备注_XXX_斜体XXX为你实际要填写的内容XXX链接 *XXX*粗体 -XXX-不可用 &XXX&下划线 color颜色颜色数值像HTML一样使用16进制，如color：#FF0000显示转义字符在字符前添加“”来避免字符别识别为分隔符举例功能介绍-B

6、alsamiq Mockups基本格式-Tree的使用的使用字符字符作用作用备注备注f,F文件夹标识F为关闭的文件夹,F为打开的文件夹+,-加减号标识+为加号，-为建好x,复选框带X表示选中，不带X表示不选(x),()单选框带X表示选中，不带X表示不选右方向箭头 B下方向箭头 -页图标 _右缩一格只能用一次，不能连用.右缩一格可以连续使用，做多格缩进效果举例举例功能介绍-Balsamiq Mockups基本格式-Menu的使用的使用字符字符作用作用备注备注xxx子菜单箭头Xxx为实际菜单名称-,=菜单分割线-或者=都可以o单选类型菜单 x复选菜单 -不可用状态的菜单 open,ctrl+o菜单

7、文字和快捷键写法 举例功能介绍-Balsamiq Mockups基本格式-创建公用元素 将多个控件进行分组，支持模板内重复利用，一旦其中一个分组变更，其他同时变更，减少重复操作。举例1、选择需要分组的多个控件2、在属性框中的Editing中选择Group3、对Group进行命名并进行Convert To Symbol(转化)4、在UI Library中会出现Project Assets选项卡，其中会存在刚才新增的Group5、可以对其进行编辑、重复使用，一旦被编辑修改，对应所有的组都会被修改功能介绍-Axure RP工作区介绍功能介绍-Axure RP工作区介绍主菜单和工具栏：执行常用操作，如

8、文件打开、保存文件、格式化控件，自动生成原型和规格说明书等操作站点地图面板：对所设计的页面（包括线框图和流程图）进行添加、删除、重命名和组织页面层次控制面板:包含了线框图控件和流程图控件，如按钮、图片、文本面板、矩形框等，可用这些控件进行线框图和流程图的设计。另外，还可以载入已有的部件库和创建自己的部件库模块面板：是一种可以复用的特殊页面，在该面板中可进行模块的添加、删除、重命名和组织模块分类层次线框图工作区：进行原型设计的主要区域，在该区域总可以设计线框图、流程图、自定义部件、模块页面注释和交互区:添加和管理页面级的注释和交互控件交互与注释面板：定义控件的交互（如链接、弹出、动态显示和隐藏）

9、和对控件的功能进行注释说明功能介绍-Axure RP功能介绍-站点地图面板构思页面框架后，可对页面及层次进行组织。举例1、点击快捷按钮或右键新增、删除、重命名、组织页面层次2、双击页面即可打开该页面在线框图区域中进行线框图设计功能介绍-Axure RP功能介绍-部件注释举例1、添加控件，从部件模板中拖动一个控件到线框图区域2、操作控件，通过鼠标对控件进行拖曳移动来更改控件大小，通过右键菜单或者工具栏进行组合、排序、对齐、锁定等操作3、查看搜索控件，点击选择部件库进行分类显示，或者直接在输入框中快速定位部件4、下载控件，可以再网站上进行下载然后解压缩放在.AxureAxure RP Pro 7.

10、0DefaultSettingsLibraries中，重启软件即可在部件库中显示部件是用于设计线框图的用界面元素，在部件面板中包含有常用的控件库，如按钮、图片、文本框等。功能介绍-Axure RP功能介绍-部件交互以创建一个链接为例1、选中某个部件，点击部件交互中“鼠标单击时”的新增用例2、在弹出的设置界面，点击打开链接，选择对应的页面3、在运行状态，点击按钮，即可成功链接打开另一个页面功能介绍-Axure RP功能介绍-控件注释为控件添加注释，以说明控件的功能。举例1、选择控件后，在控件注释面板中输入注释2、添加成功后，控件的右上角会有一个蓝色的箭头功能介绍-Axure RP功能介绍-页面注

11、释对页面进行详细描述和说明举例1、在对应页面的页面注释区输入注释2、添加成功后，运行时，会在Page Note中显示功能介绍-Axure RP功能介绍-模块模板在单独的页面设置线框图母版，供其它页面共享使用，内容只可在母版中进行修改，其他页面无权修改。举例1、在模块模板中新增一个母版2、在母版的线框图工作区进行绘制3、在其他页面中拖动需要的母版至线框图工作区，只能拖动位置，不可做任何的修改功能介绍-Axure RP功能介绍-生成规格说明书举例1、点击“发布”中的“Generate Word Documentation”，选择保存路径进行保存。2、如果需要规格说明书比较清晰，需要在使用部件时，有

12、详细的注释，否则只有图片。3、可以设置需要输出的页面、输出的标题形式等实例演示-原图实例演示-效果图Balsamiq Mockups1、新建两个画布（为了演示链接的效果，可以使多个Mockups连接在一起）2、在区域卫生信息平台这个画布上，用了Browser Window（浏览器窗口）、Text Area（文本区）、Paragraph of text（文字）、Tree Pane（树窗格）、Search Box（搜索框）、Data Chooser(日期选择器)、Button（按钮）、Data Grid(数据网格)等3、控件中使用到的属性如Auto-Size、Icon、Links、State、Te

13、xt、锁定、Border、Scrollbar等实例演示-效果图Axure RP1、在站点地图中组织编辑页面层次，并在各自的页面中画图2、在线框图工作区中用到的部件从部件库中搜索，若无，可以自己从网上下载加载到部件库中3、部件的属性以及交互事件可在部件交互和注释面板和部件属性和样式面板中进行调整修改Balsamiq Mockups和Axure RP的简单比较Balsamiq Mockups1、易上手、操作快：其就如画草图般，可以以最快的速度将界面原型画出来，如可通过符号的方式快速修改界面元素2、手绘风格：简约清爽，易于讨论，同时可以让设计者与客户的注意力集中在程序的功能、布局和交互式，而不纠结与界面按钮位置、颜色等。3、控件图标现成 Axure RP1、颜值高：能做出与实际一样的网页原型，更容易让用户、开发、测试一目了然易上手2、一键生成需求文档Balsamiq Mockups和Axure RP的简单比较Axure R