交互设计-第6章-流程设计.pptx

1、交互设计全流程解析EXPLANATION TO ALL PROCESSES OF INTERACTION DESIGN 流程设计“流程设计”，就是关于先做什么、再做什么的先后顺序的设计。如何为一个功能设计一个好用的流程？如何画出功能的流程图？6.1 什么是流程图 流程是一个功能的结构框架和逻辑体现。一个设计良好的流程，能够让用户用最合理的路径和步骤去完成想完成的操作。6.1 什么是流程图流程图可以清晰地表现出用户完成一个任务所要经历的各种步骤和操作。1.流程图有利于保证用户所经历的流程是明确、清晰、简单的。2.流程图可以保障交互方案逻辑清晰，结构完整。3.流程图对于开发和测试同事，也有很大的帮

2、助：流程图可以清晰地表达出实现一个功能的逻辑顺序，方便开发的同事写代码时抓住脉络，也方便测试同学在测试的时候有迹可循。6.2 如何画流程图流程图主要由三种元素组成：页面、动作、条件。6.2 如何画流程图当一个界面中有多个入口，可以在矩形中列出界面包含的操作入口6.2 如何画流程图反例1：交互设计师在画流程图时，只画界面逻辑，不要画内部算法逻辑 6.2 如何画流程图反例2：不要把步骤和界面本身都表现出来，应该只表达界面。6.2 如何画流程图Axure里左侧素材栏，有专门一类“流程图工具（图中的Flow选项）6.3 流程设计万能公式 发现 了解 操作 跟进1.小明想买一件健身衣，他一直挺喜欢Und

3、er Armour这个牌子，想从网上挑一件价格400以内、款式好看的健身衣。（目标明确）2.晚上睡觉前，小美觉得无事可做，一向喜欢逛街买东西的小美心里想，“要是能把商场搬到我家来该多好啊！”。（逛）举例：淘宝首页购买商品需求对客观场景中的主要场景：6.3 流程设计万能公式 发现 了解 操作 跟进晚上睡觉前，做运营的小美在家中觉得无事可做，正好最近花钱不多，她拿出手机打开淘宝应用，想看看有没有好玩又不贵的东西，买来让自己开心一下。举例：以第2个客观场景为例，描述其目标场景 6.3 流程设计万能公式 焦点图和入口焦点图和入口品类推荐商品推荐6.3 流程设计万能公式 品类推荐6.3 流程设计万能公式

4、 品类推荐评价入口了解评价详情操作6.3 流程设计万能公式 发现 了解 操作 跟进大学生小美看到同学新买的书架既实用又好看，于是询问哪里买的。同学在微信上把淘宝链接分享给了小美。小美使用分享链接，也买到了同样的书架。发现：小美查看同学在微信里发给小美的商品链接了解：这个步骤会相对简短，因为小美已经看到同学买的实物，所以花在了解的精力自然会小一些操作和跟进：与上面分析的步骤相同。举例：淘宝首页购买商品需求对客观场景中的次要场景：6.3 流程设计万能公式 1.恰当的吸引力发现 了解 操作 跟进功能的入口要符合这个功能的重要性，不能比更重要的功能更显眼，也不能太低调 6.3 流程设计万能公式 1.恰

5、当的吸引力发现 了解 操作 跟进功能的入口要符合这个功能的重要性，不能比更重要的功能更显眼，也不能太低调 6.3 流程设计万能公式 2.清楚的含义表达发现 了解 操作 跟进一个优秀的入口的设计方案，能够做到让用户清楚地知晓，通过这个入口能带自己来什么好处6.3 流程设计万能公式 2.清楚的含义表达发现 了解 操作 跟进一个优秀的入口的设计方案，能够做到让用户清楚地知晓，通过这个入口能带自己来什么好处6.3 流程设计万能公式 3.新手引导发现 了解 操作 跟进 新功能告知型一般用于上线了以前没有的新功能，告知用户这个功能包含的内容 6.3 流程设计万能公式 3.新手引导发现 了解 操作 跟进 功

6、能用法告知型如果某个功能的操作方法是用户不熟悉的，可以考虑该种引导，提示用户如何操作6.3 流程设计万能公式 3.新手引导发现 了解 操作 跟进 功能强调型该类型引导强调某某功能的价值，希望用户更多使用该功能。6.3 流程设计万能公式 3.新手引导发现 了解 操作 跟进 彩蛋型当用户触发了特定的操作，提示用户“以后也可以如此操作”，会给用户惊喜的感觉6.3 流程设计万能公式 3.新手引导发现 了解 操作 跟进新手引导对用户的操作会造成打断，因此不宜使用过多 6.3 流程设计万能公式 1.运用接近性原则发现 了解 操作 跟进人们倾向于将彼此在位置上接近的物体归位一类6.3 流程设计万能公式 2.

7、保证文案表意准确、清晰 发现 了解 操作 跟进文案是应用跟用户沟通的一个非常重要的方面 6.3 流程设计万能公式 3.主次分明发现 了解 操作 跟进重要的信息在视觉上更明显：加大尺寸、加粗、使用更显眼的颜色 6.3 流程设计万能公式 4.保证元素的功能可见性 发现 了解 操作 跟进用户看到一件物品，或者一个界面，不用学习，就知道如何使用6.3 流程设计万能公式 1.注意用户习惯发现 了解 操作 跟进用户更习惯上下划动页面，而不是左右划动页面 6.3 流程设计万能公式 2.尽量缩短操作路径 发现 了解 操作 跟进操作路径指用户在进行多个操作时，手指在前后操作点之间的移动路径。这个路径越短，操作的

8、效率就越高，操作起来也越方便。6.3 流程设计万能公式 3.注意遵循一致性发现 了解 操作 跟进在一个应用里，相同的按钮需要有相同的行为6.3 流程设计万能公式 3.注意遵循一致性发现 了解 操作 跟进在一个应用里，相同的按钮需要有相同的行为6.3 流程设计万能公式 4.合理使用iOS和Android设计规范控件发现 了解 操作 跟进iOS人机界面设计规范Material Design设计规范6.3 流程设计万能公式 让用户知道在进行了操作之后，如何查看到后续的结果发现 了解 操作 跟进toast提示用户在哪里可以看到收藏的内容6.3 流程设计万能公式 让用户知道在进行了操作之后，如何查看到后续的结果发现 了解 操作 跟进点击了点赞按钮之后，体验很完整了，用户不需要查看自己对哪些内容进行了点赞6.3 流程设计万能公式 让用户知道在进行了操作之后，如何查看到后续的结果发现 了解 操作 跟进点击了点赞按钮之后，体验很完整了，用户不需要查看自己对哪些内容进行了点赞谢谢观看！