我们在贝壳新装修业务的设计中,针对“投影”这一特殊情境进行了一系列场景化体验设计的实践。当初次面对这一特殊场景的设计时,真的是瞬间头皮发麻,不知道从何下手。因为投影场景比较特殊,业界内也少有参考,需要我们从 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」

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

点赞 24
收藏 26

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。