感谢【海盐社】的小伙伴：@海边来的设计师 @风筝KK，感谢你们对本文的帮助。

现在很多产品中都会经常出现数据页面，比如运动时间、学习时长和能力分析等，展现方式也多种多样。

比起干巴巴的数字，柱状图、曲线等图形会更受欢迎，用户也更容易理解。但有时候我们精心设计的数据图还是会被抱怨说不易懂、太复杂，没有起到预想中的效果。

比如我们公司的留学产品就收到过这样的反馈：

用户留言：院校分数的页面太难懂了，研究了好半天。

设计师：“我已经做成数据图了啊，图比数字形象多了，分数是多少很容易看明白的。”

用户觉得难懂，但设计师又觉得这种形式已经很容易理解了，接下来还能怎么进行优化调整呢？那就再把图撸一遍吧，于是调整颜色和字体大小、间距、排版，一波操作下来算正式完成了优化。上线后效果不明显，看懂不直观的问题还是存在，如下图。

其实要解决这个问题除了视觉上的优化，我们还应该开拓一下思路，从更多方面来思考。用户觉得一个数据页面不好理解，可能并不只是视觉上的问题，还有可能是我们没给到用户想要的结果，看完没有得出结果所以才会觉得难懂。

那难道数据不是结果吗？数据有时候真的不是结果，它更多的是一个事实。关于这点我们可以用云—雨—伞的理论来思考和指导设计，下面就结合实例来看看我是怎么具体运用的吧。

目录

一.什么是云雨伞

二.产品の云雨伞问诊

三.如何治疗

四.前后效果大比拼

一.什么是云雨伞

云—雨—伞理论说的是“天上出现乌云，眼看就要下雨，带上伞比较好。”这是对事实、分析和行动三者的比喻。

云：代表事实，就像乌云和太阳是用眼睛可以看到的事实。

雨：代表分析，从看到的事实现象进行分析，看到乌云后分析出来可能是要下雨了。

伞：代表行动，因为分析出要下雨，所以带上了伞。

举个例子，就像减肥的女生，上秤看到自己体重增加了，然后回想罪恶的来源应该是晚餐吃红烧肉了，决定明天晚上一定不吃肉！算了饭也别吃了。

这个例子里面看到体重增加就是事实，发现热量来源于晚餐的红烧肉是对事实的分析，明天不吃晚餐是采取的行动。事实—分析—行动，这就是“云—雨—伞”理论。

二.产品の云雨伞问诊

知道了什么是云—雨—伞理论，具体应该怎么使用呢，怎么用它指导设计呢？和医生看病一样，不如先来给产品做一个问诊吧。

根据云—雨—伞理论，提案中要包含三点：

1.事实、现状（云）

2.解释分析（雨）

3.推荐的行动方案（伞）

做到这三点，才能算是一个合格的提案。那么就可以根据这个，比对自己的产品有没有做到这三点，比如我们公司的留学产品。

留学产品的一个功能是用户填写自己的各个考试分数，填完成绩后，在每个学校的主页可以看到自己的分数，和当前学校的最低录取分、平均录取分数的对比。了解学校的录取情况，对比判断自己被录取的几率大不大。

这个功能一推出就很受欢迎，用户很愿意使用，但是逐渐也发现了问题，有不少用户反映数据页不是非常清楚，有点难理解，在决定优化这个页面后，我先用云雨伞的思维方式对产品进行了问题分析。

1.对应的功能

把云雨伞对应到留学的产品中，设想完整的体验需要为用户提供哪些服务，我做成了云雨伞诊断表格，检查产品是否有对应的功能。

事实是用户分数和院校录取分数，分析则需要判断是否符合要求，行动是需要给用户推荐应不应该申请这所学校。

从表格中可以看出来，留学产品做了“云”，也就是事实——把学校的分数信息告诉了用户，列出了各项分数。但缺失了“雨”和“伞”，没有做近一步的分析给出判断，也没有推荐的操作。用户在看完数据图后还需要自己去分析每项考试分数是不是占优势，申请能不能被录取。

2.存在的问题

记录检查到的问题：

1.分数对比没有做到清晰易懂，是高于还是低于视觉表达的不是很明确。

2.没有明确的分析结果，用户不知道是否符合，是不是具有优势。

3.没有推荐的行动，不知道应不应该申请该所学校。

三.如何治疗

诊断完毕根据上面诊断的三个问题，就可以开始治疗啦，结合实例来看一下吧。

1.优化视觉

为了让数据的表现形式更加直观易懂，把原来数据页的圆环改成更加清晰方便对比的柱状图。

旧版：圆环的分数高低主要是用颜色来区分，紫色代表自己的分数，黄色和红色分别代表最低和平均分，如果紫色在最末端就是自己的分数高于最低分和平均分，如果红色在最末端就是平均分高于自己的分数。这种形式不是很直观，而且圆环上数据排列顺序不固定，用户每次看都是不同的顺序，不利于记忆。

新版：横向柱状图，“我的、平均、最低”三项顺序固定，视觉不用一直跳动，用长短表现分数高度，纵向对比非常明显，一眼就能看出来那个分数高哪个分数低。

2.增加分析结果

新版加了“符合”字样的印章LOGO，这是为了展示分析结果，用户即使不看分数，只要看到自己获得了符合的印章，就能知道本项成绩已经符合学校的要求。同时加了星级评分，用数字来量化更加明确用户是否符合学校要求，具不具有优势。

在“我的”成绩高于平均分的时候就是符合条件的，可以获得符合的印章；相反如果低于最低分，就是不符合学校要求也就没有印章。如果这所学校没有公布最低分，那低于平均分也属于不符合。现实生活中当一项考试通过，或是领取什么证件的时候，都会有盖章这个行为，所以印章的样式很好理解。

符合的时候，就会点亮这项成绩的星星，这样用户即使没有滑动列表的时候，也能看到录取的数字星级评分，知道自己有几项成绩是通过的。数字量化的评分可以让用户更直观的知道自己的成绩是不是符合学校要求，是否有优势。

3.给出用户行动指南

根据用户的成绩结合产品的数据库测算分析，给出用户行动指南，告诉用户接下来改怎么做，应不应该申请本学校。

这一步是给用户提供推荐的行动，因为在有了分析报告知道了学校的成绩要求和自己的分数情况，即使是完全符合的情况下，很多时候用户也还是不能马上行动，决定到底是不是要申请这所学校。就像去医院看病，检查报告上各种数据都很清楚但是我们没有这方面的专业知识，拿到了报告也看不懂，还是需要医生和我们解释，告诉我们具体的情况和该注意什么。

用户也会需要更多的关键数据和一些专业的留学咨询，才能做出更准确的决定，进行以下的行动。这也是产品的核心竞争力，可以给出非常明确的行动指导，告诉用户应不应该申请，所以这是产品的付费功能。

四.前后效果大比拼

经过云-雨-伞的诊断，发现用户觉得数据页面难懂不单纯是视觉的问题，还缺少了分析和行动的部分，导致用户看完没有得出结论。在这次的优化补齐了这部分的功能，现在一起来看看治疗后新版与旧版的对比吧。

旧版：数据视觉表现有点不直观，产品只有云，没有雨和伞。只给出了事实现状，没有分析和行动，用户看到数据后需要自己判断是否符合要求，看完之后不知道该怎么行动，能不能申请这所学校。

新版：优化了视觉，让分数的对比更加清晰易懂。加入了数字量化的分析结果，让用户可以比较直观的直到自己是不是符合学校的要求。最后关键的一步是有了行动的指导，可以帮助用户做出合理的选择，是不是要申请学校。补全了云-雨-伞，具备事实、分析和行动三要素，给用户完整的体验。

总结

今天结合留学产品的实例，讲了怎样运用云—雨—伞理论来指导设计，最后总结一下主要内容：

1.云—雨—伞理论说的是“天上出现乌云，眼看就要下雨，带上伞比较好。”是对事实、分析和行动三者的比喻。

2.遇到问题除了从视觉层面考虑优化，也可以对产品进行云雨伞问诊，检查产品是否对应了事实、分析和行动，来给用户提供更完整的体验。

3.留学产品的优化根据云—雨—伞理论，通过①优化视觉效果（云）；②数字量化优势增加分析结果（雨）；③给出用户是否申请的行动指南（伞）来提升用户体验。

参考引文：

《靠谱》[日]大石哲之 北京中科印刷有限公司 2018年3月第3次印刷