第1章 Axure原型设计概述
课时内容 | Axure原型设计概述 | 课时 | 2 |
教学目标 | 了解原型、Axure的软件界面及原型设计流程 | ||
教学重点 | 三类原型的优缺点、Axure软件界面、原型设计流程 | ||
教学难点 | Axure软件界面、原型设计流程 | ||
教学设计 | 1.教学思路：通过实例引出原型的概念；通过实机操作讲解Axure RP 9 软件安装和软件界面；通过多媒体演示原型设计流程。 2.教学手段：多媒体+计算机 3.教学资料：教材、多媒体课件、收集的原型实例 | ||
教学内容 | |||
信息化高速发展的今天，用户从过去没有太多软件可以使用到现在可以定制自己个性化的软件，用户有更多自己的想法和需求，但是并不能清晰、完整地表达自己需求， 而产品原型恰恰能快速地挖掘出用户的真实需求。 通过原型设计预先展示产品效果 1.1 原型 软件原型可以理解成软件的Demo（示范），它并不是一个可以最终使用的软件，而是通过某种物品（比如纸笔）或者某种工具（比如Axure）快速地勾勒出软件的大致结构，并添加一些交互效果，实现的模拟软件功能操作的范例。原型大致可以分为3类：草图原型、低保真原型以及高保真原型。 1.1.1 草图原型 草图原型 ●缺点：产品经理或者设计师们在白板上制作的草图，他人难以理解其设计意图，因此与其他成员在沟通上存在障碍。 ●优点：可以简单、快捷地描述出产品大概需求，记录瞬间的灵感。这样的原型适用于小项目、工期短、用户需求少的产品。 1.1.2 低保真原型 低保真原型 ●缺点：美观上和交互效果上比较欠缺。 ●优点：能够快速构建产品大致结构，提供基本交互效果，是一个团队成员间有效的沟通方式。 1.1.3 高保真原型 高保真原型 ●缺点：需要投入大量的精力和时间。 ●优点：可以模拟出真实软件的界面以及交互效果。 1.2 Axure RP 9 软件安装与 Axure RP 9软件图标 从上下载Axure RP 9软件安装包，进行软件的安装。 （1）双击AxureRP-Setup.exe安装软件开始安装Axure RP 9原型设计工具，安装窗口出现欢迎语：Welcome to the Axure RP 9 Setup Wizard。 Axure RP 9开始安装 （2）勾选“I accept the terms in the License Agreement”复选框，同意Axure安装协议，单击“Next”按钮继续安装。 同意安装协议 （3）选择软件存放路径，可以使用默认的安装路径也可自定义安装路径，之后单击“Next”按钮进行下一步。 选择安装路径 （4）持续单击“Next”按钮，直至出现下图所示的界面。 完成安装 （5）单击“Finish”按钮，打开Axure RP 9 原型设计工具。 Axure RP 9 界面 （6）在网络下载Axure RP 9 软件包，软件包会说明如何进行操作，后界面如图所示。 Axure RP 9 界面 1.3 Axure RP 9 软件特 （1）Axure RP 9软件重新设计 （2）Axure RP 9细节更完善 （3）Axure RP 9 管理更方便 （4）Axure RP 9 兼容性 （5）Axure RP 9 团队项目 1.4 认识Axure软件界面 运行Axure软件，开始认识Axure软件界面，软件界面大致可以分为6个区域，分别为菜单栏区域、工具栏区域、页面与概要区域、元件与母版区域、工作区域和检视区域。 软件界面 1.3.1 菜单栏区域 菜单栏区域包括文件、编辑、视图、项目、布局、发布、团队、账号、帮助9个菜单项，提供软件的一些常规操作和功能。 菜单栏区域 1. 文件菜单 该菜单可完成的操作如下。 （1）可以新建工程、打开工程、保存工程以及新建元件库，该操作可以使用快捷键或者工具栏快速操作按钮完成。 （2）可以导入RP文件，可以打开团队项目、新建团队项目、获取团队项目。 （3）可以进行打印纸张尺寸设置、打印page 1页面、导出page 1图片。 （4）可以进行备份经常用到的操作，可以设置定时备份软件原型，避免制作过程中软件原型丢失。 文件菜单选项 2. 编辑菜单 该菜单可以完成撤销、重做、剪切、复制、粘贴等操作，由于这些操作可以使用快捷键来完成，所以很少会使用此菜单。 编辑菜单选项 3. 视图菜单 视图菜单中常用的选项组有工具栏、功能区和遮罩。工具栏选项组包括基本工具和样式工具。用户可以通过勾选的方式控制工具栏区域内容的显示，同时软件提供自定义工具栏功能，工具栏内容可以自行定义。 视图菜单选项 工具栏选项 功能区菜单包括7个区域：页面区域、元件区域、母版区域、交互区域、说明区域、样式区域、概要区域。通过勾选的方式可以控制该区域的显示与隐藏效果；Axure还提供开关左侧功能栏和开关右侧功能栏的功能。 在遮罩菜单中，用户能够通过勾选的方式来控制是否为隐藏对象、母版、动态面板、中继器、文本链接或热区添加遮罩效果。 功能区选项 遮罩选项 4. 项目菜单 项目菜单可以对元件、页面的样式进行编辑，设置自定义元件字段说明和页面字段说明，添加全局变量，并且自适应视图可以设置页面自适应，根据不同的页面大小显示不同的内容。 项目菜单选项 5. 布局菜单 布局菜单是用来处理元件和元件之间的组合关系、对齐方式、分布方式，并包含转换为母版或动态面板等功能，该操作可以通过工具栏区域的快捷操作来完成，很少会进入到布局菜单里来操作元件。 布局菜单选项 6. 发布菜单 发布菜单的功能如下。 （1）可以进行原型预览，对预览方式进行设置，选择打开浏览器的方式以及对工具栏进行设置。 （2）可以将原型发布到Axure云上面进行托管。 （3）以生成HTML文件的方式进行原型发布。 （4）生成需求规格说明书的Word文档。 （5）预览和生成原型文件。 发布菜单选项 7. 团队菜单 团队菜单可用于创建团队项目和获取团队项目，对团队项目工程进行团队协作管理，包括从团队目录获取全部变更、提交所有变更到团队目录、迁出全部、签入全部、撤销所有迁出等。 团队菜单选项 8. 账号菜单 账户菜单选项进行账户登录和代理服务器设置。 账户菜单选项 9. 帮助菜单 帮助菜单选项的功能如下。 （1）提供在线培训教学功能以及进入Axure论坛功能。 （2）获得软件使用授权的功能。 （3）软件检查更新功能以及提交软件意见和软件错误。 帮助菜单选项 1.3.2 工具栏区域 工具栏是使用频率最高的快捷工具，在原型设计过程中经常会用到快捷操作，理解工具栏的功能并掌握它的使用，可以提高原型制作的效率。工具栏区域分为基本工具栏和样式工具栏，同时提供自定义工具栏功能。 工具栏区域 1. 基本工具栏 （1）剪切、复制、粘贴快捷工具 剪切、复制、粘贴快捷工具按钮如图所示。 剪切、复制、粘贴快捷工具按钮 剪切：剪切功能，单击该快捷工具按钮可以剪切选中的元件，快捷键是Ctrl+X组合键。 复制：复制功能，单击该快捷按钮可以复制选中的元件，快捷键是Ctrl+C组合键。 剪贴板：粘贴功能，可以粘贴复制的元件。单击该快捷按钮，可以把复制的元件粘贴到工作区域，它的快捷键是Ctrl+V组合键。 撤销：撤销功能，单击该快捷工具可以撤销上一步的操作，快捷键是Ctrl+Z组合键。 重做：重做功能，单击该快捷工具可以重做上一步的操作，快捷键是Ctrl+Y组合键。 （2）选择模式、连接操作 元件的选择模式、连接方式快捷工具按钮如图所示。 选择模式、连接 选择模式：包括相交选中选择和包含选中选择，相交选中选择所选择的区域只要和元件有接触、有相交，该元件就会呈现为选中状态；而包含选中选择是只有所选择的区域把元件完全包含进来，该元件才会呈现选中状态。 连接：是用来连接两个元件，使用连接线把两个元件连接起来，该操作常被用来绘制流程图。 （3）插入操作 插入操作包括对绘画、矩形、圆形、线段、文本、图片、形状等插入操作。 插入操作 （4）布局操作 布局操作是用来设置页面中元件的布局，包括设置元件置于顶层、置于底层、组合、取消组合、比例缩放、对齐方式以及分布操作。 图1.32 布局操作 顶层、底层：可以将工作区域中的元件置于顶层或置于底层。 组合、取消组合：可以将不同元件设置为一个组合，这样在移动的时候，可以把组合的元件一起移动或者进行其他操作；同时也可以将一个组合拆散为单独的元件。 对齐方式：提供左对齐、居中对齐、右对齐、顶部对齐、中部对齐和底部对齐方式。 ●左对齐：单击该按钮，元件以靠左对齐。 ●居中对齐：单击该按钮，元件以左右居中方式对齐。 ●右对齐：单击该按钮，元件以右对齐方式对齐。 ●顶部对齐：单击该按钮，元件之间以顶部对齐方式对齐。 ●中部对齐：单击该按钮，元件以垂直居中方式对齐。 ●底部对齐：单击该按钮，元件以底部对齐方式对齐。 分布：包括水平分布和垂直分布两种分布方式； ●水平分布：单击该按钮，可以让选中的元件横向均匀分布。 ●垂直分布：单击该按钮，可以让选中的元件纵向均匀分布。 （5）预览、共享、登录操作 工具栏还提供预览、共享、登录快捷操作按钮如图所示。 预览、共享、登录操作 预览：通过原型预览的方式在浏览器中显示，不生成本地原型文件。 共享：通过共享的方式创建团队项目，将其发布到Axure云上面，将工程共享起来。 登录：提供登录的快捷按钮。 2. 样式工具栏 样式工具栏可以为文本内容或者元件边框设置样式，可以设置文本的颜、字号、字体，也可以给元件边框设置样式。 样式工具栏 Box1选项可以设置不同的标题。 Arial选项是用来设置文字的字体。 Normal选项是用来设置字体的样式，针对字体可以进行设置字号、颜、样式等等操作。 快捷操作可以设置文字的对齐方式，左对齐、居中对齐、右对齐、两侧对象、顶部对齐、中部对齐、底部对齐。 快捷操作可以填充背景颜，单击填充颜区域，可以选择不同颜进行填充。 快捷操作可以设置外部阴影，勾选阴影复选框，可以设置阴影的偏移位置，以及模糊程度，并且可以设置阴影的颜。 快捷操作可以设置元件边框的颜，包括单、线性、径行不同类型。 快捷操作可以设置元件的线条样式，单击后会弹出的对话框中选择线条样式，线条可以是实心线，也可以是虚线。 快捷操作可以设置水平线元件和垂直线元件的箭头样式。 3. 自定义工具栏 工具栏提供许多的快捷按钮，但是有一些按钮是经常会用到的，有一些按钮可能很久都不会用到一次，这时可以通过自定义工具栏，定义工具栏里显示什么快捷按钮。单击视图菜单的工具栏选项，选择自定义工具栏命令。 自定义工具栏 自定义工具栏可以自定义文件、模式、插入对象、工具、缩放、布局、组合、对齐、分布、锁定、视图选项、发布、账号等快捷工具按钮操作，可以根据自己的需要来定义这些快捷按钮。 1.3.3 页面与概要区域 页面与概要区域包含两部分内容，一部分用来显示软件页面的区域，从这里可以了解到软件的大致结构，有哪些页面，以及页面之间的关系。页面区域采用树状结构来显示页面，以Page1页为树的根节点，可以通过对页面进行增加、移动、删除等操作来管理软件原型的页面；另一部分是概要区域，它是用来管理页面上使用的元件，可以查看页面上使用了哪些元件并管理元件，比如可以管理动态面板，进行增加动态面板、移动动态面板以及删除动态面板等管理元件的操作。 页面区域 概要区域 1.3.4 元件与母版区域 1. 元件区域 元件区域为制作原型提供的一些基础元件，Axure RP 9原型设计工具默认线框图元件库、流程图元件库和图标元件库。 线框图元件组里提供39种线框图元件，分为4类：基本元件、表单元件菜单|表格和标记元件。常用的有矩形、图片、占位符、文本标签、水平线、垂直线、热区、动态面板、文本框、下拉列表、复选框、单选按钮元件。 线框图元件库 流程图元件库里提供37种流程图元件，有矩形、菱形、文件、括弧、半圆形、三角形、梯形、圆形、六边形、平行四边形、角、数据库、快照等元件。 流程图元件库 图标元件库里提供了各种各样的图标元件，比如箭头图标、电池图标、日历图标等。 图标元件库 2. 母版区域 母版区域用来设计一些共用、复用的区域，例如网站尾部版权区域，可能每个页面都会用到版权信息；也可以用来设计导航菜单、特别是移动App的底部标签导航。在母版区域进行一次设计，在其他页面可以直接引用该设计，从而达到共用、复用的效果。 母版区域 1.3.5 工作区域 工作区域是用来绘制原型的画布，在该区域里可以完成原型的设计，就像画画时用的画纸，在画纸上可以随意发挥，工作区域就是绘制原型的画纸。 工作区域 1.3.6 检视区域 检视区域用于设计页面或者元件的样式、交互效果及说明； 可以设计页面、元件的样式，比如页面在浏览器中的对齐方式是居中对齐还是居左对齐，页面的背景或者背景图片，还可以根据草图的效果对元件设置禁用、选中等属性，也可以给元件添加样式，设置元件的位置和大小，选择元件的字体、边框线、圆角半径、对齐方式。 可以添加页面交互效果，如添加页面载入时的触发事件、窗口尺寸改变时的触发事件、窗口滚动时的触发事件以及更多其他的事件。 可以填写页面或者元件注释说明，也可以自定义注释的名称。 样式设置 交互设置 说明设置 1.4 原型设计流程 1.4.1 需求分析 定制网站一般情况下，需求分析主要由产品经理或者需求分析师来完成，但是设计师最好也参与到前期需求分析的过程中，这样就可以与产品经理对需求产生一致的理解，达成一致的意见。 如何进行需求分析呢？ （1）通过用户调研的方式获取用户的需求，调研的方式有很多，如调查报告、访谈用户等。 （2）通过竞品分析，分析竞品的界面样式、操作流程、主要任务流程以及用户的需求，但不能直接照搬竞品的设计，其核心竞争力与我们的产品可能不同，解决的用户需求也有可能不同，所以不能直接抄袭。 （3）通过分析用户的反馈和产品的数据，到用户的需求和痛点，从而通过产品满足用户的需求。 1.4.2 页面架构设计 1. 使用思维导图软件理清逻辑关系 获取到用户需求之后，就可以开始分析用户的需求，使用思维导图软件来理清用户的需求以及产品的各个功能模块、逻辑关系等内容。 猿题库App思维导图 2. 流程图表达主要流程任务 分析用户的需求，分析出用户使用产品可以完成的主要流程任务，要完成此流程任务用户每一步需要怎样操作。从而通过流程图分析出用户的主要流程任务，如图1.50所示。 猿题库App流程图 3. 产品信息架构设计 通过需求分析以及产品的思维导图、流程图设计，大致可以规划出产品的主要功能点，这些功能点就可以形成产品的初步信息架构，信息架构可以理解成盖房子的地基以及房子的框架。只有确定了地基和框架，才可能继续搭建上层建筑。比如要制作猿题库App产品原型，确定了它的“练习”功能、“试卷”功能、“发现”功能以及“我”功能就可以确定该产品的信息架构。 在Axure RP9里的页面区域可以对该信息架构进行管理，页面结构菜单采用树形菜单，层级分明，结构清晰，还能自动生成框架结构图，使用非常方便。 猿题库App信息架构设计 4. 页面布局设计 产品信息架构确定之后，综合思维导图的及主要流程图，就可以开始页面的布局设计，包括以下内容。 （1）页面布局的总体结构，如页面是采用一列布局、两列布局还是多列布局以及页面采用几行布局等。 （2）页面的导航设计，网站的导航是采用水平导航、垂直导航或者是其他的一些导航方式？移动App的导航栏是放置在顶部还是底部？采用几个导航标签？像猿题库App采用的是水平导航，导航栏放置在页面底部，使用4个导航标签。 猿题库App标签导航 （3）根据思维导图和流程图规划出来的内容，细分到具体页面结构来设计，需要对每一个内容块的展示位置进行布局，比如猿题库App的练习模块是如何展示各个科目的。对页面内容结构的设计取决于设计人员对内容编排的把握，不同的布局会产生不同的效果，可以参照已有成熟产品的内容布局，因为已有产品经有足够的运营数据支持，具有较多的用户反馈。 猿题库App布局 1.4.3 低保真原型设计 理解用户的主要需求，完成主要任务流程设计，通过思维导图软件确定产品的大致内容，实现页面架构设计，即页面总体布局、导航菜单以及各个模块的设计后，就可以针对各个页面进行内容设计，也就是低保真原型设计。低保真原型设计就是需要遵循产品的总体结构，利用Axure原型设计工具，进行设计所示。 猿题库App低保真原型设计 1.4.4 原型评审 低保真原型设计之后，需要进行原型评审，各个部门会针对产品的需求对产品原型进行评审。每个人都有不同的偏好和侧重点，开发人员可能更关注于设计可行性，运营人员希望有足够的预留推广区域，视觉设计师注重美观性，产品经理希望产品尽快上线，就需要设计师在原型评审前考虑全面，设计方案有足够的说服力。 1.4.5 高保真原型设计 原型设计不仅可以制作低保真原型，同时也可以制作高保真原型，即把低保真原型经过视觉设计师制图、切图，然后制作出高保真原型。这钟原型可以用于向领导汇报或者设计概念性产品。 猿题库App高保真原型设计 | |||
小结 | （1）了解什么是软件原型以及软件原型的分类：草图原型、低保真原型、高保真原型，理解它们的优缺点以及适用的场合。 （2）学会Axure RP 9软件的安装。 （3）认识Axure的软件界面，了解软件界面上的6个区域以及它们的含义和功能。 （4）理解原型设计流程，掌握需求分析、页面架构设计、低保真原型设计、原型评审以及高保真原型设计的概念和方法。 | ||
练习 | （1）导入一个RP文件到工程里。 （2）通过设置将原型设计软件界面某些区域隐藏起来，比如把母版区域或者其他区域隐藏起来。 （3）拖曳一个矩形元件到工作区域，将矩形元件背景填充为灰（#666666），文本内容命名为“我是矩形元件”，字号设置为红字体，顶部对齐，边框颜设置为黄（#FFFF00），边框线框加粗。 | ||
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论