京东云产品形象设计的探究

UI
4月29日
编辑

JDTDA

京东云产品形象，是将京东云的产品和服务进行视觉化、规范化、系统化的设计，从而实现更直观的视觉传达。基于不同产品和服务的特征与特点，结合京东云品牌风格与及企业理念，全新定义了统一的设计原则、视觉传达（颜色、质感）、构成规则（栅格、尺寸），在抽象与现实中找到平衡点，使传达更简单、更直接。

一设计原则

1、设计思考

云产品的形象设计中有两个很大的难题，一是如何将不是日常生活常见的云主机、服务器等形象符合大众认知的表现出来？二是如何更好的区分某些看起来类似的产品和服务？所以对于表现形式的选择至关重要。

首先是要体现出创新的科技感和未来感；

还要在认知中基于现实，结合想象，在抽象与现实中找到平衡点；

建立统一的设计规则，保证风格的一致性；

一种风格可能无法满足京东云业务体系中所有场景下的设计需求，所以采用3D、2.5D、线性icon这3种设计风格。

2、设计原则

通过基于实际应用场景的设计思考，确定了这4个设计原则，并以简单的几何形体作为设计原子，尽可能的用简洁的视觉符号表达产品的功能含义。

科技

京东云产品形象设计符合京东云的品牌定位，整体风格以科技感和创新性为基础。

虚实结合

所有产品形象包括 3D、2.5D 和线性 icon 的设计，均基于现实中的几何形态，通过设计表达其抽象的功能语义，使所有的产品形象呈现虚实结合的科技感。

秩序

以创意几何形体作为设计原子，严格按照统一的秩序和规则创造美的产品形态，并尽可能用简洁的视觉符号表达产品最核心的功能含义。

多场景

建立统一的设计规范系统，适应京东云业务体系下的多种应用场景。

二视觉传达

1、颜色应用

京东云产品形象的视觉表达与品牌色的运用息息相关，品牌色作为主色或者辅助色，贯穿于3D、2.5D、2D产品设计，及UI设计中。

辅助色主要是中性色系，在不同应用场景的色彩设计中，依照各自的设计规范，与品牌色以不同比例相结合，保证既符合各种场景的设计需求又有相同的品牌基因。

2、质感表达

质感的表达在京东云3D、2.5D、2D产品设计，及场景化设计中应该是风格一致的。京东云产品应有的质感与产品设计理念是一致的，将虚拟产品和服务实体化，因此它既有虚拟产品“流动”“通透”的特点，也有实体科技产品“稳定”“坚固”的特点，二者也互相影连接、互相影响。

设计中通常使用：不透明金属、不透明磨砂、透明玻璃、发光材质。

3、光影表达

光影与材质相结合，在京东云3D和2.5D设计中表达相同风格的视觉效果。我们希望呈现的光影效果是实体光影与虚拟光影相结合，以表达产品本身的形态特点为主，因此不拘泥于真实产品的布光和投影。不使用过于明显的布光方向，避免过于实体化。多用悬浮投影打造虚实结合的氛围。

三构成与规范

1、栅格规范

京东云产品形象设计遵循一致的栅格规范，以保证不同类别icon在设计时视觉上的风格一致性。2D和线性icon设计时遵循平面栅格系统，3D和2.5D icon设计时遵循等角空间栅格系统。

栅格系统的组成：空间网格、安全区域、主体物范围线。

京东云2D和线性icon使用平面栅格系统：该系统以16x16的网格为基础，在平面内形成网格系统。安全区域为一个单元格宽度围成的区域。

京东云3D和2.5D icon使用等角空间栅格系统：该系统是以8x8的平面网格按照等角透视映射到空间内形成的空间网格系统。安全区域为一个单元格宽度围成的区域。

2、尺寸体系

京东云产品系列包括线性icon、2D icon、2.5D icon、3D icon，他们共同构成京东云产品形象，其中线性icon、3D icon 和 2.5D icon 是云产品形象的构成部分。

3D icon 主要应用于官网首页、营销活动；2.5D icon 主要应用于官网产品详情页Banner、店铺详情页、产品优势表达、产品宣传长图；2D icon 一般用于官网前台的描述性配图；线性 icon 主要应用于官网产品架构图、中后台场景。

四场景与实践

1、构成方式

原子设计（Atomic Design）理论最初用于界面设计，把界面按照一定的组织规律，尽可能拆解成有相互关系和层次的元素、模块、组织，形成一套有一定层次和规律的设计系统。

京东云的业务所涉及到的视觉设计体系，也可以通过原子化设计理论建立。以京东云的风格定义和设计基调，将设计元素不断拆解，形成系统的、有规律的设计体系。3D和2.5D的banner均按照这个理论进行设计。

2、京东云产品形象体系

京东云产品形象的主要构成部分是线性icon、3D icon 和 2.5D icon 。3D和2.5D icon 是场景化banner的主要构成组件。线性icon 主要用于京东云控制台和京东云产品架构图。2D icon 一般用于官网前台的描述性配图。

京东云产品形象体系

京东云产品形象在业务中的应用

五总结

京东云产品形象体系包含3D、2.5D和线性icon，其建立于京东云的业务体系在场景中的应用实践中，是视觉化、规范化、系统化的设计，具有高度统一的设计原则，即科技、虚实结合、秩序、多场景。同时，在构建产品语义及其应用的过程中形成了统一的设计规范体系，从颜色质感到构成规则，既遵循严谨的规律，又具备设计的灵活性，使得京东云产品形象设计体系具备独特的设计风格和广泛的应用性。