前言
"色彩是我们感知世界的重要媒介，对于信息传达有着重要的作用，能使人们能够更有效的感知设计的意图和内涵，使传达更高效。且人对色彩的视觉感知与想象能力，能够指导人做出预测、理解和决策。"
-- lyft kevyn arnott
色彩是体现品牌与基因的关键因素，构建科学高效的色彩系统，建立产品的品牌形象，对产品设计极具指导意义。京东物流用户设计部在B端色彩上也进行了一些深入的挖掘和沉淀，一方面希望强化用户的京东物流品牌印象和认知，另一方面构建科学有效的色彩系统，为产品的发展提供优质高效的设计系统基础。
一、项目背景
随着科技的进步，单一高强度作业工种已经越来越常见，如物流客服及仓内作业人员，在短时间内需要完成大量单一重复的工作，通常需要长时间的盯着电脑屏幕，且画面单一，而这些工作方式都会给劳动者带来身体负担。长期进行高强度作业、长时间注视电脑屏幕会导致 眼睛疲劳、易眼疼、视力下降 等职业病。
物流行业内对一线实操人员长时间作业的研究极少，针对客服的研究资料也分散在金融/电商/旅游等各个行业，同时也 缺少针对B端系统色彩体系的评判标准或设计指南，而现有无障碍设计标准针对残障人士及老龄化人群，且部分标准只适用于C端，并不适用于B端系统及物流行业一线客服和物流仓内作业人员。
目前没有专门的研究及体系原则解决上述问题，当下B端系统产品缺少对单一界面长时间操作人员体验的深层次关注与设计，只通过增加界面颜色、深色模式、光照条件与等解决基础体验，缺乏该领域的新技术应用和更全面的色彩体系设计，该人群的需求依旧未得到关注和满足。
因此在进行客服工作台体验走查专项时，我们调研了并搜集了物流一线客服面临的体验及视觉层面问题、结合无障碍设计标准及其他相关资料，展开深入的研究分析。
1、问题痛点
设计侧发起的客户工作台系统体验走查项目中，在客服中心跟单调研时发现，除系统功能问题外，有部分用户反馈系统使用过程中会引发视觉疲劳。
跟单中发现视觉舒适度问题
•部分用户觉得白色有些刺眼、晃眼；
•与设备、环境和光照条件影响较大，在窗边反光严重，在光照条件较好的小办公室且使用小屏幕的用户，浅色颜色影响较小；
另外，通过在客服工作台投放的全国问卷调研也得出初步结论：用户需要护眼模式。
2、设计目标
系统界面
客服系统-热线客服生产页面；
用户人群
涉及全国多个客服中心，覆盖用户人数1w+人；
设计目标
聚焦客服工作台，研究在白天室内作业及夜晚室内作业下，界面颜色、环境光线、使用时间对视觉舒适度的影响，设计一套针对物流作业场景下的B端护眼模式，提升一线用户的使用效率及视觉舒适度。
二、研究过程
1、行业标准
目前市面上很多B端工作台色彩标准，但是没有一套成熟的方案来解决B端用户视觉疲劳、刺眼的问题；
现有无障碍设计标准针对残障人士及老龄化人群，也只适用于C端，并不适用于B端系统及物流行业一线客服和物流仓内作业人员。
2、竞品分析
横向分析
20家主流阅读、教育app及学习机，文字阅读模式下护眼模式设置方式及背景色选取方案；
纵向分析
分析不同硬件设备、系统原生护眼模式设置方式及背景色选取方案：
PC：window 10、macOS 12.2；
移动：ios、android、MIUI、鸿蒙。
3、理论依据
同时翻阅大量论文资料，寻找科学的理论支撑，总结得出：
视觉疲劳监测方式
眼动数据（眨眼持续时间、注视持续时间、眨眼次数、注视点个数、眼跳幅度、 瞳孔面积）、主观评估、 心率检测；
护眼色范围
文字色、背景色、文字背景组合色、文字背景对比度；
主观评价
单一色相绿、青色、蓝色，视觉疲劳感最小；背景色黄、绿，视觉疲劳感最小；
饱和度
护眼色饱和度过高时，反而会增加视觉疲劳；
环境光源
白炽灯（室内光源）更合适，最佳色温5000K，照度2000lx，水平照度300lx、垂直照度 200lx( 照度配比1.5)，屏幕亮度100cd /m2；
背景亮度
与屏幕亮度差异越小，视觉疲劳越小；
屏幕色温
色温越低，蓝光比例越低，黄光比例越高。
** 参考文献：《电子屏幕诱发视觉疲劳的眼动特征来自观看视频和阅读文本的研究》、《电子显示屏色温及蓝光辐射与视觉健康关系研究》、《显示终端色域与亮度对视觉疲劳影响的研究》等，文献来源：中国知网*
4、影响因素
影响色彩呈现的因素有很多种，可以从对比度、明度、饱和度、光照环境、颜色等多方面深入分析色彩对视觉舒适度的影响。
对比度
对比度指的是物体明暗程度的差异，包括亮度、色度等参数。合适的对比度有助于清晰地感知图像信息，提高视觉舒适度和效率。过高或过低的对比度都会引起视觉不适，长时间处于这种环境下会导致视觉疲劳甚至损伤。《国际标准WCAG2.0》具体规定如下：
•AA级：文本视觉呈现/文本图像至少要有4.5:1的对比度；
•AAA级：文本视觉呈现/文本图像至少有**7:1 的对比度。
目前客服工作台内部各模块文字与背景颜色对比度高，且客服工作台整体界面颜色单一偏白，与环境色对比度极高（接近21:1），因此界面会与环境色相辅，产生极大的视觉疲劳。
饱和度&明度
饱和度指颜色的纯度或强度，简单点理解就是颜色中的灰色量含量的高低，明度指的是颜色中混合了多少白色或黑色。饱和度和亮度很大程度上决定了色彩呈现给用户的感受，饱和度、明度越高，视觉冲击力越强烈；饱和度、明度较低的时候，视觉上越温和。人眼对低饱和低明度色彩的忍耐度更高。
光照环境
除了对比度和明度，光照环境与界面颜色显示是决定视觉舒适度的一个重要因素。除此之外影响因素还有有眨眼的频率，刺眼的程度或者光盲区等。其他重要的考虑因素还包括颜色表现、低反射和光线的均匀分布。
通过走访各客服中心测算室内外光照强度及用户实际视觉疲劳感受，可以看出：
在室内外（夜间）光照强度都较好的办公职场内，用户的视觉疲劳强度较小；部分职场室内关照条件较差，用户在长时间及夜间使用系统时易产生视觉疲劳。
颜色
各种颜色对光线的吸收和反射是各不相同的，过分鲜艳的颜色会使人产生倦怠的感觉，过分深暗的颜色则会使人的情绪感到沉重。由于红色和黄色对光线反射比较强，因此容易产生耀光而刺眼。青色和绿色对光线的吸收和反射都比较适中，所以对人体的神经系统、大脑皮层和眼睛里的视网膜组织比较适应，给人带来凉爽和平静的感觉。因此人在看绿色、青色，视神经会比较相对舒适。
5、研究结论
综合竞品分析及理论依据研究结果，我们初步得出了灰色系、黄色系、绿色系能够明显解决视觉疲劳的问题，但是具体到界面中应当使用何种饱和度的颜色，还需要对设计方案进行科学的验证，因此在方案后我们需要主客观结合（眼动数据、心率、主观评估）进行设计方案验证：
灰色
白色亮度（饱和度）在84.6%一89.4%之间时， 视觉疲劳最小，纯白色更易疲劳；反射光线含多种色，光抵达视网膜的光量子越多，消耗能量越大；
黄色
可以调节疲劳，光谱单一，进入眼内光量子少，耗能减少；
绿色
视觉刺激最小；波长较短，刺激较低，对光的吸收和反射的程度都比较适中，对神经系统、大脑皮层、视网膜都无不良的刺激反应。
眼动实验
通过眼动仪设备，观测注视持续时间、注视点个数、瞳孔面积等数据；
心率检测
通过可穿戴设备监测实时心率变化；
主观评估
通过访谈、问卷方式，对比实验前后的主观感受。
三、解决方案
1、护眼模式设计
护眼色设定
由于原本的物流品牌色饱和度及亮度较高，在护眼界面反差较大，与页面整体配色融合度较差，所以在护眼模式中对原本的品牌色做了调整，叠加原始品牌主色中的绿色（15%）进行颜色倾向调和。
色阶设定
参考RGB颜色规律，选取品牌护眼色为基准色，分别以10%透明度为一个色阶，叠加#FFFFFF与#000000，并与相应色阶的中性色进行叠加，形成具有品牌特色的灰色色阶。
初步方案
基于以上结论，以客服工作台-客服生产为例设计出灰色、绿色、黄色三版设计方案。
2、设计方案验证
结合主观调研和客观实验验证，在客服作业场景下研究哪种色系方案为护眼最优方案。
眼动实验
实验对象
10名，5男5女，设计/产品/研发/业务（主要为客服业务条线相关），还邀请到两名一线客服用户；
实验组
为了模拟用户一天中实际的视觉状态，分为3组实验小组，分别为视觉状态良好（10点～11点）、视觉状态疲劳（16点～17点）、无室外光线（20点～21点）；
实验过程
3组用户佩戴眼动仪浏览4个设计方案（白、灰、黄、绿）5分钟，间隔休息2～3分钟，并且在每个方案实验前后都设有主观问卷评估用户视觉疲劳度，总用时30分钟左右；
实验条件
实验环境100平米以上开放空间、背景颜色为灰色、光源色温5000K/照度2000l、显示器色温4500K、亮度日间日光180cd/m²、夜间LED100cd/m²、清晰度50%、对比度90%；
实验结果依据
眼动数据（注视点、瞳孔直径）、心率监测、主观评价。
注视点
注视点越聚焦、注视时间越均匀则视觉负担越小；
*分析参与者在不同颜色界面上的注视点分布
瞳孔直径
平均瞳孔直径越小，变化趋势越平稳则视觉负担越小；
*瞳孔大小的变化可以反映视觉负荷，当视觉任务相对简单，或眼睛适应良好时，瞳孔倾向于保持在较小的状态
心率
平均心率越小，变化趋势越平稳则视觉负担越小；
实验结论
以上数据表明灰色、绿色、黄色的整体数据表现均优于白色，所以相较于白色其他护眼色更有助于改善视疲劳。
用户调研
现场调研
客服中心现场调研用户13名，10名用户选择灰色（76%），2名选择黄色，1名选择绿色。
问卷调研
用户306人，136人名选择灰色（44%），37人选择绿色，60人选择黄色，33名用户选择其他。
结论
在客服工作台的实际作业中，灰色、黄色、绿色背景页面均能有效缓解刺眼、视疲劳等问题，45%的人选择灰色模式，主观更偏向灰色背景。
四、方案推进
1、设计方案落地
色阶矫正
根据实验结果及规范色阶，进行原色与灰、绿、黄三系护眼色阶的映射关系矫正，确保系统实现护眼模式的同时，不降低信息可读性及操作效率。
梳理颜色
客服生产静态模块颜色定义148处，以及弹窗及其他折叠展开功能颜色定义154处，对全部颜色进行梳理并整合至29个原色。
颜色编码化
梳理线上颜色使用不规范问题，最终整合需改造颜色29个进行编码化，并对编码进行定义、使用描述、对应原色值与护颜色值，并支持拓展其他护眼色系。
最终方案
根据矫正后的护眼色优化设计方案，并在客服系统进行主题切换设置，实现护主题/护眼色一键换肤。
交付开发
将颜色编码在页面上进行结构化标注，并交付开发，结合颜色编码表，实现一次开发上线三套护色
2、现场使用情况
可用性测试
客服工作台护眼模式于25年初完成灰色护眼主题上线，5月完成绿色、黄色护眼主题已完成全量上线，通过客服现场多次走采访及数据采集得出，全国职场护眼模式开启率年均35%，用户视觉疲劳情况的到明显改善：
•北部职场：护眼开启率28% ，灰色占比较多；
•南部职场：护眼开启率45% ，灰色/绿色占比较多；
•西部职场：护眼开启率35% ，绿色占比较多；
•东部职场：护眼开启率20% ，灰色占比较多。
实操感受
在职场轮岗实操过程中发现，在视觉疲劳度较高、屏幕显示效果较差情况下，灰色护眼模式为最佳选择方案，可降低视觉疲劳度、同时不损失信息可读性。
总结：
护眼模式受职场环境、自然光照、人工光源、工位密度、职场氛围、个人颜色喜好、使用习惯、基础视力、视觉疲劳度等多方面因素综合影响，因此为用户提供多种配色方案，用户可根据自主选择切换，验证目前三套护眼方案可行性较好，可以满足不同用户护眼诉求。
3、纳入组件规范
目前已协同快递、快运、供应链、客服、商家、国际等条线的研发同学共建LUI3.0物流B端系统组件，以解决目前物流系统操作体验不一致的问题。同时将护眼色编码升级为物流护眼公共编码，便于适配于物流全系统使用。
LUI3.0物流B端系统组件目前已完成60+个基础组件开发，计划将护眼模式纳入LUI3.0组件，同时增加护眼色板，实现一键切换护眼模式，解决用户视觉疲劳问题，提升工作舒适度。
4、赋能物流系统
目前除客服工作台，越来越多的系统有用户护眼的需求呼声，计划将护眼色纳入PC3.0规范后，可以实现物流全系统的护眼模式切换，以降低物流一线员工的作业视觉疲劳度，提高生产操作效率及用户体验。
仓储管理系统 PC/手持端
仓储订单界面护眼模式前期已在北京亚一无人仓试点，整体反馈较之前白色更加舒适，现场反馈及线上换色情况效果较好，逐步覆盖高频操作页面，目前已全国推广上线；
国内商家工作台
根据场景调研，商家用户有强烈的护眼换肤需求，因此在国内工作台全系统页面实现护眼模式切换，覆盖多商家条线，计划于26年全面推广上线。
我们期望，未来也将护眼模式赋能更多物流一线系统，提升用户体验，助力生产提效！
