为什么你的原型总是改-页面流程篇

简介: 上篇写到业务流程图,那么业务流程图做完是不是就可以愉快的画原型图了呢?聪明的你从标题上你已经得出答案,中间应该还有点什么,是的那就是页面流程图,那么页面流程图是又是个什么鬼。

img_0c521485c9ca8224ede07bda72f303c5.png

上篇写到业务流程图,那么业务流程图做完是不是就可以愉快的画原型图了呢?聪明的你从标题上你已经得出答案,中间应该还有点什么,是的那就是页面流程图,那么页面流程图是又是个什么鬼。从度娘上找来的图。
img_7940ce528a726e21af3118ffd3299e4d.jpe
页面流程图

页面流程图是什么?

首先:上文中提到过业务流程图是从产品视角来看产品或功能,交互原型图是以用户的视角来看产品或功能,从这点上划分页面流程图也是以用户的视角来看产品或功能。

其次:上文打过比方说如果业务流程图好比房子的图纸,那么页面流程图可以比作骨架,而交互原型图是填充骨架的每个细小的部分,页面流程图重点描述页面之间元素与逻辑关系。

开篇是一个页面流程图的基本做法事例,我们通过这张图可以一目了然的看清楚用户是如何用我们的产品的,而我们的交互原型图大家都知道更多的细节用axure或sketch做的一个模块一个模块,你很难以用户的视角看清楚一个产品或功能的全貌,直接从业务流程图到原型就会面临很多点抓不准,也就会改改改。

也许有小伙伴还是没太看懂页面流程图是啥,那么我画也个微信的页面流程图吧(只画一部分了,而且是简单的画了下,下面会举详细的例子)


img_725d4ff1ec9407a44bab98bfba036f7e.png
微信页面流程

从这个图是否能清晰的看到整个产品的全貌,看产品的每个流程是怎么走的,交互原型图是做不到这点的,而且这里可以快速体验检测哪里有问题,发现问题做调整比在交互原型里去调整方便的很多,这就是页面流程图。

页面流程图VS信息架构图

对于页面流程图有些小伙伴可能没怎么做过,但是对于信息架构图可能大多数小伙伴都接触过,还是以微信举例画个简单的信息架构图


img_1fa28d12217bc271b5d3592aea55e739.png
微信信息架构图.png

和上面的页面流程图对比有什么区别呢?
一、信息架构图是以产品的视角来看产品或功能的,页面流程图是以用户的视角,视角不同。
二、如果一个很复杂的产品如淘宝、微信很难从信息架构图中看用户使用流程的。

页面流程图中包含什么/怎么做?

我们来看下上篇文章中的业务流程图例子
img_188520e96834b899347e1c7749aefe59.png
注册业务流程图png

聪明的你应该发现了,页面流程图就是业务流程图中四方形的部分以及菱形的异常,不过在页面流程图中给用户看的异常和给后台看的异常是不同的,给用户看的异常就是弹窗。

所以页面流程图中包含:
(1)主干流向清晰
(2)功能页面中,有哪些需要表现的元素
(3)明确表示异常的处理逻辑
(4)考虑下个页面的触发点

Em......有点小懵是吧,下面来举个注册/登录页面流程图的例子对每个点分别进行阐述
img_c3bc2ebccea0065c5c6ca6552432d6bf.png
注册登录页面流程图

(1)主干流向清晰:从登录-注册-登录-忘记密码流向清晰。
(2)有哪些需要变现的元素:登录页如(输入账号、输入密码、登录按钮、注册按钮、忘记密码按钮)
(3)异常处理:有哪些异常,会有什么表现(账号与密码不符、用户名格式不对等)。
(4)考虑下个页面的触发点:如登录页面的下个页面的触发点就是三个按钮分别是(登录、到注册页、到忘记密码)。

实际在工作中是这个样子的,如下图
img_dbb2b4dd396b3482995c7aa7dcad62db.jpe
某某产品

无论是评审还是交付,业务流程图、页面流程图、交互原型图,都是一个层级一个层级做下来的,编好号方便给团队小伙伴讲解,也方便查找。

关于工具和团队协作

我个人习惯用axure,当然sketch和其它的软件都木有问题了,怎么方便怎么做,有利于团队沟通快速推进项目,管他黑猫白猫能抓到耗子就是好猫。

关于团队协作,这个老生常谈的问题了,原则上团队人员配备完善的情况下,业务流程图是PM输出,页面流程图和交互原型图是UX输出,之后对接UI、研发、测试等,但是一些团队人员配备不全的UI之前的都是PM来完成,也有页面流程图和交互原型图UI来做的,这个不同团队情况不同。

做页面流程的核心是先做加法再做减法,就是说先把能想到的都想到,之后再去优化体验过程减掉一些不必要的。
优点就是修改方便定位,不容易迷失;逻辑条理清晰,方便团队成员查看沟通。

相关文章
|
3天前
|
搜索推荐 编译器 Linux
一个可用于企业开发及通用跨平台的Makefile文件
一款适用于企业级开发的通用跨平台Makefile,支持C/C++混合编译、多目标输出(可执行文件、静态/动态库)、Release/Debug版本管理。配置简洁,仅需修改带`MF_CONFIGURE_`前缀的变量,支持脚本化配置与子Makefile管理,具备完善日志、错误提示和跨平台兼容性,附详细文档与示例,便于学习与集成。
271 116
|
18天前
|
域名解析 人工智能
【实操攻略】手把手教学,免费领取.CN域名
即日起至2025年12月31日,购买万小智AI建站或云·企业官网,每单可免费领1个.CN域名首年!跟我了解领取攻略吧~
|
12天前
|
安全 Java Android开发
深度解析 Android 崩溃捕获原理及从崩溃到归因的闭环实践
崩溃堆栈全是 a.b.c?Native 错误查不到行号?本文详解 Android 崩溃采集全链路原理,教你如何把“天书”变“说明书”。RUM SDK 已支持一键接入。
663 219
|
5天前
|
数据采集 人工智能 自然语言处理
Meta SAM3开源:让图像分割,听懂你的话
Meta发布并开源SAM 3,首个支持文本或视觉提示的统一图像视频分割模型,可精准分割“红色条纹伞”等开放词汇概念,覆盖400万独特概念,性能达人类水平75%–80%,推动视觉分割新突破。
360 34
Meta SAM3开源:让图像分割,听懂你的话
|
10天前
|
人工智能 移动开发 自然语言处理
2025最新HTML静态网页制作工具推荐:10款免费在线生成器小白也能5分钟上手
晓猛团队精选2025年10款真正免费、无需编程的在线HTML建站工具,涵盖AI生成、拖拽编辑、设计稿转代码等多种类型,均支持浏览器直接使用、快速出图与文件导出,特别适合零基础用户快速搭建个人网站、落地页或企业官网。
1595 157
|
存储 人工智能 监控
从代码生成到自主决策:打造一个Coding驱动的“自我编程”Agent
本文介绍了一种基于LLM的“自我编程”Agent系统,通过代码驱动实现复杂逻辑。该Agent以Python为执行引擎,结合Py4j实现Java与Python交互,支持多工具调用、记忆分层与上下文工程,具备感知、认知、表达、自我评估等能力模块,目标是打造可进化的“1.5线”智能助手。
897 61
|
7天前
|
编解码 Linux 数据安全/隐私保护
教程分享免费视频压缩软件,免费视频压缩,视频压缩免费,附压缩方法及学习教程
教程分享免费视频压缩软件,免费视频压缩,视频压缩免费,附压缩方法及学习教程
296 140