Chartistic是一款通过交互快速编辑数据可视化图表的app。本文通过对“Chartistic”app进行产品体验与分析后产出的PRD文档。该文档由几个板块组成：全局说明、产品说明、页面详细功能说明等。
一、文档综述
1.1文档输出环境
1.2产品简介
1.3产品总结
二、全局说明
2.1键盘说明
2.2按钮说明
2.3默认设置
2.4限制设定
2.5页面交互
三、产品说明
3.1产品操作流程
3.2产品功能导图
3.3页面流程
四、页面详细功能说明
4.1欢迎页
4.2首页
4.3图表编辑页
4.3.1柱状图/折线图/面积图/饼图图表编辑页
4.3.2智能剪贴画编辑页
4.4X轴Y轴编辑页（柱状图/折线图/面积图/饼图）
4.5设置编辑页
4.5.1柱状图/折线图/面积图设置编辑页
4.5.2饼图设置编辑页
4.5.3智能剪贴画设置编辑页
4.6图表完成页
五、总结
Chartistic，一款备受好评的小众数据可视化app。
在这个到处都充斥着数据，以数据为导向的年代，日常办公中随时随地都有可能需要对或多或少的数据进行可视化处理来帮助分析与演示。
虽然有很多的功能强大的工具可以创建图表，但是却没有多少工具可以使创建更简单、更具有交互性。
Chartistic无需登录，打开即用，在移动端以交互的方式编辑数据，一分钟内创建漂亮的柱状图、折线图、区域图和饼状图。将图表以图像的形式导出，并将其嵌入到演示文稿、电子邮件、文档、电子表格中!
交互便捷，操作简单的它已在43个国家/地区投入使用。在新加坡、泰国、菲律宾和越南，名列App Store的年度十佳应用榜单。上线起至今共入选 App Store 精品推荐 9 次，下载量累计24万次 。
目标用户：需要对少量数据迅速进行可视化处理的办公人群
产品定义：快速、简单的移动端数据可视化工具应用，导出图表作为PPT等演示工具的补充。
产品特征：
在不同页面需要输入编辑时，对应的弹出键盘的类型，数字键盘只能输入正数
图表编辑页面：
X轴Y轴编辑页面：
设置编辑页面：
新建图表时
图一
图二
图三
图四
页面名称：首页
入口：欢迎页后自动跳入
页面说明：
序号1：点击出现其他链接弹层，首页页面置于底部并虚化（如图三）
序号2：点击出现新建图表类型弹层，首页页面置于底部并虚化（如图二）
序号3：
序号4，5：点击关闭弹屏，首页页面置于顶部并解除虚化
序号6：点击快捷处理按钮消失，回到首页，在首页图表列表第一个位置添加复制的图表
序号7：点击弹屏关闭，快捷按钮消失，回到首页，该图表删除，列表中该图表后面的图表前移填充空缺位置
4.3.1 柱状图/折线图/面积图/饼图图表编辑页
图5
图6
图7
图8
图9
页面名称：柱状图/折线图/面积图/饼图图表编辑页
入口：
页面说明：
主页面：左滑展开展开设置编辑页面，下滑展开X轴Y轴编辑页面
序号1：点击返回首页
序号2：点击进入图表完成页面
序号3：点击图表类型切换为折线图，数值背景等设置不变，折线颜色为柱状图同一风格的单个颜色（如图6）
序号4：点击图表类型切换为面积图，数值背景等设置不变，折线与面积颜色为柱状图同一风格的单个颜色，折线的颜色比面积颜色深一个色号（如图7）
序号5：点击图表类型切换为饼图，数值背景等设置不变，配色也不变（如图8）
序号6：单击–切换图表颜色风格
序号7，17，18：按住上滑/下滑–修改圆点高度，上方或者下方的对应数值一起修改，左侧提示目前高度对应的数值，修改值在设定的Y轴最大值与最小值之间
序号8，9，10，12：输入值之前按钮为灰色，输入后字体颜色由背景设置决定；点击展开X轴Y轴编辑页面
序号11：
序号13：点击后小圈即序号7变成删除符号如图9，单击删除符号删除该组数据，当删除至只剩一组数据时删除符号变回小圈，不可再删除
序号14：点击隐藏上面的下拉按钮、添加按钮、删除按钮、设置按钮，隐藏后图表变为左向，单击后以上按钮出现
序号15：点击展开设置编辑页面
序号16：输入值之前按钮为灰色，输入后字体颜色由背景设置决定；点击输入标题
序号19：点击饼图需要修改占比的目标扇形后出现两个半圆形按钮，按住按钮滑动分隔线调整目标扇形角度，按钮相邻一边的扇形同时被增大/减小角度，饼图中间提示目前目标扇形角度对应的占比
4.3.2 智能剪贴画编辑页
页面名称：智能剪贴画编辑页
入口：
页面说明：
主页面：左滑展开展开设置编辑页面
序号1：按住上下滑动更改有色部分的高度，左侧占比数值一起更改，更改范围为0%-100%
页面名称：X轴Y轴编辑页面
入口：
页面说明：
饼图没有编辑X轴名称按钮与编辑Y轴名称按钮
序号1：点击保留编辑结果，收起X轴Y轴编辑页面，回到图表编辑页
序号2：点击屏幕下半部分或者从下半部分上滑，收起X轴Y轴编辑页面，回到图表编辑页
序号3：
序号4：
序号5：点击编辑文本框与数值框之间出现小删除按钮即序号4，点击删除对应的该组数据
异常提示：
页面名称：设置编辑页面
入口：
4.5.1 柱状图/折线图/面积图设置编辑页
标题设置功能
页面说明：
序号1：屏幕左侧页面点击或者右滑返回图表编辑页
值设置功能
页面说明：
序号2：最大值最高可设置为10000，最大值设置的值需要大于最小值，仅可编辑为整数
序号3：最小值最小可设置为0，最小值设置的值需要小于最大值，仅可编辑为整数
异常提示：
网格设置功能
页面说明：
序号4：可见性为关闭状态时，行数与每一间隔的值无法选择与编辑
序号5：初始默认值为10，可编辑范围为【0~15】，仅可编辑为整数
序号6：对齐条开启状态见图，在图表编辑页面滑动所编辑的数据对应到Y轴上的数值（图中的0、100、200、300等数值）时停顿一下，左侧提示所对应的数值；滑动编辑的数值（如323、546等）不在Y轴上时，不显示左侧的数值提示
序号7：简单图表仅保留图表主体形状，如上图
序号8：初始默认值为100，仅可编辑为整数，每一间隔的值需要在 【0.07*（最大值-最小值）~ （最大值-最小值）】这个范围内，考虑到（最大值-最小值）/输入的间隔值 得到的行数有可能不是整数的问题，实际显示的行数为（最大值-最小值）/输入的间隔值四舍五入取整后的行数
异常提示：
边框设置功能
图例设置功能
背景设置功能
页面说明：
序号10：主题文字注释
序号11：四种主题单选，设计出图标作为按钮外观，下方会出现对应文字注释，所选择的背景按钮外层加一圈黑色示意
图表样式设置功能
页面说明：
序号9：柱状图/折线图/面积图样式说明如图
4.5.2 饼图设置编辑页
标题设置功能
页面说明：
序号1：屏幕左侧页面点击或者右滑返回图表编辑页
表格设置功能
页面说明：
竖向表仅可选择左对齐或者右对齐，横向表可选择左对齐/右对齐/居中。
值设置功能
背景设置功能（同4.5.1柱状图/折线图/面积图）
图表样式设置功能
页面说明：
饼图样式说明如图
4.5.3 智能剪贴画设置编辑页
图像搜索功能
页面说明：
序号1：仅可输入英文名称搜索，无编辑内容时文本框内容为Search，字体浅灰色，输入内容后字体变为黑色
异常提示：
当移动端无网络时，搜索框下方“在线搜索图像”更改为“连接中断”，搜索框点击无反应
标题设置功能
值设置功能
背景设置功能（同4.5.1柱状图/折线图/面积图）
图表样式设置功能
页面说明：
智能剪贴画样式说明如图
页面名称：图表完成页
入口：
页面说明：
序号1：点击返回首页
序号2：点击进入图表编辑页面
序号3：点击导出保存到本地或者分享
以上便是我本次倒推撰写的Chartistic的产品需求文档，格式参考倒推“潮汐”APP的产品需求文档。
这款App是一款很实用的手机应用，交互很有特色，因为过于追求操作的简便，导致功能局限比较大，对于App的未来优化方向，笔者认为可以在以下几个方向尝试：
这是本人第一次撰写的产品需求文档，一定有诸多不足，希望各位前辈不吝赐教，感激不尽！希望可以成为一名产品经理，创造出对用户有价值的产品，不求做改变世界的产品，只求改变自己，改变眼前。
文章来源：人人都是产品经理
大部分交互设计师接到需求后，就开始分析下竞品、然后结合自己产品和自己的想法，就着手交互原型制作了，在这样一个设计流程中，交互设计师很难有体系化的思考。
有没有一套体系化的设计思路，让交互设计师做出的方案又专业、又全面、又经得起挑战和用户检验的设计方案呢？
本文是我梳理的一套体系化设计流程与思路，希望可以帮到大家。体系化设计思路大纲如下：
作为一个交互设计师。在我们接到需求之后，首先需要弄清楚的是产生需求的业务背景是什么。其次是基于业务背景了解产品的目标是什么。最后弄清楚产品的用户人群有哪些，用户目标是哪些。
交互设计师通过从产品经理或者其他需求发起方那里了解需求生产的业务背景，了解为什么要做这个需求。在了解清楚之后，追溯需求最原始本质。
在我们实际工作的大部分情况下，大部分产品经理不会在需求文档中将业务背景写清晰，这时候我们交互设计师就可以将业务背景在交互文档中输出，并清晰的展示出来。
1. 业务背景是什么？
业务背景通常是我们为什么要做这个功能。通过做这个功能，对业务有什么帮助。通过业务背景，我们可以推演出业务诉求，并得到对应的产品目标。
2. 产品目标是什么？
产品目标是产品能得到什么样的结果，对产品来说可以获得什么样的好处。所以在交互文档的设计中要重点体现出产品目标。通过明确产品目标，可以清晰的指导我们做交互方案。
3. 用户人群是哪些？
用户人群主要是通过我们对现有产品的用户画像得到，并推算出使用这个需求的用户人群是哪一类人，通过明确的用户人群，这样我们在做设计过程中，可以很清晰知道这个需求为谁而做。
4. 用户目标是什么？
用户希望通过使用这个功能达到什么样的好处或目的。
5. 设计目标是什么？
通过业务背景、用户人群、用户目标和产品目标拆解出对应的设计目标。
以登录注册为例。业务背景是目前产品的登录和注册的效果不理想。对应的用户人群分为两类，分别为新用户的注册流程和老用户的登录流程。用户目标是方便快速的完成登录注册流程，越简单越快越好。产品目标是提升登录注册的完成率。
设计目标是拆解，如何能提高登录注册的完成率。那么设计师可以拿到登录注册的完成流程，看看登录注册过程中，哪些步骤转化率低，那么对转化率低的地方进行设计优化。
目标拆解就是对页面进行数据提升具体优化方案，例如文案问题、视觉布局问题、交互路径问题等。
对于设计师来说设计方法有很多种。例如常见的有：目标导向、数据分析、用户调研、设计走查、场景化设计、用户体验地图、竞品分析等。
在做设计方案过程中，一般不会将上述的方法全部用到，更多的是使用其中的一种或者几种混合使用。
根据具体的需求选择适合的方法。例如在做登录注册这个优化流程方案过程中，可以通过数据分析找到转化率低和设计走查思考如何提升数据，就可以完成设计目标。
1. 不同场景梳理
我们需要以场景的思维做场景分析，通过场景分析就可以清晰地描述这些场景，从而确定用户的需求，并在这基础上用交互方案满足需求。
举个栗子，产品提出一个需求：应用添加「商品列表按照价格从低到高排序」的功能，这还是老思维，是在「定义我们的应用」；
而如果从场景的角度来思考，用户搜索某种商品，在列表页会列出一长串商品，而用户此时只想快速找到符合他的要求的那一个；而有些用户在挑选的时候，会需要买价格便宜的，此时排序功能就是用户的需求。
这样从场景来理解，会更清楚地理解需求发生的环境，便于做出好设计。
比如，顺着排序的场景，可以进一步想：有这样需求的用户在我们的应用里多吗？如果多，那么意味着用户经常需要进行排序的操作，所以在设计的时候，可以把排序的入口放的明显一点，好操作一点，方便用户轻松地进行排序。
对于使用滴滴快车的用户，整个流程包含三个阶段，分别为上车前，坐车中和下车后。每个阶段都存在多种用户使用场景。
2. 不同角色用户
有时候需要考虑不同角色的用户，例如后台系统，需要同时考虑普通用户、管理员角色和超级管理员。
三个不同角色的使用权限也是完全不同的。权限：普通用户 < 管理员角色 <超级管理员。三种角色的主操作流程也是不一样的，在设计过程中需要差异化设计。
3. 设计不同流程
明确设计目标、设计方法确定、弄清楚不同场景。接下来就是设计不同的流程。
一般先设计功能入口流程，接下来就是主流程和支线流程。最后才设计异常流程。
4. 方案细化和走查
在涉及到异常场景，且可以全局性复用的情况，则只需要全局性组件说明即可，不用每个流程都展示其异常场景组件或者页面。
全局组件指的是整个产品通用的组件，例如全局断网，操作成功、操作失败、加载、空数据界面，404 等
全局断网：一般是在首页使用 tips 提示。用户在其他界面点击操作时，也会出现 toast 反馈提示用户。也有一些 app 在用户进入后出现对话框提示用户网络异常。相对于对话框，使用 tips 对用户的干扰度更小。
操作成功：一般操作成功都是根据具体的使用场景出现对应的提示。
操作失败：异常情况导致操作失败，这时需要统一的提示，通常使用 toast，也有一些使用对话框强提示用户。
加载：涉及到全局加载和局部加载，全局加载在设计中要统一说明，例如上一个界面点击进入下一个界面，使用的全局加载就需要说明。如果是一些小场景的加载，那么需要特殊说明。例如上拉加载，下拉加载，局部小区域加载等。
空数据类型一共有三类：
通过核心指标判断设计方案是否符合预期，以此验证设计方案是否成功，并为后续产品的迭代优化做依据。
1. 关注设计的核心指标
设计过程中，要关注设计的核心指标，针对于核心指标，进行针对性的设计。
如果改版的最重要（核心）的指标是任务流程完成率，先查看用户操作流失率，然后分析找出流失原因，给出对应的优化方案。等到优化方案的产品版本上线后，对比完成率数据变化。
如果改版的最重要（核心）指标是人均观看次数，则要思考可通过哪些设计策略可提升产品的人均播放次数。
举个例子，新浪微博，以前版本用户看完视频后，视频会有重播按钮和推荐视频，用户只有进行下一步点击才能播放下一个视频。
改版后看完视频会自动切换到下一个视频。这样的设计策略虽然绑架了用户的行为，用户从一个主动接收者，变成了一个被动接收者，但是这种策略能有效的提升人均播放次数。
2. 核心指标带来的价值/收益
当验证了核心指标往好的方向发展，这时候，就需要总结核心指标带来的价值和收益，这样的话设计价值才可以直接被量化。
举个例子：一个 banner 的点击率达到 3% 的时候，每天 GMV 约 200 万，当重新设计了这个 banner，同时其他条件保持不变，点击率提升到了 6%，这时候通过数据查看每天的 GMV 是多少，如果达到了 400 万，那么这增加的 200 万的 GMV 则是通过设计优化所带来的。
设计师在交付稿件后，容易松懈，以为项目告一段落，就疏于后续的跟进工作。其实后续的跟进也很重要。产品测试版上线后，交互设计师应该跟进后续的走查和设计问题的反馈。
通过数据分析，确定上线的方案有哪些问题需要优化，建立需求池方便后续跟进优化，不断完善产品设计。
文章来源：优设
关于「撤销」有很多设计细节可以讲，所以我花了两周时间，将其浓缩成 3000 字，帮助各位产品设计师更好理解撤销的设计细节。
撤销的目的是帮助用户取消当前的操作行为。
撤销可以对用户使用产品起到一种安全保障作用，让用户在界面中自由地探索而无需担心操作所可能导致的严重后果。
或者用户删除了一个视频，撤销可以帮助用户恢复他所删除的内容；以及用户进行了一步操作，觉得不太好，就通过撤销来回退到上一步操作。
与之对应的叫「重做」，就是当用户撤销了当前的操作，但是想了想，还是行进到刚才已经操作的步骤好了。既给了用户安全感，还给了用户反悔的余地。
类似于下象棋的时候，你觉得这一步走得不好，所以悔棋了，虽然对家没说什么，但是你心里又觉得过意不去，毕竟落子无悔真君子，所以你又把棋子放回去了（真是不怎么恰当的比喻呢）。
这样做的目的是提升用户使用产品的信心，增强对产品的控制感；鼓励用户放心地探索，快速建立起自己熟悉的操作路径。
所以关于撤销，我们可以从下面几点来聊聊：
它的意思是，依次撤销之前的操作。
在尼尔森可用性原则里，就有一条类似的原则存在，即 User control and freedom（允许用户自由操控）。
很多人把这条原则解读为「撤销原则」，本质上是没什么问题的，因为撤销确实需要让用户自由操控。但是早期的撤销，并不「自由」，而仅仅只是让用户在一定范围内「可操控」。
比如早期在一些产品里，执行多步操作，但往往只能撤销一次，要想继续撤销是不被允许的，所以它的操控自由度就很低。那时候如果把这条原则解读为「撤销原则」，显然是不合理的。
于是，后来逐渐延伸出多次撤销的功能。
我记得最早使用 PS 的时候，在 PS 里面就有关于撤销次数的范围设定，但是我忘了具体范围的上限与下限是多少了。
使用的方式是，比如我设置参数为 10，那么之后我的撤销也只能操作 10 次，要想继续撤销，就会告知无法继续了。
现在的很多工具产品应该是没有这些限制了，比如 Sketch，Word 都是可以无限次撤销直至最初始状态或刚打开文件的状态。
相对早期撤销的使用逻辑，后来可多次撤销的操作在自由度上，确实是好了那么一些。
它就是在「单次撤销」的基础上，给了用户「多次撤销」的机会，并让用户回到自己满意的位置。
但是这里的撤销，它还不够自由，因为它是「依次撤销」—— 每一步撤销用户都得经历。
当撤销随着用户场景的变化而进化之后，才真正具备了比较自由的操控方式。
让撤销具备「选择属性」，必须与另一个元素做一个结合，那就是「历史记录」。
继续拿 PS 举例。
大家看到上面这张图，当你在 PS 的画板里完成了一系列操作之后，发现后面有一些东西做得不是很好，想回去重做，但是依次撤销又觉得不好把控，于是就通过操作历史，来选择具体回退到哪一步。
相比于依次序撤销，选择性撤销的自由度更高，也更符合其对尼尔森可用性第三条原则的解读。
或者再通俗一点的例子，浏览器。
假设这时候你打开了 5 个网页，关掉了其中 3 个，但是突然想起第 1 个关掉的网页还有值得收藏的内容，于是依次撤销 3 次，才打开第 1 个关掉的页面。
而现在有网页历史记录，就可以直接帮你打开之前关闭掉的所有网页中的其中一个。
解决了用户每一步都要经历的问题。
当「撤销」与「历史记录」结合之后，「选择性撤销」的出现还能解决掉「依次序撤销」的一个关键问题：撤销重做之后，无法复原。
通俗点讲，就是当用户撤销到之前的操作，进行了新的操作行为，那么原来旧的那条线路就被废弃了。看图：
当用户操作到第 5 步，然后撤销至第 3 步，再执行一次新的操作，那么步骤 4 与步骤 5 就会被废弃。
大家知道很多设计师都会做版本记录，因为 PS 的历史记录虽然在撤销操作上方便了很多，但无法复原之前的操作逻辑依旧不能满足一些设计师的诉求。
毕竟不废弃的话，撤销操作的逻辑就会很复杂；且通常「选择性撤销」伴随解释，说明用户清楚知道自己当前行为会造成何种后果。但它并不能解决用户操作过程中实际存在的这类问题。
而「选择性撤销」的「版本记录」可以解决这个问题，来看下面这个例子。
结合历史/版本记录，比如用 Notion 或石墨写了一篇文章，它们都会有版本记录，过程中会根据时间维度与内容变更维度来判断是否进行保存，那么当用户想回滚到之前的那段内容，只要对这些版本进行点击查看，然后选择具体撤回到哪一步即可。
比如我今天（2019.11.05）早上花了半小时最后对文章做了一次整理，添加了图片，它就会记录其中的操作变化，且可进行选择。这里无论如何撤至哪一步，其它内容都会有留存，不会消失。
也许这已经不是通常意义上的撤销，但它确实是撤销的升级版。
这样看起来是不是自由操控度要高很多呢？
到这里，我只是讲了「撤销」的特性，下面来聊下它在界面设计中是如何应用的。
我们现在在很多产品里都能看到撤销，在网页里与移动 App 中，它的使用形式虽然多样，但本质上并没什么区别。
大多就是单次撤销，因为用不到多次撤销，多次撤销更多是在工具里被使用。
比如油管的撤销使用：
当用户对一个视频进行「不感兴趣」的操作时，视频内容会变成右边这样，可撤销。这个内容会一直存在直到用户刷新页面时才会消失。
类似的还有淘宝网页端的购物车，当删除添加的任一商品后，其也会在附近位置出现可撤销的操作。
在网页产品中，撤销的运用大多是这样的。
我们再来看移动端产品对于撤销的应用。
在 iOS 中比较常见的是微信的摇一摇手机撤销正在键入的内容：
这类撤销较为被动，经常是在无意间触发，所以不是我们主要要聊的。
而有一类产品，撤销会以 Snackbars 的形式出现，如图：
当这类邮箱产品，删除了某封邮件后，在底部就会出现这样的提示，告知用户可撤销上一步行为。
更多的还是工具类产品，比如修图类产品 Snapseed：
它有单次撤销，也可以重做，还能多次撤销，多次撤销就是点击「查看修改内容」之后，右图出现的样子，它会把所有步骤都呈现出来，给予用户选择具体撤销至哪一步。
其实更多的也就是这样了，但是，为什么呢？为什么在非工具类产品里撤销很少见呢？难道用户从来不会误操作或操作之后反悔？
下面一节来解答。
先放结论：当某个功能具备撤销属性时，切勿再使用二次确认对话框，反之同样成立。
撤销与二次确认，是两种东西，虽然有时候解决的是同一个问题，但是它们的属性是完全不同的。
举个例子：
上面这张图，左边是在执行操作前弹出的确认框，右边是执行操作后弹出的提示框。
二者的区别很明显，二次确认的删除提示框更具警示效果，后者作为提示，较为弱化，且通常是在用户操作完成后弹出。对于用户来说，在非工具类产品中，前者更好的抑制了用户的冲动行为或误操作行为。后者作为提示类控件，不具备警示效果。
所以它们不应该同时出现，且它们虽然是解决同一个问题，但是是完全不同的情况。
于是，在大多数产品中我们很少看到撤销的使用，因为大部分需严谨的操作都会有二次确认，并不严重的操作也就不需要任何提示。即使是上述提到的邮箱删除，没有二次确认也是因为它有撤销作为提示且还有回收站允许用户检查确认。
所以，除非是场景与之密切相关的，比如社交产品内容发送后的撤回功能。
微信早期的撤回，只是撤销，它并不具备「重做」属性，现在撤回，内容会重新出现在输入框让用户重新编辑。
它们之间的差异是：它并不会产生严重后果，但确实会产生小问题。比如误操作发出信息，或发出后发现话术并不严谨。
所以这一段内容只是想告诉各位：二次确认操作与撤销操作是两种不同的东西，虽然看起来是解决同一个问题，但它们的差异也是非常明显的。必须谨记。
另外还有个提示：心细的同学会注意到文章里或其他产品里出现的「撤销」通常也会写成「撤消」。在别的领域里这是两种不同的内容，但在产品设计领域里，目前并没有对这两者做明确的区分，所以暂时不用过于纠结。
这篇文章讲了很多内容，我在这里梳理下：
所以当你设计的产品要用到撤销时，也要注意这些细节问题。
这就是本篇文章的所有内容了。其实这篇文章里包含的内容有很多，而且有很多争议点我都没放出来，直接一笔带过给出正确结论了。写这种大部头文章太累，要思考的点很多，需要帮助读者从多视角排雷，很可能导致初学者在读文章过程中出现阅读吃力的问题。所以之后还是会挑一个点来写吧。
文章来源：优设
本文对几种常见的异常状态进行设计总结，其中介绍了不同异常状态的表现形式以及我们应展现的设计状态与规范。
异常状态多在特殊场景下出现，比如服务器异常、网络异常等，因为异常状态出现的概率是较低的，所以异常状态也常常会被忽略，等到实际碰到的时候才会意识到原来还有这种状态……
作为交互设计师，在完成主流程设计后，也应该考虑到异常场景。
从全局性出发，我们可以预先考虑到产品将会碰到的异常状态，针对不同的异常状态制定相应的设计规范，在后续的设计需求中直接复用即可。
下面对几种常见的异常状态进行设计总结。
网络异常的原因主要有以下两种原因：
（1）网络连接权限
针对某App的网络连接权限可以通过手机进行设置，可设置为关闭应用使用数据，或者只允许应用在WLAN下使用，或者允许应用在WLAN与蜂窝网络下均可使用。
所以以下均属于网络异常的情况：
（2）网络连接状况
在断网（打开飞行模式）、弱网（手机信号差）的情况下， 也无法正常获取数据。
当网络异常时，用户点击进入新页面或在当前页进行操作时，App会通过异常状态缺省页或交互反馈来告知用户当前异常状态和解决方案。主要分为两种情况：
（1）当用户操作进入App新的页面时，常以缺省页的形式提醒用户当前网络异常。当应用检测到有可用网络时，缺省页将自动刷新页面内容。
比如网易云音乐在无网络连接下，进入新页面时，缺省页以简单的文案告知无网络的基础原因，通过查看详情来告知用户解决方案以及引导如何解决问题。
美团、腾讯视频等，引导用户检查网络权限设置和稍后再尝试刷新页面，稍后再试是因为弱网环境是暂时的，比如在地铁上高铁上或者某处手机信号接收较差的地方。
（2）当用户点击操作当前页面时，比如上拉加载页面、下拉刷新页面，点赞、关注等操作时，常以toast或对话框的形式提示用户。
比如网易云音乐，网络异常情况下下拉刷新或上拉加载页面均进行对话框提示，并引导用户检查网络权限设置。
美团外卖，无网络连接环境下，在我的订单页面进行评价操作，会进行toast提示。
前面说完网络异常的设计规范，接下来就不得不提到流量警告的场景。
对于需要消耗大量流量的应用：
（1）在流量环境下进行需要消耗大流量的操作，比如播放/下载音视频等，页面会进行流量警告。比如网易云音乐在流量环境下打开MV。
（2）在WI-FI环境下切换到流量环境时通常应用会主动暂停进程并进行流量警告，并在页面上告知用户原因，让用户选择是否继续进程。
比如网易云音乐、爱奇艺、芒果TV、BiliBili等音视频娱乐App，在以上2种场景下，在视频画布上进行告知让用自己选择是否继续播放，同时也提供按钮入口让用户办理业务可免流量进行播放。其中，芒果TV和BiliBili的继续播放按钮还贴心地告知了用户将要消耗的流量值。
对以上两种场景的处理方式进行归纳，均为流量警告方式。
总结完网络异常和流量警告的设计规范，我们知道其中影响因素包含：网络连接权限、网络连接状况以及网络环境的变化，下面做一个小总结，以便快速查询。
在总结之前强调一下，网络权限设置是针对某App，连接Wi-Fi和流量是针对手机（所有应用）。以iOS为例，设置截图如下：
针对以上情况，表现状态为“网络异常”，则参照网络异常的设计规范；表现状态为“流量警告”，则参照流量警告的设计规范。
服务器出错的情况是较少出现的，若出现服务器异常，其异常的时间也较为短暂。
一般不提示具体原因，处理方式为进入新页面的话则以缺省页（文案或是文案+插画）的形式进行提示+重试按钮，例如，进入小米金融贷页面时服务器出现异常，缺省页提示错误原因同时提供重试按钮。
点击操作的话则以toast或对话框的形式进行提示并重试，比如下图的段友app，服务器出错，刷新页面后进行toast提示；前段时间超级火的zao应用，朋友圈火爆传播，一度造成服务器访问过载，制作视频的时候应用给出了对话框提示。
在数据加载过程中，导致异常的原因可能是：
1、网络异常导致加载失败
2、服务器请求数据失败导致加载失败
1、如果是因为网络异常导致加载失败，处理方式参照网络异常的设计规范。
2、如果是服务器请求数据失败，处理方式参照服务器异常的设计规范。
空状态就是指页面当前无内容，主要在以下场景下会出现空状态的情况：
当前页面为空一般会提示用户当前页面为空状态，同时也可能会做适当的引导。
针对空状态的场景，主要采取以下几种设计原则：
（1）用户无权限
一般在B端产品中会碰到这种场景，通常来说，若用户无权限访问某功能模块的话，处理方式一般是将该功能模块对用户进行隐藏。
若有其他原因不能隐藏对应功能模块，处理方式为缺省页面（文案或是文案+插画），但文案要足够明确，告知无权限的用户该如何处理才能访问，一般是联系管理员添加权限。
（2）搜索无结果
搜索无结果的处理方式一般有两种处理方式，一种是缺省页面（文案或是文案+插画），另一种是在第一种的基础上加上相关推荐。具体用哪一种根据设计目标来决定。
比如网易云音乐搜索音乐无结果直接用文案告知。豆瓣搜索书影单无结果以插画+文案的形式展示结果。美团搜索不到相应的内容，应用直接推荐其他商家刺激用户购买。
另外也有应用会添加一些引导操作收集用户数据来优化搜索，比如微信读书找不到相关的数据，在页面的底部提供一个入口让用户填写书籍名称和作者，基于用户的反馈数据，微信读书在后续书城书目的收录工作中，就可以优先收录用户搜索率较高的书籍了，在优化搜索的同时也提供了用户反馈诉求的入口。
（3）初始内容为空
需要用户进行操作产生内容的页面，初始状态一般为空，和搜索无结果的处理方式类似，有2种处理方式，一种是缺省页面（文案或是文案+插画），另一种是在第一种的基础上加上快捷入口或推荐内容，其目的都是在于引导用户进行操作从而产生数据。具体用哪一种还是根据设计目标来决定。
直接用缺省页面告知方式上，例如网易云音乐，个人未发布相关动态，该动态页面直接用简短的文案告知用户暂无相关动态。
提供快捷入口上，比如微信读书，用户未加入书籍到书架时，进入书架页面，会有一句话文案引起用户共鸣，另外附上找书按钮方便用户快捷进入书城进行找书。
如果通过用户浏览记录和搜索行为等能够分析出用户的兴趣爱好，进行精准推送，那在空状态页面进行推荐引导也不乏是一种很好的尝试。比如网易云音乐、腾讯视频和美团均有采取该方式。
网易云音乐里头我从未购买或领取过数字专辑，该页面也是无数据的，网易云音乐在页面底部进行了数据专辑的推荐，具体的推荐算法不太清楚，我觉得可以是销售量较大的专辑，或者根据我个人的搜索和浏览记录进行相关推荐，最后通过埋点数据分析通过推荐引导购买是否提高了专辑购买率。
（4）内容被删除
页面内容被删除区分场景说明。
第一种是需要用户操作产生内容的页面，用户也可以通过删除将页面内容清空。
对于该场景，当页面内容被用户清空后，页面内容为空，处理方式和初始状态为空类似，以缺省页（文案或是文案+插画）的形式告知或在此基础上加上快捷入口或用户推荐。
比如清空网易云音乐中我的下载列表所有单曲、清空腾讯视频我的缓存视频，清空微信读书的书架，清空后的状态和初始状态是一致的。
另一种场景是的页面入口依然存在，但二级页面内容已经被删除了，二级空页面的设计处理方式是以缺省页（文案或是文案+插画）的形式告知，文案信息告知用户内容已被删除。
例如某微信订阅号的文章发布记录中的某篇文章已经被删除，点击进入二级页面后的提示如下：
功能已上线，后期进行产品升级或迭代功能正在开发中，功能入口没有进行关闭还是允许用户访问，通常会在用户进入该页面之后进行对话对话框提示，告知原因。
以上对几种常见异常状态的设计规范进行了总结，相对正常状态，异常状态较为少见，容易忽略，大家可以参照以上规范进行异常状态设计和优化调整。后面碰到其他异常状态，我会继续补充。
文章来源：人人都是产品经理
本文从什么是场景化、场景化设计的案例、为什么要基于场景化做设计和如何进行场景化设计 4 个方面为你完整梳理场景化设计思维的知识点。
「场景」在百度百科里的定义是：戏剧、电影中的场面，泛指情景。情景又指：
在戏剧或影视剧里，场景由人物，时空，事件（行为），环境（社会环境和自然环境）等要素构成。
互联网中的「场景」我把它分为两类，一类是为了实现用户目标而产生的场景，这种类型的场景需要明确用户目标，可能并不需要涵盖用户是怎么实现目标的。这类场景指根据用户的精准需求，为其提供精准服务，用明确的差异化服务给用户提供一个使用产品的动机。比如微博和微信，微信定位是熟人社交，微博则是陌生人社交。另一类是更加精细化的场景，这类场景需要明确用户操作流程。本文主要针对第二类场景展开。
场景化设计指基于对场景的分析，得出用户痛点与需求，结合前后场景预判用户目标，通过设计提高用户效率，给予用户惊喜与感动。
场景要素包括：4W+1H，即Who人、When时间、Where地点、What事件 、How环境，什么人，在什么时候，在什么地方，做了什么事情，所处的环境如何。其中 Where 又包括线上地点和线下地点，线下指现实中的定位，可以通过手机信号塔数据（GPS），Wifi 连接等获取；线上指用户所处的具体页面。
如：用户（who）早上上班（when）在地铁上（where）看电子书（what），地铁上人多嘈杂且操作不方便（how）。再比如用户（who）中午（when）在办公室里（where）点外卖（what），肚子很饿还不知道吃什么（how）。五要素就像口诀，帮助我们全面快速地描述场景。
为帮助大家更好的理解场景化设计，这里基于上面提到的场景五要素举一些例子。
人是变量：用户不同，看到的信息不同。随着大数据和智能推荐技术的普及，越来越多的产品通过挖掘不同用户的喜好，生成用户画像，为每位用户提供「千人千面」的个性化内容。这样的产品大家都很熟悉，比如抖音，淘宝，微博，今日头条。
时间是变量：时间不同，看到的信息不同。比如小米 MIUI11 的效率革新功能「智能出行」，当在出行类 app 上定好行程后，MIUI11 就会自动将该行程记录在负一屏显示并同步日历，同时会根据出行的时间点，在通知栏实时更新提示：
再比如在 Google Maps 的 app 里开启导航时，如果目的地在预计到达时间还没有开门，或者快要/已经关门了的话，会有个弹窗提醒。
还有蚂蚁森林的页面会根据用户打开的时间进行变化（白天与夜晚模式）等等，这些都是充分考虑了场景中时间这一变量，才有如此暖心的设计。
地点是变量：同一个用户，在不同地点看到的信息不同。比如，大众点评APP当用户从常住地北京（where）定位成非常住地杭州（where）时，根据用户的上个场景与当前场景预测用户可能处于旅游状态，从而预测用户下一步的目标是在杭州「吃喝玩乐」，所以首页和攻略页的内容都发生了变化，为用户推荐旅行地的「吃喝玩乐」。
环境是变量：不同环境看到的信息不同，比如设备环境发生变化时：iOS13 中的备忘录页面，将「添加」按钮移到了右下角。为什么？因为手机屏幕越来越大，把按钮从右上角移到右下角，更有利于用户单手操作。
再比如：我们在驾驶环境下，要保持注意力集中，避免或减少分心驾驶导致的交通事故，所以基于驾驶环境，iOS11 上线了驾驶模式功能。当 iphone 与车内的 USB 或蓝牙连接，或 iphone 感知到人的移动速度时，iphone 就会自动进入驾驶模式，在该模式下，任何人发短信，我们都不会收到提示，对方会收到「我正在驾驶，稍后回复您」的自动回复。同时，iphone 会追加一条短信，提示对方只要回复「紧急」关键词，我们就能立刻接收到他们的消息提示。
通过上面的举例想必大家已经了解到了基于场景做设计的好处。由于与用户的空间相隔，设计师无法感知用户在真实场景中使用产品的具体情况。通过场景化设计的方法，对用户使用场景进行分析与预期，可以帮助设计师找到用户与场景的内在联系，探索新的功能及交互方式。
可以概括为以下四步。
根据用户的使用流程和行为路径列举场景，这里以乘坐飞机（手机购票）为例，列举乘坐飞机涉及到的关键场景：
通过对关键场景的详细描述，我们将摸不着的用户场景像过电影一样在眼前一一呈现，有利于我们发现很多想不到或者通过调研得不到的细节，帮助我们发现用户真正的痛点与需求，洞察设计机会点。
完成了第一步的场景列举，我们对流程中涉及的场景有了深刻的了解。下一步就是对场景的判断与分析，挖掘机会点。机会点挖掘有两个方向，一是通过分析当前场景存在的痛点和需求挖掘机会点，二是通过对用户下一步目标的预判寻找机会点。
通过分析当前场景存在的痛点和需求挖掘机会点
支付宝「朋友」界面，当用户输入某数值时，输入框上方会自动显示「给对方转账***元」按钮，用户可点击该按钮完成转账。这是因为经常有用户误以为输入数值发送即完成了转账，导致很多尴尬的状况出现。基于该场景下的痛点与需求，支付宝做了这个改进，贴心又好用。
iOS 系统在切换 APP 操作时，会将一些金融类 APP 虚化，以此来保证用户信息安全。这一设计细节也是充分考虑了用户在切换 APP 时的场景，解除了用户在公告场合担心被窥屏而泄露个人财富信息的担忧。
还有，当我们用耳机听音乐或播放视频时，拔下耳机，声音就会自动停掉，这样就算在安静的场合听音乐或者看视频，耳机不小心掉下来也不会发出尴尬的声音，这些都是充分考虑了用户当前使用时的场景，才做出如此贴心的设计。
通过对用户下一步目标的预判寻找机会点
第二个方法是通过对用户当前场景的分析，预判用户下一步的行为与目标，从而寻找当前场景的机会点。
如何预期用户下一步目标？有三个方法：
在谷歌浏览器，当我们打开多个浏览窗口时，通常需要手动一个个地关闭标签页。chrome 充分考虑到了用户的使用场景，当用户关闭一个标签页时，预期用户会关闭下一个标签页，所以当关闭一个标签时，相邻标签会自动靠近，保证关闭的按钮始终位于鼠标的当前位置，这样用户就不用移动鼠标关闭下一个标签页，提高了用户的使用效率。
在将机会点转化为具体的设计时，有两个可作为依据的设计原则，分别为，情感化。
实现有以下几个方法：
行动点前置
通过对用户下一目标的预测，将用户目标在当前场景展示，缩短操作流程，达到的目标。如淘宝首页的 tab 栏会根据每个用户的浏览记录预测用户目标，千人千面个性化展现，缩短了用户查找商品的路径，提高商品购买效率。
行动点置换
还是拿淘宝举例，淘宝底部的第一个导航，当用户滑动首页下方的商品流时，该按钮由首页变成置顶。
行动点相关提示
意思是根据用户当前目标或下一步目标进行相关的提示。如支付宝朋友页面，当上滑时，会出现「找人转账」的提示，点击进入朋友列表的纯净模式（去掉了服务通知等跟转账无用的列表），提高了用户寻找的效率。
再比如，网易邮箱，当邮件中提到附件，但是没有上传附件时，点击发送后，系统弹出下方的提示，解决了用户常常忘记添加附件的困扰。
突出行动点
根据用户当前目标或下一步目标突出关键按钮，帮助用户快速找到关键操作，吸引用户点击，降低了用户思考成本，提升效率。运用这个方法进行设计的例子太多了，比如淘宝的商品详情页用红色突出购买按钮等。
直接执行
根据用户当前目标或下一步目标直接执行。比如滴滴的扫一扫界面，当检测到光线较暗时，手电筒会自动打开，提高了扫一扫的效率。
情感化
唐纳德·诺曼在《情感化设计》中提到设计的三个层次，分别为：本能的设计，行为的设计，反思的设计。情感化设计是能打动人的，它能传递感情，勾起回忆，给人惊喜，情感化设计是帮助产品与用户之间建立情感的纽带，能强化用户对品牌的认知，培养对品牌的忠诚度。
情感化设计的步骤依次为：提炼影响产品的的情感指标→聚焦用户对产品的情感诉求→产出设计方案→验证设计价值（来源于周姮—知乎蚂蚁金服体验技术部的一次分享）。
在谷歌表格每列的开头依次输入「Pride」五个字母后，表格会变成彩虹样式。
网易云音乐在用户生日时会变成「生日快乐」的蛋糕样式，点击进去的音乐列表，第一首歌是生日歌，让人心里暖暖的。
最后一步就是设计方案的验证，设计方案能否帮助用户缩短操作流程？降低用户思考成本？帮助用户地完成任务？是否能打动用户给他们带来惊喜与温暖？通过可用性测试及上线后的数据反馈，帮助我们更好的优化设计方案。
1. 什么是场景化设计？
场景五要素：4W+1H，即Who人、When时间、Where地点、What事件 、How环境，什么人，在什么时候，在什么地方，做了什么事情，所处的环境如何。
2. 有哪些场景化设计的例子？
3. 为什么要进行场景化设计？
4. 怎么进行场景化设计？
产品：这次需求很简单，对比上期只有字段和操作项的差异，把上次的稿子直接复制一下应该不用很多时间吧？
交互：上次你是不是做过高级筛选组合？我这期需求要用到，你把那部分稿子发给我用用吧。
研发：这个组件我在其他模块里看到过已有样式，这次为什么用不一样的？不然又要重复开发呀，能不能统一一下。
视觉：同一个按钮在不同的模块颜色不一样诶，这次要和哪个模块一致啊？
……
通过以上对话不难看出，最常出现在需求沟通与研发过程中，由于缺少统一的规范和标准化体系，导致实施环节各方沟通成本高，造成设计成果与实现有一定差距，影响用户体验；通用组件和业务组件混用，导致设计模式和代码复用率低。尤其是当业务发展到一定体量时，对于复杂产品的大量重复且类似的需求场景，如果没有一种的工具和规范来协同工作，将大大影响团队的生产及沟通效率。
大家应该都知道乐高（LEGO）积木，它是一种可以互相嵌套组合的塑料积木，形状共有 1300 多种，每种形状都有 12 种不同的颜色，可以拼插出多种造型。其实组件库的工作方式就很像乐高，通过小元件的互相嵌套来产生多种组件或模块，多种组件模块结合生成页面结构。我们先来梳理一个概念，组件库是什么？
组件库是设计系统的一部分，是在我们常规界面设计过程中可以直接用来制作交互图例和搭建页面的组件集合，它可以作为单个组件独立存在，也可以通过多个组件组合而成的结构或模式来解决类似场景的设计问题。组件库是在约束条件下去构建解决方案的过程，所以组件的使用也需遵循一定的规范，按照一套标准化的体系复用于多个业务场景。
一个有效的组件库，可以帮助设计师和研发提高工作效率，提升设计专业度的同时让产品本身的体验更加一致、可学，品牌感更强，它所具备的基本特征一定是通用的、灵活的、复用的。
那么用组件库这种标准化体系来完成设计方案时，到底能带来怎样的价值？
保证产品体验的一致性：对于一个含有多业务系统的大型复杂产品，每个独立的业务系统虽然在功能上有一定区别，但整体的用户体验需要满足基本的一致性。比如，当我使用同一个产品中的业务系统 A 和业务系统 B 时，我能通过类似的页面结构、组件及样式的一致性、操作反馈乃至提示文案结构的一致性，来感知到我使用的A、B业务系统隶属于同一个产品。
提升设计师的效率：在需求量巨大且需求来自不同的业务线时，需要逐一绘制页面及组件，造成大量重复劳动，并且在评审及需求沟通环节还可能存在不断地细节调优。所以对于设计师而言，组件的高频复用能大大提升设计效率，使设计师更多的将精力聚焦于理解和解决用户的实际问题。
提升产研团队的效率：通用场景及普通需求直接按规范进行设计和研发，减少上下游对同一页面及组件使用方式的不同理解而产生的多余沟通成本。
利于沉淀设计规范：组件本身的设计和使用方式就可以直接作为交互和视觉规范的一部分，按照统一的设计规范来确定需要使用的主题色、组件样式、组合方式及页面结构，可以快速搭建出一个或多个产品的交互框架。
那么如何构建一个企业级 UI 组件库？
我将用前段时间参与的「FishDesign企业级UI组件库」项目为例，通过在网易七鱼产品中的应用，来介绍一个企业级 UI 组件库的设计原则，内容构成包含哪些类型和元素，每种组件类型在分类和设计过程中是如何考量的。本文侧重讲述构建一个组件库所涵盖的内容，而不是某组件类别本身的设计方法。
顾名思义，「企业级」意味着 FishDesign 所服务的业务都是具备一定体量的，可能是服务一个包含了多个独立子业务系统的大型复杂产品，比如网易七鱼；也可能是同时服务多款产品，比如网易七鱼和网易定位等。
组件库是帮助设计者及前端工程师快速构建业务系统的工具，除了最重要的组件内容，还需要设计原则、配色方案及布局规范来指导具体业务产品的设计有效落地。
1. 设计原则
基于 FishDesign 目前主要是帮助搭建 B 端企业级产品，而 B 端业务的产品目的决定了它所才采取的设计模式，所以我们将用以下四点作为塑造组件库的设计原则：
2. 颜色
产品会根据自身的产品目标和受众群体去选定产品的配色方案。前文提到，一个有效的组件库需满足通用性、灵活性、复用性，像配色方案就应该能被灵活自定义来应对多样化的诉求。以网易七鱼为例（下文均以网易七鱼为例），设置了 1 种主色，4 种辅助色和 6 种中性色来搭建一致的外观感受。
3. 布局规范
为处理多业务中网页设计区域内的信息收纳问题，我们用规则的网格阵列来指导和规范版面布局以及信息分布，即栅格系统和页面布局。FishDesign 在 12 栅格系统的基础上，将整个设计区域按照 24 等分的原则进行划分，来增加页面的相似度，提升用户体验。
我们通过基本的配色及布局规范解决了产品风格及信息区块框架的设计，那组件库中重要的组件部分，是如何作用于产品搭建的？Brad Frost 提出的「原子化设计理论」可以帮助我们更好的理解，原子化设计的灵感来自于现实世界当中的分子结构，UI 中颗粒度最小的元素，即「原子」，组成了颗粒度较大的元件，即「分子」；而诸多分子又组成了更加复杂的组件与模块，即「有机体」。
组件库构建之初无法一应俱全，是需要后续不断的维护与迭代的。如何在最初海量组件中圈定适合的组件范围呢？最合适的切入点就是从身边的业务场景出发，从最基本、最简单、最小的元素入手。
4. 组件分类
我们根据当下已有的业务场景和对往后一段时期的业务发展方向进行规划，将组件库的组件类型分为通用组件和业务组件。一般业务组件库是不对外的（毕竟使用场景特殊也有限，放出来参考意义不大），所以在 FishDesign 官网只能看到通用组件部分。
一个大型复杂的业务产品通常有不止一位设计师或前端工程师参与设计，需要在多种处理方式中选择合适的设计模式来解决不同的场景问题，这要求根据组件属性的差异，需对通用组件做细分，那么如何确定通用组件中的子分类呢？
由上述步骤，我们将通用组件继续细分为五个子类别：基础组件、导航、数据录入、数据展示、操作反馈。
以网易七鱼为例，看下有组件库参与搭建的设计示例，以下页面中所用组件均出自 FishDesign 组件库。
「导航组件」使用示例：
「表格组件」使用示例：
「弹窗组件」使用示例：
「步骤组件」使用示例：
组件库最大的价值在于提升整个团队的产研效率，使设计质量得以保障的同时，提升产品整体的用户体验。
我们对构建企业级 UI 组件库的步骤及要素做个简单回顾：
任何组件库的构建都离不开一个优秀的团队在整个设计过程中的协同，十分感谢参与的设计师与前端工程师们。上文仅是个人参与过程中的一些经验总结，还不够全面，同时篇幅有限，关于组件的具体设计考量无法一次详尽，欢迎一起讨论组件库及标准化设计体系相关的更多内容。
文章来源：优设
本文作者结合实际案例，跟大家分享一下在RARRA模型下，如何做用户增长？
从AARRR到RARRA的运营思路转变
众所周知，AARRR经典的增长黑客体系，也称之为「海盗法则」，分别是获取、激活、留存、变现以及推荐。提出这个模型的 Dave McClure 认为，所有创新型、成长型的企业都应该按照这样的模型来做增长。
AARRR专注于获客（Acquisition），作为一个2007年提出的概念， AARRR模型可能已经不再适用互联网运营这个瞬息万变的场景。原因有二：
（1）获客成本增加
市场竞争激烈，用户获客成本已经不再便宜，一组数据显示：阿里线上获客的成本翻了 6 倍， 京东的获客成本翻了 1.5 倍，趣头条用户获取成本增加了 8 倍，百度的流量获取成本增长了 41%。在当前的情况下，以拉新获客为中心的增长模式意味着要比十年前这个模型提出时平均增加5倍以上的成本。
（2）流失率高
一组数据显示，现在平均每个App在安装后的情况：前3天内将流失掉77％的DAU。在30天内，它将流失90％的DAU。而到了90天，流失率跃升到95％以上。不管你是否心存怀疑，这就是目前众多创业公司所面对的现实窘境，它创造了Brian Balfour所说的“无意义成长之轮”。
因为以上两个原因，现在黑客增长的真正关键在于用户留存，而不是获客。所以我们需要一个更好的模型——就是RARRA模型。
AARRR与RARRA的区别
RARRA模型是托马斯·佩蒂特Thomas Petit和贾博·帕普Gabor Papp对于海盗指标-AARRR模型的优化，RARRA模型突出了用户留存的重要性。
简单的说，AARRR模型的核心在于获客，而在RARRA的模型下，专注用户的留存。
RARRA模型下，如何做用户增长？（成功案例分享）
分享一个我们前不久自己做的RARRA模型下用户增长的成功案例：
我们做的是一个在线教育平台，课程的分类包括：
- 以拉新为目的的新用户免费体验课（0元）；
- 以转化为目的的低价专题课（50元以内）；
- 以盈利为目的的短期班课（999元以内）和系统课（1000-4000元）。
这样的课程显然是以拉新-留存-转化个流程进行的设计，也是现在很多在线教育平台通用的课程模式设计，其实本质上和其他行业的平台也是类似。
在RARRA的模型下，数据驱动更重要。因为如果专注获客，可以在渠道选择等方面凭借经验和主观判断来选择，但是专注留存，就必须用数据分析找出每个留存环节的差异因素，进而制定最的方案大幅度提升留存率。在在线教育平台的运营中，因为从推广到课程设计、课程质量、售前售后服务等，包含大量影响营收的因素，因此数据分析方法也相对复杂。
数据分析的第一步，也是关键点在于：构建指标体系。
对于一个平台来说，一般的数据指标都非常多，但必须确定唯一关键指标（OMTM），也是大家常说的北极星指标，作为驱动的方向。
回归商业本质，一切商业模式的终极目标当然是收入，但是收入这个指标并非北极星指标，而是决定北极星指标的上级因素。如下图所示，平台收入=有效听课用户数*客单价。因为课程的客单价有大致的市场标准，不会做太多变动。因此经过分析，我们认为直播课程运营的北极星指标是——有效听课用户数，也就是购买了课程并且有效听课的用户数量。
那么接下来，就要对北极星指标进行分解。
从指标拆解来看：
- 有效听课用户中的新用户数=外部流量导入*转化率；
- 有效听课用户中的老用户数=老用户数*续报率。
在最后分解的四个指标中，除了老用户数是直接由新用户转化率决定的之外，流量、转化率、续报率三个指标都是可以通过运营来提升和改善的。
但是由于时间和资源的限制，对于三个指标，运营策略上肯定会有侧重点和先后顺序。
一开始，我们采用的是AARRR模型，把重点放在提升流量和新用户转化率上。通过广告投放、拉新红包等大量引流，并在课程设计上做了很多设计促进新用户转化率。最后流量和转化率都提升了，但问题是，用户停留在0元免费课和低价转化课上，而续报高价课的有效用户很少，这样看似产品新增用户很多，热热闹闹，但整体的营收还是上不去。
团队分析后认为，AARRR模型可能并不适合我们。既然续课率出了问题，应该尝试采用RARRA模型，把运营重点放在留存上。
于是，数据组开始探索留存的问题点出现在哪里。
我们拉出不同维度用户数据进行对比，最后发现新用户和老用户的续课率差值竟高达53%。
也就是说，新用户进行初步低价课转化后，在从低价课到达正价课的留存续课阶段，是流失最严重的一块。
找到了最痛的点，问题其实已经解决了一半。
接下来，通过各种数据因素分析，我们判断出了影响新用户续课率的几个重点因素，分别是：用户来源、课前服务、课程质量。并且对每一个因素继续分解深挖。（标红为续课率效果最好）
- 在课程质量方面，三个细分数据指标综合可以衡量课程质量。
- 课前服务时间上，通过数据对比，我们发现课前两周进行服务的效果最好，续课率也最高。
- 用户来源上，短期班课的用户续课率远高于其他两个来源。
根据以上的数据分析，给出了运营策略指导为：
- 教师和教研团队狠抓课程质量，改变以前主观评价模式。用出勤率、完课率和作业完成率三者综合考核教师KPI；
- 助教团队的课程服务时间前置，从以前的课前一周和课后进行服务，改为课前两周开始进行用户服务；
- 服务人群的重点转移到短期班课新用户上。
改进后的效果：
通过以上三个方向的运营策略调整，同样的团队，仅用了一个月的时间，就把新老用户续课率的差值从53%缩小到了9%！效果非常明显。同时平台整体收入也大幅增加，而运营成本却比以前大规模进行渠道投放大大节省了。
阶段性的成功，正是及时调整了用户增长模型，并采用系统的数据分析方法驱动用户增长。可以看出，数据驱动下，最终给出的运营策略非常简洁，但前面数据组背后付出的努力和精力是很难被看到的。这正是我们想要的结果，扎根稳且深入，但呈现的却是简洁明了的运营指令。
在网页和移动端界面中，内容和信息是否能够经过系统性、有效的整理和组织，对于内容的可用性和实用性，都是意义巨大的。而在呈现信息的时候，视觉间隔是组织信息的关键因素。它说起来并不难理解，但是在实际的运用当中，却是千变万化，今天我们来梳理一下流行的视觉间隔的方法。
视觉间隔是一种布局元素，它有助于将内容分隔成为清晰的分组、选项和部分。它可以让设计师更好地组织内容的视觉体验，处理信息的层级，也有助于用户理解内容，明白内容之间的关系。
视觉间隔和页面上的其他内容在一起，构成视觉层级，这是它最重要的作用。在视觉间隔的帮助之下，用户可以轻松地感知内容之间的关系，明白各个信息片段之间的关系是相似，并列，承袭，从属，还是其他。
视觉间隔的可用性也同样重要：在很多时候，有的视觉间隔元素看起来是可点击，可交互的，这在移动端界面上，是非常重要的。
谈到视觉间隔，我们可以从两方面来进行拆解分析：视觉间隔的外观和功能。按照视觉特征，视觉间隔有5种基本的类型：
下面我们分别针对这5种类型进行说明。
很长时间以来，在排版印刷领域，线条就一直是一种用来分隔内容的方法。线条的分隔功能是认可度最高的一种间隔方式，用户几乎不用思考，就能够理解和感知它，并且发挥作用。
另一方面，这种间隔方式也很容易显得过于简单，并且和应有的形态相去甚远。这也是为什么设计师在想尽办法去寻求别的视觉间隔形态。太多的线条间隔会让屏幕上的视觉干扰太多，并且带来不必要的视觉噪音。
所以，能够将线条间隔用得微妙、恰到好处、出神入化，是设计师功力的一个重要体现。
在这个网站产品页面中，使用深色的线条间隔来分割产品信息，用来组织和间隔信息内容。
在这个页面当中，线条分隔了不同的内容区块，让页面的结构更易于被扫读。
这个电商网站将不同级别的视觉内容进行了分离，借助简单的水平线将价格、CTA按钮以及承载相关信息的表单分隔到不同的区域。
负空间，也就是留白，也是最为常见的一种视觉分隔元素。留白绝不是对空间的浪费，和屏幕上其他的元素一样，它同样发挥着重要的作用，拱卫支撑着整个用户体验。负空间是最为流行的视觉分隔之一，尤其是在极简主义风格为主导的设计当中。负空间本身遵循着格式塔原理，尤其是其中「接近原理」和「相似原理」是负空间在设计中，发挥分隔作用的核心所在。合理地运用负空间，还能强化页面的呼吸感。
上面这款旅行规划 APP当中，使用留白将不同的条目分开，没有使用额外的具体视觉元素，仅仅只靠留白。
Health Blog 的列表的排版层次是基于负空间来实现的，看起来清晰又充满呼吸感。
高对比度的色彩，同样能够带来清晰的视觉间隔效果。在 UI 界面中高对比度的色彩有着极为明显视觉表现潜质，它们能够增强网站的信息和内容的表现力，分割区块，营造氛围。对比度是影响页面和屏幕可读性的关键因素之一。在具体的应用当中，不同的色彩会有效地分离不同的选项、条目和区域，这意味着它作为视觉分隔的作用非常强。这也是近年来分屏式设计如此流行的原因所在。
这是一套移动端菜单的概念设计，强烈的色彩对比让信息清晰可见。
即使是在这样的柔和的设计当中，色彩的对比度也发挥了相当的作用：一方面，强烈的色彩对比让CTA按钮和输入框之间有了明显的区分，另一方面，右侧的主视觉元素的背景也同样借由不同色彩的对比，做到了突出的效果。
在 GNO Blankets 这个网站当中，强烈的明暗对比将网站元素分隔成为精美而清晰的区块。
阴影和体积也是一种非常常见的视觉间隔方式，通过营造在「高度」或者说高程上的视觉差异，从而达到分层的效果，而这种设计也是符合人类一直以来的认知习惯。这种方法有利于保持整个设计的平衡和易读性，另一方面，它又能保持足够的微妙和自然，不会那么引人瞩目从而让人觉得出戏或者受到干扰。
这个APP的目录页面所有元素都采用了白色的背景，而阴影让布局呈现出了纵深层次，让内容足以展现又不显突兀。
这款提供定制化花束服务的APP也采用了类似的阴影元素，让整体看起来清晰又通透。
图片在 UI 界面当中，同样也是一种非常有效的视觉间隔，尤其是在包含大量文本内容的界面中。无论是博客、在线媒体网站还是其他类型的网站当中，图片的间隔作用都非常明显。无论是照片、插画、3D图形，它们作为图片都可以很好的平衡文本内容，提高内容的识别度和可读性，有效地划分层级，并且提高情感吸引力。
这个比特币网站的着陆页就使用了带有3D效果「了解更多」动态图片，图片和文本在内容和功能上都清晰地分隔开来。
在这个餐厅 APP 当中，图片作为划分内容的关键元素而存在。
如果从功能的角度上来划分视觉间隔，可以根据它所处的层次来进行划分。
使用线条作为全出血间隔是最为常见的，它会很跨整个屏幕布局来作为信息层级的划分。
这个画廊图库 APP 的艺术家目录当中，使用线条作为全出血间隔，来区分艺术家。
这个名为完美食谱的APP也使用了全出血间隔线来区分内容。
在这个财务APP当中，也使用了全出血间隔线来区分条目。
在这个电影APP的结帐页面当中，也使用了线条来作为全出血间隔。
嵌入式间隔的功能是将相关性较高的内容分割开，并且它通常会和标题或者其他的特定元素保持对齐或者对应，它们通常是进行某个大区块内不同组件的分隔，或者将多个同类的元素分隔开。
这个网站当中，使用横向的短分隔线来区分表单中的参数条目。
这种分割线通常会置于布局的中间某处，同样是分隔相关的内容，但是通常它们在属性上不一定是一致的，但是层级近似。
在这个出售草药的电商网站的右侧，使用中间分隔线将文本和可交互的区域清晰地分隔开。
上面对于不同类型的视觉分隔方式都有描述，在此之外，还有两个问题需要注意：
文章来源：站酷
我们通过门铃声儿得知门外有人来访，也能通过电话铃声得知正被人呼叫。短信通知也有着类似的作用，包括各类产品的消息推送。
但不同的是，消息推送的重要性随着「通知」被滥用而变得不那么重要了。它们变得不像门铃或电话铃声起到的作用性那么大，包括短信现在也大多是垃圾信息。
而且，通知越来越多地通过各种方式去触达用户。比如消息未读的红点提示，或者显示消息的数字统计，以及手机使用过程中的顶部提示与声音或震动的提醒，等等。
但我们还是无法抑制点击图标的冲动，这仅仅是因为它具有未读的计数或红点提示，即使我们已经知道当中的内容并不重要。
而我要说的是，当通知内容变得次要且被滥用之后，它仿佛成了一种违背设计原则的功能 —— 中断用户当前行为。因为它打破了用户与产品之间的层级关系，破局至产品之外来吸引用户的注意力，这是一个非常打扰的行为。如果我在看书，突然收到一条并不重要的消息，那我一定会非常反感。
所以，为了不被「红点」支配，以及不让通知所打扰，我会把手机里所有产品的消息推送都给关了。
但是，以上内容并不能说明通知的无用论。同样有许多用户还是沉迷于通知的使用上，它所控制的是用户对于某个产品的控制欲，担心错过某条消息，就好像我在豆瓣写了篇随笔，就想看别人给我点赞评论的消息，但我又不可能一直盯着，所以通知这时候就起到了一个很好的作用。
以至于对于优秀的产品人或设计师，包括运营来说，利用好通知，就能掌握用户心理，巧妙的将用户留在产品中。它们甚至有助于与打算放弃产品的用户建立联系并促进互动。
那么，我们应该如何更合理的设计通知呢？下面我们通过「通知的组成部分」以及「通知的使用类型与规则」来详细做一次拆解。
关于通知的简单定义：它是一种吸引用户注意的功能模式，让用户获悉新事件的信息动态。产品将其发送给用户并与用户产生交流。
因此从这个定义中我们可以知道，通知有两种形式，分别是被动只读型和操作反馈型。
被动只读型，是指该信息可读，但不可进行操作；操作反馈型，是指用户可对该通知进行操作，如某宝订单支付成功后的地址信息确认通知。
所以在梳理组件的时候也要注意掉这个差异。
1. 消息中心
这里的消息中心，是一个信息汇总中心，但并不一定是信息来源。意思是，信息来源可能是有很多用户在你的文章下面点赞了，而这个点赞行为被汇总到了消息中心，再用消息中心指引作者去到文章页面查看具体详情。
所以它是一个汇总表。但也有可能它就是信息来源点，比如一些系统通知，告知要升级，因为它没有其他功能可承载，所以只会在消息中心里出现。
或者类比 iOS 系统的通知中心，如果通知是 App 推送的，那么它会指引用户进入某个 App；如果通知是系统行为，如勿扰模式，「6:00 前来电和通知将会静音」这个通知，是只可在通知中心进行操作的。想要更改，就需要手动打开设置。
2. 通知指示符
它可以是点，也可以是计数器，只要表明目前消息中心有新的信息就可以。我个人一直觉得这就是让我们多数人养成强迫症的罪魁祸首。
3. 信息标题
它主要是指该信息来自于谁或属于什么子类型，比如用户互动点赞消息，评论消息，系统消息等等。用户可以通过标题来获悉该信息类型，再通过内容摘要来判断内容是否重要。
当然，这里的摘要如果过长，就需要省略处理，引导用户进入消息源或消息中心。
4. 推送时间
推送时间是一个看起来简单，实际上也好像不是很复杂的逻辑。只要说明该通知的发送时间即可，但是需要注意的是时间段问题。比如几分钟前，几小时前，几天前，这里的逻辑是按照时间推进规则持续增加来告知用户该消息的推送时间节点的。也就是过得越久，时间概念就越大。
5. 通知图标
上面讲到消息类型，我们也经常会在各类产品中发现不同通知的类型会汇总在各自的类型下。包括用户所接收到的信息，通常也会告知用户该信息属于什么类型。有时候，标题可能会更细，但是用户通过图标可以判断该信息属于什么类型，甚至都不需要仔细查看标题与内容。
但是，并不是所有产品的信息都可以通过图标来判断，有时候图标只是一个大方向，如果手机锁屏，相对于用户来说，这条通知只是告诉用户该信息是由什么产品推送，而并不能指向至该产品的什么类型的信息。所以在使用的过程中，同样需要根据业务的场景，谨慎地选择图标。
6. 阅读指示器
它就像是上面提到的红点，这里指的是进入 App 的消息中心之后，所显示的内容。
7. 操作行为
这里的操作行为分两种，分别是 App 外与 App 内，它们之间的操作逻辑是不同的。iOS 系统通知的清除操作，只是在系统的通知中心将该信息清除，进入具体 App 后，这条消息还是会存在。而在 App 内删除该条信息，则该信息才会真正消失。
所以从上面可以看到，通知推送，是有两大类别的，分别是 App 外与 App 内，它们之间的逻辑关系与展示形式会有所差异，需要根据具体情况进行设计分析。
8. 小结
对上面的内容进行总结，可以得到这样一幅画像：
大部分系统或产品的通知组成，都可以通过此图概括，唯一不同的是，它们会随着不同的业务而发生变化。
比如豆瓣的推送消息告知用户近期有新的电影上映，那么通知来源要么是电影模块的功能详情页，要么是通知中心的系统消息；而通知类型就是内容更新；详情则根据具体内容来组合排列；最后送达至用户。
而其中的差别就是，如果是通知中心推送的，用户点击之后则是进入通知中心列表。如果是具体功能推送的，那么用户点击进入的就是具体功能页面。如下图所示：
从这里可以看出，通知是有具体模式的。
一旦确定了通知的主要目标，以及想要解决的问题，包括它们如何对业务产生作用以及对用户形成吸引力，就可以确定通知的具体样式了。
在这一节里只要知道通知的组成部分与通知模式如何指引用户进入 App 即可。后面我来带大家理一遍逻辑，以及在设计通知时要注意哪些问题。
聊完上面的内容之后，我相信大家对通知的组成与使用模式已经有了全新的认识，但也仅此而已，我们还是不知道一个优秀的通知功能应该从哪些方面去提升用户体验。这里面所包含的不止是表象，还有内在的规则逻辑。所以从这一节开始，我们仔细来梳理一遍。
从我们平时使用到的，以及上文提到的，可以大概先梳理出几类常见的通知类型。
这种类型的通知有很多，比如微信消息发送，知乎私信，手机短信等等，它们主要由用户主动生成发送至其他用户被动接收，作用就是促进用户与用户之间的互动关系，以提升用户使用产品的频率与时长。
这种通知，可给予用户操作也可不给予操作，不操作就是读取，并回复；操作就是可对该用户的信息进行屏蔽、已读、删除等设置。
这是最常见的通知类型，在多数社交产品与有社交特性的产品里都能看到。
说明
之所以给予用户信息的操作行为，是因为用户信息可分为感兴趣的与不感兴趣的，它主要取决于人。不感兴趣的人，频繁的发送信息，会影响用户对产品的好感度，毕竟有很多用户消息并不是用户想要接收的，所以在社交产品里，用户可删除好友，或拉黑好友；在有社交属性的产品里，用户可拉黑账户，以达到不被骚扰的诉求。
如果没有到达删除好友的程度，也可对该好友的信息进行屏蔽，甚至对该好友信息做已读而实际上未读的处理；或者对重要信息做未读而实际上已读的处理。
当然，用户还能对群消息做更复杂的设置。这就是产品对这类通知的一种优化方式。
我们经常会在手机上收到一种系统类通知，或者在 App 中也会收到类似的系统通知。大多是关于系统升级，密码更新等。
这类通知多数是用户被动接收，且对于系统与用户来说是较为重要的。当然也有不重要的，比如 App 更新说明的通知，告知用户新功能有什么变化，或系统更新了什么等等。
对于这类通知，用户大多无法进行设置，因为它们比较强制，没有可以商量的余地，类似于告知用户：我们有新的消息，比较重要，你来看看，即使你不打算更新或执行也来看下。
说明
系统类通知，通常来说较为被动，要么强制用户执行操作，要么就是提醒用户系统近期做了更新，或者是一些并不重要的信息提示，比如勿扰模式。
强制类系统通知不能频繁，否则会给用户造成控制欲反制的副作用。类似于本身用户使用产品需要对产品享有控制权，现在反而被产品控制了。这是不行的。
这类通知就是第一节中提到的那些，比如点赞/评论，内容更新等等，这类通知如果是忠实用户，那么或许不会反感它的频率，当然还是需要适当。但如果是普通用户，那么造成的影响就是直接关闭该 App 的所有通知。
我们现在的很多人，之所以开始反感通知的主要原因，就是这类通知所造成的。内容不断更新，随着时间的推移，每天推送多条对于该用户来说无用的通知。包括只适合一些符合条件的用户参与的活动通知也推送给所有人，那么用户就会逐渐对这类产品的通知失去兴趣，造成无法弥补的损失。
即便像某团一样，经常弹出开启通知的弹框，也依然无法召唤回用户。这就是很典型的下场。
说明
通用型通知，如果是业务很复杂的产品，就必须建立通知推送的功能模块，给予用户进行选择接受哪类信息的权力。允许用户进行相应的设置，如活动类推送可拒绝接收。
在很多产品中都已经置入这样的推送模块设置，如下图。
这类内容就是针对于产品的具体业务进行细分。
比如兴趣精选，私信消息等做好类别划分。用户可对自己感兴趣的通知做选择性的推送接收。
另外就是，在相同账户的不同设备之间，推送应该同步推送与被处理。不能这边推送了，那边没推送，或者这边处理了，那边没被处理。
不知道大家是否有印象，在使用如大众点评等产品时，只要你切换了城市，产品就会推送通知告知用户该城市有哪些值得游玩的景点与品尝的美食。
虽然这类通知还算不上多少智能，但至少在用户群体中是存在这类诉求的。而这类诉求有时候并不能主动感知，因为用户可能会想不起来通过哪类产品来查找附近美食。当这么一条通知出现的时候，正好解决了用户的问题，反而提升了用户对于产品的好感度。
现在很多产品的通知都逐渐智能化，不会像以前那样，三更半夜发来一条无关紧要的通知。而出现这类问题的主要原因还是在于产品、设计、运营，在这方面没有下过功夫，只将通知作为一种普通的工具来使用。导致用户开始排斥通知，将其强制关闭。之后，就很难再让用户开启了。同理心效应，当做这类功能的时候，可以回想一下自己是如何被其他产品打扰的。
随着大数据的发展，我相信未来的通知系统会更加全面，且能做到千人千面的模式，不过在此之前，各位产品设计师，还需要对通知下一番功夫才是。
我们还可以继续举例说明，但是基本大同小异，所以到这里为止，我再对上面的内容做一次总结，梳理出一个好的通知应该是如何设计的。
干扰最小化：通知本身具有强制性和干扰性。它的目的是把用户的注意力吸引到产品上来，所以要认真思考发送通知的内容、时间、频率；不要提醒用户当前屏幕上已经处于展示状态的内容；也不要推送与用户无关的系统信息。
跨设备：当用户读过了某条信息，这条信息应该不再做展示。同理，用户也应该能够在其它更适合接收消息的设备上找到已读信息。用户通知应该在所有设备上进行同步。
允许设置：允许用户在「设置」中禁止或调整通知的形式。如案例一，通过选择推送内容，来影响接收推送的频率。案例二，可选消息提醒的形式是红点+数字，或仅是红点。
时效性：良好的通知应尽可能实时推送。而不是等这件事情都过去很久了，才推送给用户知道。
支持汇总：把同类型的通知合并为一条，并显示信息未读数量。也可以考虑一键展开通知，显示信息详情。
可操作性：把通知和操作结合在一起，让用户不需要打开首页就能对特定通知进行常规操作。操作应该清晰明了，且仅在未重复默认操作时提供。同时操作应该是有意义、实时、和内容对应的，并且能让用户完成某个任务。如案例一，可以在不打开邮件的情况下，直接对通知进行管理、查看和清除。案例二中的操作针对的是未读邮件，可便捷地在通知板面进行回复、删除、标为已读或垃圾邮件。
对本篇文章的拓展总结：
文章来源：站酷
蓝蓝设计的小编 http://www.lanlanwork.com
