您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

成长值达到300分以上才可以发布哟!~

先看看别人的即刻>

大润发优鲜app CMS活动配色模版

原创文章 分类: 经验/观点 版权:
828 8 4 0
2019-03-04
4.1
普通推荐

大润发优鲜app CMS活动配色模版一套具有138种配色方案的后端管理系统,运营部署根据活动banner主色调,就可以很好搭配活动页色系搭配

Image title


简述


项目背景:

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


Image title


痛点

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


Image title



Image title



Image title



分析:

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


流程:

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


Image title

  Image title



解决方案:

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


Image title



色彩模块:

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



Image title


Image title


Image title


Image title


Image title


Image title



头脑风暴

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


Image title


设计目标:

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


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


Image title


Image title


产品目标:

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


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


Image title



Image title




Image title




Image title




Image title




Image title




Image title




Image title




Image title




验收反馈

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

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

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

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


Image title



Image title



Image title





Image title




Image title




Image title




Image title




Image title




Image titleImage title





/ / /  END  / / /

























YFUX

微信号:YFUX,归零设计思维模式

6粉丝/24关注

收藏家lv.2
TUTOR DUCK app首页优化UI视觉对App用户体验的导向性作用

YFUX

YFUX

微信号:YFUX,归零设计思维模式

收藏家lv.2

扫描二维码
去手机端查看海报

YFUX

TA已经获得2枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN

Cw9sdfed

朕收下了