2021年初，京东云用户体验设计团队已经推出服务于京东云产品设计的Artdeco设计语言体系。ArtDeco Design设计语言包括 Official Website，Data Visualization，Platform，Mini Program等系列产品的设计规范。
紧接着团队跟随京东科技官网、京东云官网迭代焕新，以及to B、to G的业务方向。随即也完成Artdeco设计语言体系当中的UI、2.5D、3D、Data Visualization四个部分优化。
如何让设计语言体系更具品牌特色以及更好服务B/G端产品设计，今天给大家聊聊最新版本的Artdeco设计语言体系。
1、Color &Layout
Color
颜色是非常主观的一样事物。不同颜色会唤起不同人的的情绪反应，所以颜色是整个品牌设计系统最有表现力的要素之一，规范色彩的统一性，可以提升品牌辨识度，也可提高团队之间的工作效率，从而达到整体视觉设计的和谐统一。
我们引用京东科技FIND系统采用的HSB色彩模型算法，进行业务品牌延伸定义，分为品牌色和基础色两部分。
1. 品牌色板
根据品牌色彩规范，京东红为品牌标准色，科技黑为品牌辅助色。并且根据不同的目标人群，相应也划分了to G、to B、to F 三种业务色来针对目标受众使用。
为避免单调在不同场景下辅助色配合京东红使用，根据使用场景情况，可适当调整颜色配比。
2. 基础色
基础色板共计130个颜色，包含13个基础色以及5个插画系统衍生色。这些颜色基本可以满足各业务线设计中对于颜色的需求。
3. 中性色板
中性色包含了黑、白、灰。主要应用在文字、背景、分割线等基础元素中。根据模块、文字的权重，选择合理的中性色并使页面信息具备良好的主次关系，助力阅读体验。
Layout
为了提高线上各产品线的规范性一致性及开发维护成本最低化，采用基础的24/12栅格简单便捷的创建布局。
栅格系统是对界面元素进行横向排布时需要遵循的模式，不适用于类似图标与文字间隔的小型元素安排，而是用于大型区块间距的安排。
1. 栅格化的基础概念
栅格化是通过确定等分的单位宽度以及单位宽度之间的间距，把单位宽度进行组合的一种排版方式。
基于官网目标用户群分辨率情况，选用常规适配方案，即网站基于1920尺寸定义设计稿宽度，以1240为断点，内容版心的核心区域为1200PX，两侧留白则用户适配不同屏幕尺寸。并采用最为通用的12列栅格系统，间隔为24px，列宽根据屏幕宽度断点自适应。
1200版心：
- W=1200，i=20(10的倍数)，n=12，a=80
- W=(80+20)*12=1200
一般情况 12 栅格能适应大部分场景，可以将屏幕空间等分为 2、3、4、6 份，可以满足各种复杂信息的拆分布局的场景。
除了等分布局，12 栅格在不对称布局时也能进行较和谐的比例划分，如双栏布局时的 4+8 栅格，3+9 栅格。三栏布局时的 2+8+2 栅格，3+3+6 栅格。
当屏幕宽度小于768px时，系统应将判断为移动设备，页面跳转或媒体查询方式呈现移动端页面。
京东云首页12栅格化效果：
所有内容皆在版心1200px内，图片内容块是A的倍数，多数内容间距24px，根据内容灵活应用栅格
2、2.5D
ArtDeco 2.5D 是服务于京东科技的设计语言。基于新的品牌理念和视觉风格，我们进行了2.5D视觉语言的升级。从颜色、透视、质感、构成方式等方面塑造2.5D物体的风格。并从场景化和模块化角度，组建2.5D的设计规范。希望能够更好地诠释京东科技的品牌理念，助力拉近云产品与用户的距离，同时让ArtDeco设计语言更具应用性和灵活性。
升级目标
新的2.5D风格的升级主要有两个方面：
一是2.5D物体的塑造。由于2.5D是在2D平面上绘制的插画，本质上应属于2D插画设计，因此也遵循点、线、面、体的构成方式。而2.5D插画是为了表达3D物体的效果，因此要追求3D物体的透视、光影和质感。
二是贴合品牌理念和应用场景。京东科技是专注于以技术为产业服务的业务集团，依托人工智能、大数据、云计算、物联网等前沿科技能力，致力于为企业、金融机构、政府等客户提供全价值链的技术性产品与解决方案。服务于京东科技的设计语言也需要体现其业务特点，在视觉语言上应避免复杂，体现科技感，符合产品的应用场景。
设计升级
1. 物体的塑造
2.5D物体的塑造主要由透视、圆角和光影组成。在2D平面上构建统一的透视网格来绘制构成2.5D物体的线和面，在构成物体的过程中保持透视统一性。我们希望2.5D物体呈现出严谨、简约的风格，赋予物体统一的圆角，在光线上采用更加柔和的光，接近于3D物体的视觉效果设计更拉近与用户的距离。
统一的网格系统
统一的透视、角度和光影
2. 场景的塑造
物体的场景构成方式决定了2.5D插画的风格，在不同应用场景的搭建中，综合运用物体的形状、颜色、质感，进行场景元素搭建和场景光线布局。
颜色是画面的灵魂，在B端场景下，我们选取京东科技品牌色延展出来的色彩体系，进行2.5D物体的色彩设计，体现品牌感和科技感。
色彩系统
取色原则
物体的质感与光线相结合会形成多种不同的风格，磨砂质感给人冷静、细腻的感觉，透明塑料和玻璃质感给人以活跃、明快的感觉。在运营设计中常常使用较多玻璃材质和发光材质，以营造活跃的氛围。
不同颜色和质感的元件
规范建立
2.5D设计语言规范的建立要保证其风格的延续性和应用的灵活性，同时满足设计师的创造性。我们定义了基本元件的透视、形状、颜色、质感。定义元件的构成方式有四种：堆叠、组合、发散和嵌套。在场景搭建过程中，综合控制画面中颜色和材质的比例，以保证整个画面的风格统一性。
3、3D
作为一个新的产品平台，向用户的传达的目的是明确出行业的特点，突出产品所属行业特性。所以我们在京东科技品牌与京东云平台中寻找品牌中的行业关联，引申出专属于云平台概念的关键字，【通透、呼吸、强层次感】产出更合理识别性更强的3D组件升级。
模型创建
针对本次3D化升级，主要目的以用户将2.5D作为主体视觉风格的原始记忆升级到3D主要视觉风格来提升画面效果增强视觉识别性赋予更多空间展现品牌功能特性。原因为3D设计风格更加干脆严谨，高度概括的视觉集合可以突出文字并渲染氛围效果，强化产品严谨秩序化感觉，突出产品特点，突出内容重点。
在保持识别性的同时，保持了原2.5D的整体视觉走向并保证了足够的简单性。能够展现品牌调性与产品功能。
色彩选择
在本次色彩搭配上我们选择的主要色调为京东科技的品牌配色，以确保与京东科技的品牌一致性。
为强调产品氛围，高饱和的颜色更突出未来科技感，突出了主体并增强了产品本身的丰富性，使整体视觉更有层次感，为了保证不影响品牌本身颜色的缺失我们限制了颜色的使用比例强化了对品牌色的应用。
材质筛选
本次使用的主要材质为两种，【金属材质】在环境光下呈现出强烈的反射，这种反常规反射质感所带来的强烈违和，在传统磨砂金属材质所表达的科技感上增添了更加强烈的视觉反差。【柔光玻璃材质】可以营造通透的视觉感受，配合高反射金属营造出未来感十足的场景，适合阐述科技智能的设计概念，氛围感会更强。
成果输出
在本次设计升级中，我们放大了科技产品的特性。为用户带来新的设计风格与品牌概念新的认识和理解。
4、Data-V
数据可视化资源库主旨提炼一套应用于京东科技企业级产品，集交互场景、系统模版、视觉规范和设计组件为一体的数据可视化交互语言和视觉体系。它将指导设计师更加高效的提升设计规范和质量，降低资源成本的投入，方便设计师快速搭建，保持品牌一致性。
颜色系统
在此次升级中，建立了更加完善的颜色系统，来适应不同数据场景和不同业务的使用。我们选取京东科技品牌色延展出来的色彩体系进行提取和增加，提供了4个类型的调色板：标准色、拓展色、顺序色板、发散色板，体现品牌感和科技感。
大家需要注意的是，在数据可视化设计中，由于大屏是偏暗的。在配色中，尽量避免“高饱和度&高明度”以及“低饱和度&低明度”的组合。双高会使颜色过于明亮鲜艳使视觉疲劳，双低会使色彩气氛昏暗较难区分。在进行配色方案的过程中需要耐心实验，找出合适的色彩组合。
丰富组件
在本次设组件化升级中，为了确保项目的优质生产和高效搭建。我们将经典的设计原则和科技、创新相结合。通过前期可视化资源沉淀，我们抽象、分类总结提炼出一套完整的可视化场景、3D模型、数据可视化图表面板、基础元素组件进行规范入库，做到快速调用来满足项目设计与开发的不同需求。
场景涉及数字城市、应急管理、产业服务、智能设备监测等。功能复杂，场景多变，让用户拥有所见及所得的决策能力。
这些资产会根据项目积累不断迭代更新，丰富整个行业资产库。
从设计单一的数据图表到创造整个数据可视化规范体系是一个不断积累、验证、整合的过程，我们不断挑战自我，挑战固化模式。我们会随着业务、产品、设计趋势的发展不断迭代和生长，持续维护更新，让数据可视化资源库更好的服务于产品设计，长远持续地输出价值。
小结
设计语言系统，运用统一的设计风格融合系列产品，既保留了系列产品的品牌属性，又让产品各具特色。在设计工作中，保证了设计师的创造力，提高了设计团队的工作效率。
本次Artdeco设计语言体系升级从风格优化确立到落地实施，都立足于服务于B端产品设计升级，加强品牌风格特性。后续还将给大家分享Artdeco设计语言体系助力品牌、业务以及活动产品设计，还请期待。
