设计语言详情页

{"menus":[{"title":"关于进化设计语言","key":"about","detail":{"title":"About Alibaba Cloud","subtitle":" Evolving Design Language","content":[{"miniTitle":"代表性设计","infoList":[{"miniTitle":"阿里云首页改版","list":[{"text":"作为设计语言应用的最佳实践，阿里云首页改版灵活的应用了「虚实-望其虚握其事」、「秩序-秩序是生命之匙」、「几何-充满想象的几何」、「运动-运动体现智能」四大设计观点的关键词，体现了阿里云技术的领先性和设计的独特点，并成为首页改版视觉升级的核心观点，给以风格的指引和设计的推导。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01NBcJlC1dKQsU2ozIo_!!6000000003717-0-tps-1920-422.jpg"}]}]},{"miniTitle":"阿里云营销体系","list":[{"text":"如何体现阿里云数智世界的营销氛围？阿里云营销体系在进化设计语言核心设计观点「秩序」「虚实」「几何」「运动」的基础上，大量使用了云产品形象和进化质感，从而从风格层到元素层，由内而外的营造出阿里云独特的营销语言。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01n0v0vC1pt2BerdQ7t_!!6000000005417-0-tps-1922-422.jpg"}],"imgLineSize":"1"}]}]},{"miniTitle":"更多应用","infoList":[{"list":[]}]}],"detail":[{"text":"在阿里云成立的10余年里，云计算在不断重塑这个世界：人工智能、大数据、虚拟现实、物联网、边缘计算。越来越多的存在于虚拟世界中的概念正在重新定义我们所理解的现实生活。"},{"text":"与之同时，设计师也迎来了更广的创作空间，我们的画布从传统网页到三维互动、从「真实世界」到「虚拟世界」。我们要去形象化的概念，也不再局限于常规的认知：负载均衡、弹性公网、虚拟数字人、对象存储、云盾，如何把这些计算领域的概念具有识别度又统一的传达给用户，是我们面临的全新挑战。"},{"text":"我们希望用户在任何场景、任何终端，当接触阿里云的产品或服务时，会基于同样的设计语言形成一致的认知、可延续的行为习惯、统一的品牌心智。对隐匿在云端背后的我们，统一的设计语言也能够帮助大家在进行设计输出时，保持一致性，从“思维”的一致到“产出”的一致，全方位保障输出物达到“阿里云设计”的设计质量。"},{"text":"这也是我们建立设计语言的初衷。"}]}},{"title":"设计思考","key":"thinking","detail":{"title":"Alibaba Cloud","subtitle":"Evolving Design Thinking","content":[{"miniTitle":"设计进化论","infoList":[{"miniTitle":"","list":[{"text":"Evolving Design 相信新范式总是不断出现，科学进步的规则便是打破规则。"},{"text":"如下图的进化设计圈：远古时代，人的能力是非常混合的， 然而随着社会精细化分工，我们越来越被安排在细分的领域，学习专项的技术。设计进化论相信，未来随着智能和科技的发展，思考、意识、创意会更加扩大化，知识与实践也会更加混合。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01ycLCcJ22B9F4ngSdQ_!!6000000007081-0-tps-1924-1124.jpg"}]}]},{"miniTitle":"Pace Layering of Evolving Design","list":[{"text":"当我们截断进化设计模型后，可以看到左侧这样一个分层的结构，它就像地质层一 样，每一层都有不同的变化速率和规模范 围。外部可以对冲击快速反应，内部的迭代相对缓慢。这样结构使得整个模型可以持续的运行和进化。"},{"text":"它最核心的是意识，也是最稳定的。再之是理论和哲学，他会根据意识的演进和文化/社会的变化逐渐改变。向外是设计，它相对变化比较快，科技的发展、商业的 发展都会推动它的变化。最外层的是趋势和设计工具，他们是最大波动和不断变化更新的。外侧虽然变化快，却对内部的影响力较小，内部比较稳定，但是一旦出现 革新就会对外部带来很大的冲击。","imgLineSize":"3","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01rTdXVs1PZdP3Fpt1Q_!!6000000001855-0-tps-676-714.jpg"}]}]}]},{"miniTitle":"品牌原型","infoList":[{"list":[{"text":"成功的品牌具有很强的身份认知，它就像一面镜子，去对自己的用户反馈自己的期望和抱负，从而强化自己在用户心中的印象，拉近和用户之间的距离。 "},{"text":"为什么许多电影都有着近乎相同的角色？ 强悍的动作英雄，有着备受折磨的过去； 聪明的警探将自己的悲伤隐藏在角落。同样的，我们也会在真实生活中给别人定“ 人设”。心理学家Carl Jung认为，有些 故事人物对我们来说，可以快速觉得亲切和熟悉，因为它们是原始的和本能的，是我们共同拥有的“集体无意识”的一部分。  而这些被定位的角色，也就是我们在这里提到的Jungian Archetypes。荣格原型 已经被各种团体采用和检验。新时代的唯心论者、生物学家、当然还有品牌专家。  "},{"text":"那么，阿里云的品牌原型是什么呢？我们认为，比起Apple的创造者、NASA的发现者，阿里云更适合定位自己在“智者” 的位置。它具有领先的技术、广阔的知识、 惠普能力和和责任感。他的目标是帮助寻找真理与智慧、分享、开源、最前沿的技术探索、提供专业知识。他的客户感知是 “被启发、学到、明智、理解、专注”，他的语言表达是：高级词汇、权威性、清晰的、有知识量的暗语。他的恐惧是欺骗、 误导、冷漠、自私、不开放和肤浅。"},{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01cO3JW41oD4JwT2sHM_!!6000000005190-0-tps-1920-1120.jpg"}]}]}]}],"detail":[{"text":"「进化设计语言」是一个有很强自我驱动能力的、自进化的、可持续发展的语言，它作为阿里云最基础的设计准则指导阿里云设计的风格构建并输出最原子的设计元素，帮助阿里云设计更“阿里云”。然而，它背后的思考是什么呢？它基于什么样的理论基础，以及什么样的品牌分析而得到的呢？"},{"text":"以下几个部分，将详细的讲述我们的推导与分析过程："},{"text":""}]}},{"title":"设计哲学","key":"philosophy","detail":{"title":"Alibaba Cloud","subtitle":"Evolving Design Philosophy","detail":[{"text":"进化设计语言的哲学内容包含了：设计观点、设计原则和设计价值观。在设计观点中，我们阐述了阿里云进化设计风格的关键词；在设计原则中，我们总结了阿里云产品设计和系统设计背后的原则；在设计价值观中，我们描绘了阿里云设计中心成立多年所遵循的观点。"}],"content":[],"headerImg":"https://img.alicdn.com/imgextra/i3/O1CN01SRdboB1rIyEepkDPo_!!6000000005609-0-tps-1920-1014.jpg"},"children":[{"title":"设计观点","key":"point-of-view","detail":{"title":"Evolving Design","subtitle":"Point of View","content":[{"miniTitle":"观点1 : 秩序 - 以秩序为核心","infoList":[{"list":[{"text":"“The mathematical sciences particularly exhibit order, symmetry and limitation; and these are the greatest forms of the beautiful.”—— Aristotle"},{"text":"秩序是计算之美和逻辑之美在图形宇宙中最底层的制约和最基础的框架，是阿里云设计风格中不可或缺的设计表达。我们将其使用三个栅格维度来定义——空间栅格、矩阵栅格和混合栅格。"}]},{"miniTitle":"1.1 空间栅格 - 三维空间秩序","list":[{"text":"在阿里云设计的计算世界中，最核心的是秩序在空间中的体现，也就是空间栅格（Space Grid - The grid in three-dimensional）。"},{"text":"空间栅格用来约束设计师在三维设计中的一致性和统一性，被运用在云产品形象设计、营销活动设计、互动网页设计等多种设计场景中。","imgLineSize":"1","mobileFullRow":"true","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01fNcYNS1hHvClta7MI_!!6000000004253-0-tps-1920-409.jpg"}]},{"text":"在云产品形象设计中，为了保证所有产品形象透视的一致性，以及后续对产品模型的灵活复用，我们建立了空间栅格规范。在空间中，它规范了网格结构、模型复杂度、模型尺寸和布局。可以看到如上案例，我们将网格由平面转换到立体，将等角视图作为摄像机的投射方式，以保证所有物体都具有秩序感且便于拼接组合。"},{"text":"那么，我们是如何定义空间栅格的呢？以下是几个核心点："},{"text":"从平面到空间：空间栅格从平面栅格推导而来，它经历了从平面到立体的转换。在平面的使用场景，它规定了文字、分栏、行距，而在空间中，它规范了格局的大小、模型复杂度 、模型尺寸和布局。","imgLineSize":"1","mobileFullRow":"true","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01nPdULv1FquDNfNziK_!!6000000000539-0-tps-1920-409.jpg"}]},{"text":"分栏与排列：在空间删格之中，分栏和行数决定了模型的构成。你可以选择等分空间，并在同一产品系列中保持这种构成方式。","imgLineSize":"1","mobileFullRow":"true","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01yLGmK31iv8jd3tk0c_!!6000000004474-0-tps-1920-409.jpg"}]},{"text":"网格结构：网格在不同场景的应用中不尽相同，它取决于使用场景的大小、需要展示模型的体量、模型的尺寸以及场景中不同模型的应用特征。在云产品的栅格规范中，我们使用了一致的立方体结构，保证模型规范化输出。","imgLineSize":"1","mobileFullRow":"true","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN0144gcIt1FEtLE5U9Ws_!!6000000000456-0-tps-1920-409.jpg"}]},{"text":"可视范围：模型核心的keyline都需要基于空间删格，利用这些核心形状为基线，模型更易于保持一致。","imgLineSize":"1","mobileFullRow":"true","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN012FvkJ31hjOxuv2ZZl_!!6000000004313-0-tps-1920-409.jpg"}]},{"text":"网格边距：模型常有不规则型的出现，为适应不同应用，常会距离网格留一些距离作为边距。","imgLineSize":"1","mobileFullRow":"true","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN016eIaGR1myaAuQCiuq_!!6000000005023-0-tps-1920-409.jpg"}]}]},{"miniTitle":"1.2 矩阵栅格 - 二维空间秩序","list":[{"text":"矩阵栅格是我们在二维平面设计中最基础的设计指导，它的使用场景包含但不限于以下场景：页面布局、功能组件、Logo、Icon和插画等。使用矩阵栅格系统，不仅可以赋予平面设计元素以规律的秩序感，从而更高效有序的完成视觉元素搭建，同时也可以更合理的指导设计页面布局，挖掘丰富又具有一致性的视觉创意。","imgLineSize":"1","mobileFullRow":"true","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN015lzAaY1MdLnuFvRJo_!!6000000001457-0-tps-1920-409.jpg"}]},{"text":"基础序列：栅格序列的基础为2的X平方（X大于等于2），即最小数字单位为4。基础序列为2的平方数。扩充序列基于基础序列，在8-48之间，每一级通过额外增加4来进行有序扩充，以更好应对电脑端及移动端的更多细分场景。更大的平方序列则用于较大显示尺寸场景，如智能大屏或者大面积的墙面喷绘等。","imgLineSize":"1","mobileFullRow":"true","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01JsbpFX1RILin9BIKs_!!6000000002088-0-tps-1920-924.jpg"}]},{"text":"基础单元：最小平面的几何单元为一个边长为4像素的正方单元。基础单元的不同组合方式形成了页面中不同元素之间的排布逻辑 - 行、列、卡片、表格、填充区域、白边区域等。","imgLineSize":"1","mobileFullRow":"true","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01XbAxR51eX5TL3YBk7_!!6000000003880-0-tps-1920-1626.jpg"}]},{"text":"拓展样式：在创意类视觉场景中，基础栅格同样由正方形单元构成，也可由其他基础图形构成单元，如三角形或圆形。以下为方形栅格用于插画场景的案例：","imgLineSize":"1","mobileFullRow":"true","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01SqRveo1JBvEm2pIjw_!!6000000000991-0-tps-1920-1218.jpg"}]}]},{"miniTitle":"1.3 混合栅格 - 创意空间秩序","list":[{"text":"除了在页面以及云产品设计中规范化使用的矩阵栅格和空间栅格，我们还尝试了一种创意层面的表现形式，也就是营销与网站配图设计中“混合栅格”的使用。为什么叫“混合”栅格？因为除了三维空间中基础的空间秩序切割，其中还融入了平面设计里的“秩序线”。混合栅格不仅帮助我们的设计更具有阿里云的特色，也帮助我们对几十上百款同类型的banner进行更好的拓展。","imgLineSize":"1","mobileFullRow":"true","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01aQt1d41j20g4t7rMR_!!6000000004489-0-tps-1920-611.jpg"},{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01bVcikI1P426zCMH84_!!6000000001786-0-tps-1920-1090.jpg"}]},{"text":"空间网格结构：在创意设计的空间结构中，为了保证所有图片的透视一致，我们较多的选择了与产品设计一致的等角视图。在角度确定的基础上，我们将空间等分，并将核心图形以及装饰元素可以出现的范围固定下来。","imgLineSize":"1","mobileFullRow":"true","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN011mLbnY24E0zHxnbqd_!!6000000007358-0-tps-1920-306.jpg"}]},{"text":"图形可视范围：为了保证图片在页面上运用时，不影响页面文字的透出。我们通常把keyline固定在图片右侧，并保证所有图片中的核心模型都放置在keyline的范围中，长宽高在空间中尽可能保持一致。","imgLineSize":"1","mobileFullRow":"true","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN0155giNV1qcppdelBHw_!!6000000005517-0-tps-1920-306.jpg"},{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01csT7x11Ke9GHoTqC6_!!6000000001188-0-tps-1920-1090.jpg"}]},{"text":"融入空间的秩序线：除了三维空间的结构线，我们将二维空间的几何线也融入到设计之中，以体现阿里云设计的秩序感。它可作为底板的装饰线条出现，也可作为划分空间的装饰元素出现。我们通常使用45°和90°作为秩序线的常用角度，相同图片内的元素均按照同一个角度去摆放。","imgLineSize":"1","mobileFullRow":"true","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01AwD7xi20JjT5UTZ5J_!!6000000006829-0-tps-1920-1090.jpg"}]}]}]},{"miniTitle":"观点2 : 虚实 - 让虚拟更真实","infoList":[{"list":[{"text":"作为连接真实世界和虚拟世界的阿里云设计语言，我们总是在尝试如何让非物质的、虚拟的概念，用现实世界中更易理解的方式去表达。"}]},{"miniTitle":"2.1 让形象更真实","list":[{"text":"当我们提到云计算，我们都在说什么？可以参考美国国家技术和标准研究院（NIST，National Institute of Standards and Technology）对外公布的一个定义："},{"text":"“云计算是一个提供便捷的可通过网络访问一个可定制的计算资源共享池能力的模式；这些资源能够快速部署，并只需要很少的管理工作或服务供应商很少的交互。”"},{"text":"这里的计算资源，就是弹性计算、存储、网络、数据库、CDN、安全等云计算众多的服务类型。在这些大的服务类型下，才是阿里云200+款具体的云产品，例如弹性计算服务下的云服务器、高性能计算、弹性编排，以及存储服务下的对象存储、块存储、文件存储等等。"},{"text":"如何让这些抽象的概念，更加符号化品牌化、更加易于理解？这是我们一直在研究的课题。这里，我们拿Web应用防火墙（Web Application Firewall，简称WAF）作为典型的案例，去阐述我们的推导过程："},{"text":"网站在企业中使用很多，公司通过网站对外进行产品宣传。针对网站服务器，网络中会有大量的攻击，日常维护中，网站服务安全也是管理员非常重要的管理内容。为了减轻网站管理员的工作负担，我们推出了WAF产品。"},{"text":"WAF是仅为网站推出的，它基于云安全大数据的能力，用于防御SQL注入、XSS跨站脚本、常见Web服务器插件漏洞、木马上传、非授权核心资源访问等OWASP常见攻击，并过滤海量恶意CC攻击，避免网站资产数据泄漏，保障网站的安全与可用性。"},{"text":"设计上，我们首先提取了“安全盾牌”和“防火墙（墙）”为辅助元素，主体是代表网络的球形（同时也作为我们要防护的核心域名资产）。大量的流量线条冲击网络，他们一部分恶意流量被阻挡，一部分安全流畅顺利通过。全部元素配合起来，构成WAF的产品形象图。"}]},{"miniTitle":"2.2 让空间更真实","list":[{"text":"如果把产品比作一个建筑中最底层的基石，那么“让空间更真实”就是在构建整个建筑，无论是造型、砂石还是水电，我们在给用户展示一个可理解的计算世界。那么阿里云的计算世界是什么样的呢？逻辑与算法构造出了什么样的世界呢？"},{"text":"我们认为它是一个具有稳定感、秩序感和结构感的虚拟世界。在这个世界中，云产品是基石，它们不断的“组合”“解构”“重构”，构建出不同的上云场景。数据线是钢筋和骨骼，它们将场景与场景链接、产品与产品链接，以表达相互之间的支撑与数据的传输。（秩序线是钢筋与骨架，他们就像图像生成技术中代码背后的规则，指导图形的走向和趋势。）几何块面是水泥和砂石，他们辅助产品的组合、辅助平台的建立、辅助构建计算世界的基础架构。"}]},{"miniTitle":"2.3 让材质更真实","list":[{"text":"阿里云设计中有很多三维设计场景，在三维空间中属于阿里云的独特质感是什么呢？我们认为它不是传统科幻电影中的深色金属和发光材质，阿里云的质感应该细腻又稳定、轻盈又有力量，它介于真实与虚拟之间。最终我们选定的图形材质分别是：哑光材质、磨砂金属材质和发光玻璃材质。"},{"text":"例如，在网站首焦中我们用磨砂金属材质去表达产品稳固的特性以及计算空间的虚幻与宏大。在营销设计中，我们用磨砂金属材质与哑光材质去搭建场景，构建出具有阿里云设计风格且又丰富多元的营销世界。"}]}]},{"miniTitle":"观点3 : 几何 - 充满想象力的几何","infoList":[{"list":[{"text":"我们使用的设计元素不是繁复装饰与复杂造型的。我们巧妙的运用平面几何和立体几何去搭建阿里云充满想象力的世界。"}]},{"miniTitle":"3.1 二维图形几何化","list":[{"text":"平面设计中的几何应用已经不是一个新鲜话题，而是持续多年的一种趋势了。引用 Paul Ressencourt & Julien Alirol在Magical Geometry书中的一段话：“The geometric universe, where mathematical discipline is originally strict, is governed by standards, accuracy and thoroughness. Due to these mathematic rules, graphic geometry creates clear creations which are precise and structured. 在几何宇宙中，数学规则原本就很严格：它受到标准性、准确性和彻底性的制约。也正因为这些数学规则，图形几何创造出了精确和结构化的的创作。 ”这正映射了阿里云严谨与理性的品牌原型和设计风格。我们希望运用精准、结构化的几何元素去表达复杂的概念。"},{"text":"拿阿里云2D icon设计中弹性扩展的这款icon来举例。首先弹性扩展是什么？比如弹性伸缩这款产品可以支持多种伸缩场景，它具有弹性扩展、弹性收缩和弹性自愈的能力。弹性扩展便是用户根据自己的业务需求自动调整其弹性计算资源，在满足业务需求高峰增长时无缝地增加ECS实例。"},{"text":"2D设计中，我们高度概括的用深色的方形盒子表示容量，外面用一个橘色的盒子表示容量可以扩大，最外面的灰色盒子表示有无限扩大空间。表达业务需求高峰增长时产品的弹性扩展能力。"}]},{"miniTitle":"3.2 三维图形几何化","list":[{"text":"同理，我们也将几何的设计手法带入进了三维设计中。除了3D icon里与2D icon类似的设计表达手法，我们也在各种设计中注入了该手段，2020的阿里巴巴全球诸神之战创客大赛便是一个很好的例子。"},{"text":"阿里巴巴诸神之战全球创客大赛是由阿里云发起的面向全球的科技大赛品牌，旨在发掘全球最具创新力和发展潜力的优秀创业团队和科创项目，培育良好的产业生态。"},{"text":"我们的设计灵感来源于“浪潮”这个关键词，它代表了科技的浪潮和思想的浪潮。比起更写实的表达海浪，我们将其抽象化，用简洁、刚性又具有层次感的矩形来表达。他们不断冲刺、不断创新、不断突破固有的屏障（镂空的平面），朝着未来冲去（圆形空洞区）。"}]}]},{"miniTitle":"观点4 : 运动 - 运动体现智能","infoList":[{"list":[{"text":"运动不仅可以辅助设计去表达概念、功能和状态，也可以作为一种品牌风格和技术指导，让云计算的设计更具智能感。在阿里云的产品设计中，它辅助了其抽象概念的传达；在B-Design的色彩中，它让品牌与界面呼吸起来，为其带入了科技与智慧感。"}]},{"miniTitle":"4.1 图形的运动","list":[{"text":"单个图形运动主要应用于云产品和3D icon的设计中。在这些场景下，我们都会赋予运动以意义，去辅助设计的表达。与之同时，运动也体现出了云计算产品的特性，让图形更具备智能感。"},{"text":"拿VMware服务产品举例：VMware服务是阿里云与VMware战略合作，联合开发并推出部署在阿里云基础架构之上的用户专属VMware SDDC环境，助力企业轻松把现有VMware工作负载从本地数据中心拓展至阿里云上。"},{"text":"设计上，前侧是用户云下的IDC数据中心，后侧是线上虚拟的阿里云裸金属服务器，侧面我们添加了两段线流，一段是数据的流入一段是数据的流出，通过粒子的流通，该产品形象的表达线上线下的互联打通的产品特征。"},{"text":"组合图形的运动，主要体现在营销设计和插画设计中。"},{"text":"2020阿里云双十一，我们在“新基建”思路的基础上，用产品的组合动态和几何图形的组合动态，去表达数字世界地基一砖一瓦的建设。各类图形在不断地“组合”“进化”“构造”，它时而形成“基础云产品”、时而构造“上云部署方案”。也正是通过图形的动态变化，“新基建”的概念和智能感的数字世界被更好地传达给了用户。"},{"text":"阿里云的插画动态，帮助插画设计更具趣味性，且更有助于信息的传达，例如：在线文件的灵活传输和处理、地理数据信息的同步、数据的分析和处理、安全的加锁和防护。这些动态体现了计算行业的特性，让插画的表达更直观更精准。"}]},{"miniTitle":"4.2 色彩的运动","list":[{"text":"阿里云独具代表性的色彩运动，来源于B-Design用代码生成的呼吸色彩。B-Design的呼吸色「Breathing Color」，灵活、流动性强、带入科技与智慧感。让品牌与界面呼吸起来 。"},{"text":"呼吸色作为B-Design设计最核心的特色之一，应用在卡片、背景、品牌氛围等场景中。同时，阿里云设计中心内部GDS（Generative Design Studios）也开发了一个B-Design呼吸色彩生成工具，可以自定义调整颜色、动态类型，呼吸频率等。"}]},{"miniTitle":"4.3 界面的运动","list":[{"text":"运动在界面中的使用已经非常普遍了，它可以帮助界面富有表现力（动态增加了个性和吸引力）、描述空间层级关系（通过运动表现界面的层级关系）以及帮助反馈和状态更明确的表达（运动状态代表页面的反馈和当前状态）。"},{"text":"以阿里云首页为例，同样的动画时间（Duration）下，不同的运动缓冲速率（Ease）对于用户的视觉体验会产生微妙的体感差异。在楼层以及模块的切换效果设计中，我们都进行了很多尝试。为了调试出适用于Web端的动画速率，我们对Quad，Cubic，Exponential等经典缓冲运动进行了大量的设计实践验证，并通过CSS代码还原出理想的动画速率贝塞尔曲线，达到页面在体验上的清晰度和层级关系。"}]}]}],"detail":[{"text":"如果说阿里云设计的背后是逻辑与理性所主宰的计算世界，那么，如何将计算世界之美展现出来是我们必须且一直在攻克的课题。当虚拟空间成为云计算设计的画布，设计师该如何系统地组织空间中的元素、如何让空间中的图形兼具功能、逻辑和美感，以下，便是阿里云设计给出的答案——"}],"headerImg":"https://img.alicdn.com/imgextra/i1/O1CN01cHfvts1sh4jHm7yfU_!!6000000005797-0-tps-2048-1080.jpg"}},{"title":"设计原则","key":"principle","detail":{"title":"Evolving Design","subtitle":"Principle","content":[{"miniTitle":"原则1 : 高效 - 清晰且高效","infoList":[{"list":[{"text":"我们为用户提供清晰，简洁，易使用的设计规范，帮助用户快速建立高效，美观，清晰的企业级产品体验。"}]}]},{"miniTitle":"原则2 : 一致 - 一致且统一","infoList":[{"list":[{"text":"一致性是体验设计中最重要的原则之一。一致性原则主要保证阿里云生态下的产品使用体验一致，用户学习成本降低，形成一个通用的操作语系。"}]}]},{"miniTitle":"原则3 : 包容 - 开放包容","infoList":[{"list":[{"text":"设计系统打造简单的操作体验，高品质的设计质量同时，保持开放和通用性。提供不同场景的适应案例，来保证不同行业、不同领域的业务的接入。"}]}]},{"miniTitle":"原则4 : 专业 - 面向专业的设计","infoList":[{"list":[{"text":"阿里云设计系统强调专业性，其中包括：面向专业的人群、清晰准确地传达专业的知识、定义专业的操作方式、洞察不同领域行业的专业性。"}]}]}],"detail":[{"text":"进化设计原则主张高效、一致、包容与专业。"}]}},{"title":"设计价值观","key":"value","detail":{"title":"Evolving Design","subtitle":"Value","content":[{"miniTitle":"价值观1 : 基石 - 设计向善","infoList":[{"list":[{"text":"设计向善，我们期待的不仅仅是片面的为善行而设计，而是更宏观的以设计之力解决生活生产之惑，解决人与人、人与物，与自己内心之间的诉求。设计向善，是设计师的基本责任。"}]}]},{"miniTitle":"价值观2 : 同行 - 寻找人性美好的最大公约数，寻找同路人","infoList":[{"list":[{"text":"君子和而不同，求同尊异。志合者，不以山海为远；道乖者，不以咫尺为近；星光伴行，不负同路人。"}]}]},{"miniTitle":"价值观3 : 远方 - 不为设计，为未来","infoList":[{"list":[{"text":"未来是科技文明的时代，是游走于现实生活，技术迸发和思想异托邦（Heterotopia）之间的不确定。路虽漫漫修远，吾辈亦将上下而求索。"}]}]}],"detail":[{"text":"ACD价值观是定义云时代设计师框架的基本前提，是弹性的理想和现实主义的碰撞，是阿里云设计中心站在时代前沿孜孜不倦培育人才和输出能量的基石。"}]}}]},{"title":"设计原子","key":"elements","children":[{"title":"云产品形象","key":"product-identity","detail":{"title":"Alibaba Cloud","subtitle":"Product Identity","detail":[{"text":"产品形象是阿里云产品实体化、品牌化的设计表达，产品形象以简洁、立体和轻科技的方式表达产品的核心理念和特点。每个产品形象的设计表现上根据产品特性各不相同，但整体品牌上保持统一的特征和特点，所有产品都应遵循统一的设计规范进行设计。"}],"content":[{"miniTitle":"设计规范","infoList":[{"miniTitle":"1.设计方法","list":[{"text":"云产品的质感和特性都会在产品形象中体现出来。产品形象运用简洁的3D元素，展现阿里云设计语言中秩序、几何、虚实的设计表达。每一款3D产品都由稳定、细腻、清爽的质感生成，遵循空间删格系统并采用了稳定柔和的光照和环境。","imgLineSize":"3","infoImgList":[{"title":"材质研究","imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01ffpjFg1oDz4jOdWuL_!!6000000005192-0-tps-608-358.jpg"},{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01RVfHFj28L7Z00ePJ5_!!6000000007915-0-tps-608-358.jpg","title":"灯光测试"},{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01DdYPlY1T4j8b8JX67_!!6000000002329-0-tps-608-358.jpg","title":"颜色效果"}],"mobileFullRow":"true"}]},{"miniTitle":"2.空间栅格","list":[{"text":"为保证所有产品的透视一致，同时方便对产品模型进行灵活复用，我们将4x4的方形矩阵栅格应用到了空间中。在空间中，它规范了格局的大小、展示的模型量、模型尺寸和布局。可以看到如下案例，我们将网格由平面转换到立体，摄像机的投射方式，我们选择了等角视图，以保证所有物体都具有强秩序且便于拼接组合。","imgLineSize":"3","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01gZezPf1tq45NFrY9R_!!6000000005952-0-tps-612-360.jpg","title":"传统平面栅格"},{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01C2DDm924Hg7bAnYO5_!!6000000007366-0-tps-612-360.jpg","title":"3D环境空间栅格"},{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01W7kV7H1uZPIMCWzzM_!!6000000006051-0-tps-612-360.jpg","title":"物体在空间中的放置"}]},{"text":"模型核心的keyline都需要基于空间删格，利用这些核心形状为基线，模型更易于保持一致。并且模型区域我们会按照空间中大小的统一性把控（可以看到方形在这种情况下会比2d环境更小一些，才可以保持和其它图形大小的统一）。","imgLineSize":"2","infoImgList":[{"title":"圆形主体放置","imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01OF8Lno1px9kv9Y6nM_!!6000000005426-0-tps-938-360.jpg"},{"title":"方形主体放置","imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01KfJbky1dRlDOW3ua6_!!6000000003733-0-tps-940-364.jpg"}]},{"text":"模型常有不规则型的出现，为适应不同应用，常会距离网格留一些距离作为边距。","imgLineSize":"2","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01mSCchy27QKRwQ3L1t_!!6000000007791-0-tps-940-360.jpg","title":"空间栅格边距"}]}]},{"miniTitle":"3.材质与颜色","list":[{"text":"产品形象规范中包含白色非透明材质、白色透明/半透明材质及橙色发光/非发光材质，用不同材料的隐喻体现产品特性。"},{"listChildren":[{"number":"01","title":"非透明材质","detail":"表达稳固、稳定、基础、不可穿透等特性。"},{"number":"02","title":"透明/半透明材质","detail":"表达轻量、容器、可穿透等特性，无颜色的材质占整体产商品模型90%面积。"},{"number":"03","title":"橙色材质","detail":"少量点缀应用与产商品模型中表达产品的核心特点及优势，如数据、计算、互联互通、型号等，整体橙色材质占产商品模型10%面积。"}]},{"text":"材质在实际应用中可根据整体质感进行微调，如进行发光亮度的调整、透明度的调整及折射率的调整等，但不可改变原来材质的色相。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01N3BCUZ1uqLx2pR2Or_!!6000000006088-0-tps-1918-300.jpg","title":"材质系列"}]}]},{"miniTitle":"4.产品系列","list":[{"text":"按照实际应用场景的空间大小及表现的信息数量，从2D ICON到场景Banner，产品识别体系递进分为四个层级：2D ICON、3D ICON、产品形象、场景Banner。视实际使用情况而定并非所有产品都需对应包含四个层级的图形，其中2D ICON、产品形象为必选项。"},{"imgLineSize":"4","infoImgList":[{"title":"2D ICON","detail":"多用于40px内的架构图（中后台等）场景。"},{"title":"3D ICON","detail":"多用于40px-100px区间的图文标题、Tab切换器等（前台）场景。"},{"title":"产品形象","detail":"多用于100px-300px区间的卡片、图文配图等（前台）场景。"},{"title":"产品Banner","detail":"多用于300px以上的频道Banner、大面积配图等（前台）场景。"}]},{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01QfcmUy1X7iBURah73_!!6000000002877-0-tps-1920-486.jpg"}]}]},{"miniTitle":"5.产品设计思考","list":[{"text":"绝大多数云产品均无法在现实世界中找到直接参照物，因此在设计时应充分结合产品特性特点，发挥空间和抽象想象，遵循以下的设计思考进行灵活设计。"},{"imgLineSize":"3","infoImgList":[{"title":"有限抽象","detail":"抽象是阿里云历史至今的设计语言与表现手法之一，抽象的表现有利于体现云产品的虚拟化及想象力。在表现抽象时，应避免抽象几何形态的随机无逻辑组合，应从产品本身分类、特性出发，考虑基于行业特性传统识别符号进行有限抽象化表达。  例如“Web应用防火墙 WAF”产品，在现实世界中没有直接的参照物，但在安全领域中“盾”的试用是通用的进行“防护”特点的表达方式，因此在设计时可考虑基于“盾”型进行抽象立体化表达。","url":"https://www.aliyun.com/product/waf?spm=5176.10695662.3291411370.3.733527c9PZMBXv","imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01qT4btS1lWoVjvx5LU_!!6000000004827-2-tps-612-140.png"},{"title":"超越现实","detail":"进行云产品的设计时，应避免直接将现实世界中的物体、模型进行直接挪用，而应在设计中充分结合产品特点，发挥空间想象能力，体现在现实中无法实际呈现的物理状态，如“悬浮”、“粒子聚合”、“数据分发”等。  例如“数据库”系列产品，在现实三维空间中是难以直接呈现“悬浮”及“粒子环绕”状态的，但在云产商品设计中，可以在虚拟三维空间中呈现体现数据传输感。","url":"https://www.aliyun.com/product/rds/mysql?spm=5176.19720258.J_8058803260.36.e9392c4aq73gIO","imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01h1LXQq1zFK0M4JX1B_!!6000000006684-2-tps-612-140.png"},{"title":"几何构建","detail":"极简的几何构建形态设计表现一直是历史至今阿里云产品识别之一，有序的几何形态便于体现云产品的稳定、理性、逻辑等特点，同时能够保证统一的识别。在产商品设计时应避免无序、无逻辑、不稳定的随机形态，一切形态表现均应在一个无形的几何构建空间内，如同爵士乐在框架内即兴。  例如“GPU云服务器”产品，通过有规则的矩形抽象表现服务器特点以及高亮的橙色体现GPU。同时规则的几何构建形态也方便进行多个产品的组合体现架构和服务器集群。","url":"https://www.aliyun.com/product/ecs/gpu?spm=5176.7920929.J_8058803260.35.df196800GTQ4z9","imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN0197pcdp1rBBV57wfif_!!6000000005592-2-tps-612-140.png"}],"mobileFullRow":"true"}]},{"miniTitle":"6.设计实践","list":[{"text":"「云数据库 RDS My SQL 版」MySQL 是全球最受欢迎的开源数据库之一，作为开源软件组合 LAMP（Linux + Apache + MySQL + Perl/PHP/Python）中的重要一环，广泛应用于各类应用场景。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01VSxnKO1y8cand4yCK_!!6000000006534-0-tps-1964-690.jpg"}],"imgLineSize":"1"}]},{"miniTitle":"7.产品家族","list":[{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01Zj5GFr1GXxPUQhT2I_!!6000000000633-0-tps-1920-1240.jpg"}]}]}]},{"miniTitle":"设计应用","infoList":[{"list":[{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN010V9eti1IsEAgmTgB8_!!6000000000948-0-tps-1916-568.jpg"}]},{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01x0SoPd1SYD1AuG160_!!6000000002258-0-tps-1922-448.jpg"}],"imgLineSize":"1"},{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01XCQFSb1pn52f372P1_!!6000000005404-0-tps-1918-552.jpg"}]}]}]}],"headerImg":"https://img.alicdn.com/imgextra/i1/O1CN01Lu4nRA29CFVLZWmdZ_!!6000000008031-0-tps-1920-1014.jpg"}},{"title":"图标","detail":{"title":"Alibaba Cloud","subtitle":"Iconography","detail":[{"text":"图标作为可视符号，提供了一种 “视觉速记”形式，能够更好的利用熟悉的形状和隐喻以简单的图形形式传达信息。阿里云图标体系三部分构成，分别是：UI Icons / Pictograms / Product Icons。规范阿里云图标体系，一方面在体验方面保证图标基因元素的一致性，另一方面为设计提效保驾护航。"}],"content":[{"miniTitle":"设计定义","infoList":[{"miniTitle":"三大体系","list":[{"imgLineSize":"3","infoImgList":[{"title":"UI Icons","imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01Jj0IZs1Y5i4OEVZzx_!!6000000003008-2-tps-608-404.png"},{"title":"Pictograms","imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01SeLUrf1IBAwdFgt2C_!!6000000000854-2-tps-608-404.png"},{"title":"Product Icons","imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01D31fOI1H3Yk0Ai2NW_!!6000000000702-2-tps-608-404.png"}]}]},{"list":[{"listChildren":[{"number":"01","title":"UI Icons","detail":"在三大图标体系中起着基座的作用，UI Icon规则明确了阿里云图标的风格趋势，以极简的几何构建形态作为识别特性，有序的几何形态便于体现云产品的稳定、理性、逻辑等特点，UI Icon包含了基础的System icon和由System icon组合形成的复合icon。"},{"number":"02","title":"Pictograms","detail":"主要应用于官网前台、营销活动、国际站、移动端等各种偏展示型的卡片、页面模块中，适合更直观、创意地体现产品特点、优势，表达不同卡片、模块的行动状态。"},{"number":"03","title":"Product Icons","detail":"主要应用于产品语义的图形形式传达，具有产品归属的特定指代作用。通常应用在产品的各类传播界面模块当中。"}]}]}]},{"miniTitle":"设计原则","infoList":[{"list":[{"text":"在计算设计语言引领下，阿里云图标以极简的几何构建形态作为识别特性。在图标设计时应避免无序、无逻辑、不稳定的随机形态，一切形态表现均应在一个无形的几何构建空间内完成。","imgLineSize":"3","infoImgList":[{"title":"直观易懂","detail":"清晰传达信息内容，有限抽象体现阿里云设计的想象力的同时保证信息传达的准确。","imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN018iW0NX1WNua2BEJLY_!!6000000002777-2-tps-608-404.png"},{"title":"几何构建","detail":"有序的几何形态便于体现稳定、理性、逻辑等特点，同时能够保证统一的识别。","imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01PwZLgv22gkZj38IdV_!!6000000007150-2-tps-608-404.png"},{"title":"高效稳定","detail":"系列的图标序列方便各种产品运营场景进行高效复用，同时保证一致稳定的视觉观感。","imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01hsecsc1q6Jfw97zwK_!!6000000005446-2-tps-608-404.png"}]}]}]},{"miniTitle":"设计规范","infoList":[{"list":[{"text":"所有二维图标应绘制在相应大小的基础方形网格框架上，轮廓线的笔划宽度固定。这样可以确保图标在导出时将保留其所需的比例和周围空白区域的一致性。","imgLineSize":"3","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN017gCJVS1hQchJ8DDGw_!!6000000004272-2-tps-608-608.png"},{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01SAGPEM1RZkjzMzf1w_!!6000000002126-2-tps-608-608.png"},{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01iHiuOS22UNsa1Z7GW_!!6000000007123-2-tps-608-608.png"}]}]},{"miniTitle":"空间栅格","list":[{"text":"为保证所有产商品的透视一致，同时方便对产商品模型进行灵活复用，所有设计均需基于标准正方体的45°轴侧视图框架内进行设计，同时采用规范C4D文件中的标准摄像机视图进行导出。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01NGwwkj1eSVTlRMhUs_!!6000000003870-2-tps-1918-608.png"}]}]},{"miniTitle":"风格定义","list":[{"text":"图标风格从阿里云品牌气质中提炼，每个图标都经过设计，保持图标基因细节和特征的一致性，使它们在视觉上可以很好地融为一体。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01H6chz41MsvEr1SmXJ_!!6000000001491-2-tps-1918-328.png"}]},{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01GgMQE81szqw41CuDc_!!6000000005838-2-tps-1918-552.png"}]}]},{"miniTitle":"角度&弧角","list":[{"text":"尽可能使用45°角进行斜率设计，或者使用15°增量来设计形状所需的其他角度。您可以通过使角度始终保持相同的增量来在图标集上创建和谐。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01bMx3Km1PtKRDOOhV3_!!6000000001898-2-tps-1918-984.png"}]}]},{"miniTitle":"尺寸","list":[{"text":"按照实际应用场景的空间大小及表现的信息数量，从UI Icon到产品模型递进为三个层级：UI Icon、Pictogram Icon、产品模型。视实际使用情况而定，UI Icon多用于系统功能UI场景；Pictogram多用于40px-100px区间的图文标题、Tab切换器等场景；产商品模型多用于100px-300px区间的卡片、图文配图等场景。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN018obCei1xB56rmLgrC_!!6000000006404-2-tps-1918-848.png"}]}]},{"miniTitle":"材料隐喻","list":[{"text":"产商品设计规范中包含白色非透明材质、白色透明/半透明材质及橙色发光/非发光材质，用不同材料的隐喻体现产品特性。"},{"text":"非透明材质表达稳固、稳定、基础、不可穿透等特性，透明/半透明材质表达轻量、容器、可穿透等特性，无颜色的材质占整体产商品模型90%面积；橙色发光/非发光材质少量点缀应用与产商品模型中表达产品的核心特点及优势，如数据、计算、互联互通、型号等，整体橙色材质占产商品模型10%面积。"},{"text":"材质在实际应用中可根据整体质感进行微调，如进行发光亮度的调整、透明度的调整及折射率的调整等，但不可改变原来材质的色相。"},{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01dhkMQX23cusGCrSgd_!!6000000007277-2-tps-1918-450.png"}]}]},{"miniTitle":"构成","list":[{"listChildren":[{"title":"通用型 UI Icon","detail":"也可称为System icon，属于系统常用性图标，具有普遍性和通用性的特点。","imgLineSize":"1","number":"UI Icon","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01tNWj3i1f96JXjwy4Q_!!6000000003963-2-tps-1918-896.png"}]},{"title":"复合型 UI Icon","detail":"在特殊场景下，简单的图标无法准确传达场景的寓意，需要复杂图标进行表达时，可使用复合型图标的方式。组合的图标为1+N个基础图标，N的值为3≥N≥1，组合后的图标同样需要保持形状的完整度，不做琐碎的切分，如需强调层次感可通过着色完成。","number":"UI Icon","imgLineSize":"2","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01ddXF7t1g23q0DrYQS_!!6000000004083-2-tps-938-356.png"},{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01KopsFh1r2wNG5jGZC_!!6000000005574-2-tps-938-356.png"}]},{"number":"Pictogram","title":"Pictogram 2D","detail":"主要应用于官网前台、营销活动、国际站、移动端等各种偏展示型的卡片当中，可根据具体场景选择图标维度类型。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01HmRy8m26ThkuE48WK_!!6000000007663-2-tps-1918-768.png"}]},{"number":"Pictogram","title":"Pictogram 3D","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01HmvuCF27TXE4noy6O_!!6000000007798-2-tps-1918-1240.png"}]},{"number":"Product","title":"Product Icons","detail":"主要应用于产品语义的图形形式传达，具有产品归属的特定指代作用。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01MpgnzU218ZOnGtejB_!!6000000006940-2-tps-1918-1122.png"}]}]}]},{"miniTitle":"色彩应用","list":[{"text":"针对不同的营销活动页场景，可自行对Pictogram的材质进行变色，其中色彩的使用规范遵循阿里云设计语言色彩体系，在变换时通过改变原来橙色材质的色值进行变色。其他白色非透明、黑色非透明、半透明材质颜色不允许变更，以避免在同个Pictogram图标下有多种颜色的情况出现。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01PALt1U1v50ct1yRV5_!!6000000006120-2-tps-1918-1822.png"}]}]}]},{"miniTitle":"设计应用","infoList":[{"miniTitle":"","list":[{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01hXrNZj1VKPwS4pouJ_!!6000000002634-2-tps-1918-2484.png","title":"阿里云首页/频道页","url":"https://www.aliyun.com/"}]},{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN014Maijy1H4vve8Fo3S_!!6000000000705-2-tps-1918-1260.png","title":"活动页/拓展页","url":"https://www.aliyun.com/activity/daily/heyuanregion"}]}]}]}]},"key":"iconography"},{"title":"插画","key":"illustration","detail":{"title":"Alibaba Cloud","subtitle":"Illustration","detail":[{"text":"插画是一种能将产品功能等抽象概念以直观且轻量的方式呈现的视觉表达形式，具有亲和力和易读性。在阿里云官网产品详情页、新手引导、大促营销、线下活动等场景都能看到插画的使用。规范阿里云插画体系，既能提高设计效率，也能保持全站插画语言的一致性，形成品牌辨识度。"}],"headerImg":"https://img.alicdn.com/imgextra/i2/O1CN01HWxDTt2A7V0xo85xR_!!6000000008156-0-tps-1920-668.jpg","content":[{"miniTitle":"设计规范","infoList":[{"miniTitle":"1.原则","list":[{"text":"作为计算设计语言的延伸，阿里云插画风格具有简洁轻巧、扁平块面、几何结构等特征。融入“有秩序的想象力”，将抽象的计算信息和科技概念用充满克制力和逻辑美学的插画进行表达。","imgLineSize":"4","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01DL9oQE1RILgfKbRUk_!!6000000002088-0-tps-446-446.jpg","title":"高效组合"},{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01RpVkBU24gruEMR1Mu_!!6000000007421-0-tps-446-446.jpg","title":"计算语言"},{"title":"有限想象","imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01qJr8Us1GEimAfNrlX_!!6000000000591-0-tps-446-446.jpg"},{"title":"直观易懂","imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01Of4h3g1va9YYxJiS2_!!6000000006188-0-tps-446-446.jpg"}]}]},{"miniTitle":"2.栅格","list":[{"text":"使用20x20px为基础单位的矩阵网格进行制图，保持秩序感。 常在矩阵网格基础上加入直径为20px、40px等大小的圆形作为辅助栅格，方便进行曲线设计。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01sMxGSZ1GWaDrmEfCC_!!6000000000630-0-tps-1920-450.jpg"}]},{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN015fPnDo25ju9FKqzAT_!!6000000007563-0-tps-1920-450.jpg"}]}]},{"miniTitle":"3.角度","list":[{"text":"将45°和90°作为常用角度，其他特殊角度以15°递增/减。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01zkOXUx1UUfBMldVuA_!!6000000002521-0-tps-1920-484.jpg"}]}]},{"miniTitle":"4.图形结构","list":[{"text":"以标准的矩形和圆进行旋转、剪切、组合等方式得到插画造型，并按照栅格摆放。禁止出现大量圆角或随机的弧线。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN0153dEFu1cZG5FyztCu_!!6000000003614-0-tps-1902-626.jpg"}]},{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01YRCQmy1QH91yn9ngI_!!6000000001950-0-tps-1902-1150.jpg"}]}]},{"miniTitle":"5.元素","list":[{"text":"基于“高效组合”原则，我们为设计师提供了Sketch Library，内有丰富的素材可供快速拼搭使用。","listChildren":[{"number":"01","title":"日常物品","detail":"基于“高效组合”原则，我们为设计师提供了Sketch Library，内有丰富的素材可供快速拼搭使用。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01op2yRM1QD1SoAThHF_!!6000000001941-0-tps-1920-730.jpg"}]},{"number":"02","title":"云产品","detail":"规范200+款云产品的插画形式，使产品形象从2D到3D有设计上的一致性和延续性。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01LFqufi28MUkbMmIe1_!!6000000007918-0-tps-1920-730.jpg"}]},{"number":"03","title":"几何装饰","detail":"为保证插画具有理性美，常引入“几何图形”和“虚实线条”来辅助画面，增加几何感、计算感。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01YzlOV51FXfXzCzwD0_!!6000000000497-0-tps-1920-564.jpg"}]},{"number":"04","title":"人物","detail":"人物形象能够将用户带入场景、产生共情，在插画中必不可少。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN012oPoT31jT20ZU1gor_!!6000000004548-0-tps-1920-800.jpg"}]},{"detail":"比例：为了更好地体现“未来感”，特意在比例上将插画人物形象与真实人类拉开差距，缩小头部，加长腿部，显得修长高大。将人物头部直径作为单位长度A，人物高度设定为10A（十头身）。躯干宽度大约3A，脚部鞋子高度控制在1A以内。","imgLineSize":"1"},{"detail":"基础造型：抛开传统的写实或卡通表达方式，采用简单的图形组合，建立更适合云计算领域的人物形象。主推以上两个基础款形象：方形和圆形身体人物。以几何块面组成极具抽象感的身体，附发型、鞋子、手势等组建可供替换。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01GysJHU1QqPWj4v04p_!!6000000002027-0-tps-1920-702.jpg"}]},{"detail":"角色造型：针对特殊场景，我们按职业特征设定了8种人物角色。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01AI90lb1I16HMU2OW6_!!6000000000832-0-tps-1920-666.jpg"},{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01VuyMUi1YqsrUFqQCt_!!6000000003111-0-tps-1920-838.jpg"}]}]}]},{"miniTitle":"6.色彩","list":[{"text":"基于“高效组合”原则，我们为设计师提供了Sketch Library，内有丰富的素材可供快速拼搭使用。","listChildren":[{"number":"01","title":"基础品牌色","detail":"官网基础详情页/品牌传播等插画主要使用阿里云品牌色 —— 智能橙，辅助以智能黑、白和相应过渡色色板。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN0118tpbO1eDOPDtuhXE_!!6000000003837-0-tps-1920-550.jpg"}]},{"number":"02","title":"产品系列色","detail":"根据不同产品的属性，设置了阿里云产品系列色。可参考产品色和活动页面色，应用于对应的插画配图。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01z5pGHS1qv9daS8gX2_!!6000000005557-0-tps-1920-592.jpg"}]}]}]}]},{"miniTitle":"设计应用","infoList":[{"miniTitle":"应用类目","list":[{"imgLineSize":"4","infoImgList":[{"title":"功能分类-表意","detail":"通过图像阐释具体含义","imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01pgePo91a1hpwz1bLV_!!6000000003270-0-tps-470-470.jpg"},{"title":"功能分类-装饰","detail":"通过图像营造氛围","imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01KpzNVs1EMqZTxZagY_!!6000000000338-0-tps-470-470.jpg"},{"title":"形式分类-单点插画","detail":"小幅配图，常搭配文案","imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01Zkmaq41Q74JjaBQMO_!!6000000001928-0-tps-470-470.jpg"},{"title":"形式分类-全幅插画","detail":"大幅完整场景含背景","imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01CrAfZO20GWf5qA0vp_!!6000000006822-0-tps-470-470.jpg"}]}]},{"miniTitle":"频道页banner","list":[{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01SiHQ6w25BYROk65bL_!!6000000007488-0-tps-1920-664.jpg"}]}]},{"miniTitle":"详情页配图","list":[{"imgLineSize":"2","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN010TPa3m1ThCPJHPsUw_!!6000000002413-0-tps-936-1272.jpg","title":"详情页小幅配图"},{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01MOIyU326A0ioE3tYy_!!6000000007620-0-tps-934-1272.jpg","title":"详情页大幅配图"}]}]},{"miniTitle":"置灰状态","list":[{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01UeiTnw1ZiTCVNAD60_!!6000000003228-0-tps-1920-464.jpg"}]}]},{"miniTitle":"使用指导","list":[{"imgLineSize":"3","infoImgList":[{"title":"禁止使用描边","detail":"以无边线块面为主导风格","imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01hg8dpU1FmKDnCVf29_!!6000000000529-0-tps-592-448.jpg"},{"title":"禁止所有元素都使用渐变色","detail":"仅可局部使用单一渐变色","imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01VccvOk1QI3p51tlDp_!!6000000001952-0-tps-592-448.jpg"},{"title":"禁止出现多种色系混杂","detail":"每幅插画应具有明确的冷/暖色调偏向性","imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01DRtF431ccvFk5hGvA_!!6000000003622-0-tps-592-448.jpg"}]},{"imgLineSize":"3","infoImgList":[{"title":"禁止过度使用智能黑或其他重色","detail":"保持画面轻盈干净","imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN013CEYjd1dludwuFZNr_!!6000000003777-0-tps-592-448.jpg"},{"title":"禁止随意摆放或旋转元素","detail":"遵循栅格和角度规范，展现严谨","imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01I7KaAm21pcculI1yB_!!6000000007034-0-tps-592-448.jpg"},{"title":"禁止构图过于拥挤饱和","detail":"尊崇留白，少即是多","imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN017Ws6Uv1Kyl3GtzaUy_!!6000000001233-0-tps-592-448.jpg"}]}]}]}]}},{"title":"文字","detail":{"title":"Alibaba Cloud","subtitle":"Typeface","detail":[{"text":"字体版式可以帮助创建清晰的层次结构、组织信息，高效清晰的呈现设计和内容，在视觉上达到统一和整体，并引导用户使用产品。"}],"content":[{"miniTitle":"设计类型","infoList":[{"list":[{"text":"从应用场景角度，字体应用类型分为 [页面类常规字体] 与 [活动类特殊字体] ，均需具备易读性。后者为基础字体变形，还需配合主题直观传递活动基调与气质。","imgLineSize":"2","infoImgList":[{"title":"页面类常规字体","imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01p9B8LA1qDBcHMqTOc_!!6000000005461-2-tps-938-430.png"},{"title":"活动类特殊字体","imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01Slrxma1X4VPdK6cAv_!!6000000002870-2-tps-938-430.png"}]}]}]},{"miniTitle":"规范-基础文字","infoList":[{"miniTitle":"字体家族","list":[{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01kZAeWY1Toz944NNCI_!!6000000002430-2-tps-1918-128.png","title":"简中、繁中"}]},{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01BK9vjN1xIPRYfVWHE_!!6000000006420-2-tps-1918-128.png","title":"英、德、法"}]},{"imgLineSize":"1","infoImgList":[{"title":"日","imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01R1aOjK1D2PHOeDkxH_!!6000000000158-2-tps-1918-176.png"}]},{"imgLineSize":"1","infoImgList":[{"title":"韩","imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01WGP6Ed1nWvqWTRaZf_!!6000000005098-2-tps-1918-128.png"}]},{"imgLineSize":"1","infoImgList":[{"title":"* 设计师输出建议使用","imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01BKB57f1uMaCu7Hzrd_!!6000000006023-2-tps-1918-266.png"}]}]},{"miniTitle":"字号和行高","list":[{"text":"由于不同文字的字形特性不同，多语言网站设置行高应该避免使用具体数值，而是用倍数来表示。比如英文有acsender（升部）和decsender（降部），如果用确定数值作为行高，英文字母的升降部有可能被切断，导致文字显示不全。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01VGn78q1rVKvlTKcia_!!6000000005636-2-tps-1918-266.png"}]}]},{"miniTitle":"字重","list":[{"text":"为了保证页面在各个系统中（iOS和windows）的显示效果和可读性，阿里云官网的字重只出现两种，regular和bold，分别对应代码中的400和600。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01tc0XTa23F6HRctPyO_!!6000000007225-2-tps-1918-540.png"}]}]},{"miniTitle":"应用","list":[{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01rPXqdC1RbaKBnWRaj_!!6000000002130-2-tps-1918-2782.png"}]}]},{"miniTitle":"每行字数","list":[{"text":"合理的字数有助于舒适的阅读体验。英文的每行的字母数应控制在40-60字母（英文），过短或者过长都不适合阅读。中文每行在25-35个字左右较为合适。使用Roboto和苹方字体的时候，相同字号的前提下，40-60个字母的长度在视觉上相当于25-35个中文字。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01674F3J1X95NCzM80h_!!6000000002880-2-tps-1918-1938.png"}]},{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01epnzfK1Kpb8FWs3Lv_!!6000000001213-2-tps-1918-1566.png","title":"示例"}]}]}]},{"miniTitle":"规范-特殊文字","infoList":[{"miniTitle":"原则","list":[{"text":"在计算设计语言原则下，活动特殊字体需具备易读性，同时符合秩序、稳定、几何、虚实的原则，在字体设计时避免不稳定、无秩序的随机形态，不可凭空造建字体，需以基础字体变形，并配合主题直观传递活动基调与气质。","listChildren":[{"number":"01","title":"直观易懂","detail":"清晰传达活动主题，有限抽象体现阿里云设计的想象力的同时保证信息传达的准确。"},{"number":"02","title":"高效稳定","detail":"字形调整字体规范方便在各传播及运营场景进行高效复用，保证统一的识别，同时保证一致稳定的视觉观感。"}]}]},{"miniTitle":"基础字形","list":[{"text":"1.造字工房力黑（常规体）用于S/A级大促活动、特殊传播等独立项目，作为主标题基础字形，根据变形规则拓展。","imgLineSize":"2","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN014ijiYr1cs2K6OmlT2_!!6000000003655-2-tps-938-422.png","title":"造字工房力黑"}]},{"text":"2.造字工房方黑（常规体）与阿里云logo字形相似，传承品牌性，用于品牌活动logo字体、品牌频道、运营产品等场景。","imgLineSize":"2","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01gBymN322ia9t2s8Qf_!!6000000007154-2-tps-938-422.png","title":"造字工房方黑"}]}]},{"miniTitle":"变形规则-造字工房力黑","list":[{"text":"第1 步：将文字在AI中 Command + Shift + O 图形化","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01M2FR9P1ocG4JHjxWB_!!6000000005245-2-tps-1918-326.png"}]},{"text":"第2步：将勾、撇、点笔画，去掉圆角修饰，保持原字形笔画粗细和角度","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01gGUFh11gGiW0M7idT_!!6000000004115-2-tps-1918-584.png"}]},{"text":"第3步：字体向右倾斜5°（ 对象 > 变换 > 倾斜 > 倾斜角度5°，水平 ","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01AWbaS628EFchtWLc7_!!6000000007900-2-tps-1918-384.png"}]},{"text":"完成以上步骤后，可作为字形直接使用，进行2D或3D的拓展。 如有特殊使用场景，例如大促、海报、传播活动等，需要以字体为图形元素使用时，在保持识别性的前提下，可对字形再次加工： 如 1.笔画相连\u0003 ；2.笔画起/落笔，修饰字形 等等。"},{"text":"应用案例","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01Ti15Ev1fhS18JDj3t_!!6000000004038-2-tps-1918-652.png"}]},{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01SR7tOj21pAEXCHf0W_!!6000000007033-2-tps-1918-688.png"}]}]},{"miniTitle":"变形规则-造字工房方黑","list":[{"text":"第1步：将文字在AI中 Command + Shift + O 图形化","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01e97rHf278vOyyp0ub_!!6000000007753-2-tps-1918-256.png"}]},{"text":"第2步：变换 > 比例解绑> 宽度-20px","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01YYaGsq268dXKN4gy8_!!6000000007617-2-tps-1918-256.png"}]},{"text":"完成以上步骤后，可作为字形直接使用，进行2D或3D的拓展。"},{"text":"应用案例：","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01439irc1iNFOUjP3LV_!!6000000004400-2-tps-1918-1706.png"}]}]},{"miniTitle":"数字","list":[{"text":"英文、数字和标点符号，以[Roboto-Bold]作为基础字体","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01lqJGnh1HoH8oWNLql_!!6000000000804-2-tps-1918-624.png"}]}]},{"miniTitle":"禁止使用","list":[{"text":"禁止古风文字、儿童字体、宋体等不符合阿里云科技公司气质的字体","imgLineSize":"3","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01YzLfq91iQuYyN6uQf_!!6000000004408-2-tps-608-178.png"},{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01ussffY1EsuIeFJTyc_!!6000000000408-2-tps-608-178.png"},{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01vKpKlY1G2oTikkUE6_!!6000000000565-2-tps-608-178.png"}]}]},{"miniTitle":"物料字体","list":[{"text":"线上物料使用页面常规字体家族、特殊活动遵循特殊字体规范。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN0104RZsZ1IHaURb0bHN_!!6000000000868-2-tps-1918-1916.png"}]},{"text":"线下物料字体中文以阿里巴巴普惠体为主，苹方、黑体备选。英文以Roboto、Gotham为主，Alibaba Sans、Univers备选。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01Yx3ahf1m6znndtGbE_!!6000000004906-2-tps-1918-1002.png"}]}]}]}]},"key":"typography"},{"title":"质感","key":"virtual-texture","detail":{"title":"Alibaba Cloud","subtitle":"Texture","detail":[{"text":"在阿里云，我们常常在虚拟空间中重构现实。“质”与“感”的研究定义了3D环境里，具有表现力和独特性的模型质感，帮助阿里云3D设计更加“阿里云”。"}],"headerImg":"https://img.alicdn.com/imgextra/i1/O1CN01viPYpp1Wd1eAcMNtU_!!6000000002810-0-tps-1920-1012.jpg","content":[{"miniTitle":"设计研究","infoList":[{"miniTitle":"关于质感","list":[{"text":"质感，可以说是“虚实”这个设计观点在3D设计中的应用。产品品牌、数据智能、大型活动、营销场景，我们拥有很多3D的设计。那么，如何定义具有阿里云特色的质感呢？我们认为，它不是木质的、不是混凝土的、不是具有很强真实世界属性的。它细腻又稳定、它轻盈又有能量、它介于真实与虚拟之间。","listChildren":[]}]},{"miniTitle":"原则","list":[{"listChildren":[{"number":"01","title":"源于虚拟","detail":"材质介于真实与虚拟之间，非实际世界的材质。"},{"number":"02","title":"灵活应用","detail":"满足多种场景和多种软件的使用需求。"},{"number":"03","title":"体现智能","detail":"我们的材质更加面向未来世界，它是有生命的、是呼吸的、是灵动的。"}]}]},{"miniTitle":"特性","list":[{"imgLineSize":"3","infoImgList":[{"title":"磨砂材质","imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01d1mAc927uYalCqS8n_!!6000000007857-0-tps-608-358.jpg"},{"title":"灰度金属","imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01ibTJzB1rwogx0EJQL_!!6000000005696-0-tps-608-358.jpg"},{"title":"光感通透","imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01DJt0GF1jKKU3LTeFf_!!6000000004529-0-tps-608-358.jpg"}]}]}]},{"miniTitle":"使用场景","infoList":[{"miniTitle":"阿里云产品形象","list":[{"text":"产品形象是阿里云200+款云产品实体化、品牌化的设计表达，产品形象以简洁、立体和轻科技的方式表达产品的核心理念和特点。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01UTsZxt23NnniwMrBD_!!6000000007244-0-tps-1920-422.jpg"}]},{"text":"产品形象规范中包含白色非透明材质、白色透明/半透明材质及橙色发光/非发光材质，用不同材料的隐喻体现产品特性。","listChildren":[{"number":"01","title":"非透明材质","detail":"表达稳固、稳定、基础、不可穿透等特性。"},{"number":"02","title":"透明/半透明材质","detail":"表达轻量、容器、可穿透等特性，无颜色的材质占整体产商品模型90%面积。"},{"number":"03","title":"橙色材质","detail":"少量点缀应用与产商品模型中表达产品的核心特点及优势，如数据、计算、互联互通、型号等，整体橙色材质占产商品模型10%面积。"}],"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN015rjKgj1iAQInjgHlx_!!6000000004372-0-tps-1918-300.jpg","title":"材质系列"}]}]},{"miniTitle":"大会设计","list":[{"text":"无论是科技大会（例如云栖大会）还是线上活动、互动玩法，我们的材质都是充满想象力的。例如18年的云栖大会-光锥，它将时间与空间联动、在光锥中构画未来。在这个情况下，我们使用虚无又真实的磨砂材质作为光锥的主材质，体现它的空灵感。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01qvv5iu1Td4qLDkJXK_!!6000000002404-0-tps-1920-422.jpg"}]}]},{"miniTitle":"营销设计","list":[{"text":"营销设计的实践中，我们使用通透的玻璃、多样色彩的金属、细腻的磨砂，一起构建出了独特的云产品世界的狂欢。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01KYwh3z1ugjdIjnuW1_!!6000000006067-0-tps-1920-422.jpg"}]}]},{"miniTitle":"数字产品场景","list":[{"text":"在数字产品的设计中，我们使用灰度金属作为场景的结构/基础，光感材质作为核心物体/数据的表达，构建出了科技感的数字世界。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01nrLsWl1hTN4Obqa0V_!!6000000004278-0-tps-1920-422.jpg"}]}]}]}]}},{"title":"栅格","detail":{"title":"Alibaba Cloud","subtitle":"Matrix Grid","detail":[{"text":"栅格是一个能够执导产品中一切视觉元素的基础框架，是产品设计中的视觉基石。使用栅格系统，赋予视觉元素以规律的秩序感，从而更高效有序的完成视觉元素搭建，指导更合理的设计页面布局，挖掘更丰富且具有一致性的视觉创意。"}],"content":[{"miniTitle":"设计规范","infoList":[{"miniTitle":"基础序列","list":[{"text":"栅格序列的基础为2的X平方（X大于等于2），即最小数字单位为4。基础序列为2的平方数（22、23、24、25、26… )。扩充序列基于基础序列，在8-48之间，每一级通过额外增加4来进行有序扩充，以更好应对电脑端及移动端的更多细分场景。更大的平方序列则用于较大显示尺寸场景，如智能大屏或者大面积的墙面喷绘等。序列的使用场景包含但不限于以下场景：页面布局，功能组件，Logo/Icon，插画...","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01itSD4B1hCQQ2Efipv_!!6000000004241-2-tps-1918-460.png"}]},{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01A0ZYDE1Omd1n9wWE4_!!6000000001748-2-tps-1918-416.png"}]}]},{"miniTitle":"基础单元","list":[{"text":"最小平面几何单元为一个边长为4像素的正方单元。基础单元的不同组合方式形成了页面中不同元素之间的排布逻辑 - 行、列、卡片、表格、填充区域、白边区域等。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01Us6Wfu26UcXx0WbGH_!!6000000007665-2-tps-1918-416.png"}]},{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01hFW0BU24XhzHE1zHA_!!6000000007401-2-tps-1918-1136.png","title":"基础单元"}]},{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01QEcVLk1m5cc3xDxkX_!!6000000004903-2-tps-1918-1008.png","title":"基础单元范例"}]},{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN019k35hk1sttmxeefu2_!!6000000005825-2-tps-1918-544.png","title":"基础单元范例"}]}]},{"miniTitle":"拓展样式","list":[{"text":"在创意类视觉场景中，基础栅格同样由正方形单元构成，也可由其他基础图形构成单元，如三角形或圆形。具体单元相对应的像素数值可由具体场景或业务定义，但是特定数值需取自于基础序列中的数字。以下为方形栅格用于插画场景的案例：","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01eODEoY1hTN4faIba6_!!6000000004278-2-tps-1918-450.png"}]},{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01kD1Ko81uQhlwYjdRA_!!6000000006032-2-tps-1918-808.png","title":"栅格中不同的曲率变化"}]}]},{"miniTitle":"页面自适应布局","list":[{"text":"自适应布局可以使得桌面端产品页面内信息，针对不同尺寸的显示范围进行自动适配。提高信息在不同显示范围，或不同平台上的展示的规范性与一致性。"},{"text":"为有效降低沟通与理解成本，建议桌面端产品页面的布局统一使用1440px尺寸画板。在方案落地过程中，设计师需要建立适配的概念。需根据具体的场景页面情况，来考虑如何灵活的使用布局方案。"},{"text":"基于阿里云前台官网，及中后台控制台的使用场景，整体布局方式可分为三大类：","listChildren":[{"number":"011","title":"局部自适应的左右布局"},{"number":"02","title":"中央区域锁定的居中布局"},{"number":"03","title":"中央区域自适应的居中布局"}]},{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01WFL6S01ZZJHViKSyI_!!6000000003208-2-tps-1918-2358.png"}]},{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01dlf1up1hX2ExkunI1_!!6000000004286-2-tps-1918-2400.png"}]},{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN0186RHpx1j8QBkKtfnx_!!6000000004503-2-tps-1918-2400.png"}]},{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01WnlBii1xnYNXjErho_!!6000000006488-2-tps-1918-2744.png"}]}]},{"miniTitle":"页面自适应栅格"}]}],"headerImg":"https://img.alicdn.com/imgextra/i2/O1CN017oJS021UVZylSAZB3_!!6000000002523-2-tps-1918-460.png"},"key":"matrix-grid"},{"title":"数据可视化","detail":{"title":"Alibaba Cloud","subtitle":"Data Visualization","detail":[{"text":"内容完善中"}]},"key":"data-visualization"},{"title":"摄影","key":"photography","detail":{"title":"Alibaba Cloud","subtitle":"Photography","detail":[{"text":"阿里云是全球前三大云服务提供商，致力于以在线公共服务的方式，提供安全、可靠的计算和数据处理能力，让计算和人工智能成为普惠科技。摄影素材无论在网站上还是线下材料中，都能够给予用户对于品牌的第一感受。因此，阿里云所使用的摄影素材应当能够传递出“严谨”、“可靠”、“规则”、“稳定”的气质，充分且一致地体现出阿里云的品牌形象、产品能力、以及设计风格。"}],"content":[{"miniTitle":"设计概览","infoList":[{"miniTitle":"原则","list":[{"listChildren":[{"number":"01","title":"规则和秩序","detail":"严谨而有规律的风格基调"},{"number":"02","title":"专业和商业","detail":"面向专业用户，面向商业场景"},{"number":"03","title":"技术和创新","detail":"尝试新的交互和技术，提供创新的体验"}]}]},{"miniTitle":"应用场景","list":[{"text":"从应用场景的角度，可以大致区分为“官网常规页面类”与“传播和营销活动类”。前者往往作为页面的一部分，作为对页面内容的补充和辅助，和页面其他内容一起从各个角度帮助用户更全面地理解我们的服务与产品；后者往往服务于传播或营销活动，更加自由和开放地表达传播内容，打动用户。","imgLineSize":"2","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01zAHYqw1OZnw1tt1Nr_!!6000000001720-0-tps-936-360.jpg","title":"官网常规页面素材"},{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01D2yDRt28ZmEdgRgss_!!6000000007947-0-tps-936-360.jpg","title":"传播与营销活动素材"}]},{"text":"从内容的角度，大致可以区分为“产品”、“场景”、“人像”。","imgLineSize":"3","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN014m2uO01IOupEAV8I4_!!6000000000884-0-tps-608-358.jpg","title":"产品类"},{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01xbTgY71xM4brAICSu_!!6000000006428-0-tps-608-358.jpg","title":"场景类"},{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01fTsQzA1LHzgcES9D6_!!6000000001275-0-tps-608-358.jpg","title":"人像类"}]}]}]},{"miniTitle":"设计流程","infoList":[{"miniTitle":"1.摄影类型选择","list":[{"text":"摄影素材应当体现真实、严谨的气质。素材内容均建议为物理真实的场景，避免增加过于传统的后期图形，类似“架构图”或“概念图”等主观想象或补充解读的内容。","imgLineSize":"2","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01gkjPYO2780bnvZbWW_!!6000000007751-2-tps-936-360.png","title":"真实生产环境照片，能够体现和传达现代工业的科技感，为正确示例。"},{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN015Ukzli1HMnNDUE62i_!!6000000000744-0-tps-936-360.jpg","title":"真实照片进行后期叠加，风格不一致且传达信息复杂而抽象，为错误示例。"}]}]},{"miniTitle":"2.设计手段","list":[{"text":"在图片选择好之后，可以选择一些具有设计感的版式或渐变去和图片结合，让整体更具有品牌的表达。","listChildren":[{"title":"版式结合摄影","detail":"在奥运KV的设计中，我们将运动员的图片与秩序感的线条和奥运的色彩结合，不仅体现了设计语言“秩序”“几何”的关键词，也表达了奥运的品牌。  在China Gateway的升级中，我们使用了能代表品牌的箭头符号（品牌辅助图形）与摄影结合，不仅体现了品牌、也增加了场景感和真实感，让平凡的摄影更具有表达的力度。","imgLineSize":"1","number":"01","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01Gtnnhc1jfOhXktJev_!!6000000004575-0-tps-1918-814.jpg","title":"Alibaba Cloud Olympic"}]},{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01qDylEq1C6EyjW5tZJ_!!6000000000031-0-tps-1918-680.jpg","title":"Alibaba Cloud Outdoor Adervertising"}]},{"imgLineSize":"1","infoImgList":[{"title":"China Gateway","imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01k54Gj41RkHqUsorT8_!!6000000002149-0-tps-1918-632.jpg"}]},{"number":"02","title":"标识结合摄影","detail":"在新云力量的升级中，我们将标识和摄影结合，应用在了品牌传达的方方面面。无论是pc端卡片、还是H5的运营位、文章封面，都将摄影结合标识，进行了统一的应用。","imgLineSize":"1","infoImgList":[{"title":"新云力量","imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01iOd46w1QN6B8b5YI8_!!6000000001963-0-tps-1916-604.jpg"}]},{"imgLineSize":"3","infoImgList":[{"title":"手机端标识区","imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01fLp2es1rmHaFPOdr4_!!6000000005673-0-tps-608-358.jpg"},{"title":"手机端文章封面","imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01es6lhr1PAu13LaxnA_!!6000000001801-0-tps-608-358.jpg"},{"title":"PC端卡片封面","imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN016wfObC1uTS9EBVlYr_!!6000000006038-0-tps-608-358.jpg"}]},{"number":"03","title":"代码结合摄影","detail":"在关于阿里云的设计中，我们将摄影图片中的主体物提取，和背景的景深图片相结合。当鼠标hover在主体物时，会形成一个视差的效果。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01bDVc7v1VI7xZVtg4F_!!6000000002629-0-tps-1916-630.jpg","title":"About Alibaba Cloud"}]}]}]}]},{"miniTitle":"摄影指导","infoList":[{"miniTitle":"1.工作流","list":[{"text":"优秀的摄影作品不一定遵循固定的拍摄流程，但一个相对通用的工作流可以帮助您快速开始拍摄符合标准的摄影素材。","imgLineSize":"4","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01ds9otZ21jD5GAReTq_!!6000000007020-0-tps-450-244.jpg","title":"前期构图","detail":"构图是拍摄摄影作品的第一步，同时作品的构图最先反应出作品的气质和风格。"},{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01f7p7ex1UpjP52tJah_!!6000000002567-0-tps-450-244.jpg","title":"光影环境","detail":"对作品的环境、打光进行设计。"},{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01KT7idf1HwyfFbfFG3_!!6000000000823-0-tps-450-244.jpg","title":"相机设置与拍摄","detail":"对相机的焦段、光圈、快门、感光度等进行设置。"},{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01FNfhNJ1CE1iDms2bI_!!6000000000048-0-tps-450-244.jpg","title":"后期处理","detail":"通常相机直出原片会与实际需求有所差异，镜头畸变、色温等均可通过后期处理，此外也可以通过后期获得更多场景需要的创意效果。"}]}]},{"miniTitle":"2.栅格系统","list":[{"text":"为了帮助摄影素材与载体（页面、视频等）更为协调，同时传递出一种严谨、规范、可靠的气质，我们建议可以使用栅格系统（Grid System）来辅助构图。","imgLineSize":"2","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01nPq60B1qxu12QQuia_!!6000000005563-0-tps-936-360.jpg","title":"栅格系统"},{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01KRwu4q1ZOmAZRYjxF_!!6000000003185-0-tps-936-360.jpg","title":"使用示例"}]},{"text":"参考阿里云官网的栅格规范，我们将图片简单的进行 12 等分。同样参考阿里云官网的栅格规范，我们可以对图片进行 6-6；3-3-3-3；4-4-4 的等分，从而进行辅助构图。"}]},{"miniTitle":"3.构图","list":[{"text":"拍摄主体为物体时，建议拍摄主体采用正面、侧面、45度角等规则感较强的角度，背景建议采用物体的应用背景或纯色背景。","imgLineSize":"2","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01POsq241KShKGqFHV7_!!6000000001163-0-tps-936-360.jpg","title":"正确示例"},{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01ZgMvXR1YaObTFT1UI_!!6000000003075-0-tps-936-360.jpg","title":"正确示例"}]},{"imgLineSize":"2","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01F924qI1GwEP2q9DQv_!!6000000000686-0-tps-936-360.jpg","title":"正确示例"},{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN019Q43U71EE92m90moa_!!6000000000319-0-tps-936-360.jpg","title":"错误示例"}]},{"text":"上图（左）为正确示例，规则感强，背景简单清晰；上图（右）为错误示例，作为摄影作品本身构图、光影等都优秀，但规则和逻辑感较差，与严谨、商业的品牌感不符。"},{"text":"拍摄主体为人物时，建议拍摄主体着装和姿态简单利落，体现专业性，背景建议采用拍摄主体的行业背景、纯色背景或品牌背景。"},{"imgLineSize":"2","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN010mwZSL1tSFUPwim0R_!!6000000005900-0-tps-936-360.jpg","title":"正确示例"},{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01imHDED21PW3HpJ6Qq_!!6000000006977-0-tps-936-360.jpg","title":"正确示例"}]},{"imgLineSize":"2","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01WLqgBh1I4J00ibHKv_!!6000000000839-2-tps-936-360.png","title":"错误示例"},{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01dQBI1U1iGpqZkPwE2_!!6000000004386-0-tps-936-360.jpg","title":"错误示例"}]}]},{"miniTitle":"4.焦距","list":[{"text":"基于阿里云偏重技术和理性的品牌风格，建议使用中长的焦段拍摄物品和人像，通过小透视来传递严谨和理性。中段的焦段拍摄场景。尽量避免使用鱼眼和大广角拍摄。","imgLineSize":"2","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01BS6nSY1k8i3EnEBFU_!!6000000004639-0-tps-936-360.jpg","title":"50MM"},{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01Szk9Uu1rbI4wOH6Hp_!!6000000005649-0-tps-936-360.jpg","title":"100MM"}]},{"text":"上图分别为 50MM 和 100MM 焦段拍摄，物理上的平行在照片上也呈现为接近平行，带来一种严谨和理性的感受。"}]},{"miniTitle":"5.景深","list":[{"text":"尽量使用小光圈，让拍摄画面的景深延长，主体和背景清晰，传递理性的感觉。尽量避免追求浅景深的虚化而选择大光圈。","imgLineSize":"2","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01MAfGdr1Ka1f91Kj5n_!!6000000001179-0-tps-936-360.jpg","title":"物体示例"},{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01IsiQ6c1QAjU67YqcY_!!6000000001936-0-tps-936-360.jpg","title":"场景示例"}]}]},{"miniTitle":"6.文化","list":[{"text":"文化是在摄影和选择摄影素材时很容易忽视的一个维度。面向多区域的场景，尽量避免仅适用于单一地区的素材，避免不同区域用户的理解障碍。此外每个国家都有风俗文化，尤其是宗教信仰常扮重要的角色，要考虑并尊重当地的风俗和宗教。","imgLineSize":"2","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01CoT94y1QlpZCUxWJd_!!6000000002017-0-tps-936-360.jpg","title":"印尼场景"},{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01pnDvnG1ZUjJuj8rYQ_!!6000000003198-0-tps-936-360.jpg","title":"印尼场景"}]}]}]}]}},{"title":"文案","key":"writing","detail":{"title":"Alibaba Cloud","subtitle":"Writing","detail":[{"text":"无论是在口语还是学术中，文案都是连接用户和信息的重要桥梁。B端场景下，简单明了、专业且标准化的语言，能帮助用户减少理解成本，高效操作。以“文”为基础、“段”为场景、“页”为体现，简单直接，专业致知。"}],"content":[{"miniTitle":"文案规范","infoList":[{"list":[{"text":"围绕“让用户有被服务的感觉”，减少用户的理解成本，体现专业感。"}]},{"miniTitle":"1.文 - 文感明确","list":[{"text":"","listChildren":[{"number":"01","title":"文感：简单直接，专业致知","detail":"B端用户不需要氛围或者过于情绪的文案指引，直接了当，简单易懂是用户阅读的核心诉求。同时文案除了体现阿里云的专业度外，让用户能从核心知晓主要内容也是文案最主要的目的。"},{"number":"02","title":"语言原则：专业、简明、稳定","detail":"符合专业规范用语，避免个人情绪。主体突出，目的导向。贴合场景（产品专业、营销域、品牌域）不跳脱。"}]}]},{"miniTitle":"2.段 - 文案指引","list":[{"listChildren":[{"number":"01","title":"保持专业感，简明扼要","detail":"为方便在 专业类场景有限文字 情况下提高阅读效率，重要信息突出，让用户第一眼看到最核心的内容。应用场景：产品体系、产品详情页、售卖-产品介绍、专业文章..."},{"number":"02","title":"清楚传达，表述一致","detail":"营销域和品牌域场景下，也要遵循以产品专业为主体，适当融合宣传或营销文案。应用场景：Banner、豆腐块、活动大促、品牌文案。"},{"number":"03","title":"统一讲述角度，完整逻辑","detail":"当在 叙事类 场景下，根据陈述框架，先总结概要，强化主体（产品/服务/品牌），后再进行过程描述。应用场景：解决方案、客户案例、资讯。"},{"number":"04","title":"大小写和标点符号规范","detail":"应用场景：所有文案场景"}]}]},{"miniTitle":"3.页 - 具体落地","list":[{"text":"内容补充中..."}]}]},{"miniTitle":"文案应用"}]}},{"title":"动态","key":"motion","detail":{"title":"Alibaba Cloud","subtitle":"Motion","detail":[{"text":"内容完善中"}]}},{"title":"板式","key":"layout","detail":{"title":"Alibaba Cloud","subtitle":"Layout","detail":[{"text":"内容完善中"}]}},{"title":"色彩","key":"color","detail":{"title":"Alibaba Cloud","subtitle":"Color","detail":[{"text":"内容完善中"}]}}]}],"isShowEnType":"false","copyrightInfo":{"title":"阿里云设计中心","desc":"Alibaba Cloud Design 以“计算设计”为核心设计哲学，依托于阿里巴巴的设计愿景，让商业美而简单，让技术美而纯粹。","copyright":"Last updated 2021/05/06      Copyright © 2021 Alibaba Cloud Design","links":[{"title":"常用链接","list":[{"name":"阿里云官网","url":"https://www.aliyun.com/"},{"name":"阿里巴巴招聘","url":"https://talent.alibaba.com/"},{"name":"阿里巴巴设计","url":"https://www.alibabadesign.com/"}]},{"title":"相关资源","list":[{"name":"阿里云控制台设计","url":"https://xconsole.cloud/"},{"name":"阿里云品牌设计","url":"https://www.aliyun.com/about/branddesign"}]}]}}