场景化体验策略-投影情境设计语言探索

道龙

场景化体验策略 - 投影情境设计语言探索 场景化体验策略 - 投影情境设计语言探索 贝壳KEDC 贝壳KEDC 贝壳KEDC KEDC全称贝壳体验设计中心，组建于2015年。团队以“为客户提供超预期的产品使用和服务体验”为愿景，始终致力于构建值得信任的品牌印象与服务体验，以及高品质、超预期的服务能力。以极高的热忱助力公司的极速发展与创新探索，并沉浸其中。 61篇内容 2020年09月02日 11:22 我们在贝壳新装修业务的设计中，针对”投影”这一特殊情境进行了一系列场景化体验设计的实践。当初次面对这一特殊场景的设计时，真的是瞬间头皮发麻，不知道从何下手。因为投影场景比较特殊，业界内也少有参考，需要我们从0到1，探索出一套严谨、合理的设计规范。那么，设计师怎么才能做好这类创新场景的体验设计呢？这需要我们深入线下考察真实的情境，洞察使用者的情况（人）、周围的环境（地）、使用者办事的流程、以及行为的动线（事）等。只有透析线下场景，接地气的解决使用者痛点，才能打造出真正满足需求的体验。图1 场景化体验三要素为什么要做投影场景设计？说到“无线投影场景”，大家应该都不陌生。没错，就是会议室里播放“劈劈踢”的无线投屏场景。首先来明确一下设计要面临的挑战点：使用场景是什么样的？使用者是谁？现存问题是什么？1.使用场景是怎样的？在贝壳新装修的业务中，有一个核心使用场景：装修管家要定期向管理者汇报装修工地的进展和问题。他们需要在会议室里，把PC中台系统的数据管理界面，通过无线投影呈现在幕布上，装修管家边看边向管理者汇报。图2 投影设计核心使用场景2.使用者是谁？业务管理者与装修管家就是这一场景的使用者。装修管家在整个装修流程中负责对工长、设计师、主材厂家等团队人员的协调工作，确保项目进度的正常进行，以及定期巡查工地现场，上报工程进度及现场问题。业务管理者主要负责管理管家、制定施工管理流程，对于装修过程中出现的各类问题提供解决方案。管家需要通过幕布上的内容呈现，突出重点，提高效率，准确且又快速的完成汇报。管理者需要通过观看投影幕布，再结合管家口述的汇报内容，快速的抓住重点，并能直观的总览整体情况。图3 管家/管理者诉求3.现存问题是什么？图4 改版前投影展示效果上面这张配图，就是在会议过程中记录下来的投屏效果。大家可以明显的看出很多问题，比如：字号偏小：在投影场景下，由于用户的观看距离和屏幕尺寸都被大幅放大，导致文字视觉效果偏小，PC中台系统常用的14号字不再适用。颜色看不清：由于无线投影仪会损失一部分清晰度，所以对颜色的识别度较低。灰度文字看不清，导致文字层级区分失效；背景色看不清，导致界面分区设计失效；斑马行看不清，导致table信息定位困难。界面信息冗杂：对管家来说，无法快速找到正在汇报的施工单、汇报重点信息在table中不突出；对管理者来说，不知道应该关注哪些工地、缺乏数据总览。因此，基于装修管家向管理者汇报的使用场景，结合使用者的特点和痛点、以及现存的问题，我们展开本次投影场景的设计研究，从实际场景出发，来解决使用问题。致力于为使用者提供看的清晰、看的高效的使用体验。如何解决这些问题？我们在PC中台系统中，根据实际使用需求和投影场景特点，定制设计了一个新的页面，同时满足投影和PC的使用。并建立了一套匹配该场景的新规范，为后续此类场景的设计提供依据。针对“字号偏小、颜色看不清”的问题，我们在表现层中进行了设计规范的探索。针对“界面信息冗余”的问题，我们从结构层和框架层梳理了界面的信息结构，既能符合管家的汇报逻辑，实现汇报提效。也能令管理者快速的了解汇报内容，并抓住重点、实现信息总览。我们从字号、颜色、信息架构三个方面进行具体介绍。图5 解决现存问题的3个优化方向1.字号我们在为电脑和手机外的电子信息载体做设计时，可能会经常面临无案例可参考的局面。这个时候我们可以跳出常规思维，想一想在这个场景下最常用的产品是什么。即使它不是常规的互联网产品，同样也能为我们提供参考。1.1 切入点经过一波调研，投影场景下字号的定义，以投影场景中的成熟产品PowerPoint为切入点，我们找到了投影最小字号的计算公式。图6 投影场景最小字号计算公式当我最初看到这个公式时，也非常迷惑，不知道该如何使用，因此先去尝试理解它的原理。就像下面的图片表示的一样，投影最小字号等于电脑端常用字号与会议室的观看比例、电脑观看比例、显示器大小比例几个参数的乘积。图7 计算公式原理其中，显示器屏幕系数、投影幕布屏幕系数可以参考下表：图8 系数参考表1.2 数据测量在确定了公式后，我们进行相应的数据的测量。首先，测得“会议厅长”的数据为7米↓图9 会议厅长数据测量测得眼睛距离电脑显示器的“观察距离”为0.5米↓图10 观察距离数据测量其次，调查明确了“投影幕布尺寸”为120英寸、“显示器尺寸”为14英寸。然后，根据“投影幕布比例4：3”、“显示器屏幕比例16：9”的比例关系，对照上文屏幕系数参考表，得到“投影幕布屏幕系数”为1、“显示器屏幕系数为0.79”。最后，我们再将测量的数据代入公式计算。图11 数据代入公式计算1.3 结论在电脑显示器尺寸14英寸16：9、投影幕布尺寸120英寸4：3的情况下：会议室厅长为6米时，投影最小字号为16px；会议室厅长为7米时，投影最小字号为18px；会议室厅长为8米时，投影最小字号为20px；在这要里特别注意的是，上述公式推导出来的理论值是最小字号，这并不代表我们在最小字号以上可以无限放大。在保证能看清内容的情况下，字号的选择以较小为优，以保持克制的原则。2.颜色要解决投影场景下颜色看不清的问题，我首先思考这样两个点：满足什么条件的颜色才能被看清？看清与看不清的边界在哪里？有了能看清的范围，明确了看清与看不清的边界后，我们如何选择使用的颜色？概括来讲就是两个问题：如何检验颜色的可读性？如何定义颜色的值？带着这两个问题，我们继续进行下一步的探索研究。2.1 如何检验颜色的可读性【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小工具得到的对比度值，如此就解决了如何检验文本可读性的问题。2.2 如何定义颜色的值【色彩模式】一直以来，设计师们常用的颜色以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要你好看》- E N D -徐冉 / 高级UI设计师被窝灵魂段子手、一级捧哏表演家负责新装修工长端及被窝家装新家交付等业务方向最好的匠心是对细节的追求感觉好看就点个 在看 预览时标签不可点 关闭更多小程序广告搜索「undefined」网络结果