首页 理论教育 用AxureRP制作原型设计教程

用AxureRP制作原型设计教程

时间:2023-06-01 理论教育 版权反馈
【摘要】:美国Axure Software Solution公司旗舰产品。当前版本:AxureRPPro7.0汉化版。图2-48 Axure的菜单栏信息2.站点地图窗口针对原有设计的原型页面进行添加、删除、重命名和组织页面层次等。图2-53 Axure部件交互8.控件管理面板对控件的功能进行注释说明。图2-56 Axure转换为母版转换为母版对话框,输入母版名称及设定拖放行为的选项。

用AxureRP制作原型设计教程

【简介】专业的快速原型设计工具

专业的快速原型设计工具,可以将业务、功能等需求通过该工具创建出相应的网站线框图、流程图、功能交互原型和规格说明文档等。

美国Axure Software Solution公司旗舰产品。

Axure(发音:Ack—sure),代表Axure公司;RP则是RapidPrototyping(快速原型)的缩写。

中文名称:快速原型设计工具。

英文名称:AxureRP。

当前版本:AxureRPPro7.0汉化版(最新版本Axure RP Pro8.0)。

用途:专业的原型设计工具、演示工具等。

主要面向:商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师、界面设计师等,此外软件架构师、研发工程师、测试工程师也有关注。

【安装】

工具下载http//www.cpjltx.com/tool.html(后续将提供工具下载链接的导航)[15]

【基础】

基础组成:

2-47 Axure的基本组成信息

1.主菜单和工具栏

常用操作,如文件—打开、保存文件、格式化控件、生成原型文件等操作。

2-48 Axure菜单栏信息

2.站点地图窗口(SiteMap)

针对原有设计的原型页面(包括线框图和流程图)进行添加、删除、重命名和组织页面层次等。

2-49 Axure的页面增删调整等按钮

选中相应的页面,即可打开工作区的当前页面,并前往编辑。在选中的页面节点,也可以进行其组织结构的调整等(选中页面节点F2或鼠标双击,可进行重命名等)。

①增加一个子页面:为所选择的页面创建一个子页面。

②新增文件夹:在当前路径新增文件夹。

③页面上移:同等级的页面中,将所选页面的上下排列次序,上移一个位置。

④页面下移:同等级的页面中,将所选页面的上下排列次序,下移一个位置。

⑤页面降序:将所选页面等级降序,作为原等级中排列在所选页面上方之页面的子页面。

⑥页面升序:将所选页面等级升序,将所选页面的页面等级升序为父页面的同等级页面。

⑦删除页面:将所选页面删除,同时删除其子页面。

⑧页面搜索:点击该按钮,将显示页面搜索的输入框,服务于页面的检索。

站点地图的树形结构路径与生成的html原型的路径一致,根据原型演示的要求不同,建议树形菜单的设定,尽量做到目录清晰、关联性强等。

3.部件库窗口(Widgets)

该面版包含线框图控件和流程图控件,以及载入的部件库(∗.rplib文件)或创建自己的部件库。

2-50 Axure的部件库窗口

专业产品经理生存的职业空间,一般很少单打独斗地编制原型,所以建议尽量不要在大型工程上使用私有的部件库,除非存在团队的公用库在约定的基础上再应用。

4.母版窗口

可复用的特殊页面,在该面板中可进行模块的添加、删除、重命名和组织模块分类层次。

2-51 Axure的母版窗口

5.线框图工作区

线框图工作区也叫页面工作区,线框图工作区是进行原型设计的主要区域,在该区域中你可以设计线框图、流程图、自定义部件、模块。

6.页面注释、页面交互与页面样式区

添加和管理页面级的注释和交互。(一般默认位置在右下角,工作区下方)

2-52 Axure页面注释与交互

7.部件交互和注释面板

定义部件的交互、注释,如新增与编辑用例中的鼠标点击(移入移出时)的后续交互动作,链接、弹出、动态面板的显示和隐藏,相关部件的注释等。

2-53 Axure部件交互

8.控件管理面板

对控件的功能进行注释说明。

典型示例

下面是一个简单新闻内容运营系统的示意。

2-54 Axure简单新闻内容运营系统的示意

典型讲解:(www.xing528.com)

上面挑选的示例是一个较为简单的原型设计功能截图,同样也是我们体系内部实践培训的题目之一。

在同时罗列网站、电商、运营后台、App应用的题目集合时发现,2014年以后,80%以上的学生选择App应用。(盲从的选择,有些时候会反映一定的问题,如同当今App商城遍布的简单应用一样,造成了一定供不应求的现状)

此题的需求看似简单,但真正实践起来,后台逻辑上的“坑”还不少。曾经选择做运营后台时间的几十位同学中,仅有几位能够完成demo及答辩时讲通整个流程。

下面简单地讲解一下当前示例页面的操作步骤:

2-55 Axure新建文件

1.新建文件

在菜单中点击文件→新建,即可获得一个新建的文件(记得及时保存文件),在新建的文件中默认会有由一个Home页面、三个Page子页面组成的Sitemap窗口。

2.母版编辑

将工程中常用的需要统一维护的背景、图标等,设定为母版。(一般小的应用demo,不建议使用母版的方式)

选中TNewS的左侧功能菜单区和右侧标题导航区,鼠标右键“转换为母版”→转换母版的对话框(输入母版的新名称、拖放行为等)。

(1)选择待转换的内容,右键单击转换为母版。

2-56 Axure转换为母版

(2)转换为母版对话框,输入母版名称及设定拖放行为的选项。

拖放行为,指未来母版应用时的拖放约束方式。

拖放行为—任何位置,即该母版在新的页面应用过程中,可以随机拖放到任何位置。

拖放行为—锁定到母版中的位置,即使用该母版的新页面中,母版在新页面中引用的位置同母版,无法改变。

拖放行为—从母版脱离,即在引用该母版时,新页面引用的部分改变,不影响原有母版。

2-57 Axure母版的命名

(3)母版的引用,在母版窗口找到相应的母版,进行拖拽引用。

3.工作区的编辑

2-58 Axure母版拖拽

工作区的编辑,在部件窗口,拖拽部件至工作区并进行相应的编辑。

(1)动态面板的应用

在工作区中设定响应的区域划分,可以用线条或是矩形。

2-59 Axure动态面板工作区的编辑

上图示例为新闻内容的默认检索值的设定及操作按钮区,首先要将选定的矩形置为灰色,拖拽标签的文本部件(双击或选中按F2),输入相应的标签值;下拉框选择部件,选择下拉列表框部件,并双击,在对话框中输入值。

2-60 Axure动态面板的编辑

(2)表格与动态面板

为实现动态的查询数据表的效果,首先从部件库Menuand Table中选择“表格”,拖拽至工作区。

双击表格进行内容编辑,选择表头行设置(“菜单”或“部件属性和样式窗口”)相应的背景色

鼠标右键单击选择增删行与列。

编辑完表格内容,鼠标右键单击选择整个表格控件—选择转换为动态面板。

2-61 Axure动态面板与表格

为实现根据查询条件的不同,切换到不同的表格数据,采用动态面板是方式之一。

设置鼠标的按键用例,可选方式动态面板→设置动态面板状态→在配置动作时,设置动态面板切换状态到“数据表格3”(原有命名的一个表格动态面板的状态,即点击按钮预要获得的显示动态面板信息),选择右下角显示面板(相关进入退出时,动画等延迟效果,根据需求调整),点击确定即可。

2-62 Axure动态面板的面板状态

2-63 Axure动作的配置

4.原型文件的生成

在菜单栏中选择发布→生成原型文件,即可完成原型文件的生成。

2-64 Axure发布的选项

(1)预览,是针对现有文件在浏览器的原型预览。

(2)预览选项,是指对预览前的设置,如勾选打开预览文件的浏览器;站点地图的设置等(带站点地图、带最小化的站点地图、不带站点地图);配置是指预览那些原型页面的设置。

2-65 Axure预览选项

(3)生成原型文件,是指根据预先配置,生成原型文件。

(4)生成Word文档,是指根据预先配置,将原型的内容以word文档的形式输出。

(5)更多生成配置,是指根据自定义的格式生成相应的原型文件(鼠标双击配置条目,可进行原型文件输出的设置等),点击生成按钮,则按照所选的设置生成相应的原型文件。

2-66 Axure更多生成配置

(6)预览效果,在预览的过程中发现格式、间距、交互等问题,方便及时修正。(在汇报工作时,建议了解会议室的机器或投影仪分辨率,防止原型生成的html页面因屏幕分辨率的影响出现错位等,影响原型的汇报与展示工作)。

2-67 Axure预览效果

在AxureRP中学会使用基本的部件、母版、动态面板(面板切换、面板属性)、变量设置、用例编辑器、页面交互及部件交互,以及原型的生成等功能,你就应该算是基本掌握了该工具,而后续应该学会举一反三与熟能生巧(在形成自我设计风格前,不建议使用他人的非标准部件与自创部件,建议形成自我设计风格和习惯后,筹备一套自己熟知的部件,会事半功倍)。

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈