链接

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图1

    本课题将结合阿里云设计中心在BIV Builder建筑信息可视化、B-Design企业级设计系统、神经符号实验室NS-LAB品牌升级等多个项目中的设计探索及实践,分享数字创意设计师在面对B端行业复杂多维的体验场景与业务时,如何通过创意技术和动态设计,跳脱传统视觉设计的限制,提升体验品质并打造独特的品牌心智。

    本文内容节选自 2022 U设计周的主题分享《创意技术 X 动态图像,解锁数字设计新可能》,分享人是我们团队的创意设计师蔡光锡。

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图2
    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图3

    本文1906个字,阅读需要5分钟。

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图4
    Brand Experience -

    品牌体验

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图5

    在品牌体验中,我们可以找到一个简单可记忆的核心理念,并通过创意技术和动态设计来强化这个品牌认知。

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图6

    当我们谈及品牌体验的时候,我们说的不仅仅是一个logo、一套VI。品牌体验是个人对一个品牌的所有感受、想法和反馈的总和。简单来说,我们接触到一个新的品牌,会对它的什么产生一个深刻和持久的印象。

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图7

    B-Design是阿里云打造的企业级产品设计系统,帮助云计算生态中小企业体验升级,快速构建数字体验。面对市面上如此多的设计系统,我们是如何做到品牌的差异化,让B-Design脱颖而出?

    在定义B-Design的最初期,设计师面临的一个很大的挑战是,如何为一个B类中后台设计系统寻找一个高识别性,却又不喧宾夺主的视觉内核。最终我们选择从色彩入手,并率先在设计系统中提出了呼吸色的概念。

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图8

    不同于传统的多色渐变,我们通过将色彩信息映射到一个3D的网格mesh上,通过添加噪声场,让色彩很微妙的变化和呼吸起来,从而诞生了B-Design特有的呼吸色。

    通过创意技术及设计工程化的能力,我们将呼吸色的色彩算法沉淀成了呼吸色工具,开放给更多用户使用。

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图9

    全新的B-Design 3.0,我们也将呼吸色进一步升级为了呼吸UI——让色彩在UI组件中进行呼吸和流动。

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图10

    同时,我们也配合动态设计的应用,将“呼吸色”这一品牌DNA,融入到整个品牌体验中,探索B-Design 3.0背后的设计理念及设计实践。

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图11

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图12
    Product Experience -

    产品体验

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图13

    动态设计让产品有形和可感知;创意技术让体验更沉浸、高效和真实。

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图14

    BIV Builder 是设计中心孵化的一个创新型数字产品,帮助用户高效、快速的搭建并管理智慧园区。

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图15

    BIV Builder 实现了园区的工程话搭建及一系列可视化交互能力,而这里面的核心技术模块都由创意技术设计师设计并开发完成的。

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图16

    不同于常见的依赖GIS地理生成,在智慧园区的生成中,我们把环境概貌的数据绘制完全交给设计师来掌控:这实现了非常低成本、自由、快速的规模化3D生成。

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图17

    同时,我们提供给用户参数化的样式与主题皮肤选配,来达到风格化的视觉效果。

    为了更好地诠释产品功能,我们通过动态设计的镜头语言来拆解 BIV Builder 的核心功能和技术设计上的亮点。

    大部分3D可视化的生产链路通常需要逐周上月,但通过BIV Builder的产品及工程化能力,完成这样的智慧园区搭建只需几天时间。

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图18

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图19

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图20
    Creative Experience -

    创意体验

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图21

    创意技术助力设计师释放创造力;细腻的动画细节制造情感链接。

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图22

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图23

    如今,技术和设计的边界逐渐模糊,我们现在拥有必要的工具(代码/引擎等)来实现更大的设计可能性和更具创新性的解决方案。

    神经符号 PHOTON Experience 项目中,我们将PHOTON人工智能抽象为一个 “数字大脑”,通过沉浸式的互动体验,让用户生成代表机器意识的数字纤维。

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图24

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图25

    通过逻辑性和想象力两条互动体验路径,让用户感知PHOTON人工智能的图像问答能力和图像生成能力。

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图26

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图27

    我们利用Houdini和Blender的脚本来生成几何数据,并完全利用WebGL和着色器(GLSL)来开发这个体验网站。除了人工智能的算法和能力,我们也向用户提供了设计、动画和技术方面的体验。

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图28

    一个好的创意体验,可以从下面这四个维度来衡量,这也是Awwwards在评选时的一个标准,即设计、可用性、创意和内容。

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图29

    在数字设计中,通过选择合适的技术手段或动态表现,就可以在很多领域完成体验上的创新。

    乔布斯曾经说:创造价值的最好的方式,就是将创意链接技术。在未来,像创意技术、动态设计这样的新技术、新形式,在数字设计领域会发挥越来越重要的作用,而创造力将是使其更加强大的火花。

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图30

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图31

    2022 U 设计周|创意技术 X 动态图像,解锁数字设计新可能 - 图32

    2022设计周专题

    2022 U设计周|数字消费时代的传播升级——以数字IP打造沉浸式互动体验

    2022 U 设计周|企业数字化转型的体验设计

    延伸阅读


    About us
    不设限,不追随,不为设计为未来
    我们是阿里云设计中
    Presented by
    Follow us