贝壳实战案例！如何做好投影情境设计？

我们在贝壳新装修业务的设计中，针对“投影”这一特殊情境进行了一系列场景化体验设计的实践。当初次面对这一特殊场景的设计时，真的是瞬间头皮发麻，不知道从何下手。因为投影场景比较特殊，业界内也少有参考，需要我们从 0 到 1，探索出一套严谨、合理的设计规范。

那么，设计师怎么才能做好这类创新场景的体验设计呢？这需要我们深入线下考察真实的情境，洞察使用者的情况（人）、周围的环境（地）、使用者办事的流程、以及行为的动线（事）等。只有透析线下场景，接地气的解决使用者痛点，才能打造出真正满足需求的体验。

图 1 场景化体验三要素

为什么要做投影场景设计？

说到“无线投影场景”，大家应该都不陌生。没错，就是会议室里播放“劈劈踢”的无线投屏场景。

首先来明确一下设计要面临的挑战点：

• 使用场景是什么样的？
• 使用者是谁？
• 现存问题是什么？

1. 使用场景是怎样的？

在贝壳新装修的业务中，有一个核心使用场景：装修管家要定期向管理者汇报装修工地的进展和问题。他们需要在会议室里，把 PC 中台系统的数据管理界面，通过无线投影呈现在幕布上，装修管家边看边向管理者汇报。

图 2 投影设计核心使用场景

2. 使用者是谁？

业务管理者与装修管家就是这一场景的使用者。

装修管家在整个装修流程中负责对工长、设计师、主材厂家等团队人员的协调工作，确保项目进度的正常进行，以及定期巡查工地现场，上报工程进度及现场问题。

业务管理者主要负责管理管家、制定施工管理流程，对于装修过程中出现的各类问题提供解决方案。

管家需要通过幕布上的内容呈现，突出重点，提高效率，准确且又快速的完成汇报。管理者需要通过观看投影幕布，再结合管家口述的汇报内容，快速的抓住重点，并能直观的总览整体情况。

图 3 管家/管理者诉求

3. 现存问题是什么？

图 4 改版前投影展示效果

上面这张配图，就是在会议过程中记录下来的投屏效果。大家可以明显的看出很多问题，比如：

字号偏小：在投影场景下，由于用户的观看距离和屏幕尺寸都被大幅放大，导致文字视觉效果偏小，PC 中台系统常用的 14 号字不再适用。

颜色看不清：由于无线投影仪会损失一部分清晰度，所以对颜色的识别度较低。灰度文字看不清，导致文字层级区分失效；背景色看不清，导致界面分区设计失效；斑马行看不清，导致 table 信息定位困难。

界面信息冗杂：对管家来说，无法快速找到正在汇报的施工单、汇报重点信息在 table 中不突出；对管理者来说，不知道应该关注哪些工地、缺乏数据总览。

因此，基于装修管家向管理者汇报的使用场景，结合使用者的特点和痛点、以及现存的问题，我们展开本次投影场景的设计研究，从实际场景出发，来解决使用问题。致力于为使用者提供看的清晰、看的高效的使用体验。

如何解决这些问题？

我们在 PC 中台系统中，根据实际使用需求和投影场景特点，定制设计了一个新的页面，同时满足投影和 PC 的使用。并建立了一套匹配该场景的新规范，为后续此类场景的设计提供依据。

针对“字号偏小、颜色看不清”的问题，我们在表现层中进行了设计规范的探索。针对“界面信息冗余”的问题，我们从结构层和框架层梳理了界面的信息结构，既能符合管家的汇报逻辑，实现汇报提效。也能令管理者快速的了解汇报内容，并抓住重点、实现信息总览。

我们从字号、颜色、信息架构三个方面进行具体介绍。

图 5 解决现存问题的 3 个优化方向

1. 字号

我们在为电脑和手机外的电子信息载体做设计时，可能会经常面临无案例可参考的局面。这个时候我们可以跳出常规思维，想一想在这个场景下最常用的产品是什么。即使它不是常规的互联网产品，同样也能为我们提供参考。

切入点

经过一波调研，投影场景下字号的定义，以投影场景中的成熟产品 PowerPoint 为切入点，我们找到了投影最小字号的计算公式。

图 6 投影场景最小字号计算公式

当我最初看到这个公式时，也非常迷惑，不知道该如何使用，因此先去尝试理解它的原理。就像下面的图片表示的一样，投影最小字号等于电脑端常用字号与会议室的观看比例、电脑观看比例、显示器大小比例几个参数的乘积。

图 7 计算公式原理

其中，显示器屏幕系数、投影幕布屏幕系数可以参考下表：

图 8 系数参考表

数据测量

在确定了公式后，我们进行相应的数据的测量。

首先，测得“会议厅长”的数据为 7 米↓

图 9 会议厅长数据测量

测得眼睛距离电脑显示器的“观察距离”为 0.5 米↓

图 10 观察距离数据测量

其次，调查明确了“投影幕布尺寸”为 120 英寸、“显示器尺寸”为 14 英寸。

然后，根据“投影幕布比例 4：3”、“显示器屏幕比例 16：9”的比例关系，对照上文屏幕系数参考表，得到“投影幕布屏幕系数”为 1、“显示器屏幕系数为 0.79”。

最后，我们再将测量的数据代入公式计算。

图 11 数据代入公式计算

结论

在电脑显示器尺寸 14 英寸 16：9、投影幕布尺寸 120 英寸 4：3 的情况下：

会议室厅长为 6 米时，投影最小字号为 16px；

会议室厅长为 7 米时，投影最小字号为 18px；

会议室厅长为 8 米时，投影最小字号为 20px；

在这要里特别注意的是，上述公式推导出来的理论值是最小字号，这并不代表我们在最小字号以上可以无限放大。在保证能看清内容的情况下，字号的选择以较小为优，以保持克制的原则。

2. 颜色

要解决投影场景下颜色看不清的问题，我首先思考这样两个点：满足什么条件的颜色才能被看清？看清与看不清的边界在哪里？有了能看清的范围，明确了看清与看不清的边界后，我们如何选择使用的颜色？

概括来讲就是两个问题：

1. 如何检验颜色的可读性？
2. 如何定义颜色的值？

带着这两个问题，我们继续进行下一步的探索研究。

如何检验颜色的可读性

• 「WCAG 标准」

WCAG（Web Content Accessibility Guidelines ）内容无障碍指南，定义了如何使残疾人士更方便地使用 Web 内容的方法，遵循这些建议也可让普通用户更容易访问辨别看到的内容。

该标准发布自 W3C（万维网联盟）。W3C 是 Web 技术领域最具权威和影响力的国际中立技术标准机构，发布过 200 多项 Web 技术标准和实施指南，一直指导着 Web 领域的发展。

图 12 WCAG 标准

Web Content Accessibility Guidelines (WCAG) 2.0 中有明确指出：

AAA 级别中：普通文本与背景色要符合至少 7:1 的对比度。

AA 级别中：普通文本与背景色要符合至少 4.5:1 的对比度。

WCAG 标准则可作为检验文字颜色可读性的依据。我们使用的文本颜色与背景色之间的对比度，只要满足上述 WCAG 标准的建议，就能确保被清晰识别。

那么问题来了：如何得到对比度值呢？

• 「WebAIM 工具」

今天跟大家推荐一个能得到文本与背景色对比度值的小工具：WebAIM。

百度搜索：color contrast。第一条就可以找到。

图 13 百度搜索 color contrast

使用这个小工具很简单，在 “Foreground Color(前景色)” 中输入文字颜色，“Background Color(背景色)”中输入背景色，即可在 “Contrast Ratio”中得到对比度值。

图 14 小工具 WebAIM

通过这个工具得到的“对比度”值，再参照 WCAG 标准，即可判断文字颜色能否被看清。

• 「结论」

通过上述 WCAG 标准，我们得知，普通 PC/移动端产品设计中：

主要文本与背景色对比度要至少达到 7:1 AAA 级别对比度；

次要文本与背景色对比度要至少达到 4.5:1 AA 级别对比度；

而在投影场景设计中，情况又有所不同。无线投影仪损失一定的清晰度，造成对颜色的识别度较低，且投影场景设计的字号已由 14 调整至 18。针对投影场景的特殊情况，设计团队参考 WCAG 标准，并反复的进行了尝试，得出如下结论：

投影场景产品设计中：

正文文本、标题和背景色之间应保持在 7：1 以上的 AAA 级对比度。

次文本、辅助色文本与背景色之间应保持在 3：1 以上的 AA 级对比度。

界面分区的灰色色块、背景色、tab 色应保持 1.1：1 以上的对比度。

因此，通过上述检验文本可读性的结论，再结合 webAIM 小工具得到的对比度值，如此就解决了如何检验文本可读性的问题。

如何定义颜色的值

• 「色彩模式」

一直以来，设计师们常用的颜色以 RGB 模式，十六进制颜色码为主。

但大家有没有想过，十六进制颜色码，在调整颜色时是没有预期的，老司机们也难以通过“#FFB6C1”这几个字母和数字的组合，辨别出它究竟是个什么颜色。而且还很难记忆。

图 15 RGB 模式/十六进制颜色码

因此，我们弃用 RGB 模式，而采用 HSB 色彩模型进行颜色的定义。

图 16 HSB 色彩模型

H：色度用于调整颜色，范围在 0°-360°之间。

S：饱和度是指颜色的强度或纯度，范围在 0%～100%之间。

B：亮度是颜色的明暗程度，范围在 0%～100%之间。

该模型更便于设计师在调整色彩时对于颜色有明确的心理预期，同时也方便团队之间的沟通。

• 「定义颜色」

因为黑色系文字颜色 H 和 S 的值都为 0，我们通过 B 值来选择需要的颜色。将 B 值由 0-90 的 10 个代表颜色依次列出，根据前文所述的文字颜色检验标准，B 值 0-50 是满足对比度要求可用的，而 B 值 60-90 的则不可用。

图 17 颜色枚举

B 值 0-50 的颜色中，B 值为 0 的被首先弃用，B 值为 0 的颜色即纯黑色。自然界中几乎没有纯黑颜色的东西，因此在设计中使用这种颜色给人的感觉不真实，视觉上也太亮。

因此，我们选择 B10 的颜色作为主文本色，用于版块标题、tab 名称、表格文字等主要内容。为了保持对比和文本层级，次文本色，跳过 B20 的颜色，选择 B30 的颜色，用于提示、面包屑等辅助文字信息。同理，B50 的颜色，则用于占位文本色、失效色。

图 18 颜色选择

3. 信息架构

在解决了表现层看不清的问题后，这一部分，我们结合实际需求，从框架层、结构层来解决界面信息架构的优化问题，并进行了优化池的梳理：

图 19 优化池梳理

• 「最终效果展示」

优化前：

图 20 优化前效果图

优化后：增加了数据指标总览↓

图 21 优化后-数据指标总览

按照管家汇报内容进行信息分区划分↓

图 22 优化后-信息分区划分

将列表信息按照重要程度进行排序、使用红黄灯标签聚焦重点工地↓

图 23 优化后-红黄灯聚焦重点工地

优化后的设计，既符合管家的汇报逻辑，又满足了管理者的关注重点，同时也彻底解决了看不清的问题。

总结

在实际工作中，我们不止一次面对这种定制化、针对性的场景体验设计需求，除了投影场景的设计外，在面向老龄用户群体进行包容性设计、以及特殊智能硬件设计的时候，以上研究也具有借鉴意义。

场景化体验设计研究给我们的启发在于：要想让设计更好的服务于业务、产品、助力问题的解决，必须深入了解实际情境、真正的去关心使用者，并且不断进行尝试、研究和探索。

参考文献：杨臻《PPT 要你好看》

欢迎关注作者微信公众号：「贝壳KEDC」