如何设计出最具温度感的蔚来“白”

NIO OS随着蔚来第1辆车ES8交付到用户手里，伴随着每一位车主朋友砥砺前行。2年间，NIO OS一直致力于创造愉悦的驾乘体验，打造智能懂我、一致易用的数字座舱。期间与用户深度共创，敏捷迭代，将NIO OS塑造成更为符合驾驶场景下的车载系统。此次NIO OS的更新升级中，新增了更加符合白天驾驶场景的浅色模式，为用户提供一个更加完整的全天候安全愉悦驾驶系统，伴你披星戴月。

1. NIO OS为什么需要浅色模式？

1.1 体验趋势：

近年来，随着用户场景的拓展和技术的进步，各大平台的系统和应用都相继设计开发出了黑夜模式来提升用户全天候的体验，这已然成为一个系统成熟和完整的必备属性。对于每天陪伴车主朋友的NIO OS来说，提供全天候的优质用户体验自然必不可少。而对于驾驶场景来说，一切设计都需要建立在驾驶安全的基础之上，并且做到不打扰用户。因此整个设计过程更是需要被严谨对待。

1.2 用户需求：

我们收到了众多关于浅色版需求的车主反馈，也做了大量场景还原。在深色模式下，特别是在正午的高亮环境下，环境反光和指纹都会对驾驶过程中观看和操作屏幕带来干扰。而浅色模式的出现则解决了这些问题。同时也满足了不少女性用户对于清爽风格和多模式切换的需求。

1.3 更为完整的体验：

浅色版本升级了白天的驾驶体验，打通了多种数字触点，保证了使用场景下的体验一致。让用户在日间使用移动端、PC端和车机端时体验的无缝衔接，从而延续了用户的感知习惯，形成顺畅愉悦的全链路体验，也让NIO OS的整个优质的体验不分白天黑夜。

2. 如何设计NIO OS浅色模式？

说到此，我相信大多数人都或多或少的接触过浅色版本的系统，大部分的浅色系统都是纯白为底，纯黑为案，为了保证在日间强光下的可阅读性，这样高对比的配色将最大程度上提升人眼的辨识度，也符合人眼对于传统纸媒的观看习惯。但因为纯白和纯黑是没有颜色倾向性的，往往给人一种无性的感觉，虽然理性但却冰凉，易于产生距离感。蔚来是一家用户企业，希望传达一种愉悦的生活方式和富于温度的科技感，让用户能放下芥蒂，拥抱科技，向往未来。这要求我们设计的浅色版本是有温度的，能够体现品牌感知，同时作为一个车载OS，他的设计需要符合系统层级的一致性和专业性而不是一个主题或一套皮肤。那么，我们的主要矛盾便浮出水面：如何设计出最具温度感的蔚来“白”？

在人们的通常印象中，白代表着单一、纯洁；在自然界中，白是所有可见光的混合——大繁至简，在“白”这个字上得到了最hao的诠释。所以就“白”而言它本身就蕴含着温度，只是我们如何将它的温度体现出来？

经过设计团队大量的Workshop讨论、发散、梳理和归纳，蔚来“白”的温度可以从两个维度进行表达：

白色模式对于日间驾乘体验的友好程度（理性层面）

白色的色温上的倾向性带给用户的视觉感受（感性层面）

2.1 白色模式对于日间驾乘体验的友好程度

2.1.1 WCAG 2.0标准的颜色推算方式

可读性&易读性

在浅色模式的设计上我们非常注重可读性和易读性，20世纪80年代的科学研究就曾提出对于大量文本而言，浅色背景更受大多数用户的欢迎。我们发现D.Bauer和CRCavonius在1980年的论文<Improving the legibility of visual display units through contrast reversal>中提到，当在浅色背景上显示黑色字符时，参与者阅读文本的准确度提高了26％。而白天复杂的驾驶场景也要求信息的传达在多种环境下都需要准确快速，轻瞥一眼或是扫视都可以快速获取到准确的信息是我们的使命。

理性的浅色的色板

颜色是设计系统中的核心元素，也是设计浅色模式中最具挑战的设计问题之一。在颜色的设计上我们建立了以下原则：

1. UI界面中的颜色显示要具有准确的信息传达，在复杂的场景里颜色的倾向性应十分明显（比如红色和黄色代表警示或不良结果，那么用户需要在第1时间识别出这种警示信息），因此我们所有的颜色使用都需要满足 WCAG 2.0 AA级建议的对比度。

2. 界面以一致的色彩风格为主题，使用梯度色（而不是单一颜色）应用于界面元素中。丰富设计师的可选择范围，增加系统颜色的多样性；

3. 界面颜色将支持深色和浅色模式，我们希望在深浅模式切换时梯度色在双模式中具有同样的视觉重量，保持人眼对色彩感知的一致性；例如：在双模式切换中，NIO Green_K60的颜色必须与NIO Red_K60具有相同的对比感知度（以降低在模式切换中对色彩差异的违和感）

包容性

在选择颜色时，需要更加包容的考虑到在不同场景下不同视觉感知的用户体验，例如视力疲劳、受损或患有色弱的用户。即在每个单一模式使用或双模式切换时，颜色梯度K值具有清晰可辨认性，保障用户的驾驶安全。

目前国际最具权威的色彩对比度标准就是 WCAG AA。AA级标准的对比度为4.5：1，AAA级标准的对比度为7：1；而我们的梯度色卡支持AA级标准以上的颜色对比，文本信息的视觉呈现必须在每个UI组件中至少具有4.5：1的颜色对比度；

设计实践

研究和分析过后，我们提出几个主要问题：

如何保证同一类颜色维持在相同的色相范围里？

一个独立的颜色如何进行推演？每个推演出来的颜色又如何达到AA级的标准？

如何保证每个颜色在不同屏幕亮度和环境亮度下具有相同的色彩感知？

设计色板

经过充分研究、探讨和提问，我们开始设计色板并验证我们的想法：

基础色板：基色是浅色模式中的主色；它是整个UI组件中使用最多的颜色。前文中提到的NIO Blue_K60就是浅色模式的基础色，它的对比度高于AA级标准。

基色的梯度色：梯度色源于基色的衍生，这些颜色将支持可交互元素（如按钮、链接、滑块等）中基色的不同状态（点击、悬停等）。

梯度色的搭配：为了保证同一梯度色内色彩搭配的对比度，我们对于背景色和元素色的选择会让他们的色值相隔20个K值，比如浅色模式的背景色选择了K10，那上面的元素K值将至少为K30。

颜色推演

1. 确定基础色K60，它是NIO OS浅色模式的主色。我们根据品牌的色相范围再结合硬件屏幕的表现、车内环境、人眼感受，以及不断调整校验WCAG标准，最终得出符合标准的基础色K60；

2. 定义基础色的梯度色，有了基础色后，我们需要定义他所在梯度的极值，也就是K100和K10。通过饱和度和亮度两个维度去推演出我们自己的K值曲线，从而计算出K10-K100中的各个梯度色；并依次推导出其他配色（红、黄、蓝、绿等）

3. 稳定性校准，灰度是确保颜色稳定性的重要参数，把颜色的饱和度去掉，只保留灰度，以他们的灰度在同等水平为目标进行微调；

2.1.2 字体粗细调整

文本中的光

白色反射所有波长的光，在深色背景下白色文本反射光时，反射光会散射并运行到相邻的单词和字母中。而黑色吸收所有光，在浅色背景下黑色文本吸收每个单词和字母周围的光线；

一个散射一个吸收，带来了同样字号字重的不同视觉表现，在NIO OS系统中，为了达到在不同模式下一致的可读性和舒适度，我们通过反复测试不同的人眼样本在多批次屏幕和不同光照环境下的视觉感知，调整出最合适的文字字重；

文本中的对比度

在复杂的驾驶场景下，人们更容易产生各种视觉障碍，例如长时驾驶带来的眼部疲劳、强光下导致的阅读障碍，或紧张情绪下的阅读焦虑；为了保证驾驶场景下的信息具有高对比，在需要快速反应时也能准确清晰的阅读，一般会想到使用纯白和纯黑来增强识别度，但是这样的对比度真的是最合适的吗？

Anthony在2011的研究中曾提到纯白背景(#FFFFFF)上使用纯黑色文字（#000000）不合适，因为许多诵读困难患者，对这种极高的对比度很敏感，过高的对比度会使他们看到的字旋转模糊，眼压增高，难以集中注意力。在满足“可读性”的前提下，适当的融入一些灰度或颜色倾向，将减少眩光，得到更好的阅读体验。

2.2 白色的色温上的倾向性带给用户的视觉感受

2.2.1 白色背景的主色调如何调出来？

我们认知上的白色和黑色是纯粹的，但在自然界中很难找到纯粹的黑和白。比如天上的云白，仔细去品位，其实其中蕴含着天空（蓝色）的静谧和阳光（黄色）的温暖。

结合NIO的家族颜色系统：

"Our color palette is inspired by ‘blue sky coming’ and the changing colour of the sky throughout the day.”

不断观察捕捉一天中的天色变化，感受不同时刻下与天空的情感连接。

2.2.2 如何体现品牌感和一致性？

为了使NIO OS浅色模式与深色模式保持系统级的一致性，我们延续“BlueSky Color”的设计概念，与研发一起构建NIO OS系统控件库，统一定义和管理所有元素和组件。

2.2.3 如何加强场景氛围渲染？

为了强化日间行车的氛围感，还原真实的日间场景，在浅色版中我们将仪表的NIO Pilot状态展示设计成了白天的行车场景，日间阳光作为环境光源明亮而均匀的照亮大地，只在高空中渗出一丝温淡的天蓝，道路上的车模反光也都符合白天的状态。白天会比夜晚要明亮很多，远处天际线的处理就会相对微妙。我们还为中控Launcher的卡片设计了全新的白天天色渐变效果，搭配上全新的白天地图配色，构成了交相呼应而完整的数字座舱日间氛围，塑造出日间驾驶的真实感，创造了一种沉浸的驾驶体验。

2.3 设计总结

新增浅色版是一次系统级别的的升级，不是新增一套主题或是设计一层皮肤那么简单。通过打通底层逻辑，与研发共同构建整套控件库，大幅提升设计开发效率和整体一致性。色彩严苛按照WCAG 2.0的标准设计与开发，从系统层提升用户在各种复杂驾乘环境中的体验。那么说了这么多，一次系统级别的升级需要满足哪些标准呢？

控件化设计

众所周知，人体是由细胞、组织、器官和系统组成的统一整体，而控件就是诸如颜色、文字、图标等最基本的视觉元素，他们相当于系统中的「细胞」，而搭建控件库就是把这些「细胞」根据属性进行有规律的分类从而便于行成组织和器官。与研发打通底层，共建控件库意味着设计端定义或更改了一个「细胞」，则所有组织和器官中的「细胞」都会响应式变化，无一疏漏。这极大的提升了浅色版本的研发效率和整个系统的完整统一性。

品牌化设计

前文有提到这最具温度感的蔚来“白”是如何呈现到你们面前，这不是普通的纯白，是通过千百次设计优化出来的蔚来“白”，它的品牌蓝倾向从视觉潜意识层传递出温和的蔚来感，同时也能削减纯白对于长时驾驶的视觉刺激。其他的交互色、强调色、辅助色也都添加了不同色阶的蓝色倾向，在整体色调协调的基础上体现蔚来范。

一致性设计

浅色版所做的一切都是为了让NIO OS在白天的体验与夜间一样出色，让浅色版完美适配白天的出行场景，随场景和时间的切换自然调整亮度和模式，浅色模式的加入也补全了整个NIO OS，让整个体验变得自然和一致。在深色浅色模式中我们使用了两套完全不同的颜色体系，为了保证切换间的视觉认知和视觉统一，我们下足了功夫，同样的蔚来感将在不同模式间共存。

无障碍性设计

浅色模式的颜色严格满足WCAG 2.0的色彩标准，每一个颜色都通过几种算法计算得出，从多种维度保证了颜色的对比度，对眼部视觉功能有轻微障碍的色盲、色弱用户具有较强的包容性，同时也保障了长时间驾驶引起的轻微眼疲劳和视觉模糊在紧急车况下能做出准确识别和判断。从驾驶安全的角度这完全是符合车规级别的系统模式。

3. 设计落地过程中的困难与挑战

3.1 困难与挑战

挑战一：ES8，ES6的中控和仪表屏幕来自于专业标准的车规级数字屏幕，但由于它们来自不同的供应商，并且符合质量标准的屏幕也会因批次问题而存在一定的色彩冷暖、颜色倾向的显示偏差，以及屏幕亮度显示偏差，因此，我们需要使车载界面设计的适应性必须符合更加高的要求。

挑战二：对于数字座舱设计来说，与手机、电脑端的界面设计大相径庭，车内复杂自然光源的驾驶环境中会难以看清楚界面信息，而为提升驾驶安全性，要减少驾驶员在屏幕上的注意力投入。所以我们要做到“瞥一眼”设计，使驾驶员在关注路面情况的同时需要更加快速地聚焦界面内容。

为节省软件维护成本，以上困难意味着我们需要用一套设计来满足屏幕多批次上不同程度的色彩偏向、色温差异和亮度差异，还要满足不同时段、不同天气、不同角度的驾车场景。因此，为提升安全性和用户体验，设计师需要经过大量的道路测试和实车验证，这也是我们在设计车载视觉界面过程中的重要环节之一。

3.2 对策与方法

为了进一步保证多车型、多屏幕的色彩一致性和可视性，在产品设计的各个阶段我们进行了1200多次的设备调色和300多次的实车场景调色，涵盖不同体验阶段、不同出行场景、不同地区、甚至不同光照条件下（白天，黑夜、正午、清晨、日落、阴天、雨天、隧道、地库等）的操作体验，并建立一套完整的界面及交互的设计开发规范，保障行车安全和系统的一致性。

为了解决色温差异问题，我们调研分析了多个车机、手机、电脑等屏幕色温，并采用?彩显示的计算公式得出适用于车载色彩显示的区间值。

同时，我们还使用了量化亮度值的屏幕亮度测试仪，得出夜晚和白天环境中车机屏幕适宜的亮度尼特值（nit），从而大大提升了界面在复杂驾驶环境中的适应性，做到清晰不刺眼，为白天驾驶的你提供更优质的出行体验。

持续到浅色版本上线前，我们共邀请了11名真实车主、不计其数的内部用户进行可用性测试，这11名真实车主覆盖ES8、ES6两个车型，有刚提车的新车主和陪伴我们许久的老车主。在收集大量有效的反馈后，对产品、交互以及视觉进行细致地优化与迭代。可以说浅色模式有今天上线的效果离不开车主朋友的群策群力。

立足用户企业的公司理念，注重真实场景的驾驶体验和用户反馈，我们不做停留在“办公室的设计”，不做“地铁上的设计”，与用户交朋友，切身体验实车驾乘场景，做“手握方向盘的数字座舱体验设计师”。

4. 我们一直在路上

未来是一个持续变幻的远方，充满着不确定和未知，这往往激励着一代又一代的创造者不断探索和憧憬。而你我正是这一代的创造者，欢迎加入我们，通过持续进化，打造新一代数字座舱，带来愉悦的驾乘体验，激发未来向往感。让我们一道去打破质疑、排除万难、创造未来，就像蔚来的logo一样，我们一直在路上，向着光明前进。