20第四章4Visio应用基础-APP流程图

Visio应用基础——APP流程图天津电子信息职业技术学院知识要点01流程图描述一个典型的APP启动功能02App流程图03注册登录详解：流程设计、业务及产品思考04登录注册产品需求自检清单05优化App交互流程的方法流程图描述一个典型的APP启动功能第一部分APP启动流程图在产品设计的过程中，产品经理需要根据用户使用场景，逆向思考其背后的实现逻辑，并通过流程图来表达操作过程及信交互，以便工程模型的实现。开发工程师则通过流程图理解产品经理思路，评估相应的技术方案和实现过程。需求：用户启动APP进入首页这是每个APP都存在的一个需求，点击图标然后打开APP，看起来非常简单，当然，也非常重要，涉及到产品的视觉印象和首次体验。需求分解展示APP的品牌形象；根据业务需要展示广告；向新用户展示APP引导；启动完毕进入首页时的良好体验。APP启动流程图第一步：确定流程的节点与走向软件启动启动页广告页新手引导页软件首页第二步：寻找流程中的影响因素软件启动首次启动Y启动页2秒引导页软件首页N其他流程？APP启动流程图网络状况：考虑到网络状况对数据传输的影响，一般的网络状况分为两种：无网络时，不加载广告，但加载数据缓存；3G/4G/WIFI时，传输速度快，可加载广告并更新首页数据。流程表述如下：网络状况广告页3G/4G/WIFI无网络启动页2s首页数据更新APP启动流程图数据缓存：指上次使用后缓存到APP本地的数据APP保留数据缓存的目的，是减少网络数据传输，提高APP的运行效率。根据缓存状况，可分为缓存数据首页和最新数据首页。流程表述如下：网络状况无加载数据缓存缓存数据首页有广告页最新数据首页APP启动流程图第三步：根据影响因素的顺序整合流程软件启动首次启动引导页流程N网络状况无网络流程3G/4G/WIFI广告广告流程N数据缓存缓存调用APP启动流程图第四步：绘制完整流程启动页软件启动首次启动Y引导页②缓存首页网络状况广告加载广告数据网络状况启动页广告页数据更新③最新数据首页启动页加载数据缓存版本检测提示版本更新①静态首页无网络3G/4G/WifiYN跳过/3s后进入首页2s2s跳过/开启首页NY≠NApp流程图第二部分APP流程图为什么要业务流程图拿注册/登陆来说，随产品定位不同，时代不同、需求不同。每款APP或者PC页面的注册登陆功能是截然不同的，比如是否调用第三方登陆、是否验证码登陆、注册所需的信息、注册完后是否自动登陆等等细节。而业务流程图就是理清楚每个功能怎么实现和流转的。对产品经理来说，是把需求、功能落地的思路对技术开发来说，是在敲代码时的一份设计稿整个流程的起始点是什么？整个流程的终结点是什么？在整个流程中，涉及到的角色都是谁？在整个流程中，都需要做什么事情？哪些事是必须的？哪些可能是偶尔出现什么是业务流程图？APP流程图业务流程图的核心是：清晰。因为它是交给技术开发手里的施工图。所以细而全是原则。流程图的元素该怎么画？APP流程图「业务逻辑」和「业务流程图」的关系像是，前者是新菜式的做法，而后者将其变成详细的菜谱。做业务流程图的前置条件一般是：脑子里有大概的功能画面，不一定清晰但要有；熟悉产品的信息架构；想清楚业务逻辑。「业务逻辑」和「业务流程图」的关系简单的流程图4步方法论：明确参与的角色明确流程进程的各模块业务关键判定异常处理APP流程图为什么要页面流程图页面流程图其实是一份指南、地图，越是大的需求，涉及多个页面的跳转，就越需要。在技术的眼里，每个页面可能是不同SDK负责，很可能由不同的技术来维护，因此在开发时很有提要提供一份更大视野层的页面图。顾名思义，就是本次需求涉及的所有页面之间的跳转情况。是一份指南书，有点类似于建造完一个景点之后的地图。地图可以帮助技术同学俯瞰整个需求，页面之间的架构和流转情况，也可以帮助UI设计同学知晓一共有哪些页面。什么是页面流程图有什么元素？页面流程图比较简单，是基于业务流程来总结的图而已。该怎么画？1、明确页面数量、页面层级2、确定各页面的关键功能和跳转按钮3、根据业务流程，连线4、判定处理页面流程图4步页面、页面跳转按钮/链接等、页面层级APP流程图原型vs交互vs视觉无论是大公司还是从0设计App，由业务流程图还不能直接交付给程序员开发，还需要做出原型需求稿、交互UE稿、UI稿。而三者正好对应是黄金圈法则：Why-How-What。名称原型稿交互稿设计稿别名草稿线框图低保真原型高保真原型负责人产品经理设计师/产品经理设计师原型需求稿：页面有什么功能（why）交互UE稿：功能如何被用户使用（how）视觉UI稿：功能长什么样子（what）App的注册登录流程各大APP的注册登录方式：1.短信快捷方式登录百度外卖一类的APP产品侧重于快速方便的让用户下单，他们的登录注册流程提供了短信快捷登录的方式，用户通过输入手机号，收到验证码并自动填写直接登录到APP我的信息页面，极大的提高了下单的速度。用这种方式的还有京东，美团，猫眼等追求用户快速下单促成交易的产品。App的注册登录流程2.社交账号注册登录花瓣必须通过微博等账号注册，不提供邮箱注册，第一次注册/登录后必须提交邮箱。社交账号登录简化了登录注册流程，体验有所提升，更便于获取社交网络的熟人关系链，有利于后期推广。但多帐号的社交帐号容易造成后台账号混乱，僵尸账号长存，当第三方社交账号采取收紧措施的时候会有致命性的打击。App的注册登录流程3.腾讯QQ的分步式注册腾讯的分布式注册目前是体验最好且效仿最多的登陆注册方式4.新浪微博的注册App的注册登录流程5.emoji的合并登录方式emoji讨巧的把登录和注册方式合二为一，当检测到用户注册过则直接登录，如过没注册过弹出对话框提示注册并确认完成。但一个按钮同时体现两个功能，容易让用户造成混淆。设计注册登录流程的：1.明确目标：注册的目的是让用户拥有与设备无关的唯一识别的ID，防止用户因为注册流程繁琐而流失，增强用户体验。信息补全是为了收集用户资料，便于后期精准推广。2.明确产品定位：产品定位：一款类似家校通的产品，家长通过学生代码绑定孩子的账号从而了解孩子在校学习状况的产品。3.了解元素组成：根据产品定位元素组成包括：手机号，邮箱，密码，昵称，性别，城市，社交帐号等。App的注册登录流程App的注册登录流程App的注册登录流程App的注册登录流程注册登录详解：流程设计、业务及产品思考第三部分注册登录详解：流程设计、业务及产品思考注册登录业务的宏观理解一、注册登录流程的需求痛点是？即个体与该个体维度的数据无法达成关联。注册登录环节，是服务方为单个用户建立身份标识的过程，是服务与享受该服务的用户在数据层面建立双向联系的过程。二、注册登录流程具体包括什么内容？注册登录流程是一个流程集，包括正向和逆向流程；正向流程：注册流程、登录流程；逆向流程：找回密码流程，风控流程。注册登录详解：流程设计、业务及产品思考注册登录业务的宏观理解三、注册登录环节的影响？注册登录流程作为用户及站内的中间环节，可能会带来如下影响：正向：如上文所说，可以建立服务于用户之间的双向联系，快速进行推广，进行个人化营销，有利于用户的信息安全等等。反向：有流程就会有损耗，注册登录流程对用户来说，是使用网站服务的额外流程。在现在流量越来越贵的情况下，流程的损耗是必须考虑的要点；流程考虑不到位可能导致的问题是需要付出巨大的额外成本进行流程补全。总结：注册登录环节，是服务方为单个用户建立身份标识的过程。注册登录流程是一个流程集，包括正向和逆向流程。注册登录流程作为用户行为的关键节点，十分重要。注册登录详解：流程设计、业务及产品思考注册登录业务中验证机制的演变目前的注册登录流程发展也是由身份标识的识别符号变化，也就是我们常说的验证方式决定的。要作为验证方式需要两种特性：在服务对象中覆盖率高；与真人的关联度高。注册登录流程的演变1234密码基础通信方式证件信息生物特征注册登录详解：流程设计、业务及产品思考注册登录业务中验证机制的演变一、密码包括的注册登录方式：账号密码登录密码其实就是一串理论上只有身份标识所有者记得的字符串。三方账号登录其实就是借助三方账号密码信息对身份标识进行验证的方式。个体识别度：低便捷程度：低技术要求：低风险程度：高二、基础通信方式包括的注册登录方式：手机注册登录

邮箱注册登录基础通信方式具有网络效应及替代成本高的特点，同时符合作为验证方式的特性，这也是随着通信技术的发展及普及带来的验证方式升级。个体识别度：中便捷程度：中技术要求：中风险程度：中注册登录详解：流程设计、业务及产品思考注册登录业务中验证机制的演变三、证件信息包括的注册登录方式：实名注册登录

护照注册登录

学生证验证等证件作为国家采信的身份校验信息，符合校验信息的基本要求。个体识别度：高便捷程度：低技术要求：中风险程度：中四、生物特征包括的注册登录方式：指纹登录虹膜登录语音音频登录人脸识别等理论上完美的实现方式。个体识别度：高便捷程度：高技术要求：高风险程度：低注册登录详解：流程设计、业务及产品思考注册登录业务的产品流程设计注册登录流程验证动作验证时间账号密码手机验证进入应用前后置流程中自由账号体系三方账号体系账号密码登录全球手机登录三方授权登录三方静默登录注册登录详解：流程设计、业务及产品思考注册登录业务的产品流程设计一、账号密码1）自有账号体系流程：优点：注册登录环节的数据均在自己手中，可以获得更多维度的用户数据；账号体系外部依赖少，安全性较强。缺点：风控流程较多（验证码等），需要用户操作的节点多；需要自己设计风控流程及对抗性高的组件（图形验证码等），成本较大。2）三方账号体系流程：优点：流程短，登录速度快，注册转化率高，背靠三方丰富的用户信息，有利于网站快速推广；能快速建立简单的账号体系，使用个体维度的信息；与三方互相背书，可以增加在用户心中的可信度；缺点：对外部依赖性较强。注册登录详解：流程设计、业务及产品思考注册登录业务的产品流程设计二、手机验证优点：登录便捷，转化率高。缺点：运营商二次放号问题是个坑，需要有流程进行判断；短信费用的预算问题需要考虑；需要准备至少两个短信通道，以防出现短信通道堵塞或熔断等导致用户无法顺利注册的情况。三、验证时间1.进入应用前优点：注册入口少，维护成本低；用户信息全面，需要信息可一次收集完毕缺点：用户体验差，在用户没有体验服务的情况下需要注册，容易造成用户流失2.后置流程优点：用户体验佳，对用户来说流失成本较高缺点：入口多，维护成本较大；需要进行全盘规划才能做好；用户信息需要分多环节收集注册登录详解：流程设计、业务及产品思考注册登录业务的产品流程设计互金电商社交导购工具风控导向（公司发展后期）流量导向（公司发展初期）支付宝...淘宝京东...微信陌陌...点评返利...xmind...注册登录详解：流程设计、业务及产品思考注册登录业务的基本要求作为负责用户相关的产品经理，对其中注册登录业务的基本要求定为以下三点：1.稳定性：首先，稳定性作为用户业务的核心，是需要重点保证的。主要从以下几方面提高稳定性水平：提高架构合理性；日常进行稳定性检查；大促前压测；稳定性预案到位等等。2.通用性：通用性并不是每个APP都需要做的，只有公司旗下APP有点多可以考虑过通行证的架构，所以作为负责整条用户业务线的产品，需要在通用性上下功夫，做好整体规划。这样可以减少代码开发及维护成本的同时，提高流程的可复用性。主要从以下几方面提高通用性水平：解耦风控业务；组件化开发，流程可选配。3.支撑性：支撑性是指如何更好的支撑其他业务方工作开展。登录注册产品需求自检清单第四部分登录注册产品需求自检清单一、登录1移动设备属于个人私密性较高的设备，用户在进行操作时，可对输入密码进行有效的保护；2移动设备随身携带，随时随地在变换位置，网络状况不稳定等不确定因素很多；3移动设备显示区域均较小，登录的注册页面通常都会有3个页面（M站通常在一个页面），需要用户填写的内容要精简；4移动设备输入更多是手指触屏操作，人机交互有其独特性，例如虚拟键盘的设计。登录注册产品需求自检清单二、设计前的思考1.为谁设计登录注册？2.是否一定要登录注册？3.是否需要独立的账户体系？4.哪些操作需要用户登录？三、登录注册的设计步骤第一步：梳理脑图，梳理现有的登录模式和信息结构；第二步：梳理业务流程，把每一步操作都流程化，做好各种情况的处理方案（梳理流程非常非常非常重要）；第三步：画出草图/线框图，对页面元素和布局进行初步设计；第四步：交互设计，对每一项页面元素、页面跳转、操作反馈、异常处理、按钮和页面的各种状态等做出设计；第五步：自检测试，对线框图和交互设计进行自检，最好是用Axure等交互软件进行交互设计操作，建立自己的自检清单；第六步：输出产品需求文档、线框图和交互设计稿。登录注册产品需求自检清单四、设计范例1.账号账号有无格式的要求，如果只是手机号码，前端是否需要验证手机号码的有效性？手机号码为纯数字，是否弹出纯数字键盘方便用户快速填写及避免用户来回切换？手机号码的数字如何呈现？哪种格式？2.验证码验证码的格式，是四/六位数字验证码，还是英文+数字验证码，英文是否区分大小写？按钮默认显示状态、用户输入信息后按钮颜色变化效果，该如何设计比较好？倒计时如何设置？button还是label？用哪个好？如何设计？3.密码最少和最多字符设置，提示文字为“位”还是“字符”？如“请输入6-16位字母或数字”？密码是否要限制特殊字符？如“空格”、“/”等，为什么要限制？有没有安全方面的考虑？密码设置好后，注册按钮如何变化？点击“注册”后，在网络较慢的情况下，页面和按钮如何响应，是否要加锁屏浮层+缓冲提示语？登录注册产品需求自检清单四、设计范例4.错误提示错误时的报错提示文字是什么，提示格式是弹窗、Toast、还是在当前页面文字显示？Toast是没有焦点的，而且Toast显示的时间有限，过一定的时间就会自动消失。弹框会阻断用户操作，需要手动点击确认以后才会消失。在当前页面文字显示的话，提示文字摆放的位置，页面格式根据提示文字的变化，需要有怎样的视觉效果5.异常提示点击【获取验证码】，检测手机号已被注册，如无置灰设置，输入框为空，手机号码无效的情况，故需提示：手机号已被注册，是否提示用户登录？手机号不能为空，多次为空状态点击是否给出频繁操作提示？手机号码不正确，“请输入正确的手机号码”是不是比“手机号码错误”好些？点击【注册】时，可能会有输入框为空，验证码无效等情况，如无置灰设置，故需提示：短信验证码不能为空验证码已被使用，然后给出什么操作呢？验证码已过期，过期了给出弹窗吗？在弹窗直接获取验证码？验证码错误，弱提示？验证码已达到最大尝试次数，最大是多少次？登录注册产品需求自检清单四、设计范例6.短信验证码短信验证码一般通过第三方通道发送，在技术侧做规避，还需要在产品规则上做一定限制；验证码的格式需要简单明了，如“885267，XX验证码。【XXX】”验证码的字数限制，4位或者6位纯数字？7.邀请码注册是否为邀请注册？如是邀请注册，邀请码格式如何设计？邀请码错误提示？填写了邀请的用户和没填的用户，在注册成功后有何区别？有邀请码的用户是否有奖励？8.注册成功后的提示、状态变更及页面跳转注册成功后同时切换为登录状态，登录状态账号密码保存是否设置期限？给予注册成功的提示并跳转到相应页面，目标页面状态如何是否有缓存，是否需要缓存？之前是在需要token的页面跳转到注册页面的话，注册成功后需自动跳转回之前的页面注册之前有第三方登录，用户注册后还需要用户绑定第三方账号吗？登录注册产品需求自检清单五、其他注意事项：1.输入框手机号码输入框，手机号码显示一般是344格式，这样便于用户检查号码是否正确，如验证码输入框，长度一般比较短；密码输入框，默认一般为密文显示，为了更好的交互可以设置明文显示按钮，最好只设置1次密码，为什么这样？其他输入框，如邮箱、邀请码、昵称、个人信息等根据使用场景的不同自行设计；不同的输入框需要有不同的提示内容和显示状态。2.按钮按钮设计，提交按钮和文字按钮的位置和主次布局设计；按钮状态的设计，不同的状态操作都要考虑，默认置灰和高亮的条件，按钮置灰的意义何在？按钮提交反馈，点击操作要给出响应或反馈。登录注册产品需求自检清单五、其他注意事项：3.验证码验证码的格式，字母、数字、字符等，一般为数字4位或者6位；验证码的有效时间，根据不同的产品设计不同的有效时间，在有效时间内的验证码操作需要给出明确的反馈；验证码的获取次数上限，技术限制和产品设计限制同步，避免被无限制获取；验证码获取时间，一般为第三方发送，但时间最好限定在5.5秒内让用户获取到（不要问我为什么是5.5秒，因为我也不知道）验证码是怎么触发得到的？为什么有些设计为点击下一步或者获取验证码后在页面跳转时就获取，有些页面跳转后再次点击按钮才能获取？为什么有不同？触发后倒计时状态有何变化？重新获取验证码后，原验证码如何处理？短时间内多次获取验证码，是否还要给用户发送验证码？还是提示验证码已发送请输入？登录注册产品需求自检清单五、其他注意事项：4.返回按钮在注册、找回密码、第三方登录等操作流程中，返回时需要特别注意点击返回后的操作提示；比如注册手机的修改，验证码提交后设置密码等。点击返回时，干扰了正常流程的操作一般需要强提示，提示弹窗注意文案和按钮文字怎么设计好？点击返回后，当前页面和目标页面状态是否变化？例如从填写验证码返回到填写手机号码页面，手机号码是置空还是显示已输入过的手机号码？浏览应用过程中进入登录页面，登录页面是否需要有返回按钮？5.虚拟键盘虚拟键盘何时弹出？触发条件是什么？弹出的虚拟键盘是什么类型的？数字键盘、字母键盘？系统自带输入法还是第三方输入法？键盘上的”Go”按钮是否有变化？变成”完成“或者”登陆“等后点击有何交互？键盘如何隐藏？怎么触发？自动隐藏？按键隐藏？键盘上的删除按钮和一键清除按钮是否有区别？有何区别？有无必要设计一键清除？登录注册产品需求自检清单五、其他注意事项：6.异常提示登录时，账户是否在其他设备登录，是否允许多端同时登陆？不允许同时登陆，之前登录设备的账户是否要下线？给出怎样的提示？密码第一次错误给出什么提示？第二次仍然输入错误，错误提示是否需要强提示并给出找回密码的按钮？在弹窗点击找回密码，手机号码在新页面是否需要重新填写？密码连续多次输入错误是否要做出禁用限制？注册流程中，检测到手机号码已经注册，是否可以继续获取验证码？或者验证后直接登录免去页面跳转和输入密码？找回密码和重置密码都有哪些区别？网络状态不好，都该给出怎样的反馈或提示？用户所处环境网络信号不好（用户向服务器请求超时），是否需要检查用户的网络状态？还是只给出提示？服务器没有正常接收请求或没有回复，给出怎样的提示较好？手机停机，验证码、数据传输如何处理？手机没开wifi或者流量，如何指导用户进行设置？登录注册产品需求自检清单五、其他注意事项：7.第三方登录昵称的长度设置，不同平台的账户昵称的长度要求不同，该如何获取？绑定多个第三方账户，公开信息如何获取？公开信息不同如何处理？用户注册前使用过第三方登录，是否还有绑定手机号码？APP进行第三方登录，是否有1个第三方账号生成2个本地账号的情况？登录注册的设计涉及到很多方面，是最常见也是最容易被设计者忽视的地方。每一个元素的设计都要独立思考，不能照搬全抄，也不能异想天开，需要提前理解和思考，多想几个为什么，多问自己几个为什么？而在实际设计的过程中，需要重点考虑实际的应用场景。总结优化App交互流程的方法第五部分优化App交互流程的方法一、减少认知负担了解用户如何与应用交互是优化的必要条件。作为设计师和开发人员，我们应该在整个交互流程中理解用户的目标。这将帮助我们确定任务完成过程中最常见的问题。二、优化交互流程用户与应用交互时的阻力和困惑越少，应用被继续使用的机会就越大。1.拆分任务几种比较流行的优化交互流程的方法：如果一个在用户端的任务包含很多步骤和操作，最好是把这个任务拆分成一定数量的子任务。一个很好的例子是在电商购物应用中的渐进结账流程，你能够从拆分出来的步骤数中清楚自己的每一步操作。优化App交互流程的方法2.充分利用已经掌握的用户信息在下面的例子中可以看到打车应用所考虑的点——应用不会去询问用户的位置，它能够基于数据自动定位。利用这一功能，用户只需要选择乘车的位置就可以叫车。优化App交互流程的方法3.让每一步衔接自然当任务需要用户完成许多步骤时，通过清楚显示下一步的操作来帮助用户。这个界面指引通过在每次用户操作之后提供下一步骤来引导用户。优化App交互流程的方法4.每一屏优先完成一个主要功能通过遵循这个简单规则，可以将界面变得更易于学习和使用。使用视觉权重对重要元素进行优化（例如加大核心按钮的对比度）。优化App交互流程的方法三、减少混乱好的UI设计只展示相关的信息（信号），并避免不想看到的信息（噪音）。优化App交互流程的方法不要隐藏导航。一致性。显示当前位置。四、清晰的导航用户如果很难找到想要的，就算界面再漂亮，内容再充实，也变得没有意义了。一些导航的规则：优化App交互流程的方法五、结合手机自身特点手机不是台式机的缩小版，它们有自身的细微差别和限制。六、视觉引导要准确UI界面元素需要清楚的表达出哪些元素是可以交互的，哪些元素是不可操作的。七、操作区域要友好移动界面中设计可操作