好的产品经理都是这样绘制原型图的(下)...

前几天分享了上篇:好的产品经理都是这样绘制原型图的...

今天来分享下篇,本篇(原型篇-下)主要内容:

  • 原型图标注,画开发看得懂的图

  • 同一个页面展示所有的交互状态

  • 页面跳转关系图(不要做孤立的设计)

  • 流程图,梳理业务逻辑

一、原型图标注,画开发看得懂的图

首先明确原型图标注是给谁看的,谁最关心原型标准呢?一般而言,开发和设计最关心原型图标注,开发最关心的是边界条件、页面跳转关系,而设计最关心有页面和功能遗漏,如反馈状态和空页面。画出功能的所有交互状态,清晰地显性化表示交互状态是作为交互或产品的基本功。一个好的标注满足以下几个条件:

  • 标注点的含义,发生的事件

  • 用梳理所有对象和逻辑关系、状态

  • 模块化区分和标记

定义好每个标注点的含义和事件

在做交互稿标记之前,定义规范好每个标记的含义,形成统一的规范,使得团队成员易于理解。如,我比较喜欢用水滴表示标注的功能,用圆圈+箭头的形式来标识页面跳转关系。

用脑图梳理所有对象和逻辑关系、状态

下面的原型图标注以在饿了么商家详情页结算订单为例,先用思维脑图梳理功能状态,这样能避免遗漏一些边界条件。

模块化区分和标记

梳理好状态后再在原型图上写产品用例,每个功能做成一个模块,有利于往后的维护和迭代,例如下面是饿了么的订单结算功能

二、在同一个页面展示所有的交互状态

很多的开发和设计,很多耐心看原型图上的各种标注,特别是时间一长,标注就非常多。如果是做版本的迭代,一要做好标注的版本区分,让他们第一眼能看到当前版本要做的事情。如果是特别是复杂的功能,尽量在一个页面上显示出所有的交互状态,避免在看原型图时遗漏。有时候测试验收阶段的很多坑,各种状态一楼,其实是由于前期没有做好标注引起的。

下面以微信消息列表页为例(梳理思路用脑图是一个好习惯),先用脑图画出所有的状态,补齐所有交互状态,后面再画的时候效率会高很多。

如下图,为微信消息列表页所有交互状态的列表呈现:

三、页面跳转图(不要做孤立的设计)

页面跳转图,从用户的视角,系统化看流程的合理性。页面流程图有助于梳理页面之间的关系。交互设计师或产品经理在工作中,很容易把一个功能做成“孤岛型功能”,即这个功能跟其他功能建立联系,跟其他功能是孤立的关系。

如在“美啊教育”中要增加一个评论功能,那么评论机制应该怎么与现有系统对象建立联系?在分析这个问题之前先看看评论和教程的关系,如下图:

教程中可以看到相关评论,评论系统与教程之间已建立联系,但只是单线的关系。

我们再看看美啊这个产品中,还有什么对象是可以跟评论建立联系的?假如,为了刺激用户去评论,我们可以用积分奖励的方式,当用户评论教程后,可以获取一定的积分,即教程-积分通过评论建立了联系,跟现有的积分兑换优惠券、商品也是有联系的,仍是于是建立了用户-教程,教程-积分,用户-积分的关系,整个积分体系不再是孤立的功能。

用户-教程

  • 用户去评论教程

  • 教程的得分可以帮助用户筛选出更优质的教程

教程-积分

  • 通过评论教程可以获得积分

  • 积分可以免费兑换观看教程

用户-积分

  • 积分可以刺激用户去评论

  • 用户用积分可以获取商品,如优惠券等

于是整个评论体系的页面关系图为(补充了部分可能存在的需求):

四、流程图,梳理业务逻辑关系

画流程图示产品经理的基本功,产品需求,也是流程上的需求。画流程图的目的有以下几点:

  • 确保产品流程的合理性

  • 有效传达需求

  • 检验异常分支

在画流程图过程中,切勿遗漏异常状态,产品经理一般比较关心主要流程,可是开发同学在写代码时,要做条件边界判断,这个条件边界即为异常情况。测试同学在写测试用例时,要穷尽所有的场景,包括正常场景和异常场景,否则出了问题,是要背锅的…为了避免开发和测试同学不断询问你边界条件,最好在交付交互稿之前用流程图梳理出来。

常用的流程图分为单向流程图和泳道图(涉及到多个角色),单向流程图一般描述单一角色完成某个任务的整体过程,如登录注册过程、支付流程、填写资料等。

流程图包含以下内容:

  • 事项:用户要完成什么任务

  • 角色:分别会有哪些人会参与到流程中

  • 信息传递:信息在整个过程中是如何传递的

  • 异常:有哪些异常情况,如何处理

  • 如快手的登录注册流程,先来梳理思路:

  • 事项:用户要完成快手的登录注册

  • 角色:普通用户

  • 信息传递:在触发登录注册框时,获取用户的注册信息,检验手机验证码,关联通讯录数据,获得第三方登录数据

  • 异常:最近登录过该如何处理?手机号无效该如何处理?手机号已注册该如何处理?

泳道图

除了要明确事项、角色、信息传递、异常等内容,在画复杂的泳道图之前,要明确参与角色,再梳理出不同的角色要完成的任务,各个角色之间的交接,整个流程的阶段划分。

如天猫的退货流程图作图思路:

1.明确角色

参与角色有:买家、系统、卖家、客服

2.各个角色要完成的任务

买家:买家收到商品不满意,可以在天猫上发起退货,填写退款申请。如果卖家同意退货,买家可将商品寄到卖家的收获地址,寄送方式可选择自行寄件或者上门取货。如果卖家收到货后,拒绝退款,买家可以申请客服介入。

卖家:处理买家退款申请;如果订单满足退货条件,将退货地址发给买家;卖家收到商品;退款给买家。

系统:判断买家收获状态;检测买家的退款申请的原因、金额等,生成退款记录;判断是否平台先垫付退款;将卖家地址发给买家;系统将买家上门服务申请发送给合作的物流公司;变更退款状态。

客服:客服介入,判断双方责任

3.角色交接

买家将退款申请发送给系统,系统发送给卖家,卖家处理退款申请,卖家将退货地址发送给买家,买家寄件给卖家,卖家收货退款。如卖家拒绝退款,买家申请客服介入,客服处理买家或卖家的责任。

4.阶段划分

为了方便理解整个流程,小编把流程分为5个阶段:

  • 买家发起退货申请

  • 系统处理买家申请

  • 买家寄件给卖家

  • 处理退款

整个泳道图如下:

最后,也欢迎有问题的小伙伴加微信:yw5201a1 沟通交流。

此外我们的官方网站也上线了,每日分享高质量的文章、原型素材和行业报告,小伙伴可自行前往索取,支持搜索,需要的小伙伴可点击底部的阅读原文直接查看,或者复制网址www.dadaghp.com 打开。

更多干货可关注微信公众号:产品刘

想学习更多关于产品、职场、心理、认知等干货,可长按右边二维码,关注我们。

··················END··················

RECOMMEND

推荐阅读

真实遇到的产品经理面试题

产品经理如何晋升为产品总监

B端产品经理训练营

面试题,你是如何做需求分析的?

点击“阅读原文”

查看更多干货

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/51611.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【通览一百个大模型】LaMDA(Google)

【通览一百个大模型】LaMDA(Google) 作者:王嘉宁,本文章内容为原创,仓库链接:https://github.com/wjn1996/LLMs-NLP-Algo 订阅专栏【大模型&NLP&算法】可获得博主多年积累的全部NLP、大模型和算法干…

生成式AI加入低代码,或将再次颠覆开发行业

研究表明,生成式AI模型的发展将会进一步降低使用低代码和无代码开发工具的门槛,并可能诞生一类全新的智能开发技术。 在帮助用户构建自己的软件应用程序方面,低代码和无代码平台已经发挥了至关重要的作用,这些用户很少具备或根本…

聊一下大学几年如何渡过

(点击即可收听) 随着高考志愿填报的结束,等待自己的就是录取,出分与录取是每个高考生最激动的时刻 如果被某个大学和专业录取了,那接下来就是好好去上大学了的 作为一个经过大学洗礼的自己,在这里有一些话想对即将步入大学的同学说…

这里有一份诚意满满的计算机专业推荐书单

随着高考陆续放榜,盼来成绩的考生与家长们又迎来另一个纠结的难题——志愿填报。确认自己的专业方向,不仅要综合自身兴趣与特长考虑,还需与未来的就业挂钩。 根据《2023高考志愿报告》,当前计算机科学与技术专业热度仍然排名第一位…

IntelliJ IDEA 中插件的安装过程

这里简单介绍一下 IntelliJ IDEA 中插件的安装过程 有两种方式: (1)在线安装 (2)本地安装/离线安装

VS2022 + QT中文乱码问题

解决方法:下载插件 第一步:扩展→管理扩展 第二步:搜索并下载Format on Save for VS2022 可以在已安装栏看是否安装成功,重启VS2022就可以了。 感谢阅读,如有不足之处,欢迎来指正。谢谢!

如何解决表单提交的中文乱码问题 (控制台乱码输出)

在使用Tomcat跑项目的时候 会遇到类似下图乱码控制台输出问题 非常不方便 如果不解决 会影响我们后面代码报错 找问题 介绍一下几种乱码问题 一、JSP文件修改乱码 <% page language"java" contentType"text/html; charsetUTF-8"pageEncoding"UT…

页面乱码问题解决(汇总)

页面乱码问题解决 目录 1.前端页面代码解决乱码问题 2. 后端端页面代码解决乱码问题 3. idea编译文件乱码问题 1.前端页面代码解决乱码问题 &#xff08;a&#xff09;页面是jsp&#xff0c;对于这个&#xff0c;需要在jsp头部加上 page的编码设置 <% page contentTyp…

各种中文乱码解决大全

各种乱码&#xff1a;处理方式 配置tomcat以及IDEA的配置文件时&#xff08;注意要重新启动&#xff09; 希望以下几种解决方法对大家有所帮助&#xff01;&#xff01;&#xff01;1.启动Tomcat控制台中文乱码&#xff1a; 解决方法&#xff1a; -Dfile.encodingUTF-8 2.I…

构建个人版ChatGPT Prompt

目录 前言 一、基本原则 二、进阶技巧 1.增加结果示例 2.角色扮演 3.对于复杂问题&#xff0c;分步进行 4.使用分隔符 5.要求ChatGPT进行自我检查 6.使用英文 三、推荐免费插件 总结 前言 一、基本原则 当我们尝试写一个更好的 Prompt 时&#xff0c;我们可以参考 E…

ChatGPT在媒体与娱乐领域的沉浸式场景:虚拟主持人和创意助手的新应用探索

第一章&#xff1a;引言 在当今数字化时代&#xff0c;人工智能技术在媒体与娱乐领域的应用日益广泛。ChatGPT作为一种先进的自然语言处理模型&#xff0c;具备强大的对话生成能力和创造力&#xff0c;为媒体与娱乐产业带来了新的创意和可能性。本文将探讨ChatGPT在媒体与娱乐…

我用一早上时间做了个股价预测,居然这么准?

最近因为做项目的需要&#xff0c;要做一些数据预测&#xff0c;因此就去学习了一下相关的知识。主要就是采用LSTM来做时间序列的预测。 IBM股价预测 数据集选择的是IBM2006-2018年的股价数据&#xff0c;我这里算的是每日的最高股价。其中&#xff0c;2006-2016年的数据是训…

量化分析预测股市?试试这个 Python 库

本文将展示如何使用 Python 的第三方库 Stocker 来进行股票分析和预测。 安装第三方库 安装所需的库后&#xff0c;我们要做的第一件事就是将 Stocker 类导入到我们的 Python 代码中。我们可以通过在脚本目录中启动的 Jupyter Notebook 执行此操作。 !pip install quandl !pip …

解锁更高效的AIGC工具:现代大语言模型工具推荐

AI技术的普及已经在近年来不断增长。这种技术已经改变了我们与电脑的互动方式&#xff0c;让我们能够更高效、更自然地完成任务。本文将展示10个基于ChatGPT和GPT-3 AI模型构建的最强大的资源&#xff0c;使您更容易充分利用它们的潜力。因此&#xff0c;如果您想利用AI技术改进…

浅议抖音短视频平台的利与弊

近些年&#xff0c;各类短视频在中华文化国际传播中发挥了独特作用&#xff0c;比如说李子柒、丁真等网络达人为代表的视听内容在国际话语体系中努力塑造可信、可亲、可敬的中国人形象&#xff0c;并以此带动了“中国元素”的时尚潮流&#xff0c;引发海外民众对东方文化的关切…

网络案例分析之999皮炎平出鹤顶红色号的口红

今天说点不是纯技术的事儿&#xff0c;不过也是互联网相关的。 就是上周末被刷屏的999皮炎平出了口红了&#xff0c;而且出的三款口红还相当霸气&#xff0c;分别是“鹤顶红”、“夕阳红”和“够坦橙”。 且不说这是一次非常大的跨界&#xff0c;就这三款的名字就十分有嘘头&…

【揭秘】过敏性炎症的元凶竟然是“它”

在人体免疫系统中&#xff0c;原始T细胞经刺激后&#xff0c;可分化为不同路径的辅助型T细胞(T helper&#xff0c;Th)&#xff0c;其中Th2介导的2型炎症已经被科学家证明主要参与粘膜表面的屏障免疫&#xff0c;与特应性皮炎等2型炎症性疾病息息相关&#xff0c;而IL-4是其中发…

儿童过敏性疾病的表观遗传年龄

在过去的几十年里&#xff0c;被诊断患有哮喘和过敏症的儿童人数大幅上升&#xff0c;究竟是什么原因推动了这一增长&#xff0c;目前尚无定论。环境和生活方式的迅速变化可能是罪魁祸首&#xff0c;但这两种疾病的病因仍有许多有待了解的地方。为了加深我们的理解&#xff0c;…

文献(5): 单细胞转录组揭示人类纤维化皮肤病中成纤维细胞的异质性

一句话评价&#xff1a;小样本量单细胞转录组在冷门疾病领域应用前景尚可&#xff0c;常规套路也能发NC 1. Title 标题可以看出本研究的主要内容&#xff1a;①构建成纤维细胞的图谱/揭示成纤维细胞的异质性&#xff1b;②找到一群&#xff08;相对于正常样本&#xff09;在纤维…

规划自己的健康问题

这是学习笔记的第 2414篇文章 最近处理了一些事情&#xff0c;看起来是些碎片没有关联的事情&#xff0c;但是实际上却有深意&#xff0c;所以我不禁感叹健康问题。自己的健康&#xff0c;只有自己知道&#xff0c;而且只有自己最重视&#xff0c;当然意识到问题和要做出改变是…