用户旅程图
用户旅程图以高度详细的方式描述了不同用户在系统、应用或网站内等完成特定任务所采取的确切步骤。这种技术展示了当前（现状）用户的工作流程，并揭示了未来（预期）工作流程的改进空间。
Mermaid 可以渲染用户旅程图:
代码:
```mermaid
journey
title 我工作一天
section 去公司
烧水: 5: 我
上楼: 3: 我
工作: 1: 我, 张三
section 回家
下楼: 3: 我
坐下: 5: 我
```
#mermaid-svg-THgV33MCCjazdPcN {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-THgV33MCCjazdPcN .error-icon{fill:#552222;}#mermaid-svg-THgV33MCCjazdPcN .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-THgV33MCCjazdPcN .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-THgV33MCCjazdPcN .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-THgV33MCCjazdPcN .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-THgV33MCCjazdPcN .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-THgV33MCCjazdPcN .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-THgV33MCCjazdPcN .marker{fill:#333333;stroke:#333333;}#mermaid-svg-THgV33MCCjazdPcN .marker.cross{stroke:#333333;}#mermaid-svg-THgV33MCCjazdPcN svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-THgV33MCCjazdPcN .label{font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);color:#333;}#mermaid-svg-THgV33MCCjazdPcN .mouth{stroke:#666;}#mermaid-svg-THgV33MCCjazdPcN line{stroke:#333;}#mermaid-svg-THgV33MCCjazdPcN .legend{fill:#333;}#mermaid-svg-THgV33MCCjazdPcN .label text{fill:#333;}#mermaid-svg-THgV33MCCjazdPcN .label{color:#333;}#mermaid-svg-THgV33MCCjazdPcN .face{fill:#FFF8DC;stroke:#999;}#mermaid-svg-THgV33MCCjazdPcN .node rect,#mermaid-svg-THgV33MCCjazdPcN .node circle,#mermaid-svg-THgV33MCCjazdPcN .node ellipse,#mermaid-svg-THgV33MCCjazdPcN .node polygon,#mermaid-svg-THgV33MCCjazdPcN .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-THgV33MCCjazdPcN .node .label{text-align:center;}#mermaid-svg-THgV33MCCjazdPcN .node.clickable{cursor:pointer;}#mermaid-svg-THgV33MCCjazdPcN .arrowheadPath{fill:#333333;}#mermaid-svg-THgV33MCCjazdPcN .edgePath .path{stroke:#333333;stroke-width:1.5px;}#mermaid-svg-THgV33MCCjazdPcN .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-THgV33MCCjazdPcN .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-THgV33MCCjazdPcN .edgeLabel rect{opacity:0.5;}#mermaid-svg-THgV33MCCjazdPcN .cluster text{fill:#333;}#mermaid-svg-THgV33MCCjazdPcN div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-THgV33MCCjazdPcN .task-type-0,#mermaid-svg-THgV33MCCjazdPcN .section-type-0{fill:#ECECFF;}#mermaid-svg-THgV33MCCjazdPcN .task-type-1,#mermaid-svg-THgV33MCCjazdPcN .section-type-1{fill:#ffffde;}#mermaid-svg-THgV33MCCjazdPcN .task-type-2,#mermaid-svg-THgV33MCCjazdPcN .section-type-2{fill:hsl(304, 100%, 96.2745098039%);}#mermaid-svg-THgV33MCCjazdPcN .task-type-3,#mermaid-svg-THgV33MCCjazdPcN .section-type-3{fill:hsl(124, 100%, 93.5294117647%);}#mermaid-svg-THgV33MCCjazdPcN .task-type-4,#mermaid-svg-THgV33MCCjazdPcN .section-type-4{fill:hsl(176, 100%, 96.2745098039%);}#mermaid-svg-THgV33MCCjazdPcN .task-type-5,#mermaid-svg-THgV33MCCjazdPcN .section-type-5{fill:hsl(-4, 100%, 93.5294117647%);}#mermaid-svg-THgV33MCCjazdPcN .task-type-6,#mermaid-svg-THgV33MCCjazdPcN .section-type-6{fill:hsl(8, 100%, 96.2745098039%);}#mermaid-svg-THgV33MCCjazdPcN .task-type-7,#mermaid-svg-THgV33MCCjazdPcN .section-type-7{fill:hsl(188, 100%, 93.5294117647%);}:root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 张三 我
去公司
去公司 我
烧水
烧水 我
上楼
上楼 我 张三
工作
工作
回家
回家 我
下楼
下楼 我
坐下
坐下 我工作一天
标题语法
使用title关键字标识
title <标题>
任务语法
使用下面语句说明一段事件人物及情绪，参与者与参与者之间用逗号隔开","。
<任务>:<评分>:<参与者1>,<参与者2>…
评分
评分可以是工作效率，用户心情，成绩等等。
|
评分
|
完成率
|
用户心情
|
成绩
|
|
0~2
|
未开始
|
沮丧
|
不及格
|
|
3
|
进行中
|
一般
|
及格
|
|
4~10
|
已完成
|
高兴
|
优秀
|
区块语法
使用section关键字编写语句
section <区块文本>
- 区块文本：可以是下一段行程的开始，也可以是下一段行程的总结。
每个用户旅程都被分为几个部分，这些部分描述了用户完成任务的不同阶段
【MarkDown】CSDN Markdown之用户旅程图journey详解相关推荐
- Markdown文档生成流程图、时序图、类图、状态图、ER图、用户旅程图、甘特图、饼图等
简介 流程图.时序图.类图.状态图.ER图.用户旅程图.甘特图.饼图等这些图都可以以文本的形式插入到Markdown文档中,使用一种叫mermaid的语法. 是一种用文本描述图形的方法. 下面的代码, ...
- 值得收藏的制作用户旅程图教程
编辑导语:在产品后续的迭代升级中,用户需求与用户体验是产品迭代的重要依据因素之一.其中,用户旅程图直接.清晰地描述了用户人机交互时的体验,而通过可视化地图的创建,团队可以有效推动后续的业务协作.本文作 ...
- 产品经理硬技能——绘制用户旅程图
编辑导语:产品经理在日常工作中对于产品流程的把控以及推动起到了很大的作用,但随着产品经理的职业生涯不断发展,产品经理技能也需要不断完善和进步:本文作者分享了关于产品经理的硬技能--绘制用户旅程图,我们 ...
- 手把手教你制作用户旅程图 产品经理千万不能错过
如今一名优秀产品经理的硬核技能中有一项必须达标的便是用户旅程图!所谓用户旅程图乃是一种可视化的工具,是将用户为了完成某个特定目标而需要经历的过程完整绘制出来.本文将分享如何使用BoardMix博思白板 ...
- 用户旅程图与服务蓝图：到底有什么区别？
导语:本文的原作者Megan Erin Miller一直在斯坦福大学从事服务设计工作,她致力于在商业管理中探索创新和以人为本的设计实践.作者深入浅出地分析了用户旅程图以及服务蓝图的共性和差异,让我们一 ...
- 数据结构--图(Graph)详解(四)
数据结构–图(Graph)详解(四) 文章目录 数据结构--图(Graph)详解(四) 一.图中几个NB的算法 1.普里姆算法(Prim算法)求最小生成树 2.克鲁斯卡尔算法(Kruskal算法)求最 ...
- echart关系树状图_echart——关系图graph详解
VueEchart组件见上一篇 export default { data () { const title = { // show: true, //是否显示 text: "画布关系图&q ...
- 数据结构--图(Graph)详解(三)
数据结构–图(Graph)详解(三) 文章目录 数据结构--图(Graph)详解(三) 一.深度优先生成树和广度优先生成树 1.铺垫 2.非连通图的生成森林 3.深度优先生成森林 4.广度优先生成森林 ...
- 数据结构--图(Graph)详解(一)
数据结构–图(Graph)详解(一) 文章目录 数据结构--图(Graph)详解(一) 一.图的基本概念 1.图的分类 2.弧头和弧尾 3.入度和出度 4.(V1,V2) 和 < V1,V2 & ...
最新文章
- 三星手机如何分屏_刷机基础知识三星如何手机进入ODIN模式
- QEMU虚拟机关键源代码学习
- 中科院院士张钹：发展第三代AI技术，中美处在同一起跑线上
- 【控制】《多智能体系统的动力学分析与设计》徐光辉老师-第2章-带时延位置的离散多智能体系统的一致性
- 【深度学习】全连接层的作用
- Linux基础命令---get获取ftp文件
- mysql批量取消多行sql_mysql批量删除指定前缀的表,批量修改表名的SQL语句
- 根据Uri获取文件的绝对路径
- Java的重写equals但不重写hashCode方法的影响
- 利用github for windows 工具将本地的内容同步到github上
- Flash网络游戏简单的源代码
- [JAVA毕业设计]高铁在线购票系统源码获取和系统演示
- 三星笔记本BIOS文件提取 三星笔记本BIOS降级
- Photoshop CC 2018 安装包安装教程
- 会议panel是什么意思中文_会议形式有哪些？
- 2021物联网国赛zigbee点对点通讯——G卷
- kali WiFi密码破解分享
- 点云语义分割:PointNet训练S3DIS数据集
- Linux chromium弹出your preferences can not be read
- typescript光速入门
热门文章
- 今年上半年，我国公路建设总体形势持续向好
- H3C模拟器:Errors occurred See The logfile‘D:\HCL\H3C Cloud Lab.exe.log‘for details
- HDOJ 5821 Ball 贪心 (16多校day8 1001) ）
- python怎么读取pdf为文本_轻松用Python批量提取PDF文本内容，这个小技巧告诉你！...
- python实现两个excel数据匹配，最终写入新的excel文件
- 计算机语言混淆,Armariris: 孤挺花（Armariris） -- 由上海交通大学密码与计算机安全实验室维护的LLVM混淆框架...
- TransFuse：Fusing Transformerd and CNNs for Medical Image Segmentation
- 省市区三级联动菜单实现及三级联动下拉列表框默认值的设置
- 【达内课程】Application
- 同一进程的线程共享的资源和独有的资源
