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

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

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来做的,这个不同团队情况不同。

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

相关文章
|
JSON JavaScript 小程序
关于HBuilderX的简单介绍
关于HBuilderX的简单介绍
4164 0
|
13天前
|
人工智能
【钉钉会议 | 日程 Skill】让 Agent 真正帮你「把时间排进钉钉」
钉钉日程助手技能,打通“找人→约时→订室→发邀→跟进”全链路。支持查空闲、抢会议室、一键建会(含视频)、签到链接推送、周期例会自动排期,让AI真正驱动协作闭环。(239字)
166 15
|
9天前
|
存储 缓存 搜索推荐
《QClaw备份指南:一次配置终身复用,重装系统再也不用从零开始》
本文针对QClaw用户重装系统后配置与技能全部归零的普遍痛点,深度剖析了其区别于普通软件的分布式文件存储架构,明确划分出模型配置、技能数据、上下文记忆、个人偏好四大核心备份模块。文章基于长期深度使用的实践经验,详细讲解了选择性备份关键文件、技能关联数据同步、跨平台路径适配、增量备份与多位置自动备份的具体方法,同时给出了规范的恢复顺序与避坑要点。全文无冗余理论,所有方法均经过实测验证,可帮助用户实现一次配置终身复用,彻底解决重装系统从头配置的繁琐问题。
170 2
|
17天前
|
人工智能 安全 网络安全
Harness驾驭工程是AI平权的必经之路?
OpenClaw 将 AI 主权从模型厂商转移到了用户手中,但调教 AI 并不是一个简单的事情,甚至让人烦躁。这一背景加速了 Harness 驾驭工程的市场共识。
|
3月前
|
人工智能 缓存 算法
【AI大模型面试宝典九】- 推理部署篇
【AI大模型面试宝典】聚焦推理加速核心技术:KV-Cache优化、连续批处理、投机解码、模型并行等,结合vLLM实战与面试高频题解析,帮你系统掌握得分要点,高效斩获offer!点赞关注,持续更新中~
379 0
|
人工智能 自然语言处理 Cloud Native
【攻略】Bolt.diy 云端部署与应用实战:快速生成你的创意助手
随着AI应用从实验室走向大众,构建低门槛、高效率的AI助手平台成为开发者关注焦点。阿里云推出的Bolt.diy解决方案,开源灵活且部署快捷,支持函数计算FC与百炼大模型服务集成,大幅降低全栈AI应用开发难度。本文分享了实际部署Bolt.diy的全过程,并通过创建个人AI项目助理演示其强大功能。无论是生成项目计划、技术文档,还是搭建工具页面,Bolt.diy都能助力开发者快速实现创意,提升效率。文章还探讨了使用中的小问题及优化建议,适合对AI开发感兴趣的读者体验尝试。
354 10
|
小程序 JavaScript 数据挖掘
ClkLog常见问题-指标定义与统计逻辑Sec.1
用户行为分析指标项是衡量产品和运营管理的关键因素,它们可以帮助企业深入了解用户需求、行为模式、产品表现等多个方面。 比如页面停留时间、平均停留时长可以分析用户的需求和兴趣;跳出率、留存率可以查询用户的体验情况;事件触发次数、转化率等可以评估业务流程是否顺畅或者营销策略是否成功。 这篇我们将完整介绍ClkLog的中使用到的指标项定义以及一些重点指标的统计逻辑,便于运营人员理解后做数据分析,同时如果大家在使用过程中发现了指标项为空或异常的情况,可以对照说明排查问题。
ClkLog常见问题-指标定义与统计逻辑Sec.1
|
移动开发 前端开发 JavaScript
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏,包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑,提供了详细的代码和注释。
480 1
原生JavaScript+canvas实现五子棋游戏_值得一看
|
存储 Linux 虚拟化
轻量服务器
【10月更文挑战第19天】
638 1
Vue3空状态(Empty)
这是一个可高度定制化的空状态组件,支持自定义描述内容、描述样式、图片显示方式及样式、底部内容等属性。提供两种预设图片风格(filled/outlined)或自定义图片链接。在线预览与详细代码示例可见[此处](https://themusecatcher.github.io/vue-amazing-ui/guide/components/empty.html)。组件使用了`useSlotsExist`工具函数来判断插槽是否存在。通过简单配置即可实现多样化的展示效果。
320 3
Vue3空状态(Empty)

热门文章

最新文章

下一篇
开通oss服务