备课笔记-Visio应用基础——APP流程图.doc

编号20-01【移动APP产品交互设计开发前期】 编号20-01 学习任务三、Visio应用基础——APP流程图 一、课程说明与要求 1.课程说明 本阶段课程分为五个部分，第一部分为APP启动流程图说明，介绍了APP启动流程图的绘制思路；第二部分为APP流程图，介绍流程图的分类与登录流程的方式；第三部分为注册登录详解，重点说明流程设计、业务及产品思考；第四和第五部分主要为流程图自检与优化；通过学习APP登录交互流程图综合案例，学生可以全面、深入、透彻地理解Visio绘制APP流程图的方法，提高绘制交互流程图的实战技能。 2.工具材料准备说明 本课的作业作品实践需要同学们提前准备一些工具和材料。 工具材料 备注 Visio 每台电脑安装 二、学情分析与课程导入 1.学情分析 本课程为交互流程图认知课程，需要对交互流程环节有充分的思考认知。需要学生在学习过程中，结合实际的APP交互案例进行流程图绘制，一定要做到“由点入面”。从交互流程的启动到流转到各个环节的充分考量，要不断思考交互流程图环节是否合理与全面，思考如何做到最优化的APP交互流程图，这是非常重要的。此外，作为一门图形绘制课程，针对学生对APP交互流程认知不全面，或有较多偏差的情况，强调进行引导教学，融入市场多元化理念，从实际产品案例中不断思考交互流程环节，并进行绘制流程图。 2.课程导入 作为产品实现过程中的两大重要角色，产品经理和开发工程师的工作是完全不同的。而流程图是他们的共同语言。在产品设计的过程中，产品经理需要根据用户使用场景，逆向思考其背后的实现逻辑，并通过流程图来表达操作过程及信息交互，以便工程模型的实现。开发工程师则通过流程图理解产品经理思路，评估相应的技术方案和实现过程。流程图可以直观地表现出逻辑的严谨性和流程的合理性，是产品设计中必不可少的环节。本节课选择了“APP启动”这个常见的功能，使用Visio工具，对APP启动到进入首页的功能，做完整的需求描述以及流程自检与优化。 三、理论知识讲解 （一）描述一个典型的APP启动功能 ………………………………………………………【重点】 需求：用户启动APP进入首页 这是每个APP都存在的一个需求，点击图标然后打开APP，看起来非常简单，当然，也非常重要，涉及到产品的视觉印象和首次体验。 需求分解 展示APP的品牌形象； 根据业务需要展示广告； 向新用户展示APP引导； 启动完毕进入首页时的良好体验。 流程绘制 第一步：确定流程的节点与走向编号20-02 编号20-02 根据上述原始需求以及初步分解，我们得知几个关键节点：软件启动、启动页、广告页、引导页、首页，他们的走向用visio流程图表述如下： 第二步：寻找流程中的影响因素 首次启动：此时需展示引导页而不展示广告 软件启动时，判断是否首次启动，如果是首次启动，则打开启动页，停留2秒后进入新手引导，完毕后进入软件首页。 第三步：根据影响因素的顺序整合流程 第四步：绘制完整流程 根据各节点及其先后顺序的研究，整理全部流程如下： （二）App 流程图 1.什么是业务流程图？ 业务流程图的表达的6个关键问题： Who——谁？部门，角色，岗位 What——什么事情？ Where——在哪里做的？在我梳理的业务流程图上，where更多表示是文档还是各种系统，用来表示信息化的程度。比如当我们梳理中发现，有一项登记，是用excel而不是业务系统来进行的，那么在这里的where就可以表示为：excel文档。编号20-03 编号20-03 Document——那产生的这份文档叫什么名字？也写出来，代表有文件的传递，而以后要进行信息化的话，此份人肉文档也是需要被消除而被系统取代的。（相反，如果这项工作是在某个系统里操作的，where就可以写成“人事系统”，文档可以继续存在，即该系统中的表单名称：“员工登记表单”） Condition——条件。在这种条件下，下一个活动还能够继续，即用逻辑链接线的方式来表示一项活动的输入和输出，指向某个活动的箭头就表示此活动的前置输入条件。 Dicision——决策。有些活动会产生一个条件判断，根据不同的判断结果从而走不同的分支流程。 总的来说就是需要理解以下几个问题 整个流程的起始点是什么？整个流程的终结点是什么？ 在整个流程中，涉及到的角色都是谁？ 在整个流程中，都需要做什么事情？ 哪些事是必须的？哪些可能是偶尔出现 流程图的元素包含什么？ 简单的流程图4步方法论 明确参与的角色 明确流程进程的各模块 业务关键判定 异常处理 2.什么是页面流程图 顾名思义，就是本次需求涉及的所有页面之间的跳转情况。是一份指南书，有点类似于建编号20-04造完一个景点之后的地图。地图可以帮助技术同学俯瞰整个需求，页面之间的架构和流转情况，也可以帮助UI设计同学