4.交互设计原理与方法-流程图.pptVIP

FOUR

功能结构绘制

1、信息架构设计“分类”

1.1.功能结构图

1.2.流程图

1.2.流程图通俗来说，流程图就是一个有特定逻辑顺序的步骤地图，在这份地图的帮助下，我们可以预知某类步骤走法所能到达的终点，同时，我们也可以通过这份地图找到某个目的地的具体实现路径。

Sterneckert在2003年提出流程图可以根据不同的用户群（例如管理人员、系统分析师、书记员）这个角度来绘制，并且划分出了四种常用的种类：文档流程图：展示经过一个系统中的文档流的控制；数据流程图：展示对一个系统中数据流的控制；系统流程图：展示对于物理层面或资源层面上的控制；程序流程图：展示一个系统中对于程序的控制；

标准

在设计上的分类产品业务流程图、产品功能流程图、产品页面流程图

产品业务流程图就是通过图形化的表达形式，阐述产品在业务层面控制的图表。产品业务流程图通常作为产品设计初期阶段的工具使用，通过图形化，能够更清晰、直观地传达产品在业务层面的控制（如业务动作、方向、逻辑等信息）。

案例：ofo小黄车业务流程

以此类推：淘宝的业务流程知乎的业务流程

产品功能流程图

产品功能流程图就是通过图形化的表达形式，阐述产品在功能层面控制的图表。产品功能流程图通常作为产品设计中期阶段的工具使用，通过图形化，能够更清晰、直观地传达产品在功能层面的控制（如功能动作、方向、逻辑等信息）。

产品页面流程图

产品页面流程图就是通过图形化的表达形式，阐述产品在页面层面控制的图表。产品页面流程图通常作为产品设计后期阶段的工具使用，通过图形化，能够更清晰、直观地传达产品在页面层面的控制（如页面功能和信息、方向、逻辑等信息）。

页面流程图通常用于介绍产品页面元素及页面之间的跳转关系。产品页面流程图一般由专门的交互设计师进行设计，其绘制过程能够帮助交互设计师确定产品页面之间合理自然的跳转顺序以及页面本身的功能及信息构成。

如何绘制？以登录为例

登录要素只考虑了手机号+密码一种方式，是否满足需求呢？为什么没有邮箱登录？昵称登录？手机号+短信验证码登录？继续看第一步输入手机号，是否会存在手机号格式错误、手机号未注册的情况？系统是否有必要对手机号进行单独检验？如果单独检验，会不会有什么安全隐患？不检验，是否体验友好？如何进行评估？其中的操作、判断是由用户来做还是系统来做？系统做的话，是前端还是后端做呢？用户忘记了密码怎么办？

几点建议：面向操作的流程图有些人喜欢面向页面的流程图，有些人偏爱面向状态的流程图面向操作的流程图画法，这样做可以更聚焦在任务本身，排除界面元素干扰

由繁入简?

站在不同的角色角度进行思考在画流程图的时候，应当多思考各项操作、判断的操作者是谁，是系统还是用户，并用不同颜色（或其他方式）标明。

不同情况全覆盖对照流程图检验是否满足所有情况。最简单的检验原则就是每条路都应该走得通，都有开始和结束的点而非莫名终端，每个判断都至少有两条流转出的路。

发掘新设计点在流程图中，可以这样问自己，会不会有无法进行某操作的情况？在每一种发生错误的时候，是否有对应的设计对策？如在登录的任务中，就发掘出了用户忘记密码的情况。

others:泳道图、时序图、用例图、原型图

时序图

用例图

业务用例图

最后简化流程

绘制流程图

1.QQ登录流程2.微博、QQ、微信发布照片状态（说说）流程图时间：3月29之前

app导航

1.底部标签导航

2.顶部标签导航，tab导航

3.底部和顶部双tab导航

4.驼式导航

5.抽屉导航

6.宫格导航

7.组合导航

8.列表导航

9.轮播导航

10.点聚导航

10.瀑布导航

10.陈列馆式导航

11.下拉导航