首页/风格学院/JD.com (京东)

设计风格指南

什么是 JD.com (京东)?

JD.com (京东) 设计风格示例

京东将深红与密集网格锻造成中国电商信任感的专属语法——每一个像素都以销售为己任。

JD.com (京东) 速览

京东的视觉体系是全球商业化程度最高的设计系统之一。它以品牌专属的深红色为核心,铺展在洁白底面上的密集多栏网格中,最大化用户单次视野内能看到的商品数量。这套系统同时传递着两层信息:节日的紧迫感与机构级的可信赖——既有购物大促的狂欢能量,又有自营仓储物流的底气。

这套风格的核心是信息密度与可读性之间的精密博弈。中国电商用户是高度训练有素的视觉扫描者,在零点几秒内完成购买决策;设计系统为此将价格设计为商品卡片上最大、最醒目的排版元素,并在其周围布置一整套视觉线索——划线原价、促销标签、倒计时、金色大促角标——让用户在有意识阅读任何文字之前,就已完整接收到商业信息。

这套风格还具有鲜明的季节性。每逢六月的618年中大促与十一月的双十一,整体色调会向更强烈的红金组合倾斜,借用中国春节视觉语汇中的喜庆能量。这些大促覆层叠加在日常系统之上,而非取而代之,形成一套可预期升级的分层视觉语言——从常规零售模式平滑切换至全节日模式。

JD.com (京东) 设计风格用在文章页上

JD.com (京东) 从何而来?

京东的历史可追溯至1998年。彼时刘强东在北京中关村电子卖场开设了一个小柜台,销售磁光存储产品。公司以实体零售连锁的形式运营,直至2003年非典疫情迫使门店关闭。面对断绝的客流,刘强东转型线上销售,最初通过论坛发帖,后于2004年建立专属网站。这次被迫转型意义深远:京东将成为最早认识到互联网不是实体零售补充,而是全新商业基础设施的中国大型零售商之一。

视觉体系经历了两个截然不同的演变阶段。早期线上化阶段,京东的设计语言与其他中国电商平台大同小异——信息繁密、色彩浓烈、以多数中国互联网零售商惯用的红色主导色系传递折扣与兴奋感。如今与京东深度绑定的深红色,在2000年代中期随着公司成长为真正意义上的全国性零售商而逐渐固化为专属视觉资产——彼时品牌迫切需要将自身与阿里巴巴正在构建的淘宝开放平台模式区别开来。

从2007年前后自建的物流网络,从根本上塑造了京东的视觉文化。阿里巴巴以平台模式连接第三方卖家与买家,京东则自营库存与配送。这一运营差异在视觉上形成了对应的分野:淘宝如同集市——喧闹、风格各异、由卖家自定义;京东则发展出更统一、更具机构感的美学,传递出可靠的信号。全触点使用一致的深红色,加上后来推出的萌趣JOY狗吉祥物,共同强化了一个核心信息:用户面对的是一家有凝聚力的完整公司,而非陌生人组成的集市。

京东于2010年前后以公司周年纪念日(6月18日)为契机设立的618年中大促,既是商业事件,也是设计体系的催化剂。构建一套规模足以与阿里巴巴双十一抗衡的年度促销活动,要求开发出能够容纳数千商品品类、数十参与品牌、首页主视觉横幅与单品级价格图形的可扩展视觉系统。如今定义大促模式的红金配色,正是在2010年代历届618与双十一的迭代中精炼而成——在最大视觉能量与足够结构秩序之间找到平衡,确保在高认知负荷下依然保持良好的购物可操作性。

JD.com (京东) 的视觉特征是什么?

标志性红色

京东色板的核心是一种深邃、饱和的深红,同时承载中国节庆寓意与品牌权威。它既不是偏橙调的紧迫感警示红,也不是可口可乐的偏蓝调红——它落在一个特定区间,同时散发出传统气息(令人联想到春节装饰与红包)与当代感(传递数字自信与零售规模)。这个颜色出现在每一个主要行动号召上——购买按钮、价格标签、促销角标——而周围的画布保持白色,以最大化对比度与可读性。

密集网格架构

布局系统建立在多列网格之上,经过精密校准以在不造成视觉混乱的前提下展示最多商品。商品卡片紧凑排布,间距控制在既给予单品足够呼吸空间、又尽量保留整体密度的精妙节点。网格是层级化的而非均质的:精选商品与促销位占据更大的网格单元,标准商品列表填满更细密的子网格。这套架构针对有经验的中国电商购物者的浏览行为优化——他们同时进行横向与纵向扫描,期望在首屏看到充足的选品数量。

价格排版

价格数字是京东设计系统中的排版主角。它们以商品卡片上最大、最重的字重出现,字形圆润而骨架有力,在小尺寸下依然清晰可辨。促销价以标志性红色呈现,原价或划线价以较轻的灰色出现,形成即时可感知的视觉层级,让用户无需计算便能读懂折扣幅度。大促期间,价格下方可能附带额外的上下文标签——标注会员价、优惠券减免或阶梯购买激励——每种标签都有各自一致的排版风格。

红金节日模式

在重大促销活动期间——最典型的是六月的618年中大促与十一月的双十一——标准红白系统向红金色域扩展。金色取自中国新年的视觉词汇:寓意财富、丰盛与喜庆。节日模式下,横幅背景转为浓郁红色调,标题与倒计时获得金色强调,装饰母题借鉴中国传统节庆图像——铜钱、彩带与几何吉祥纹样。这套覆层系统的设计目标是在不抛弃底层网格逻辑的前提下,将情绪强度提升至最高。

JOY吉祥物融合

JOY狗——一只以银色金属感呈现、造型圆润近乎玩具风格的三维卡通狗——在信息高度密集的商业界面中提供了性格点缀的喘息空间。这个吉祥物出现在品牌温度需要升温的时刻:空状态页面、订单确认成功、节日祝福与吉祥物主题促销活动。其银白配色刻意保持中性,不与主导性的红色系争抢视线,同时构建起一个令品牌更具人情味的情感维度。JOY是整套设计系统高度功能化密度中经过深思熟虑的一处对照。

促销标签体系

京东运行着一套附着于商品卡片的完整视觉标签体系,用以传递促销状态、配送速度、正品保障与会员权益。每种标签类型在系统内都有固定的颜色与形状:配送速度指示、进口商品正品标、会员专属价标记与闪购倒计时标签,各自占据商品卡片网格中的指定位置。单张卡片上多个标签并存的视觉效果是刻意为之——它在不依赖文字描述的前提下,以信息密度传递出丰富商业生态的信号。

轮播与主视觉横幅节奏

首页与品类页的主视觉横幅被视为高冲击力的编辑空间,与下方整齐的商品网格形成对比。横幅以较短间隔自动轮播,制造出与静态商品网格相映成趣的动态节奏。每张横幅都是自足的视觉单元:强烈的背景色调(最常见的是红色或商家提供的品牌色)、商品或生活方式摄影、大号醒目字体设置的标题与价格呼吁语。轮播速度与横幅的视觉重量经过校准,先将用户视线从商品网格引向上方,轮播结束后再自然释放注意力回归网格。

JD.com (京东) 设计风格用在仪表盘上

谁塑造了 JD.com (京东)?

Liu Qiangdong (Richard Liu)

刘强东于1998年在中关村创立京东,起初是一家实体电子产品零售商,并在2003年非典疫情期间主导了公司向电商的转型。他坚持自建物流网络——这在当时与主流的轻资产平台模式相悖——不仅定义了京东的运营模式,也塑造了其视觉体系:红色快递员制服、品牌化配送车辆与统一产品包装,成为京东设计系统向物理世界的延伸。刘强东对正品保障与反假货的强调,与淘宝开放平台模式形成对比,也深刻影响了品牌在视觉传播中对信任感与机构公信力的表达方式。

Xu Lei

徐雷先后担任京东零售总裁与京东集团CEO,任期内公司设计与品牌体系臻于成熟。在他的主导下,京东在品牌营销上大力投入——包括JOY吉祥物计划与多个国际奢侈品及高端消费品牌的联名合作——使品牌视觉体系从折扣电子产品零售的起点,向更宽泛的品质定位跃升。京东向生鲜、时尚与国际商品等品类的扩张,要求设计系统在容纳更宽色调范围的同时,保持核心的红白结构性标识不动摇。

JD Brand Team

京东内部的设计与品牌团队负责维护数字商业领域运营需求最为苛刻的设计系统之一。管理一个跨越数百品类展示数百万SKU的平台——同时维护从首页主视觉横幅到单品详情页再到实体配送包装箱的视觉连贯性——需要将设计作为系统工程而非项目工程来对待。团队开发并推行了模板库、组件系统与季节性活动框架,使数以千计的商家合作伙伴能够参与京东的促销日历,而不破坏整体平台体验的结构一致性。

JOY Mascot Designer

JOY狗吉祥物作为京东品牌人格化战略的组成部分而诞生,有意与平台日常界面主导性的商业密度形成对照。JOY的设计任务书在跨文化吸引力(配合京东国际化布局)与深度本土共鸣之间寻求平衡——在中国文化语境中,狗承载着忠诚与好运的正向寓意。三维银色金属感的造型被选定,是为了赋予JOY区别于其他中国互联网品牌常见扁平卡通吉祥物的高品质、当代感;而角色的表情与姿态则被设计成与京东服务承诺相符的温度与可靠感。

618 Shopping Festival Culture

以京东成立纪念日(6月18日)命名的618年中大促——与其说是某一个人,不如说是一种文化机构——对京东视觉体系的塑造力不亚于任何一位具体的设计师。618约于2010年前后创立,逐渐成长为规模可媲美双十一的全国性零售事件,驱使京东开发出能够同时承载所有品类促销活动的可扩展促销设计系统。年复一年地在如此体量下产出视觉连贯的节日体验,这一创意需求推动了红金配色、促销标签体系与模块化横幅架构的成熟——它们如今共同定义了京东在最高流量时段的美学面貌。

今天怎么用 JD.com (京东)?

京东设计语言非常适合需要同时传递商业紧迫感、商品密度与消费者信任的场景。这不是一种通过克制实现优雅的风格,而是通过有序丰盛实现冲击力的风格。要用好它,需要理解系统内部的运作逻辑——色彩信号的层级关系、密度与呼吸空间的角色分配,以及促销升级与视觉噪音之间的边界。

在演示文稿中,京东美学对以商业叙事或新品发布为核心的封面页与内容页均有良好的适配性。封面幻灯片适合使用这套风格标志性的高对比结构:深红色调占据幻灯片的主要面积,配以粗重白色字体标题,以及一个在深色底面上具有强烈视觉存在感的次要元素——商品图像或关键数据。内容页应切换至白色主导的色调,红色仅用于主要数据点、核心数字与行动号召。数据页具有零售仪表板的特质:以标志性红色呈现的粗重数字锚定核心指标,支撑数字用黑色,上下文标签用灰色。避免将红色均匀分布在所有数据元素上——它应当强调每张幻灯片上唯一最重要的数字。

对于网页UI设计,尤其是仪表板、定价页面与商品目录界面,这套系统可以直接迁移应用。建立具有一致间距的多列网格,以白色为主要背景,将深红色专门用于交互状态、主要按钮、价格呼吁与告警条件。卡片组件应有明确的边框或轻投影,而非无边框悬浮——系统在高商品密度下的可读性依赖于清晰的边缘定义。促销或精选区域可以红色背景色块标示优先级提升,无需额外的字体重量支撑。导航与功能性元素应保持中性——深灰或黑色——以保留红色对真正需要操作的内容的色彩冲击力。

对于编辑与营销内容——大促落地页、促销邮件、社交卡片——这套风格支持传递规模感与自信感的海报式大胆设计。全宽横幅区域可以深红为主背景,配以金色强调排版元素,呈现高能量节日感。促销倒计时、价格揭示机制与阶梯优惠结构都是这套视觉语言的本土元素,可以直接转化为营销传播设计。在非明确促销的编辑语境下应用时,降低促销标签密度,以更大尺度的商品摄影为主导——摄影完成商业说服工作,红色排版提供结构锚点。

应用京东设计语言最常见的错误,是将密度与混乱混为一谈。这套系统以高信息密度运转,但每个元素在刻意构建的层级中都有固定的位置。在核心红-白-金系统之外引入额外颜色——紫色、青绿色或橙色强调——会打破色彩逻辑,产生视觉噪音而非丰富感。同样,将红色同时用于过多相互竞争的元素,会剥夺它标示优先级的能力:如果所有标签、边框与按钮都是红色,则没有任何东西是重要的。将标志性深红保留给任何给定界面上唯一最重要的商业信号,让周围的白色底面完成对比的工作。

JD.com (京东) 设计风格用在幻灯片 · 封面上

JD.com (京东) · 常见问题

京东风格等同于通用中国电商设计吗?

两者有共同起点,但已形成明显差异。早期中国电商设计在所有平台上普遍以红色为主导,反映了一种共识:红色向中国消费者传递折扣与喜庆信号。京东的风格已从那个通用起点演进为更具品牌专属性的系统:是专属色调的深红而非通用红,是机构感更强的有序网格而非早期淘宝集市式的喧闹,以及作为品牌专属性格层的JOY吉祥物。最核心的区别在于机构感与集市感的对立——京东设计系统传递的是一家有凝聚力的完整公司,而通用中国电商美学反映的是数千个体卖家叠加的噪音。

京东风格能应用于非零售场景吗?

这套风格的核心词汇——高对比度红白、密集信息网格、强势价格排版——深度针对零售场景优化,在几乎任何应用中都会被读解为商业属性。也就是说,系统中的特定元素确实能够迁移至其他高信息密度场景:物流或运营团队的内部仪表板可受益于系统即视感的核心指标呈现能力;软件产品定价页可借鉴阶梯优惠的视觉结构;信息量大的编辑设计可使用粗重数字风格呈现引用统计数据。关键在于选择性采用——使用系统的结构逻辑,而不导入完整的促销语态,后者在非零售语境中会显得格格不入。

京东风格如何处理高端或奢侈品的定位需求?

这是系统内部真实存在的张力。京东在与高端品牌和奢侈品牌建立信任方面投入了大量资源——自营物流与正品保障体系使其对永远不会入驻开放集市的品牌具有吸引力。实践中,平台通过构建差异化子环境来处理这一问题:高端商品详情页降低信息密度、扩大图片尺寸、使用更充裕的间距,并压制促销标签层。标志性的红色可能退缩为单一强调色,甚至完全消失,让位于白底上的中性深色排版。这种可调性表明,基础系统是一种默认设定而非约束——京东上的奢侈品模式本质上是一个做减法的练习。

京东为何选择如此高的信息密度,而非更简洁的布局?

高密度反映的是对用户群体的深刻理解,而非设计失误。研究持续表明,有经验的中国网络购物者会将稀疏的布局解读为选品有限的信号——视觉上的丰盛暗示着庞大且可信赖的库存。高密度也反映了中国智能手机使用模式的现实:用户快速滚动、频繁点击,在做出购买决策之前期望看到大量选项。设计系统的密度正是为这种行为模式校准的,而非为极简生活方式品牌的沉思式浏览体验。这正是为什么将京东与倾向于更多留白、每屏更少商品的西方电商平台进行直接审美比较,往往会将京东的密度误读为噪音,而非刻意为之的设计。

如何使用京东节日模式而不让人感觉是在生搬硬套?

节日红金覆层之所以有效,是因为它是真实的文化符号——不仅仅是一种配色,而是中国受众能够辨认并在情感上将其与喜庆和财运联结的视觉语汇。在京东以外的场景应用这套语态时,关键在于语境的正当性:红金组合在与重要中国节日同期举办的新品发布、面向海外华人群体的品牌传播,或明确庆祝某一里程碑的促销活动中是合理的,但作为毫无节日关联语境的通用兴奋感配色,则毫无依据。节日语态还需要底层系统的结构纪律约束——脱离基础京东美学的网格逻辑与排版层级,红金组合会迅速滑落为通用节庆装饰,而非有目的的商业传播。

获取 JD.com (京东) 完整设计系统 →