Axure网站与App原型设计课件 第1章 Axure原型设计简介

第1章Axure原型设计简介【目录】1.1原型1.1.1 草图原型1.1.2低保真原型1.1.3高保真原型1.2AxureRP10的安装与汉化1.3认识AxureRP10的工作界面1.3.1菜单栏1.3.2工具栏1.3.3页面与大纲区域1.3.4

元件库与母版区域1.3.5

工作区域1.3.6

检视区域1.4

原型设计流程1.4.1需求分析1.4.2页面架构设计1.4.3

低保真原型设计1.4.4原型评审1.4.5高保真原型设计1.5

小结目录【学习目标】知识目标●了解原型及其分类。●掌握AxureRP10的安装与汉化方法。●熟悉AxureRP10的六大区域。●了解原型设计的流程。能力目标●能独立安装与汉化AxureRP10。●掌握在AxureRP10中添加元件、设置交互效果的方法。素质目标●培养对原型设计规范流程的理解能力。●培养认真严谨的学习态度。学习目标【情景引入】在信息技术高速发展的今天，从过去没有太多软件可以使用到现在可以定制个性化的软件，用户有了更多的想法和需求，但是并不能清晰、完整地表达自己的需求，产品原型恰恰能快速地挖掘出用户的真实需求。通过制作软件产品原型，可以向用户演示并讲解产品原型的使用方法，在演示过程中捕捉用户的实际需求。同时，项目组成员根据产品原型进行沟通，明确软件产品的目标，可以大大提高项目组成员的工作效率并降低成员间的沟通成本，通过原型设计预先展示产品效果如图1.1所示。情景引入图1.1 通过原型设计预先展示产品效果1.1 原型1.1.1草图原型草图原型也可以称为纸面原型，作用是描述产品的大概需求，记录设计师瞬间的灵感，如图1.2所示。1．缺点产品经理或者设计师在白板上制作草图后，他人难以理解其设计意图，与其他团队成员在沟通上存在障碍2．优点可以简单、快速地描述出产品的大致需求，记录瞬间的灵感。这样的原型设计适用于规模小、工期短、用户需求少的产品。1.1 原型1.1.2低保真原型低保真原型是根据用户需求或者现存的界面，利用相关原型设计工具设计的软件原型，如图1.3所示。1．缺点美观程度和交互效果有所欠缺。2．优点能够快速构建产品的大致结构，展现基本交互效果，是团队成员间有效的沟通方式。图1.3 低保真原型1.1 原型1.1.3高保真原型高保真原型是用来进行产品演示的Demo，在视觉上与真实软件产品一样，在体验上也接近真实软件产品，如图1.4所示。1．缺点需要投入大量的精力和时间。2．优点可以模拟出真实软件的界面以及交互效果。图1.4 高保真原型1.2 AxureRP10的安装与汉化AxureRP10是一个专业的快速原型设计工具。AxureRP10有着简洁的工作界面，操作方便，主要功能是对App和网站的线框图、流程图、原型以及需求规格说明文档进行快速创建，工作效率高，支持多人同时设计和版本的管理，其图标如图所示。图1.5 AxureRP10的图标从官网上下载AxureRP10安装包，进行软件的安装，方法如下。图1.6 开始安装AxureRP10图1.7 同意许可协议1.2 AxureRP10的安装与汉化图1.8 选择安装路径图1.9 完成安装1.2 AxureRP10的安装与汉化图1.10 AxureRP10的工作界面1.2 AxureRP10的安装与汉化图1.11 AxureRP10汉化后的工作界面1.3 认识AxureRP10的工作界面运行AxureRP10，开始认识AxureRP10的工作界面。AxureRP10的工作界面大致可以分为6个区域，分别为菜单栏、工具栏、页面与大纲区域、元件库与母版区域、工作区域和检视区域，如图1.12所示。图1.12 AxureRP10工作界面的6个区域1.3 认识AxureRP10的工作界面1.3.1菜单栏1．“文件”菜单（1）可以新建工程、打开工程、保存工程以及新建元件库，这些操作也可以使用快捷键或者工具栏中的按钮完成。（2）可以导入RP文件，可以新建团队项目、新建团队库、获取和打开团队项目。（3）可以设置纸张尺寸、打印、打印Page1、导出Page1为图片、导出所有页面为图片。（4）可以设置定时备份软件原型，避免制作过程中软件原型丢失。图1.14 “文件”菜单2．“编辑”菜单“编辑”菜单如图1.15所示，使用该菜单可以完成撤销、重做、剪切、复制和粘贴等操作。由于这些操作可以使用快捷键来完成，所以很少使用此菜单。图1.15 “编辑”菜单1.3 认识AxureRP10的工作界面3．“视图”菜单“视图”菜单如图1.16所示，其中常用的子菜单有“工具栏”子菜单、“面板”子菜单和“遮罩”子菜单。“工具栏”子菜单如图1.17所示，其中包括“主工具栏”命令和“样式工具栏”命令等。用户可以通过勾选的方式控制工具栏显示的内容；同时软件提供自定义主工具栏功能，用户可以自定义工具栏内容。图1.15 “编辑”菜单图1.16 “视图”菜单图1.17 “工具栏”子菜单图1.18 “面板”子菜单图1.19 “遮罩”子菜单1.3 认识AxureRP10的工作界面4．“项目”菜单“项目”菜单如图1.20所示，使用该菜单可以对元件和页面的样式进行编辑、设置注释字段和字段集、添加全局变量，并且可以设置页面自适应，根据不同的页面大小显示不同的内容。图1.21 “布局”菜单图1.20 “项目”菜单5．“布局”菜单“布局”菜单如图1.21所示，可以用来处理元件和元件之间的组合关系、对齐方式、分布方式，还可以用来转换为母版或动态面板等。这些操作也可以通过工具栏中的按钮来完成，因此很少使用“布局”菜单操作元件。1.3 认识AxureRP10的工作界面6．“发布”菜单发布”菜单如图1.22所示，其主要功能介绍如下。（1）可以进行原型预览，对预览方式进行设置，选择打开浏览器的方式以及对工具栏进行设置。（2）可以将原型发布到Axure云上进行托管。（3）以生成HTML文件的方式进行原型发布。（4）生成需求规格说明书的Word文档。图1.22 “发布”菜单7．“团队”菜单“团队”菜单如图1.23所示，可用于创建团队项目以及获取和打开团队项目，对团队项目进行协作管理，包括从团队目录获取所有变更、提交所有变更到团队目录、检出所有、检入所有、撤销所有检出等。图1.23 “团队”菜单1.3 认识AxureRP10的工作界面8．“账号”菜单“账号”菜单如图1.24所示，使用该菜单可进行账号登录和代理服务器设置。图1.25 “帮助”菜单图1.24 “账号”菜单9．“帮助”菜单“帮助”菜单如图1.25所示，其主要功能介绍如下。（1）提供在线培训功能以及进入Axure论坛的功能。（2）提供获得软件使用授权的功能。（3）提供软件检查更新功能。1.3 认识AxureRP10的工作界面1.3.2工具栏图1.26 工具栏图1.27 选择、连接操作工具栏是使用频率最高的区域，在设计原型的过程中经常会用到快捷操作，理解工具栏的功能并掌握它的使用方法可以提高原型的设计效率。工具栏分为基本工具栏和样式工具栏，如图1.26所示。1．基本工具栏：选择、连接操作“选择”按钮：包括选择相交和选择包含。选择相交所选择的区域只要和元件有接触、有相交，该元件就会处于选中状态；而选择包含只有所选择的区域把元件完全包含进来，该元件才会处于选中状态。“连接”按钮：用来连接两个元件，使用连接线把两个元件连接起来，该按钮常被用来绘制流程图。1.3 认识AxureRP10的工作界面插入操作：插入操作包括插入常用元件、文本元件、表单元件、互动元件以及钢笔工具，如图1.28所示。图1.28 插入操作图1.29 常用元件图1.30 表单元件图1.31 互动元件1.3 认识AxureRP10的工作界面布局操作：布局操作用于设置页面中元件的布局，包括将元件置于顶层或置于底层、设置组合、取消组合、设置对齐方式、进行分布操作以及比例缩放，如图1.32所示。图1.32 布局操作图1.33 对齐方式顶层、底层：可以将工作区域中的元件置于顶层或置于底层。组合、取消组合：可以将多个元件设置为一个组合，这样在移动时，可以把组合中的元件一起移动或者对其进行其他操作。也可以将一个组合拆散为单独的元件。对齐方式：提供左侧、垂直居中、右侧、顶部、水平居中和底部等对齐方式，如图1.33所示。1.3 认识AxureRP10的工作界面预览、共享、登录操作：使用工具栏还可以进行预览、共享、登录操作，如图1.34所示。预览：通过预览的方式在浏览器中显示原型，不生成本地原型文件。共享：通过共享的方式创建团队项目，并将其发布到Axure云上。登录：登录Axure账户。图1.34 预览、共享、登录操作1.3 认识AxureRP10的工作界面2．样式工具栏样式工具栏可以为文本内容设置样式，包括设置文字的颜色、字号、字体，也可以给元件边框设置样式，如图1.35所示。下面介绍样式工具栏中的主要工具。图1.35 样式工具栏“Box1”下拉列表可以设置不同的标题。“Arial”下拉列表可以设置文字的字体。“Normal”下拉列表可以设置字体的样式，可以进行设置字号、颜色等操作。“填充”按钮可以填充背景颜色，单击要填充颜色的区域，可以选择不同的颜色进行填充。“阴影”按钮可以设置外部阴影，以及阴影的偏移位置、模糊程度、颜色。“边框”按钮可以设置元件边框的颜色，包括单色、线性及径向等类型。“线条样式”按钮可以设置元件的线条样式，单击后在弹出的对话框中选择线条样式，线条可以是实心线，也可以是虚线。1.3 认识AxureRP10的工作界面3．自定义工具栏工具栏提供了许多的按钮，有些按钮是经常会用到的，但是有些按钮可能很久都不会用一次，这时用户可以通过“自定义主工具栏”命令，定义工具栏里显示什么按钮。选择“视图”菜单中的“工具栏”命令，在弹出的子菜单中选择“自定义主工具栏”命令，打开相应对话框，如图所示。1.3 认识AxureRP10的工作界面1.3.3页面与大纲区域页面与大纲区域中的页面区域，如图1.40所示。页面区域采用树状结构来显示页面，以Page1为根节点，可以通过增加、移动、删除等操作来管理软件原型的页面。大纲区域如图1.41所示，用于查看页面上使用了哪些元件并管理元件，如管理动态面板，进行增加动态面板、移动动态面板以及删除动态面板等操作。图1.40 页面区域图1.41 大纲区域1.3 认识AxureRP10的工作界面1.3.4元件库与母版区域元件库区域线框图元件库（默认）01图标元件库03示例表单模式元件库0502流程图元件库04示例UI模式元件库全部元件库061.3 认识AxureRP10的工作界面图1.42 线框图元件库图1.43 流程图元件库图1.44 图标元件库1.3 认识AxureRP10的工作界面图1.45 示例UI模式元件库图1.46 示例表单模式元件库1.3 认识AxureRP10的工作界面母版区域母版区域（见图1.47）可以用来设计一些共用、复用的区域，如网站尾部版权区域，每个页面都可以展示版权信息；也可以用来设计导航菜单，特别是移动App的底部标签导航。在母版区域中进行一次设计，在其他页面就可以直接引用该设计，从而达到共用、复用的目的。图1.47 母版区域1.3 认识AxureRP10的工作界面1.3.5工作区域工作区域是用来绘制原型的画布，在该区域里可以完成原型的设计。画画时需要用到画纸，在画纸上可以随意发挥，工作区域就是绘制原型的“画纸”，如图1.48所示。图1.48 工作区域1.3 认识AxureRP10的工作界面1.3.6检视区域检视区域用于设计页面或者元件的交互效果、注释及样式。图1.49 交互设置图1.50 注释设置图1.51 样式设置1.4 原型设计流程1.4.1需求分析通过分析用户的反馈和产品的数据，找到用户的需求和痛点，从而使产品能够满足用户的需求分析竞品的界面样式、操作流程、主要任务流程以及用户的需求，但不能照搬竞品的设计，其核心竞争力与我们的产品可能不同，用户需求也有可能不同通过调研的方式获取用户的需求，调研的方式有很多，如制作调查报告、进行用户访谈等1.4 原型设计流程1.4.2页面架构设计01使用思维导图厘清产品的功能模块02使用流程图展现主要流程