【P1】五、原型设计与PRD入门-【1-页面流程与页面结构图】

流程确定下来后,需要把他具象成用户可见的东西,这是我们需要页面流程图来帮助我们展示交互和展示上的东西。

页面流程图能帮助你产品设计的逻辑更加清晰。

接下来我们一起来看看,页面流程到底怎么画吧~

【视频详细内容】

1.0–了解一下页面流程图

业务流程-》拆解页面流程-》原型设计

  • 交互设计/原型设计的底子,基本依据
  • 代表用户的操作过程,先做页面流程能快速发现体验问题
  • 突出页面重点元素与逻辑关系,提升原型设计的效率

【案例】

页面、名称、核心元素、动作、过程

链接: https://pan.baidu.com/s/1jHU5AOu 密码: d27f

1.1–页面流程图和信息架构图的区别

链接: https://pan.baidu.com/s/1pLDaGA3 密码: b1xv

左侧为信息架构图;

右侧为页面流程图,三级页面流程;

区别:

  • 页面流程图,以用户视角,主要看流程的合理性;用户类产品必备
  • 信息架构图,以产品视角,主要看包含多少功能点;可以列,也可以不列
  • 页面流程图适合于跳转比较复杂的产品功能,如电商、社交产品
  • 信息架构图适合于层级分明,跳转不复杂,如音乐产品、新闻客户端、阅读类产品等

页面流程图包含什么?

  • 四方形:业务流程中四方形部分,(菱形)异常流程为tips或者弹层;
  • 流向:主干流向和辅助流向
  • 重点元素:每个流程中,重点要体现和表达的内容是什么?

页面流程图基本就包含这三个方面。

工具:

axure:紧接着做原型;

PPT:快、讲解;

【案例】

1、回归业务流程,明确主线

  • 页面流程一定来自于业务流程
  • 一般为业务流程中的方形部分
  • 异常流程一般为弹层或弹窗
  • 业务流程画的好,页面流程就很简单

业务流程图:

分解业务流程图:

一般后台不做页面流程。

2、明确页面中重点元素

  • 功能在页面中,有哪些是需要表现元素。需要重点表现的元素是什么?
  • 增加异常流程的处理逻辑。弹层、提示
  • 增加辅助的帮助页面
  • 考虑下游触发点

3、沟通和优化

  • 尽可能穷举涉及的页面,然后做减法
  • 通过原型草图,优化调整页面关键元素
  • 与UI、UE、前端研发等多沟通有更好的效果

总结

页面流程图的重点

  • 回到业务逻辑,明确主线
  • 明确每个页面中的核心元素
  • 优化和调整顺序

【知识要点】

为什么要有页面流程:

  • 交互设计 / 原型设计的底子,基本依据
  • 代表用户的操作过程,先做页面流程能快速发现体验问题
  • 突出页面重点元素与逻辑关系,提升原型设计的效率

那么页面流程该怎么做呢:

  • 页面流程来源于业务流程,首先要明确业务流程,清晰主线
  • 明确页面中的核心元素
  • 流程图的沟通和优化

【课间思考作业】

体验 enjoy app的 精品咖啡—即饮咖啡  频道  的购买流程,完成页面流程的设计。

Tips(请注意以下细节):

  1. 不要忽略异常流程的设计
  2. 页面流程需要包含页面的关键元素
  3. 考虑下游的触发点
  4. 页面流程不是页面,不要贴页面~

【课间思考作业-2】

页面流程是基于业务流程的具象化。

在天猫退货流程的基础上,根据自己的理解,完成天猫退货的相关页面流程。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注