应用体系

颜色是用户感知界面内容以及产品调性的最直观方式。通过合理克制的色彩搭配能提升用户界面的可用性,提升产品体验的一致性,强化品牌感知。

原则

根据京东零售设计语言价值观,我们延展出产品色彩运用原则。

品牌性

界面中与品牌、业务、主要功能相关的控件应使用品牌色,直观地强化品牌感。

识别性

界面中的色彩使用应建立起足够的对比度,清晰易读,互不干扰。

包容度

界面中的色彩应兼顾浅色及深色使用场景,通用、包容、自然和谐。

构成

京东零售色彩体系主要由核心品牌色、辅助色、渐变色、中立色构成。色彩依据场景承载着不同的品牌及功能任务。

品牌色

京东红 Pantone 485C,是专属于京东的品牌色。它代表了热情、鲜活、澎湃的生命。在界面应用场景中(如LOGO、行动点、利益点、模块)应保持原色,不应减暗或调亮。

辅助色

辅助色色板依据京东红延伸而来,为特定功能的内容(如服务图标,标签,栏目背景,插图等)提供色值参考。

渐变辅助色

随着业务、功能入口的不断增多,更具个性化和识别度的渐变色卡可补充品牌色及辅助色在不同产品上的表现。

中立色

中立色在界面中占主导地位,利用明度的梯度变化来组织信息层级,梳理页面主次关系。

设计指导

色彩选择

在色彩选取时,需明确色彩在界面中的应用场景及范围,传达符合业务调性的色相感知。
当存在多个色相的场景,应保持统一的色彩对比度,提升色彩识别效率。

避免:

不宜使用与业务调性不相符合的辅助色


渐变应用

渐变色应营造柔和、沉浸、品质的品牌调性。在产品场景的应用中,需避免使用大量对比色的渐变。

避免:

不宜使用撞色渐变