简述

项目背景：

大润发优鲜app CMS活动配色模版一套具有138种配色方案的后端管理系统，运营部署根据活动banner主色调，就可以很好搭配活动页色系搭配，彻底解放了设计师的设计工作压力，也避免运营管理者对色彩专业的不熟悉，存在色彩搭配混乱的现象。

痛点：

大润发优鲜app全国有400多家门店，各区会同时间段部署不同的活动，这对设计师、运营部署来说，都是不小的工作压力，受制设计人力资源紧缺问题，大多主题活动承接页由运营编辑配色，运营编辑对色彩专业的掌握有限，从而导致配色不搭的情况时有发生。

分析：

如何解决活动专题配色存在的问题，是UED团队急需解决的，解决方案必须满足提高工作效率、操作简单、解放设计师配色工作量三大难点；只有系统操作简单、减轻设计师的工作量，才能从根本上提升工作效率。

流程：

有了目标方向后，我们就可以梳理目前的工作流程，找出问题节点；为解决运营编辑存在的配色不搭配问题，设计师想出了给运营编辑标注色号（如下图），运营编辑只需按设计师提供的色号搭配就OK了，这样会比较规范些，但又产生了新的问题，设计师的设计工作量会增加，也有些运营编辑不按设计师提供的色值搭配。

解决方案：

那么能不能把设计师的配色工作前置化，彻底解放设计师的配色设计工作，让运营编辑的活动部署更简单，更省时呢？通过走访运营编辑、设计师，我们的UI团队发现：活动页部署，80%是暖色系为主，20%是冷色系（如下图）；冷色系主要是冷冻冷藏、水产品类为主。红色、洋红、橘色、橙色、黄色居多，蓝色、青色、绿色最少，那么根据这些色系，设计出配色模版，就可以把配色工作前置化。

色彩模块：

有了解决方案的思路后，我们制定色系模版，通过色彩的色相、饱和度、明度去找配色方法，这样更好掌握配色模版的尺度。

头脑风暴

找出配色模块后，UI设计师的思维被卡顿了，色彩模块有了，怎么去运用这些色彩模块来设计模版，怎么做取舍，从产品、设计、体验上怎么定义、又怎么命名、怎么使用，就这些问题，我们进行了几轮深入讨论，遵循归零设计思维模式，走访公司运营部，从使用者角度出发，理清了设计思路（如下图）。

设计目标：

多色系支持：色系模版色系一定要满足产品需求和设计目标，经过分析统筹，UI团队决定分为群青、蓝色、青绿、若竹、绿色、薄荷绿、深绿、草绿、紫红、红色、红赤、粉红、红梅、橘红、橙色、郁金、黄色、紫罗兰、青紫、紫色、牡丹、咖啡、赭石23种色系，每种色系有6种色彩搭配方案，主要通过色彩的饱和度和明度做区分，其中2种色彩做反白效果处理; 23x6=138, 138种配色方案，足以涵盖活动页配色需求了。

色彩规范管理：138种配色方案，得通过模版色号、设计元素命名规范来管理（如下图），这样才能规范UI设计和前端开发沟通流程，节约沟通成本，从而达到产品可用性开发。

产品目标：

多店个性化管理：大润发全国有400多家商超门店，共分5大区，产品设计要求能单店、跨店、按区、跨区部署活动，也就是说这套配色系统必须要满足这个产品需求，从后端系统布置来说，这并不是难点，难点在于运营编辑对模版的配色认知程度，这就需要有设计师向他们传达每个活动具体用那套颜色，产品设计师想出了一个比较可行的方案，给138套配色方案进行命名编号，布置时告诉运营编辑用那套色彩编号就行了，以群青色系举例说明：“具体操作，第一步：选择“群青”色系；第二步：选择1、2、3、4、5、6中的一项，就可以了，选好了就可以按“预览”键看效果，确认无误后就发布（如下图流程）”。

设计师定制化：如果设计师对138种配色的方案都不满意，那么设计师还可以自己配色，出色彩标注图，传给运营编辑，运营编辑根据设计师的色彩标注图，给每个模块输入对应的色彩编号就可实现自定义配色了。

验收反馈

大润发优鲜app CMS活动配色模版后端系统上线后，经运营、设计师反馈意见：

1、达到产品设计目标，体验效果很好，工作效率提高很多，省去了巡店工作时间。

2、设计师只需给色彩模版编号，不需要再重新配色，解放了色彩搭配设计工作环节。

3、规避了色彩搭配混乱的情况发生，进一步提升大润发优鲜app质感调性。

/ / /  END  / / /