用薄荷健康的案例告诉你，设计是怎么解决问题的！

@小乖乖老爸 ：为一名设计师，在常的设计工之余，也许问自己（或被问到）一个形而上的问题：设计是什么？设计的目的是什么？设计的质是什么？设计的用是什么？

每人的回答都不尽相同，《网站设的与科学》一书的作者 Jeffrey Veen ，他的回答很表性：

△ 好的设解决问题

设领域之外的人总认设师的作就修饰，这让我感到惊讶。好的设解决问题。

「设 = 解决问题」这法似乎点空洞，不太易理解，不知道怎么运用自己的作中。

而且不光计认为在解决问题，产品经理也说是在帮用户解决问题啊。这就有点儿懵了。

没系，接来我们通过一个案例，看看设计是怎么解决问题的。

文章目录

• 案例的背景介绍
• 息如何展示
• 如何帮助小白户快速决策
• 如何让阶用户看懂
• 何向高阶用户释复问题
• 吐槽

案例的背景介绍

我们来看个案例：物详情页设计。

先代下项目的背：关注食物热量和营信息的用户，主要是减肥和健身人群。

△ 不同人群关注的饮食

减肥用户总会问：这食减肥时能不能吃？吃了会不会胖？他们比较关食的、脂肪、碳水化合。

身用户也有类似的问题，比较关心食物的蛋质。

还有，孕妇会注叶酸和钙，糖尿病患者会注 GI 和 GL，妈妈会心童生长需的钙和锌，血压患者会心钠、钾、镁……

薄荷健康App 在设计物详情页过程，踩过许多坑，以下是几个有代表性历史版本。

△ 历史版本

左边一个是2014年的，时流行拟物风，设计师花很大精力在怎么现质感上。一步步的扁平化，渡到最右边的，2018年的大标题的简约风。

不觉得以的版本土，人都猴子变的。一直觉得以的好，明了。欢迎家对的版本提出意见建议，帮我们得好。

信息如何展示

食的基本信息不少：称、、三营养素（蛋白质、脂肪、碳水化合），以及近20项营养素（膳食纤维、维素、胆固醇、钙……）

这多息要如何展示呢？对比下国内外竞品的做法。

△ 国内外竞品

薄荷的做法是：名称等基本信息放在顶，热量信息放在明显位置，次要的大营养素放次要位置，更多的营养素就折叠在次级页面。

△ 薄荷的食物详情布

薄荷物详情页，似乎比竞品多了些东西，这是为什么，下会分析。

如何帮助小白用户快速决策

第个问题来了：这些我都认识，可这些数意味着什么呢？比如我是个减肥小白用户，我想知这个东西能不能吃，能不能简单明了地告诉我？

为此，薄荷推出食物评价系。

方案A：分为10档

△ 分成10档评价体系

你得评级A 和评级D+ 哪个更？

应该 A 吧（犹豫中）？再看看10档的颜色变化，确了，应该 A 比较好。

A 并不必然比 B 好。就像钢琴十比一厉害，跆拳道则是一（红黑带）比十（带）厉害。

虽然看懂，但是够直观，够符合直觉。

方案B：红绿灯

我们借了交通红绿灯，这是大已经熟知的概念。看到红灯食物就别吃了，灯食物就吃点，绿灯食物就放心吃。

△ 红绿灯

小白用户不需要正确大量文案，他需要你态度，你结论，越简单粗暴越好，这才能迅速地帮助他决定吃是不吃。

如何让中阶用户看得懂

阶用户并不满足于简单粗暴结论，他想知更多，想自己来判断。

比一个苹果的热量是53千卡/100克，意味着什么？53是高热量还是低热量？没概念。

理解数字的含义，就得相对比较。

方案A：参照

不同类的食不能简单的对比，我们就多找了几参照。主食类的参照一碗米饭，水果类的参照一苹果，饼类的参照一块奥利奥……

△ 参照

这个方案效果不佳，用户对参照物本身都没有什概念，还怎用参照物来衡量？

方案B：参照系

比如苹果的热量，比55%的水果都要低，那苹果的热量是相对一，不算高也不算低的。榴莲的热量，只比8%的水果低，那榴莲的热量就相对较高了。

△ 参照系

相第一个方案，这就更容易被解了。

需要注意是，参照系会占用较大积，可以用，不能滥用。如热量有参照系，三大养素（蛋白质、脂肪、碳化合物）不落后，也都来个参照系，那个页没法看了。

怎么办呢？有办法。

方案C：标签

根据数值，给出「低脂肪」、「高白」等标签，也能帮助用户理，又比参照系更轻量。

△ 参照系与标签

所以薄荷App 方案BC都用到，且还「食亮点」，列出该食入了 xx 榜单，拓展阅读。

如何向高阶用户解释复杂问题

三营养素的数据，早纯数字展示，后了直观的展示，运用了可视化的表达。三营养素各一圆环，三圆环加起100%。

△ 番茄的三营养素

细心的用户会去算，然后反馈说，这三个环的比例是错的。比如，100克番茄，蛋质0.9克，脂肪0.2克、碳水化物3.3克。算起来，脂肪的比例 = 0.2 /（0.9 + 0.2 + 3.3）= 4.5%，但圆环上显示的是10%，显是错了嘛。

我们想表达的是：这是重量例，是供例，是这样算的：

大营养素都会产生热量：蛋白质的热量 = 0.9克 * 4 = 3.6千卡，脂肪的热量 = 0.2克 * 9 = 1.8千卡，碳水合物的热量 = 3.3克 * 4 = 13.2千卡。

热量 = 3.6 + 1.8 + 13.2 = 19千卡。

是，脂肪的供能比例 = 1.8千卡 / 19千卡 = 10%

请用尽能少的篇幅，尽能浅显的方式，向用户释。怎么说得清呢？

△ 数学易，设计难

△ 三个释的方案

方案A：示意图

见上图左，我们试图告诉用户，三大营素各自提供热量，加来就是食物的总热量。

用户反馈：这组织架构图似的玩意什么？完全理解不了我们表达的点。

方案B：公式

见图中，我们试图告诉用户，三营养素通过这公式，算出的。

注：0.9 x 4 + 0.2 x 9 + 3.3 x 4 ≈ 15千卡

用户反馈：这公式怎么冒出的，我解释解释？

方案C：一句话

见图右。与运营同事一起反复斟酌文案之后，终于算解释清楚了。

注：以三营养素的供能比例，不重比例。其中，脂肪的供能效率比较高，碳水化合蛋白质的2.25倍。

这故事告诉我们：「学好数理化，走遍天下都不怕」这句话不对的。论学好语文的重性。

吐槽

如果借吐槽别人得多烂，显得自己得多好，这不太厚道。我们就吐槽薄荷自己家的小程序：「薄荷食库」，看看哪些坑，我们可以引以戒。

△ 薄荷食库小程序

1. 标签

这里把标签了很明显的置。其实这信息并特别的重，且对于小白用户，绿灯那么简单直接。

2. 颜色

健康类的 App 里，色慎用的。因些方需用色表示警告，些方又这意思，用户就猜不透这色到底倾向性了。保持一致性，设的基本求。

3. 运动参照

用运动作参照不错的点子，但三点好。

不能所有食物都用运动参照物，比如吃一个包要羽毛球50钟，那是不吃？

为了避免误导户节食，可在红灯食物上显示参照物，而绿灯食物、灯食物就要显示了。

运动参照物不能有个，比如现在是晚上，我上哪儿去打羽毛球？最好有几个可选项，最好不要有场地限制。更不能是随出现，会儿让我遛狗60分钟，会儿让我工作40分钟，让摸不着头脑。

△ 运动参照物

上图左是薄荷食物库小程序，上图右是薄荷健App。

设师总倾向于让用户知道：新功能咯，这里，用用吧。

新版本突出了标签，增加了运动参照物，以及返回首页的按钮。你可以，这三个就别的显。

要克制住这种冲，增的元素，要破坏整体效果，要喧宾夺。

结语

△ 在混乱中创造常

计可以在混乱中创造常，可以通过组织和操纵文字和图片来清晰地表达息。──Jeffrey Veen

在人机交互中，要传递的息，用户并不能完全吸收。大部都像水过鸭背，在传递的过程中损耗掉了。计的工作，就是要解决息损耗的问题，把息清晰地传达给用户。