

前两篇陆续提到Markdown+Mermaid渲染图形,这里继续延续上次接着写。
Markdown+Mermaid 渲染图形~一
Markdown+Mermaid 渲染图形~二
一、用户旅程图
---User Journey Diagram
通过探讨在产品设计中,通过制作用户旅程图来理解用户的真实需求,避免过度设计。强调从用户角度出发,关注关键步骤、服务触点、情绪服务、以及提炼痛点的重要性,以确保产品与用户需求紧密结合而非仅是产品经理的自我满足。
拿我们经常用的一些视频/社交/购物/支付软件来举例,一开始用户不关心一些附加功能(这些软件其实都有额外的功能,但是暂时没有用到),他们可能只想知道今天有什么有趣的新闻/有哪些有趣的博主/哪个平台上买东西物美价廉/哪个平台支付更加的便捷安全。用户在使用这些产品时可能只想做一件具体的事情,他们可能是在搜索引擎上发现了某个点,或是看到有朋友在使用,但是无论如何,作为产品端时间都是有限的,我们就必须要在用户失去兴趣之前向他们证明你的产品可以帮助到他们。(这里的产品可以进行扩展,不一定是软件,也可以是一个实际的物品,哪怕是一个简单好用的记事便签,比如早些年我看到有朋友用一些特殊的便签,我就会被吸引住,因为这些便签内嵌了一些模板,让我们更好的在纸上写写画画的时候就把一些相对重要的决定给做了。)

具体特点
在基本的形式中,旅程图首先会将一系列用户目标和操作映射到时间轴框架中,接下来从用户的角度来创建详细叙述,最后通过可视化图形来传达,为设计过程提供信息的见解。
-
与特定产品或服务密切相关 -
分为4条路径:阶段、动作、想法、心态/情绪 -
省略大多数流程细节
实际操作
这里用了别人的一个案例,正好也结合了现在比较火的京东打入外卖平台这一事件。其中部分的一些表述参考链接。
https://blog.csdn.net/xiaohuazhuo/article/details/132304725
用户体验阶段闭环
这里用了别人的一个案例,正好也结合了现在比较火的京东打入外卖平台这一事件。其中部分的一些表述参考链接。
https://blog.csdn.net/xiaohuazhuo/article/details/132304725
根据实际场景,我们可以先将用户行为概括为几个阶段,再把每个阶段里的行为分解为节点,用简短的中性动词来表述,按时间轴排序。在用户体验过程中,我们只需要取其中关键性动作,以定外卖为例,用户在点外卖的每个阶段都有明确的目标和需求,那么我们定性研究的时候,就应该完成提炼,而不是设计或直接自嗨式的臆想。
-
了解外卖APP -
注册会员 -
选购 -
付款 -
取餐 -
评价
寻找触点
用户从接触服务到实现他的目标和需求之间,会跟你的产品产生哪些接触?你需要想清楚在这些地方如何服务用户。
-
了解外卖APP: -
有哪些外卖APP(饿了么/美团/京东[刚成立的hhhhhh]) -
研究点外卖的具体流程
-
-
注册会员: -
手机注册会员 -
使用第三方注册
-
-
选购: -
品类区引导 -
选购商品 -
进入收银台
-
-
付款: -
支付(银行卡支付/第三方支付)
-
-
取餐:骑手配送 -
评价: -
确认收获 -
用餐评价
-
情绪与感受
方向确定后,后面需要做的工作就清晰不少。在这个阶段要思考得更加缜密一些,把用户真实可能存在的问题考虑进去,让地图更加饱满。不断的想象和判断的过程,也是[同理心]设计的过程。
-
操作详情 -
不愿意去第三方的应用商店,只会使用App Store和官方下载渠道,注册时尽量不想用手机号; -
喜欢加入购物车先看看价格,查看商家满减/打折活动; -
等待骑手送餐、取餐、用餐完毕后根据体验对商家进行评价;
-
-
疑问点: -
我要饿死了,骑手不会迟到吧? -
园区不让骑手进来,外卖统一放在一处不会丢吧? -
这家外卖我第一次吃,不会很难吃吧?
-
-
-
我不知道吃什么的时候有没有推荐? -
推荐的商家有没有我喜欢的? -
推荐的商家会不会比别的商家更贵?
-
-
-
去哪里可以去下载这些App? -
哪家外卖平台性价比最高? -
哪家外卖好吃的更多? -
哪家外卖的口碑更好?
-
-
-
疑问点一: -
疑问点二: -
疑问点三:
-
-
情绪曲线:动态变化的
提炼痛点---生成完整的用户体验地图
做完前两步,整个用户旅程图慢慢地变得清晰起来,我们就可以将用户情绪低的原因进行提炼,并写在地图上展示。在小组内进行分析,与大家一起讨论痛点背后的解决方案并优化体验成为机会点。
-
机会/建议一: -
当用户在早餐、午餐和晚餐时段针对性推出活动 -
获取目标人群的定向曝光 -
吸引签约更多口碑商家入驻以吸引用户 -
推出分线抢红包等运营活动提高用户自传播
-
-
机会/建议二: -
根据商家经营品类做分层,减少用户选择焦虑 -
搭建用户标签体系,根据用户喜好推送商家 -
定向发送优惠券、红包促成下单 -
购物车计算金额自动推荐搭配、满减 -
提供满减促使用户选择产品自由支付渠道
-
-
机会/建议二: -
搭建用餐评价体系,并不断提高评价体系对商家的影响 -
促使商家为商家提供更好的服务 -
骑手路线、配送市场算法智能推荐 -
提高配送效率
-

journeytitle 用户购物旅程section 了解外卖App去哪里可以去下载这些App?: 5哪家外卖平台性价比最高?:5哪家外卖好吃的更多?:5哪家外卖的口碑更好?:5section 注册会员手机注册会员:3使用第三方注册:3section 选购品类区引导:3选购商品:3进入收银台:3section 订单完成支付(银行卡支付/第三方支付):4section 取餐:骑手配送section 评价确认收获:5用餐评价:5
用户购物
用户旅程图帮助我们理解用户与产品或服务的活动过程。在购物网站的例子中,我们可以用它来展示用户浏览商品到完成购买的过程。
用户旅程图帮助我们识别用户的痛点和关键触点,优化购物体验。通过分析用户旅程,我们可以提高产品的易用性和用户满意度。
用户旅程图帮助我们理解用户与产品或服务的活动过程。在购物网站的例子中,我们可以用它来展示用户浏览商品到完成购买的过程。
用户旅程图帮助我们识别用户的痛点和关键触点,优化购物体验。通过分析用户旅程,我们可以提高产品的易用性和用户满意度。

journeytitle 用户购物旅程section 购物开始用户浏览商品: 5:选择商品并查看详情section 添加购物车用户加入购物车:4:添加商品到购物车section 付款流程用户填写地址: 3:填写收获地址用户付款:5:完成付款section 付款用户确认收货:5:完成收货并评价商品
二、象限图
象限图图是一种通过数据点分布在四个象限中,帮助我们快速分析数据的工具。它非常适合用来展示和比较不同项目或活动在两个变量(如影响力、参与度等)上的表现。
在Mermaid中创建象限图,首先需要定义图表的标题、x轴和y轴的标签,以及每个象限的文本。数据点通过x和y坐标值来表示,这些值通常在0到1的范围内。Mermaid提供了丰富的配置选项,允许用户自定义图表的尺寸、填充颜色、文本样式等。
它允许用户创建象限图,这种图表通常用于分析和展示数据点在两个维度上的分布,广泛应用于优先级划分、风险评估、市场分析等领域。在象限图中将图表区域划分为四个部分,通常以水平和垂直轴的中心为分界,形成四个象限,每个象限代表不同的数据或特性组合。(当然这些功能其实也能够在excel中来实现的,这里着重介绍的是Mermaid的实现功能)
语法
-
定义图表类型:使用quadrantChart 关键字来表明这是一个象限图
-
设置标题:使用title 关键字后跟冒号和图表的标题文本。标题是图表的简短描述,它将始终渲染在图表顶部
宣传范围与参与度
在营销活动分析中,象限图可以帮助我们根据活动的覆盖率(Reach)和参与度(Engagement)来做出战略决策。
在营销活动分析中,象限图可以帮助我们根据活动的覆盖率(Reach)和参与度(Engagement)来做出战略决策。

quadrantCharttitle 宣传活动的范围和参与度x-axis "低覆盖宣传" --> "高覆盖宣传"y-axis "低参与度" --> "高参与度"quadrant-1 "应该扩大宣传范围"quadrant-2 "需要扩大宣传范围"quadrant-3 "重新评估"quadrant-4 "可以改进""活动 A": [0.3, 0.6]"活动 B": [0.45, 0.23]"活动 C": [0.57, 0.69]"活动 D": [0.78, 0.34]"活动 E": [0.40, 0.34]"活动 F": [0.35, 0.78]
通过象限图,可以得出一些比较基本的分析结果:
-
活动C:因为宣传覆盖和用户的参与度都非常好,是正相关的,需要持续推进; -
活动D:虽然宣传上数据很好,但是用户的数据黏性不好,需要增加用户的参与度,如果做的好就可以转化为活动C了; -
活动A 和活动F:虽然参与度还行,但宣传性不好,一旦扩大宣传之后就可以转化成为活动C了; -
活动B和活动E:在两个方向上都有短板,在资源不足的情况下需要重新评估,或者优先朝一个方向上先发力;
四色性格
用一个四色性格理论来制作一个象限图,这四种类型分别代表了不同的行为特征、沟通方式和应对压力的策略。
-
与支配型人格沟通:尽量简洁明了,避免过多解释与讨论; -
与影响型人格沟通:多表达自己的观点和想法,鼓励他们发挥创造力; -
与稳定型人格沟通:多关心感受,给予他们足够的支持和鼓励; -
与尽责型人格沟通:尽量保持条理清晰,避免过多情感色彩;

quadrantChart title 四色性格quadrant-1 "Dominance(支配型)"quadrant-2 "Influence(影响型)"quadrant-3 "Steadiness(稳定型)"quadrant-4 "Conscientiousness(尽责型)""A同事":[0.3,0.6]"B同事":[0.45,0.23]"C同事":[0.57,0.69]"D同事":[0.78,0.34]"E同事":[0.40,0.34]"F同事":[0.35,0.78]
事情优先级
这种图是我们之前见到的最多的。

quadrantCharttitle 事情优先级x-axis "缓" --> "急"y-axis "轻" --> "重"quadrant-1 "重要紧急"quadrant-2 "重要不紧急"quadrant-3 "不重要不紧急"quadrant-4 "不重要紧急""事件 A": [0.3, 0.6]"事件 B": [0.45, 0.23]"事件 C": [0.57, 0.69]"事件 D": [0.78, 0.34]
通过象限图,可以得出一些比较基本的分析结果:
-
事件C:因为既重要又很紧急,放在第一优先级,需要马上去处理; -
事件D:虽然紧急但不是很重要,可以在他人的协助下尽快完成,不一定需要自己去做; -
事件A :很重要,但目前不是很紧急,需要重视或长期观察,从时间的维度上看如果不妥善处理终究会转化成为重要紧急的事情; -
事件B:既不重要也不紧急的事情,放在最次优先级;
三、XY图
此处不再过多的用文字描述,也是我们在excel中经常需要用到的一些工具,这里只不过是换了一种形式。
柱状图

xychart-beta title "2024年xx数据" x-axis ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月","9月", "10月", "11月", "12月"] y-axis "纵轴想要展示的数据 (个)" 10 --> 35 bar [20, 19, 32, 24, 18, 14, 20, 16, 18, 20, 17, 14]
柱状图+折线图

xychart-beta title "2024年xx数据" x-axis ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月","9月", "10月", "11月", "12月"] y-axis "纵轴想要展示的数据 (个)" 10 --> 35 bar [20, 19, 32, 24, 18, 14, 20, 16, 18, 20, 17, 14] line [20, 19, 32, 24, 18, 14, 20, 16, 18, 20, 17, 14]
折线图对比

xychart-betatitle "2024年xx数据"x-axis ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月","9月", "10月", "11月", "12月"]y-axis "纵轴想要展示的数据 (个)" 10 --> 35bar [20, 19, 32, 24, 18, 14, 20, 16, 18, 20, 17, 14]

xychart-betatitle "2024年xx数据"x-axis ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月","9月", "10月", "11月", "12月"]y-axis "纵轴想要展示的数据 (个)" 10 --> 35bar [20, 19, 32, 24, 18, 14, 20, 16, 18, 20, 17, 14]line [20, 19, 32, 24, 18, 14, 20, 16, 18, 20, 17, 14]
折线图对比

---config:xyChart:width: 900height: 600titlePadding: 10titleFontSize: 30showTitle: truechartOrientation: 'vertical'themeVariables:xyChart:titleColor: "#ff0000"---xychart-betatitle "2023/2024年xx数据对比"x-axis "月份" ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月","9月", "10月", "11月", "12月"]y-axis "纵轴想要展示的数据 (个)" 5 --> 40line [18, 33, 24, 29, 7, 29, 24, 28, 34, 28, 30, 19]line [20, 19, 32, 24, 18, 14, 20, 16, 18, 20, 17, 14]
