《AxureRP9网站与App原型设计》教学教案-01Axure原型设计概述

1章Axure原型设计概述课时内容Axure教学目标了解原型、Axure的软件界面及原型设计流程

课时 2教学重点三类原型的优缺点、Axure软件界面、原型设计流程教学难点Axure软件界面、原型设计流程

教学思路：通过实例引出原型的概念；通过实机操作讲解AxureRP9软件安装和软件界面；通过多媒体演示原型设计流程。教学手段：多媒体+计算机教学资料：教材、多媒体课件、收集的原型实例用户有更多自己的想法和需求，但是并不能清楚、完整地表达自己需求，而产品原型恰恰能快速地挖掘出用户的真实需求。原型

通过原型设计预先展现产品效果软件原型可以理解成软件的Dem〔示范物品〔比方纸笔〕或者某种工具〔比方Axure〕快速地勾画出软件的大致构造，并添加一些交互效果，实现的模拟软件功能操作的范例。原型大致可以分为3类：草图原型、低保真原型以及高保真原型。草图原型草图原型缺点：产品经理或者设计师们在白板上制作的草图，他人难以理解其设计意图，因此与其他成员在沟通上存在障碍。优点：可以简洁、快捷地描述出产品或许需求，记录瞬间的灵感。这样的原型适用于小项目、工期短、用户需求少的产品。低保真原型低保真原型缺点：美观上和交互效果上比较欠缺。优点：能够快速构建产品大致构造，供给根本交互效果，是一个团队成员间有效的沟通方式。高保真原型高保真原型缺点：需要投入大量的精力和时间。优点：可以模拟出真实软件的界面以及交互效果。AxureRP9软件安装与汉化AxureRP9软件图标从官网上下载AxureRP9软件安装包，进展软件的安装。双击AxureRP-Setup.exe安装软件开头安装AxureRP9原型设计工具，安装窗口消灭欢送语：theAxureRP9SetupWizard。AxureRP9开头安装IacceptthetermsintheLicenseAgreemenAxure“Next”按钮连续安装。同意安装协议选择软件存放路径，可以使用默认的安装路径也可自定义安装路径，之后单击“Next”按钮进展下一步。选择安装路径持续单击“Next”按钮，直至消灭以下图所示的界面。完成安装单击“Finish”按钮，翻开AxureRP9原型设计工具。AxureRP9界面在网络下载AxureRP9 软件汉化包，软件汉化包会说明如何进展汉化操作，汉化后界面如下图。AxureRP9汉化界面AxureRP9软件特色AxureRP9软件重设计AxureRP9细节更完善AxureRP9治理更便利AxureRP9兼容性AxureRP9团队工程Axure软件界面Axure软件，开头生疏Axure6个区域，分别为菜单栏区域、工具栏区域、页面与概要区域、元件与母版区域、工作区域和检视区域。菜单栏区域

软件界面

微课视频菜单栏区域包括文件、编辑、视图、工程、布局、公布、团队、账号、帮助9个菜单项，供给软件的一些常规操作和功能。文件菜单该菜单可完成的操作如下。

菜单栏区域

菜单栏应用详解可以建工程、翻开工程、保存工程以及建元件库，该操作可以使用快捷键或者工具栏快速操作按钮完成。可以导入RP文件，可以翻开团队工程、建团队工程、猎取团队工程。可以进展打印纸张尺寸设置、打印1页面、导出1图片。可以进展备份常常用到的操作，可以设置定时备份软件原型，避开制作过程中软件原型丧失。编辑菜单

文件菜单项选择项该菜单可以完成撤销、重做、剪切、复制、粘贴等操作，由于这些操作可以使用快捷键来完成，所以很少会使用此菜单。视图菜单

编辑菜单项选择项视图菜单中常用的选项组有工具栏、功能区和遮罩。工具栏选项组包括根本工具和样式工具。用户可以通过勾选的方式掌握工具栏区域内容的显示，同时软件供给自定义工具栏功能，工具栏内容可以自行定义。视图菜单项选择项 工具栏选项功能区菜单包括7个区域：页面区域、元件区域、母版区域、交互区域、说明区域、样式区域、概要区域。通过勾选的方式可以掌握该区域的显示与隐蔽效果；Axure还供给开关左侧功能栏和开关右侧功能栏的功能。在遮罩菜单中，用户能够通过勾选的方式来掌握是否为隐蔽对象、母版、动态面板、中继器、文本链接或热区添加遮罩效果。工程菜单

功能区选项 遮罩选项工程菜单可以对元件、页面的样式进展编辑，设置自定义元件字段说明和页面字段说明，添加全局变量，并且自适应视图可以设置页面自适应，依据不同的页面大小显示不同的内容。布局菜单

工程菜单项选择项布局菜单是用来处理元件和元件之间的组合关系、对齐方式、分布方式，并包含转换为母版或动态面板等功能，该操作可以通过工具栏区域的快捷操作来完成，很少会进入到布局菜单里来操作元件。布局菜单项选择项公布菜单公布菜单的功能如下。可以将原型公布到Axure云上面进展托管。以生成HTML文件的方式进展原型公布。生成需求规格说明书的Word文档。预览和生成原型文件。团队菜单

公布菜单项选择项团队菜单可用于创立团队工程和猎取团队工程，对团队工程工程进展团队协作治理，包括从团队名目猎取全部变更、提交全部变更到团队名目、迁出全部、签入全部、撤销全部迁出等。账号菜单

团队菜单项选择项账户菜单项选择项进展账户登录和代理效劳器设置。账户菜单项选择项帮助菜单帮助菜单项选择项的功能如下。供给在线培训教学功能以及进入Axure论坛功能。获得软件使用授权的功能。软件检查更功能以及提交软件意见和软件错误。工具栏区域

帮助菜单项选择项工具栏是使用频率最高的快捷工具，在原型设计过程中常常会用到快捷操作，理解工具栏的功能并把握它的使用，可以提高原型制作的效率。工具栏区域分为根本工具栏和样式工具栏，同时供给自定义工具栏功能。工具栏区域根本工具栏剪切、复制、粘贴快捷工具剪切、复制、粘贴快捷工具按钮如下图。剪切、复制、粘贴快捷工具按钮剪切：剪切功能，单击该快捷工具按钮可以剪切选中的元件，快捷键是Ctrl+X组合键。复制：复制功能，单击该快捷按钮可以复制选中的元件，快捷键是Ctrl+C组合键。剪贴板：粘贴功能，可以粘贴复制的元件。单击该快捷按钮，可以把复制的元件粘贴到工作区域，它的快捷键是Ctrl+V组合键。撤销：撤销功能，单击该快捷工具可以撤销上一步的操作，快捷键是Ctrl+Z组合键。重做：重做功能，单击该快捷工具可以重做上一步的操作，快捷键是Ctrl+Y组合键。选择模式、连接操作元件的选择模式、连接方式快捷工具按钮如下图。选择模式、连接有相交，该元件就会呈现为选中状态；而包含选中选择是只有所选择的区域把元件完全包含进来，该元件才会呈现选中状态。连接：是用来连接两个元件，使用连接线把两个元件连接起来，该操作常被用来绘制流程图。插入操作插入操作包括对绘画、矩形、圆形、线段、文本、图片、外形等插入操作。布局操作

插入操作布局操作是用来设置页面中元件的布局，包括设置元件置于顶层、置于底层、组合、取消组合、比例缩放、对齐方式以及分布操作。图1.32 布局操作顶层、底层：可以将工作区域中的元件置于顶层或置于底层。组合、取消组合：可以将不同元件设置为一个组合，这样在移动的时候，可以把组合的元件一起移动或者进展其他操作；同时也可以将一个组合拆散为单独的元件。对齐方式：供给左对齐、居中对齐、右对齐、顶部对齐、中部对齐和底部对齐方式。左对齐：单击该按钮，元件以靠左对齐。居中对齐：单击该按钮，元件以左右居中方式对齐。右对齐：单击该按钮，元件以右对齐方式对齐。顶部对齐：单击该按钮，元件之间以顶部对齐方式对齐。中部对齐：单击该按钮，元件以垂直居中方式对齐。底部对齐：单击该按钮，元件以底部对齐方式对齐。分布：包括水平分布和垂直分布两种分布方式；水平分布：单击该按钮，可以让选中的元件横向均匀分布。垂直分布：单击该按钮，可以让选中的元件纵向均匀分布。预览、共享、登录操作工具栏还供给预览、共享、登录快捷操作按钮如下图。预览、共享、登录操作预览：通过原型预览的方式在扫瞄器中显示，不生本钱地原型文件。共享：通过共享的方式创立团队工程，将其公布到Axure云上面，将工程共享起来。登录：供给登录的快捷按钮。样式工具栏样式工具栏可以为文本内容或者元件边框设置样式，可以设置文本的颜色、字号、字体，也可以给元件边框设置样式。样式工具栏Box1选项可以设置不同的标题。Arial选项是用来设置文字的字体。Normal选项是用来设置字体的样式，针对字体可以进展设置字号、颜色、样式等等操作。快捷操作可以设置文字的对齐方式，左对齐、居中对齐、右对齐、两侧对象、顶部对齐、中部对齐、底部对齐。快捷操作可以填充背景颜色，单击填充颜色区域，可以选择不同颜色进展填充。快捷操作可以设置外部阴影，勾选阴影复选框，可以设置阴影的偏移位置，以及模糊程度，并且可以设置阴影的颜色。快捷操作可以设置元件边框的颜色，包括单色、线性、径行不同类型。心线，也可以是虚线。快捷操作可以设置水平线元件和垂直线元件的箭头样式。自定义工具栏工具栏供给很多的快捷按钮，但是有一些按钮是常常会用到的，有一些按钮可能很久都不会用到一次，这时可以通过自定义工具栏，定义工具栏里显示什么快捷按钮。单击视图菜单的工具栏选项，选择自定义工具栏命令。自定义工具栏自定义工具栏可以自定义文件、模式、插入对象、工具、缩放、布局、组合、对齐、分布、锁定、视图选项、公布、账号等快捷工具按钮操作，可以依据自己的需要来定义这些快捷按钮。页面与概要区域页面与概要区域包含两局部内容，一局部用来显示软件页面的区域，从这里可以了解到软件的大致构造，有哪些页面，以及页面之间的关系。页面区域承受树状构造来显示页面，以1页为树的根节点，可以通过对页面进展增加、移动、删除等操作来治理软件原型的页面；另一局部是概要区域，它是用来治理页面上使用的元件，可以查看页面上使用了哪些元件并治理元件，比方可以治理动态面板，进展增加动态面板、移动动态面板以及删除动态面板等治理元件的操作。页面区域 概要区域元件与母版区域元件区域元件区域为制作原型供给的一些根底元件，AxureRP9原型设计工具默认线框图元件库、流程图元件库和图标元件库。394类：根本元件、表单元件菜单|表格和标记元件。常用的有矩形、图片、占位符、文本标签、水平线、垂直线、热区、动态面板、文本框、下拉列表、复选框、单项选择按钮元件。线框图元件库流程图元件库里供给37种流程图元件，有矩形、菱形、文件、括弧、半圆形、三角形、梯形、圆形、六边形、平行四边形、角色、数据库、快照等元件。流程图元件库图标元件库里供给了各种各样的图标元件，比方箭头图标、电池图标、日历图标等。母版区域

图标元件库母版区域用来设计一些共用、复用的区域，例如网站尾部版权区域，可能每个页面都会用到版权信息；也可以用来设计导航菜单、特别是移动App的底部标签导航。在母版区域进展一次设计，在其他页面可以直接引用该设计，从而到达共用、复用的效果。工作区域

母版区域工作区域是用来绘制原型的画布，在该区域里可以完成原型的设计，就像画画时用的画纸，在画纸上可以随便发挥，工作区域就是绘制原型的画纸。检视区域

工作区域检视区域用于设计页面或者元件的样式、交互效果及说明；可以设计页面、元件的样式，比方页面在扫瞄器中的对齐方式是居中对齐还是居左对齐，页面的背风光或者背景图片，还可以依据草图的效果对元件设置禁用、选中等属性，也可以给元件添加样式，设置元件的位置和大小，选择元件的字体、边框线、圆角半径、对齐方式。可以添加页面交互效果，如添加页面载入时的触发大事、窗口尺寸转变时的触发大事、窗口滚动时的触发大事以及更多其他的大事。可以填写页面或者元件注释说明，也可以自定义注释的名称。样式设置 交互设置 说明设置原型设计流程需求分析一般状况下，需求分析主要由产品经理或者需求分析师来完成，但是设计师最好也参与到前期需求分析的过程中，这样就可以与产品经理对需求产生全都的理解，达成全都的意见。如何进展需求分析呢？通过用户调研的方式猎取用户的需求，调研的方式有很多，如调查报告、访谈用户等。通过竞品分析，分析竞品的界面样式、操作流程、主要任务流程以及用户的需求，但不能直接照搬竞品的设计，其核心竞争力与我们的产品可能不同，解决的用户需求也有可能不同，所以不能直接抄袭。通过分析用户的反响和产品的数据，找到用户的需求和痛点，从而通过产品满足用户的需求。页面架构设计使用思维导图软件理清规律关系猎取到用户需求之后，就可以开头分析用户的需求，使用思维导图软件来理清用户的需求以及产品的各个功能模块、规律关系等内容。流程图表达主要流程任务

App思维导图分析用户的需求，分析出用户使用产品可以完成的主要流程任务，要完成此流程任务用户每一步需要怎样操作。从而通过流程图分析出用户的主要流程任务，如图1.50所示。产品信息架构设计

App流程图通过需求分析以及产品的思维导图、流程图设计，大致可以规划出产品的主要功能点，这些功能点就可以形成产品的初步信息架构，信息架构可以理解成盖房子的地基以及房子的框架。只有确App功能、“试卷”功能、“觉察”功能以及“我”功能就可以确定该产品的信息架构。AxureRP9里的页面区域可以对该信息架构进展治理，页面构造菜单承受树形菜单，层级清楚，构造清楚，还能自动生成框架构造图，使用格外便利。页面布局设计

猿题库App信息架构设计产品信息架构确定之后，综合思维导图的及主要流程图，就可以开头页面的布局设计，包括以下内容。页面布局的总体构造，如页面是承受一列布局、两列布局还是多列布局以及页面承受几行布局等。移动App的导航栏是放置在顶部还是底部？承受几个导航标签？像猿题库App承受的是水平导航，4个导航标签。App标签导航依据思维导图和流程图规划出来的内容，细分到具体页面构造来设计，需要对每一个内容块的展现位置进展布局，比方猿题库App的练习模块是如何展现各个科目的。对页面内容构造的设计取决于设计人员对内容编排的把握，不同的布局会产生不同的效果，可以参照已有成熟产品的内容布局，由于已有产品经有足够的运营数据支持，具有较多的用户反响。低保真原型设计

App布局理解用户的主要需求，完成主要任务流程设计，通过思维导图软件确定产品的大致内容，实现页面架构设