当前位置:首页 >> 焦点

阿里巴巴设计让商业变得美而简单

10万年前,阿里语言第一次出现的巴巴时候 ,茹毛饮血的设计智人一定没有想到,地球的让商文明,原来从这样简单的业变咿咿呀呀悄然开始;

5100多年前,文字就在尼罗河畔的得美单纸草上开始若隐若现 ,彼时的而简他们也一定没有猜到,有一种东西竟然可以超越时空 ,阿里将不同的巴巴咿咿呀呀记录下来,为后续持续传承的设计文明推开大门

也许就在几年前,我们也未曾妄想 ,让商原来"语言"还有更多元的业变承载方式  ,它可以整合任何一种形态 ,得美单在产品间进行沟通与表达,而简完成"真实世界"和"虚拟世界" "的阿里对话。

阿里巴巴设计让商业变得美而简单(图1)

今天要聊的,就是这个虚拟世界中的语言-"阿里云设计语言" ,摘要如下;

1.为什么需要「设计语言」

2.如何来设计「设计语言」

3.语言之筋骨「设计观点」

4.语言之血脉「设计规范」

5.我们还在路上...

阿里巴巴设计让商业变得美而简单(图2)

1.为什么需要「设计语言」

时光回到2009年9月10日  ,阿里云在一片鄙夷与嘲笑中开始野蛮生长 ,自此开疆扩土,攻城拔寨;在之后的10年里 ,经历技术的发展 ,云计算在不断重塑这个世界;人工智能 ,大数据,云计算,虚拟现实,物联网,边缘计算 ,越来越多的存在在虚拟世界中的概念在重新定义我们所理解的现实生活。

阿里巴巴设计让商业变得美而简单(图3)

技术腾云驾雾扶摇直上越来越"匿迹隐形" ,离观众的距离越来越远;站在"技术"与"人文"十字路口的"设计"似乎被时代的宠儿来减少这一距离。它从阿努比斯的岩洞中走出来 ,漫行过希腊的立柱与罗马的穹顶  ,在文艺复兴和装饰艺术中转身 ,走入密斯的平面和柯布的立面,走入简洁的现代和变幻的未来 ,这个日益丰富的云上的世界 ,拥有更多发散发的产品形态,更加多元的生态系统;我们认为是时候推出统一的设计语言 ,让"数"与"数"对话 ,"物"与"物"交流 ,联结"真实世界"与"虚拟世界"。

阿里巴巴设计让商业变得美而简单(图4)

这种语言,不为碳基生物打造 ,甚至云端虚拟硅基世界专有;它帮助这个系统中所有的角色创造了一个同一个语境 。对接收消息的客户而言 ,无论他在任何场景,任何终端,当接触阿里云的产品或服务时 ,会基于同样的设计语言形成一致的认知 ,可延续的行为习惯 ,统一的品牌心智 。对隐瞒在云端背后的我们,统一的设计语言也能够帮助大家在进行设计输出时,保持一致性 ,从"思维"的一致到"合并"的一致,全面保障输出物达到"阿里云设计"的设计质量。

2.如何来设计"设计语言"

阿里巴巴设计让商业变得美而简单(图5)

ACD设计进化系统是不断变化 ,不断混合,不断自进化的。未来转变智能和科技的发展 ,思考 ,意识,创意不断发展的设计相信新范式总是不断出现,科学进步的规则便是打破规则 。会进一步扩大化,知识与实践也会更加混合 。

如果没有猜错,此刻你应该可以如数家珍的列出的一些成熟 ,成体系的设计语言;不知道你会否也曾思考,这些"语言"和"语言"有什么不同,在设计它们的时候 ,所谓世界上现存7000多种语言,每个月大概会消失2种;令人震惊的腕的同时,还有一个问题值得深思,某种的语言是经得起时间考验的 ?

阿里巴巴设计让商业变得美而简单(图6)

能够生存下来的物种 ,并不是那些最强壮的,也不是那些最聪明的,而不是那些对变化带来快速反应的 。

-查尔斯·罗伯特·达尔文

"进化设计语言",是我们认为最好的解;它是有生命力且可以自生长的,它会根据环境和外部的变化而变化,像我们体内的某些基因,千百万年来  ,它就这样的延续下来存在在了我们的血液里;阿里云设计语言也希望被打造成一个有生命力的,能绵延许久,所到之处都有痕迹的语言 。

因此,「进化设计语言」是一个有很强自我驱动能力的 ,自进化的,可持续发展的语言 ,它是阿里云最基础的设计指南指导阿里云设计的风格并发输出最原子的设计元素,同时为大家提供创造云平台,数据平台 ,云生态等所需的构造指南,规范 ,组件 ,协同,评估 ,度量等多维维度的资源  。帮助阿里云设计更"阿里云",我们希望有一天自己能成为一个形容词 ,代表某一种风格,水准,质量 。

对,这很"阿里云设计"。

3.语言之筋骨-「设计观点」

大部分外化的行为都是内心思绪的写照 ,在重建看得见的部分之前  ,"看不见"的部分往往更加关键,你的观点往往决定了你的不同;以下是阿里云设计语言的主要观点 :

阿里巴巴设计让商业变得美而简单(图7)

3.1虚实-望其虚握其实

进化设计(Evolving Design)的灵感虚拟世界  ,我们望其虚握其实 ,抽象与具象交织 ,数位化的虚拟世界与现实结合 。

阿里巴巴设计让商业变得美而简单(图8)

3.2等级-等级是生命之匙

是我们组织信息,建立联系的重要方式;阿里云设计是严谨偏执的 ,内在逻辑自恰的。

阿里巴巴设计让商业变得美而简单(图9)

3.3几何-充满想象的几何

我们用几何表达实际含义,优化的运用平面几何和立体几何去建造阿里云充满想象力的世界 。

阿里巴巴设计让商业变得美而简单(图10)

3.4运动-运动体现智能

我们的语言是流动的,运动的,不断进化的。在色彩中,它表现为呼吸感;在图形中,它体现了智能感。

阿里巴巴设计让商业变得美而简单(图11)

4.语言之血脉-「设计规范」

看过一段对"原子"描述最动人的话 :

你身体里的每一个原子都来自一颗宝石爆炸了的恒星,你左手的原子与右手的原子也许来自不同的恒星 。这实在是我所知道的物理学中最富诗意的东西 :你的一切都是星尘……因此,忘掉耶稣吧 ,星星都死去了,你今天才能在这里。

-劳伦斯·克劳斯

构成你我的基本粒子,来自浩瀚星辰 ,山川河岳 ,飞禽走兽 ,也终归于茫茫宇宙,我们本身就是宇宙和时间的一部分 ,是历史 ,是现在  ,也是未来。

真实世界粒子构成  ,它们在星辰,山川和生命体之间穿梭传承 ,虚拟世界亦如是 ,因此我们在着力形成云上最基本的粒子输出规范 ,希望它们也能够成为云上设计输出物的要义 。

4.1 3D产品设计规范

3D产品设计指南

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

阿里巴巴设计让商业变得美而简单(图12)

材质  ,灯光,颜色应用:

阿里巴巴设计让商业变得美而简单(图13)

产品概念传达:

阿里巴巴设计让商业变得美而简单(图14)

产品形象使用 :

阿里巴巴设计让商业变得美而简单(图15)

4.2图标设计规范

图像设计指南

UI作为图标,象形图,提供了一种"视觉速记"形式,能够更好地利用其熟悉的形状和隐喻以简单的图形形式传递信息。产品图标 。规范阿里云图标体系,可以在体验方面保证图标基因元素的一致性 ,从而为设计提效保驾护航 。

2D图标+ 3D图标周期表 :

阿里巴巴设计让商业变得美而简单(图16)

系统图标设计 :

阿里巴巴设计让商业变得美而简单(图17)

图标设计使用:

阿里巴巴设计让商业变得美而简单(图18)

4.3插画设计规范

2D插图设计指南

2D插画是一种能将产品功能等抽象概念以直观且轻量的方式呈现的视觉表达形式,具有亲和力和易读性。在阿里云官网产品详情页 ,新手引导,大促营销  ,线下活动规范阿里云插图体系,既能提高设计效率,也能保持全站插图语言的一致性 ,形成品牌识别度。

作为计算设计语言的延伸,阿里云插画风格具有简洁轻巧 ,分割块面,几何结构等特征 。结合"有层次的想象力"  ,将抽象的计算信息和科技概念用充满克制力和逻辑美学的插图进行表达。

阿里巴巴设计让商业变得美而简单(图19)

角度规范:

阿里巴巴设计让商业变得美而简单(图20)

初步规范 :

阿里巴巴设计让商业变得美而简单(图21)

4.4实景图像规范

摄影设计指南

阿里云一直致力于以在线公共服务的方式 ,提供安全 ,可靠的计算和数据处理能力,让计算和人工智能成为普惠科技。摄影素材在网站上还是线下材料中,都能够给予用户关于品牌的第一感受 。因此  ,阿里云所使用的摄影素材能够传递出"严谨","可靠","规则" ,"稳定"的气质 ,充分且一致地体现出阿里云的品牌形象,产品能力 ,以及设计风格 。

阿里巴巴设计让商业变得美而简单(图22)

4.5进化色彩规范

计算色彩指标

设计语言将色彩体系解读为2个维度  :品牌色彩和进化色彩 ,品牌色彩包含了阿里云品牌色的橙色系列  ,进化色彩定义了阿里云线上独有的颜色系列 ,其运用在云产品 ,数字产品,智能产品,ET形象等场景中 。

进化色彩浓度阿里云特色的技术环境,它是虚与实的结合,是智能的体现,是灵动的状态 ,它包含了基础色彩 ,灰度,呼吸色彩,产品色彩 。

阿里巴巴设计让商业变得美而简单(图23)

呼吸的色彩:

阿里巴巴设计让商业变得美而简单(图24)

4.6初步设计规范

网格设计规范

布局是一个能够执导产品的所有视觉元素的基础框架  ,是产品设计中的视觉基石。使用布局系统,将视觉元素以规律性的空间感 ,从而更高效地有序的完成视觉元素构建,指导更合理的设计页面布局,挖掘更丰富且具有一致性的视觉创意。

阿里巴巴设计让商业变得美而简单(图25)

以上仅展示阶段性成果 ,设计原则 ,设计指标 ,元素库,工具库等,我们还在持续"进化" 。在进化的设计语言下 ,用一切的临机应变和未雨绸缪对抗对抗的日新月异 。

知识

10万年前,阿里语言第一次出现的巴巴时候 ,茹毛饮血的设计智人一定没有想到,地球的让商文明,原来从这样简单的业变咿咿呀呀悄然开始;

5100多年前,文字就在尼罗河畔的得美单纸草上开始若隐若现 ,彼时的而简他们也一定没有猜到,有一种东西竟然可以超越时空 ,阿里将不同的巴巴咿咿呀呀记录下来,为后续持续传承的设计文明推开大门

也许就在几年前,我们也未曾妄想 ,让商原来"语言"还有更多元的业变承载方式  ,它可以整合任何一种形态 ,得美单在产品间进行沟通与表达,而简完成"真实世界"和"虚拟世界" "的阿里对话。

阿里巴巴设计让商业变得美而简单(图1)

今天要聊的,就是这个虚拟世界中的语言-"阿里云设计语言" ,摘要如下;

1.为什么需要「设计语言」

2.如何来设计「设计语言」

3.语言之筋骨「设计观点」

4.语言之血脉「设计规范」

5.我们还在路上...

阿里巴巴设计让商业变得美而简单(图2)

1.为什么需要「设计语言」

时光回到2009年9月10日  ,阿里云在一片鄙夷与嘲笑中开始野蛮生长 ,自此开疆扩土,攻城拔寨;在之后的10年里 ,经历技术的发展 ,云计算在不断重塑这个世界;人工智能 ,大数据,云计算,虚拟现实,物联网,边缘计算 ,越来越多的存在在虚拟世界中的概念在重新定义我们所理解的现实生活。

阿里巴巴设计让商业变得美而简单(图3)

技术腾云驾雾扶摇直上越来越"匿迹隐形" ,离观众的距离越来越远;站在"技术"与"人文"十字路口的"设计"似乎被时代的宠儿来减少这一距离。它从阿努比斯的岩洞中走出来 ,漫行过希腊的立柱与罗马的穹顶  ,在文艺复兴和装饰艺术中转身 ,走入密斯的平面和柯布的立面,走入简洁的现代和变幻的未来 ,这个日益丰富的云上的世界 ,拥有更多发散发的产品形态,更加多元的生态系统;我们认为是时候推出统一的设计语言 ,让"数"与"数"对话 ,"物"与"物"交流 ,联结"真实世界"与"虚拟世界"。

阿里巴巴设计让商业变得美而简单(图4)

这种语言,不为碳基生物打造 ,甚至云端虚拟硅基世界专有;它帮助这个系统中所有的角色创造了一个同一个语境 。对接收消息的客户而言 ,无论他在任何场景,任何终端,当接触阿里云的产品或服务时 ,会基于同样的设计语言形成一致的认知 ,可延续的行为习惯 ,统一的品牌心智 。对隐瞒在云端背后的我们,统一的设计语言也能够帮助大家在进行设计输出时,保持一致性 ,从"思维"的一致到"合并"的一致,全面保障输出物达到"阿里云设计"的设计质量。

2.如何来设计"设计语言"

阿里巴巴设计让商业变得美而简单(图5)

ACD设计进化系统是不断变化 ,不断混合,不断自进化的。未来转变智能和科技的发展 ,思考 ,意识,创意不断发展的设计相信新范式总是不断出现,科学进步的规则便是打破规则 。会进一步扩大化,知识与实践也会更加混合 。

如果没有猜错,此刻你应该可以如数家珍的列出的一些成熟 ,成体系的设计语言;不知道你会否也曾思考,这些"语言"和"语言"有什么不同,在设计它们的时候 ,所谓世界上现存7000多种语言,每个月大概会消失2种;令人震惊的腕的同时,还有一个问题值得深思,某种的语言是经得起时间考验的 ?

阿里巴巴设计让商业变得美而简单(图6)

能够生存下来的物种 ,并不是那些最强壮的,也不是那些最聪明的,而不是那些对变化带来快速反应的 。

-查尔斯·罗伯特·达尔文

"进化设计语言",是我们认为最好的解;它是有生命力且可以自生长的,它会根据环境和外部的变化而变化,像我们体内的某些基因,千百万年来  ,它就这样的延续下来存在在了我们的血液里;阿里云设计语言也希望被打造成一个有生命力的,能绵延许久,所到之处都有痕迹的语言 。

因此,「进化设计语言」是一个有很强自我驱动能力的 ,自进化的,可持续发展的语言 ,它是阿里云最基础的设计指南指导阿里云设计的风格并发输出最原子的设计元素,同时为大家提供创造云平台,数据平台 ,云生态等所需的构造指南,规范 ,组件 ,协同,评估 ,度量等多维维度的资源  。帮助阿里云设计更"阿里云",我们希望有一天自己能成为一个形容词 ,代表某一种风格,水准,质量 。

对,这很"阿里云设计"。

3.语言之筋骨-「设计观点」

大部分外化的行为都是内心思绪的写照 ,在重建看得见的部分之前  ,"看不见"的部分往往更加关键,你的观点往往决定了你的不同;以下是阿里云设计语言的主要观点 :

阿里巴巴设计让商业变得美而简单(图7)

3.1虚实-望其虚握其实

进化设计(Evolving Design)的灵感虚拟世界  ,我们望其虚握其实 ,抽象与具象交织 ,数位化的虚拟世界与现实结合 。

阿里巴巴设计让商业变得美而简单(图8)

3.2等级-等级是生命之匙

是我们组织信息,建立联系的重要方式;阿里云设计是严谨偏执的 ,内在逻辑自恰的。

阿里巴巴设计让商业变得美而简单(图9)

3.3几何-充满想象的几何

我们用几何表达实际含义,优化的运用平面几何和立体几何去建造阿里云充满想象力的世界 。

阿里巴巴设计让商业变得美而简单(图10)

3.4运动-运动体现智能

我们的语言是流动的,运动的,不断进化的。在色彩中,它表现为呼吸感;在图形中,它体现了智能感。

阿里巴巴设计让商业变得美而简单(图11)

4.语言之血脉-「设计规范」

看过一段对"原子"描述最动人的话 :

你身体里的每一个原子都来自一颗宝石爆炸了的恒星,你左手的原子与右手的原子也许来自不同的恒星 。这实在是我所知道的物理学中最富诗意的东西 :你的一切都是星尘……因此,忘掉耶稣吧 ,星星都死去了,你今天才能在这里。

-劳伦斯·克劳斯

构成你我的基本粒子,来自浩瀚星辰 ,山川河岳 ,飞禽走兽 ,也终归于茫茫宇宙,我们本身就是宇宙和时间的一部分 ,是历史 ,是现在  ,也是未来。

真实世界粒子构成  ,它们在星辰,山川和生命体之间穿梭传承 ,虚拟世界亦如是 ,因此我们在着力形成云上最基本的粒子输出规范 ,希望它们也能够成为云上设计输出物的要义 。

4.1 3D产品设计规范

3D产品设计指南

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

阿里巴巴设计让商业变得美而简单(图12)

材质  ,灯光,颜色应用:

阿里巴巴设计让商业变得美而简单(图13)

产品概念传达:

阿里巴巴设计让商业变得美而简单(图14)

产品形象使用 :

阿里巴巴设计让商业变得美而简单(图15)

4.2图标设计规范

图像设计指南

UI作为图标,象形图,提供了一种"视觉速记"形式,能够更好地利用其熟悉的形状和隐喻以简单的图形形式传递信息。产品图标 。规范阿里云图标体系,可以在体验方面保证图标基因元素的一致性 ,从而为设计提效保驾护航 。

2D图标+ 3D图标周期表 :

阿里巴巴设计让商业变得美而简单(图16)

系统图标设计 :

阿里巴巴设计让商业变得美而简单(图17)

图标设计使用:

阿里巴巴设计让商业变得美而简单(图18)

4.3插画设计规范

2D插图设计指南

2D插画是一种能将产品功能等抽象概念以直观且轻量的方式呈现的视觉表达形式,具有亲和力和易读性。在阿里云官网产品详情页 ,新手引导,大促营销  ,线下活动规范阿里云插图体系,既能提高设计效率,也能保持全站插图语言的一致性 ,形成品牌识别度。

作为计算设计语言的延伸,阿里云插画风格具有简洁轻巧 ,分割块面,几何结构等特征 。结合"有层次的想象力"  ,将抽象的计算信息和科技概念用充满克制力和逻辑美学的插图进行表达。

阿里巴巴设计让商业变得美而简单(图19)

角度规范:

阿里巴巴设计让商业变得美而简单(图20)

初步规范 :

阿里巴巴设计让商业变得美而简单(图21)

4.4实景图像规范

摄影设计指南

阿里云一直致力于以在线公共服务的方式 ,提供安全 ,可靠的计算和数据处理能力,让计算和人工智能成为普惠科技。摄影素材在网站上还是线下材料中,都能够给予用户关于品牌的第一感受 。因此  ,阿里云所使用的摄影素材能够传递出"严谨","可靠","规则" ,"稳定"的气质 ,充分且一致地体现出阿里云的品牌形象,产品能力 ,以及设计风格 。

阿里巴巴设计让商业变得美而简单(图22)

4.5进化色彩规范

计算色彩指标

设计语言将色彩体系解读为2个维度  :品牌色彩和进化色彩 ,品牌色彩包含了阿里云品牌色的橙色系列  ,进化色彩定义了阿里云线上独有的颜色系列 ,其运用在云产品 ,数字产品,智能产品,ET形象等场景中 。

进化色彩浓度阿里云特色的技术环境,它是虚与实的结合,是智能的体现,是灵动的状态 ,它包含了基础色彩 ,灰度,呼吸色彩,产品色彩 。

阿里巴巴设计让商业变得美而简单(图23)

呼吸的色彩:

阿里巴巴设计让商业变得美而简单(图24)

4.6初步设计规范

网格设计规范

布局是一个能够执导产品的所有视觉元素的基础框架  ,是产品设计中的视觉基石。使用布局系统,将视觉元素以规律性的空间感 ,从而更高效地有序的完成视觉元素构建,指导更合理的设计页面布局,挖掘更丰富且具有一致性的视觉创意。

阿里巴巴设计让商业变得美而简单(图25)

以上仅展示阶段性成果 ,设计原则 ,设计指标 ,元素库,工具库等,我们还在持续"进化" 。在进化的设计语言下 ,用一切的临机应变和未雨绸缪对抗对抗的日新月异 。


{dede:include filename="menu.htm"/}