随着Android Q和iOS13相继发布黑暗模式，黑暗氛围已经跃升到系统的平台层面，这让我们认真思考黑暗模式对于娱乐产品的价值和机会。
黑暗界面的价值和机遇
2019年，优酷经历了一次体验设计升级。在前期的设计探索中，优酷设计团队尝试了各种方向，包括全暗界面。随着Android Q和iOS13相继发布黑暗模式，大众之前理解的黑暗氛围已经跃升到系统平台的层面，这让我们认真思考黑暗模式对于娱乐产品的价值和机会。
体验设计升级期间尝试的全暗方案:
深色界面与聚焦环境下的内容契合度更高，突出内容，缓解视觉疲劳。
深色背景减少了内容周围元素的存在，同时突出了内容，尤其是视频和图片会变得更清晰，这将使访问者更加专注于内容，这使得深色界面与内容平台更加兼容。
由于深色消除了白光对人眼的刺激，大大降低了用户在长时间视频和图片消费中的视觉疲劳。
深色界面更容易营造质感和沉浸感。
在我们视觉升级的初期方案探索中，全暗方案第一时间吸引了大家。不是设计师的同学可以很清晰的说出自己对黑暗界面的感受，包括“专业”、“高级”、“沉浸感”、“很特别”。人为什么会有这种感觉？我试图找到一些线索。我们对黑暗界面的认识来自于专业软件、游戏和科幻电影给人的印象。
深色界面更容易产生填充感。
白色背景的心理认知映射到日常生活中的白纸和笔。白色在日常认知中代表“空”，白色上所有细微的颜色变化都被理解为“加法”。深色本身被理解为一种填充背景色，其认知属性与其他页面元素接近，从而使页面更有填充感，这在一些缺乏信息的页面中更为明显。
同时要注意几点:
文字信息的比例决定了是否使用深色界面作为默认主题。
几乎所有的图片编辑和视频编辑类，以及一些视频娱乐产品如Tik Tok和网飞，都使用默认的黑暗界面。但是，我们也注意到，这些产品的共同特点是，文字在产品中所占的比例非常小。原因是在光线充足的环境下，白底黑字提供了最好的可读性，而黑底白字不仅降低了可读性，而且研究表明更容易产生视觉疲劳。所以要慎重考虑文字在产品中的比例来决定是否使用深色作为默认主题。
用户和平台都需要低成本的交换机。
一个有趣的信息是“绝大多数的娱乐活动都发生在晚上”。优酷的数据还显示，用户晚上的分时活跃度和使用时长都高于白天。黑暗模式无疑能给用户带来更好的夜间体验，文字在优酷中占有相当大的比重，所以还要考虑白天文字的可读性。考虑到平台的技术实现成本和用户的开通成本，暗接口需要一个低成本的开关。判断暗格局的价值，有助于我们在优酷暗格局设计中获得更清晰的设计策略和方向。
设计目标和方法
在Android Q和iOS13相继发布黑暗模式后，我们等待着黑暗界面的“低价切换”，优酷也迎来了新一轮的设计升级。在开始之前，我们首先设定体验的目标和方向，以便快速做出决策，并在关键点上达成共识。
1.设计目标
整体印象一致，降低实施成本，建立灵活可控的机制。
总体印象是一致的:一些体现产品独特性的视觉特征值得努力产生第二个适应的设计，以便在黑暗模式下看起来和谐，而一些低优先级但高成本的适应可以降级或不予处理。深色模式不需要建立新的颜色层次，而是延续原有的颜色层次，只使用深色方案。但是在这个过程中，如果发现原来的关卡中有优化过的空房间，也没必要大动干戈，因为在深色模式之后，颜色的调整变得更加全局、彻底、简单。
原深色定制主题场景保持不变，不受深色图案影响。比如高清频道、会员主页、引导观看场景、沉浸式播放页面、操作场等，用特殊的主题来体现特定的产品用途和视觉感受，应该保持固定的头脑，不需要切换模式。儿童场景可以定制专门的深色图案，因为深色会给孩子带来负面的心理影响。
降低成本，建立灵活可控的机制:黑暗模式涉及大量场景和团队，按照常规做法会耗费巨大的开发成本。我们利用可视化的产品化能力，将可视化属性从框架布局中分离出来并对应开发逻辑，借助SDK的方式统一管理。一处替换，整处生效，用于以后的控制，快速定义产品风格。同时我们遵循iOS HIG中的语义命令方式，对设计人员和开发人员非常友好，我们与系统的集成度会更高，避免以后因为兼容性带来的各种问题。
2.设计法
产品印象:尽量保留产品的核心视觉特征。
黑暗模式的切换就像是拉上了家里的窗帘，光线变暗但不改变壁纸和家具的固有颜色。我们主要为优酷五个栏目的头部氛围和底部栏目图标设计了第二套深色，让它们在深色中显得和谐。
背景颜色的选择:确保与内容的兼容性。
基于内容兼容性的考虑，我们选择了足够深但比黑色浅的深色。这样可以将空的层次从包含黑色的媒体图像中分离出来，同时与前景色的对比度足够大，保证在弱光和强光环境下的识别度。黑暗模式主要背景色保持安静不播放，定制主题场景包括运营场、垂直频道、会员场，预留有声音的空房间。所以选择相对中性的颜色。色调协调，要测试与主场景氛围的融合，优酷主要涉及五栏的导航条和第一个焦点的色彩吸收。
颜色框架:包容且一致
我们对现有的色彩进行分类，总结每一类的用途，从而建立色彩框架。这可以帮助我们确保两种色调的唯一性，深色图案和浅色图案，包含在同一目的的颜色中，而不是单一颜色的唯一性。例如，白色将同时用于背景和一些按钮文本。我们不能规定在黑暗模式下白色会变成黑色，因为它不适用于按钮。我们应该规定底色的浅色图案为白色，深色图案为深色，这样按钮文字就不会受到影响。
值得注意的是，先把握一般类型，再看特例。比如我们把文字和图标分类到信息层，分为三个层次，而不是主标题、副标题、按钮文字、底部栏图标、顶部导航图标。
用一般类型来概括颜色可以涵盖大部分颜色类型，特殊类型可以用场景、状态、组件等维度来划分，比如“儿童一等背景色”、“隐藏分割线”、“黑色导航条”。
彩色框架:
主要类型:
对比阶梯:清晰降噪
我们在背景的对比度上设置一个均匀的阶跃变化。这种整齐划一的变化有利于在背景层面建立秩序感。值得注意的是，与亮模式不同，暗模式下对背景的视觉感知是一个逐渐凸起的层，海拔越高，亮度越高。
文字的对比阶梯与背景不同，在暗模式和亮模式下文字的对比阶梯是收敛的。原因是我们希望主标题和副标题的对比度足够大，让主标题醒目，而副标题和变灰文字的对比度不需要那么大。值得注意的是，二级文本的对比度需要适度提高。
更好的对比度阶梯有利于复杂信息密度界面的视觉降噪。
可读性:跨场景测试
深色的外观很可能会被用户喜欢。考虑到用户在夜间弱光环境下使用暗光模式的同时无法排除白天强光的使用场景，手机屏幕的自动亮度等级会影响实际对比度。我们观察到iOS黑暗模式的设计提高了几乎所有元素的对比度，值得我们考虑。所以尽量在这两种极端环境下测试我们的最终设计，确保信息的可读性。
规范化:创建一个黑暗的模式样本。
在色彩框架的基础上，以层次划分为主，特殊类型为辅，在对应的浅色图案的层次下增加深色图案的色彩。
同时需要在产品的真实场景中进行反复对比，确保实际效果符合要求。
此外，一些细节仍然值得我们关注:
图标:深色的脸图标更容易辨认。
在黑暗模式下，线条状的图标有时会显得过于单薄，缺乏重量感，导致关注度较低。为了改善这种情况，我们可以用块状图标来代替它们。此外，研究表明，在大多数情况下，块图标比线图标更容易使用，它们可以更快地被识别。
分割线和阴影:转换为填充颜色来区分。
深色模式大多数情况下，对于层次划分，填充颜色比分割线和阴影更有效。
执行策略
暗模式不是简单的处理颜色的明暗变化，它是一种全新的设计风格，涉及到很多场景和团队。按照常规做法，会耗费巨大的开发成本。如何快速实现优酷双端的黑暗模式适配，是目前面临的主要问题。
去年优酷牵头设计开发，打造视觉产品化能力。在设计端，根据优酷的业务属性对视觉进行了不同粒度的拆解和抽象，用统一的设计token命名了影响视觉风格调性的最基本属性。设计和开发团队共同维护了一组可扩展的可视化属性。视觉属性与框架布局分离，并与开发逻辑相对应。它们通过SDK统一管理，一个地方生效，这样就可以控制和快速定义产品风格。
视觉产品化能力下的深色图案相对落地来说更容易适应。在两种风格的转换中，主要需要适应:色彩和画面。
颜色:使用语义命名的设计交付
优酷系统的色彩体系分为静态色彩和动态色彩。
动态色彩按不同层次重新语义命名，底层保留静态色彩设计令牌。整个颜色会由一个sdk统一控制，也保证了整体的一致性。
同时，我们遵循iOS HIG中的语义命令方式，对设计者和开发者非常友好。语义命名实际上是为深色图案的动态颜色建立一个令牌，比如命名一个动态颜色叫“主背景色”，它实际上包含了深色图案的主背景色和浅色图案的主背景色。设计者在界面中相应的元素上标注“主背景色”，开发可以实现该元素两种模式之间的颜色切换。当然，我们还得为开发生准备一个动态颜色对照表。
多路滤波器
对于黑暗模式下的图像处理，我们给出以下建议:
尽可能设计一组图片适应两种模式。例如，使用不透明度设置这样的亮色来同时适应亮暗模式是一种巧妙的方法。
开发者可以选择代码过滤器。
对于一些不能重用的重要图片，要根据暗界面添加一套新的剪贴资源。
工具化:设计的输出与维护
通常设计和开发的协作是通过sketch Measure直接一键导出标注。
那么，我们在一个统一的设计令牌中命名了基本属性之后，后续的标注设计应该如何标注呢？需要对照表手动标注吗？如何看待开发中的设计token？
Gaia是提高优酷设计效率的工具，在导出RGB颜色值方面不同于sketch Measure。Gaia导出标签会符号化属性的值，对应的设计token会和属性对应的值同时显示，从而解决设计输出和开发的效率问题。
标签
黑暗模式在用户体验上的价值需要我们进一步的观察和思考。我相信，这个设计的实现只是一个开始。黑暗模式如何与娱乐产品更紧密的结合，如何通过内容与用户的结合做出更多的洞察和创新，是我们下一步的目标。
资料来源:file/tupian/20220731/pp本文由@ AlibabaDesign授权发布。人人都是产品经理，未经作者允许，禁止转载。
来自Unsplash的图像，基于CC0协议。
