在新贝壳装修业务的设计中，我们针对“投影”这一特殊情况，开展了一系列场景体验设计实践。当我第一次面对这个特殊场景的设计时，我的头皮真的麻木了，不知道从何下手。由于投影场景比较特殊，业内参考资料较少，需要从0到1探索出一套严谨合理的设计规范。
那么，设计师如何做好这类创新场景的体验设计呢？这就需要我们去调查线下的真实情况，洞察用户的情况，周围的环境，用户的业务流程，行为的行动线。只有透析线下场景，接地气解决用户痛点，才能创造出真正符合需求的体验。
图1场景体验的三要素
为什么要设计投影场景？
说到“无线投影场景”，大家应该都不陌生。没错，就是会议室“劈腿”的无线投影场景。
首先，让我们明确一下设计面临的挑战:
使用场景是什么样的？
用户是谁？
存在哪些问题？
1.使用场景是什么样的？
在新贝壳装修业务中，有一个核心使用场景:装修管家要定期向管理人员汇报装修现场的进度和问题。在会议室，他们需要通过无线投影将PC中层系统的数据管理界面呈现在屏幕上，装修管家边看边向经理汇报。
图2投影设计的主要使用场景
2.用户是谁？
业务经理和装修管家是这个场景的使用者。
整个装修过程中，管家负责协调工长、设计师、主材厂家等团队成员，保证工程正常进行，定期巡视现场，汇报工程进度和现场问题。
业务经理主要负责管理管家，制定施工管理流程，提供装修过程中各种问题的解决方案。
管家需要把幕布上的内容呈现出来，突出重点，提高效率，准确快速的完成报告。管理者需要通过观看投影幕，结合管家口述的报告内容，快速把握重点，并能直观地总揽全局。
图3管家/经理的诉求
3.存在哪些问题？
图4修改前的投影显示效果
上图是会议过程中录制的投影效果。你可以清楚地看到许多问题，比如:
字号小:在投影场景中，由于用户的观看距离和屏幕尺寸被大大放大，人物的视觉效果较小，PC中台系统常用的14字已经不适用。
颜色不清晰:因为无线投影仪会损失一些清晰度，颜色的识别度较低。文本层次不清晰，导致文本层次失效；背景不清晰，导致界面分区设计失败；斑马看不清楚，很难定位桌子信息。
界面冗杂:对于管家来说，无法快速找到正在上报的施工单，报表关键信息在表格中不突出；对于管理者来说，不知道应该关注哪些工地，缺乏数据总览。
因此，基于装修管家向经理汇报的使用场景，结合用户的特点和痛点以及存在的问题，我们展开了这个投影场景的设计研究，从实际场景出发解决使用问题。致力于为用户提供清晰高效的体验。
如何解决这些问题？
在我们的PC中间平台系统中，根据实际使用需求和投影场景的特点，定制设计了新的页面，以满足投影和PC两方面的需求。建立了一套新的与该场景相匹配的规范，为该类场景的后续设计提供了基础。
针对“字体小、颜色不清”的问题，我们探索了表示层的设计规范。针对“界面信息冗余”问题，我们从结构层和框架层对界面的信息结构进行了梳理，既符合管家的上报逻辑，又实现了上报的高效性。也能让管理者快速理解报告内容，抓住重点，实现信息总览。
我们从字体大小、颜色、信息架构三个方面进行详细介绍。
图5解决现有问题的三个优化方向
1.字体大小
在设计电脑、手机之外的电子信息载体时，我们可能经常会面临无案可查的情况。这时候我们就可以跳出常规思维，想想这个场景下最常用的产品是什么。即使不是正规的互联网产品，也能给我们提供参考。
穿透点
经过一波研究，投影场景中字体大小的定义，以投影场景中的成熟产品PowerPoint为出发点，我们找到了投影场景中最小字体大小的计算公式。
图6投影场景最小字体大小的计算公式
当我第一次看到这个公式的时候，我也很困惑，不知道该怎么用，所以我试着先了解一下它的原理。如下图所示，最小投影字体大小等于电脑端常用字体大小与会议室观看比例、电脑观看比例、显示器大小比例的乘积。
图7计算公式原理
其中，显示屏系数和投影屏系数可参考下表:
图8系数参考表
测量数据
确定公式后，我们测量相应的数据。
首先，测得“会议总监”的数据为7m ↓
图9会议总监的数据测量
眼睛和电脑显示器之间的“观察距离”测量为0.5m ↓
图10观察距离数据测量
其次，调查确认“投影屏幕尺寸”为120英寸，“显示器尺寸”为14英寸。
然后根据“投影屏比例4: 3”和“显示屏比例16: 9”的比例关系，参照上述屏幕系数参考表，得出“投影屏系数”为1，“显示屏系数”为0.79。
最后，我们将测量数据代入公式进行计算。
图11数据替代公式计算
结论
在计算机监视器尺寸为14英寸16: 9和投影屏幕尺寸为120英寸4: 3的情况下，
会议室主任为6m时，最小投影字体大小为16px；
会议室主任为7m时，最小投影字号为18px；
会议室主任8m时，最小投影字号20px；
需要注意的是，上式得出的理论值是最小字号，并不意味着我们可以在最小字号之上无限放大。在能看清内容的情况下，选择字号要小一些，以保持克制原则。
2.颜色
要解决投影场景下颜色看不清的问题，我首先思考两点:颜色满足什么条件才能看得清？看与不见的界限在哪里？有了可见的范围和清晰的可见与不可见的界限，我们该如何选择使用的颜色呢？
一般来说，有两个问题:
如何检查颜色的可读性？
如何定义色彩的价值？
带着这两个问题，我们将继续下一步的探索和研究。
如何检查颜色的可读性
“WCAG标准”
WCAG内容可访问性指南，它定义了如何使残疾人更容易地使用Web内容。遵循这些建议也可以使普通用户更容易访问和识别他们所看到的内容。
该标准由W3C发布。W3C是Web技术领域最具权威性和影响力的国际中立技术标准组织。它发布了200多项Web技术标准和实施指南，一直在引导Web领域的发展。
图12 WCAG标准
网站无障碍指南2.0明确指出:
AAA级:普通文本和背景色的对比度至少应为7:1。
在AA级别:普通文字和背景色的对比度至少要达到4.5:1。
WCAG标准可以作为测试文字颜色可读性的依据。只要符合上述WCAG标准的建议，我们使用的文本颜色和背景颜色之间的对比就可以被清楚地识别。
那么问题来了:对比度值是怎么得到的？
" WebAIM工具"
今天给大家推荐一个可以获取文字和背景颜色对比度值的小工具:WebAIM。
搜索:颜色对比。你可以找到第一个。
图13搜索颜色对比
使用这个小工具非常简单。在“前景色”中输入文字颜色，在“背景色”中输入背景色，得到“对比度”中的对比度值。
图14小部件WebAIM
通过该工具获得的“对比度”值，并参照WCAG标准，可以判断文字颜色是否看得清楚。
“结论”
通过以上WCAG标准，我们知道在普通PC/移动产品的设计中:
正文与背景色的对比度至少应为7:1 AAA；
次要文本和背景色之间的对比度至少应为4.5:1 AA；
在投影场景的设计中，情况就不一样了。无线投影仪失去了一定的清晰度，导致颜色识别度较低，投影场景设计字体大小由14调整为18。根据投影场景的特殊情况，设计团队参考WCAG标准，反复尝试，得出以下结论:
在投影产品的设计中:
文字、标题、背景色的AAA对比度要在7: 1以上。
次要文本、辅助颜色文本和背景颜色的AA对比度应大于3: 1。
界面的灰色色块、背景色和选项卡色应保持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个代表色依次列出。根据上面提到的文字颜色测试标准，0-50的B值可满足对比度要求，60-90的B值不可用。
图17颜色枚举
在b值为0-50的颜色中，先舍弃b值为0的颜色，b值为0的颜色为纯黑色。自然界中几乎没有什么纯黑色，所以在设计中使用这种颜色会让人感觉不真实，视觉上过于明亮。
因此，我们选择B10颜色作为主要文本颜色，用于主要内容，如节标题、选项卡名称、表格文本等。为了保持对比度和文本层次，子文本颜色，跳过B20的颜色，选择B30的颜色，用于提示、面包屑等辅助文本信息。同样，B50的颜色用于占位符文本颜色和无效颜色。
图18颜色选择
3.信息架构
在解决了表示层看不清的问题后，在这一部分，我们结合实际需求，从框架层和结构层解决界面信息架构的优化问题，梳理出优化池:
图19优化池组合
“最终效果显示”
优化前:
图20优化前的效果
优化后增加了数据指标概述↓
图21优化后的数据指标概述
根据管家报告的内容对信息进行分区↓
图22优化后——信息分区
将清单信息按重要程度排序，重点关注红黄灯标注的重点施工工地↓
图23优化后-红黄灯聚焦重点施工现场
优化后的设计既符合管家的汇报逻辑，又满足了管理者的关注点，同时也彻底解决了看不清楚的问题。
摘要
在实际工作中，我们不止一次面对这种定制化、针对性的场景体验设计需求。除了投影场景的设计，上述研究还可以借鉴于包容性设计和针对老年用户的特殊智能硬件设计。
场景体验设计的研究给我们的启示在于:为了让设计更好地服务于业务、产品、电力问题的解决，必须深入了解实际情况，真正关爱用户，不断尝试、研究、探索。
