• 产品形象是阿里云产品实体化、品牌化的设计表达,产品形象以简洁、立体和轻科技的方式表达产品的核心理念和特点。每个产品形象的设计表现上根据产品特性各不相同,但整体品牌上保持统一的特征和特点,所有产品都应遵循统一的设计规范进行设计。

image.png

设计规范

  • 1.设计方法云产品的质感和特性都会在产品形象中体现出来。产品形象运用简洁的3D元素,展现阿里云设计语言中秩序、几何、虚实的设计表达。每一款3D产品都由稳定、细腻、清爽的质感生成,遵循空间删格系统并采用了稳定柔和的光照和环境。image.png材质研究image.png灯光测试image.png颜色效果
  • 2.空间栅格为保证所有产品的透视一致,同时方便对产品模型进行灵活复用,我们将4x4的方形矩阵栅格应用到了空间中。在空间中,它规范了格局的大小、展示的模型量、模型尺寸和布局。可以看到如下案例,我们将网格由平面转换到立体,摄像机的投射方式,我们选择了等角视图,以保证所有物体都具有强秩序且便于拼接组合。image.png传统平面栅格image.png3D环境空间栅格image.png物体在空间中的放置模型核心的keyline都需要基于空间删格,利用这些核心形状为基线,模型更易于保持一致。并且模型区域我们会按照空间中大小的统一性把控(可以看到方形在这种情况下会比2d环境更小一些,才可以保持和其它图形大小的统一)。image.png圆形主体放置image.png方形主体放置模型常有不规则型的出现,为适应不同应用,常会距离网格留一些距离作为边距。image.png空间栅格边距
  • 3.材质与颜色产品形象规范中包含白色非透明材质、白色透明/半透明材质及橙色发光/非发光材质,用不同材料的隐喻体现产品特性。01非透明材质表达稳固、稳定、基础、不可穿透等特性。02透明/半透明材质表达轻量、容器、可穿透等特性,无颜色的材质占整体产商品模型90%面积。03橙色材质少量点缀应用与产商品模型中表达产品的核心特点及优势,如数据、计算、互联互通、型号等,整体橙色材质占产商品模型10%面积。材质在实际应用中可根据整体质感进行微调,如进行发光亮度的调整、透明度的调整及折射率的调整等,但不可改变原来材质的色相。image.png材质系列
  • 4.产品系列按照实际应用场景的空间大小及表现的信息数量,从2D ICON到场景Banner,产品识别体系递进分为四个层级:2D ICON、3D ICON、产品形象、场景Banner。视实际使用情况而定并非所有产品都需对应包含四个层级的图形,其中2D ICON、产品形象为必选项。2D ICON多用于40px内的架构图(中后台等)场景。3D ICON多用于40px-100px区间的图文标题、Tab切换器等(前台)场景。产品形象多用于100px-300px区间的卡片、图文配图等(前台)场景。产品Banner多用于300px以上的频道Banner、大面积配图等(前台)场景。image.png
  • 5.产品设计思考绝大多数云产品均无法在现实世界中找到直接参照物,因此在设计时应充分结合产品特性特点,发挥空间和抽象想象,遵循以下的设计思考进行灵活设计。image.png有限抽象抽象是阿里云历史至今的设计语言与表现手法之一,抽象的表现有利于体现云产品的虚拟化及想象力。在表现抽象时,应避免抽象几何形态的随机无逻辑组合,应从产品本身分类、特性出发,考虑基于行业特性传统识别符号进行有限抽象化表达。 例如“Web应用防火墙 WAF”产品,在现实世界中没有直接的参照物,但在安全领域中“盾”的试用是通用的进行“防护”特点的表达方式,因此在设计时可考虑基于“盾”型进行抽象立体化表达。了解更多→image.png超越现实进行云产品的设计时,应避免直接将现实世界中的物体、模型进行直接挪用,而应在设计中充分结合产品特点,发挥空间想象能力,体现在现实中无法实际呈现的物理状态,如“悬浮”、“粒子聚合”、“数据分发”等。 例如“数据库”系列产品,在现实三维空间中是难以直接呈现“悬浮”及“粒子环绕”状态的,但在云产商品设计中,可以在虚拟三维空间中呈现体现数据传输感。了解更多→image.png几何构建极简的几何构建形态设计表现一直是历史至今阿里云产品识别之一,有序的几何形态便于体现云产品的稳定、理性、逻辑等特点,同时能够保证统一的识别。在产商品设计时应避免无序、无逻辑、不稳定的随机形态,一切形态表现均应在一个无形的几何构建空间内,如同爵士乐在框架内即兴。 例如“GPU云服务器”产品,通过有规则的矩形抽象表现服务器特点以及高亮的橙色体现GPU。同时规则的几何构建形态也方便进行多个产品的组合体现架构和服务器集群。了解更多→
  • 6.设计实践「云数据库 RDS My SQL 版」MySQL 是全球最受欢迎的开源数据库之一,作为开源软件组合 LAMP(Linux + Apache + MySQL + Perl/PHP/Python)中的重要一环,广泛应用于各类应用场景。image.png
  • 7.产品家族image.png

    设计应用

  • image.pngimage.pngimage.png