5.1 原型设计 - 页面流程图

业务流程图重要的是说清楚了做什么事,而页面流程图则侧重在功能设计中,页面与页面之间的流转关系,即用户通过什么操作进入了什么页面及后续的操作及页面。由于这个属性,它一般处于业务流程图和原型制作之间。

1. 页面流程图是什么

a、处于业务流程图与原型设计之间,是交互设计、原型设计的基本依据。
b、用户视角的操作流程,把自己想成用户,完全模拟用户去思考页面流向,探索用户体验的合理性,发现体验上的问题。
c、大致元素及模型如下:
-编号代表页面编号,后续在原型中可延续使用,便于查找页面
-名称代表页面名称
-操作名称代表用户的动作
-核心元素代表页面中需要重点体现和表达的功能/内容
-注:有些时候有些操作并不会指向页面,而是发个短信等,也要在页面流程上表现出来,后面有举例

页面流程图概念模型

1.1 工具
a、建议Axure,页面流程图与信息架构图都是原型的底子
b、Visio,这个是便于跨部门沟通,office办公全家桶,你懂的
c、PPT,上台必备

2. 为什么要有页面流程图

a、突出页面元素和逻辑之间的关系,大致清楚页面中元素的跳转是怎样,提升原型设计的效率。
b、代表用户的操作流程,做页面流程图能够快速发现交互问题。(页面流程图是用户视角,业务流程图是后端视角
c、成本低,一张图也许几个小时就能够完成,但是每一个页面的线框图全部画完可远不止这些时间。
d、能够让你更关注问题本质——行为路径,而不是过早陷入细节思考,并且还能够通过优化路径减少不必要的页面。

3. 怎么画页面流程图

3.1 回归业务流程,明确主线
a、页面流程一定来自于业务流程
b、一般为业务流程中的方形部分(大方形)
c、异常流程一般为弹层或者弹窗
d、业务流程画得好,页面流程就很简单

案例:需求梳理模块以及功能流程设计模块,咱们都举过一个优惠码功能的例子,这里咱们继续这个案例进行举例:

需求点:产品增加一个优惠码功能,让运营人员能够给用户发优惠码,用户下单时使用优惠码,抵扣相对应的折扣/金额。

业务流程图:

大致业务流程

然后咱们进行了细化,得到后台系统的业务流程

详细业务流程

注意:后台系统一般不用做页面流程图,页面流程图一般用于前端和用户型产品,后台系统有业务流程图一般也就够了,顶多附带个信息架构图。

再往下得到了用户阶段的页面流程图:

详细流程图

注意业务流程图中的五个动作,这五个方块的动作就是关键页面,大概就是这么个流程:

用户视角页面路径

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

梳理清楚页面中重点元素后,得到页面流程图:

页面流程图

3.3 沟通与优化流程
a、尽可能穷举涉及的页面,先繁后简
b、通过原型草图,优化调整页面关键元素,例如原型草图中觉得按钮或者页面要调整,页面流程也要跟随调整
c、与UI、UE、前端研发多沟通,页面流程图需要UI一起参与

3.4 回顾和检查
a、回归业务逻辑
b、明确每个页面中的核心元素
c、优化和调整

本篇分享主要内容到这里就算是结束了,其实页面流程图并不复杂,承接业务流程,将业务流程结合用户视角处理成页面流程,便于讲解与优化交互流程,为后续原型设计打底子。

无论哪种流程图,都是工具而已,逻辑清晰是最大的根本。

希望本篇分享能够帮助你更好地认识页面流程图。

想要更多干货分享就快来关注我的个人公众号吧!!
花名:馒头
个人公众号:我是馒头
座右铭:博学之,审问之,慎思之,明辨之,笃行之

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 162,475评论 4 372
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,744评论 2 307
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 112,101评论 0 254
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,732评论 0 221
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 53,141评论 3 297
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 41,049评论 1 226
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,188评论 2 320
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,965评论 0 213
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,716评论 1 250
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,867评论 2 254
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,341评论 1 265
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,663评论 3 263
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,376评论 3 244
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,200评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,990评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 36,179评论 2 285
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,979评论 2 279

推荐阅读更多精彩内容

  • 专业考题类型管理运行工作负责人一般作业考题内容选项A选项B选项C选项D选项E选项F正确答案 变电单选GYSZ本规程...
    小白兔去钓鱼阅读 8,898评论 0 13
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,598评论 25 707
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 12,506评论 2 59
  • 先人仙逝九重天, 阴阳相隔万嶂山。 青松围立钓秋月 六汪焚钱过中元。
    步鹿狐阅读 331评论 1 9
  • 上班第一天,上班路上没有以前那么挤,虽然远点,但地理位置还不错,靠近地铁,如果将来租房子,所在的线上也会有廉价房子...
    丸子Libby阅读 186评论 0 0