服务粉丝

我们一直在努力
当前位置:首页 > 财经 >

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

日期: 来源:JDTDA收集编辑:JD Cloud Design


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

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

伸出你可爱的手指给我们点个赞在看
如果能分享就更好了


相关阅读

  • DNSPod十问陈迪菲:从C到B,鹅厂设计师的中场战事

  • 陈迪菲,腾讯云设计中心总经理,公司设计通道副会长,设计技术委员会委员,腾讯学院优秀讲师,曾于2019年获得新中国成立70周年中国用户体验设计70人提名奖。2010年加入腾讯,10年设计团
  • 企业发展的三个阶段与乐普医疗

  • 企业通常有三个发展阶段第一阶段:企业具有一技之长,并且将这项长技转化成了一种成功的产品。通过这项产品获得了商业成功。用今天的词来概括就是“专精特新”。该阶段成败的核
  • 京东|立减50元【爱购惠民季 陪您过大年】

  • 活动时间2023年1月10日至2023年1月20日每日10:00起活动对象中国工商银行在中国大陆地区发行的工银信用卡个人卡持卡人活动内容活动期间每天10:00起,工银信用卡持卡人在京东商
  • 面对不确定性,如何设计选择

  • 你好,目前刚从某头部教育公司离职,在这个行业也有近5年的设计经验,也是当年教育业务最火热的时候,抱有很大的热情加入的。现在随着政策变化,K12、教辅、智能硬件等工作岗位锐减,甚
  • 设计创新(上)渐进式创新9策略

  • ​创新在产品设计和驱动商业中有着不可或缺重要性。作为设计师,如何抓住乍现的灵光时刻并不断复制思路,生产源源不断的创意活水?《设计策略|源源不断的创新思路》分为渐进篇和激

热门文章

  • “复活”半年后 京东拍拍二手杀入公益事业

  • 京东拍拍二手“复活”半年后,杀入公益事业,试图让企业捐的赠品、家庭闲置品变成实实在在的“爱心”。 把“闲置品”变爱心 6月12日,“益心一益·守护梦想每一步”2018年四

最新文章

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

  • 京东云产品形象,是将京东云的产品和服务进行视觉化、规范化、系统化的设计,从而实现更直观的视觉传达。基于不同产品和服务的特征与特点,结合京东云品牌风格与及企业理念,全新定
  • 两分钟学会AR实景插画

  • 大家好,今天突然想起自己还有个公众号。下面是最近研究的AR插画,做了一个小教程,感兴趣的同学可以自己去玩一下。制作方法来自设计师jarom vogel,发布在procreate的官网上。链接
  • 顶级AI绘画程序:midjourney 内测与思考

  • 从我第一次拿到mid的内测邀请到现在十天了,但是这十天仿佛过去了一个世纪那么长。虽然在此之前已经接触了disco diffusion 等搭载在colab上的AI绘画程序,但是mid第一次让我感
  • 人工智能生成绘画指南

  • 阅读提醒:全文3600字,需耗时15min用文字和代码画画。如果五年前有人说完全不会画画也能创作出视觉作品,大部分的人可能会觉得他疯了。但是在这五年,技术飞速发展,它已经不再是一
  • 如何通过分享增加你的好运气

  • 分享一篇最近看到的很棒的文章,作为一个设计师从我第一次开始在自媒体上分享自己的想法和作品已经断断续续有8年了,作者说的每一个字都是认同的。而他说的那些因为分享带来的