阿里云首页怎么实现的(阿里云网站首页模板实现)

阿里云首页怎么实现的(阿里云网站首页模板实现)

科技公司的首页——一种平衡「用户诉求」「业务策略」与「品牌定位」的艺术

自阿里云 2009 年成立以来,已经走过了 11 个年头;官网作为它的载体,这 11 年间我们交出过很多份关于首页的设计答卷;但看得见的设计背后,更多的是看不见的设计思考,是我们对于用户体量、业务体系不断升级的回应,是对品牌的精细化雕琢与受众的精准化匹配。

— 每一份阿里云官网首页,是设计的升级,更是业务的升级在上一个版本中,基于对业务诉求的贴合,我们尝试了一版在业界引发诸多争议及讨论的首页方案。尽管如此,我们始终认为这样的尝试是非常必要的,我们由此得以不断地去验证业务、推进业务,从而达到设计策略与业务策略的深度融合。2020年,借着阿里云官网业务升级的契机,我们再一次把「首页改版」提上了议程。在对齐业务诉求的同时,我们更加深入地走进用户,期望在新版首页中,以“人”出发,打造“用户诉求”、“业务诉求”和“品牌诉求”之间的平衡。

①用户研究与设计策略设定

解决问题的前提,是定义真正的问题。

项目启动后,我们并无意于仅做表层视觉的优化,而是希望切实地紧跟用户诉求,让设计策略为用户服务。

清楚的了解我们面对的受众是谁,他们的特征是什么,他们需要什么样的服务,我们才能更好地提交一份我们的答卷。

— 2020版全新官网首页

②围绕阿里云进化设计语言展开的视觉升级除首页架构的调整之外,视觉上的升级也是本次改版中的重要一环。经历了2019年快速的品牌色变更、官网运营策略的调整,过去的一年来我们一直在思考和寻找属于阿里云的品牌特质。它应该是我们体内的某些基因,不随外在环境的变化而改变。我们经历了品牌原型的推导、提取了用户调研的结果、搜集了多次脑爆的内容后,有了“智者”的心理学品牌原型,并定义了当前阿里云进化设计语言的内核和外在。

「虚实-望其虚握其事」、「秩序-秩序是生命之匙」、「几何-充满想象的几何」、「运动-运动体现智能」四大关键词,体现了阿里云技术的领先性和设计的独特点,并成为本次首页改版视觉升级的核心观点,给以风格的指引和设计的推导。

「虚实」VIRTUAL BEYOND VIRTUAL将虚拟云产品进行具象表达,一直是我们在研究的课题,经过几年来不断的摸索和迭代,我们沉淀出200 款可以传达云产品特征的产品形象系列。

— 从云产品形象到粒子化的互动模型

「秩序」ORDER & RYTHM运用合理的模块切割,将秩序感和节奏感贯穿在整体的页面设计中,让信息得到更好的归类与传达;

「几何」ICON & IMAGE几何图像是对语意的高度概括,简洁和干脆的几何图形可以加强文字信息传递以及氛围渲染的效果。无论是几十像素的ICON还是大块面的辅助图形,都延续着几何感、规律化的视觉风格;

「运动」USER INTERFACE ANIMATION同样的动画时间(Duration)不同的运动缓冲速率(Ease)对于用户的视觉体验会产生微妙的体感差异。为调试出适用于Web端的动画速率,我们对Quad,Cubic,Exponential等经典缓冲运动进行了大量的设计实践验证,并通过CSS代码还原出理想的动画速率贝塞尔曲线,达到整个页面各部分在体验上的一致性和优雅性。

③技术×设计 GPGPU Particles「实时粒子动画」WEBGL REAL-TIME PARTICLES如前述段落中提到,本次首页改版除了常见的设计手段以外,我们引入了WebGL技术,将代码与云产品模型进行结合,创造出可交互的实时粒子动画效果。这是设计中心首次将WebGL应用到门户网站,面临着技术和性能之间的平衡的挑战。如何将实时渲染的图形技术应用到消费级的用户端?

1. GRAPHIC TECHNOLOGY — GPGPU x FBO通常我们要想设计与开发出实时渲染(Real-time Rendering)的粒子动画,需要在CPU里计算,比如通过For循环语句( e.g for( let i=0; i < particles.length; i ) { …. } )的方式计算粒子的位置。这样的问题在于可能超过仅1万粒子普通计算机就很难承担了,无法表达更加科技、细腻与丰富的粒子效果。在阿里云官网的场景中,我们在WebGL技术框架下(Three.js 自研Shader),运用GPGPU FBO(Aka. FrameBufferObject,帧缓冲区对象)的图形技术,对粒子的三维运动、聚合散开、力场涡旋风向等在Shader层里进行演算,最大化地利用了WebGL这一主要利用显卡的图形技术,仅需一张消费级的独立显卡,便可实现实时计算数十万级的粒子动画。

GPGPU通用图形处理(General-purpose computing on graphics processing units,简称GPGPU),是一种基于WebGL的高级图形技术,通过Shader以及显卡的帧缓冲区对象(FBO),由GPU去计算图形;

GPGPU计算的粒子可承担到100万级 (e.g FBO帧缓冲区 1024 x1024 )的粒子数量高速计算渲染,目前我们根据用户的显卡设备进行自动检测、适配和分层,开放到约9 ~ 29万粒子实时渲染,用技术的设计方式去演绎云计算公司的首页焦点动画。

FBO帧缓冲区对象的原理,即通过显存缓冲区里不断更新与计算的一张动态位图,e.g 512×512即26万像素,每一颗像素的RGBA通道可存储每一个粒子的XYZW三维空间讯息,以达到CPU无法承担的如此多粒子的高速计算负荷。

2. THE HIGHLY PERFORMANT ICONS OF ALIBABA CLOUD PRODUCTS在设计过程中,为了保证页面加载的速度与运行的性能,我们使用Blender把模型的面数、节点与拓扑(Topology)优化到极致(e.g 最终的glTF 3D模型的K数为40 ~ 150K,比一张图片还轻量),并将代码与模型解藕,按照优化规范输出模型,便可以零代码、去人工化地生成新粒子

3. PARTICLES & INTERACTIONS粒子效果在流动和光影之下呈现出最佳的视觉冲击力,区别于黑的神秘和白的纯净,灰色具有一种不带任何感情色彩的、冷静的中性气质,同时它也可以让首屏的文案信息和行动点更明显。

在将技术与门户网站结合的过程中,我们遇到了很多挑战和质疑,诸如效果和性能,最终我们在权衡之中找到了两者的平衡,而且我们相信这就是未来。

一切从这里开始「首页」是用户浏览和使用「阿里云官网」的开始,而我们的「改版」也是不断精细化打磨阿里云官网体验的开始。和人的蹒跚学步一样,设计在往前走的路上,也会有很多跌跌撞撞;会有阶段性设计突破的欣喜,也会有走了弯路的遗憾;最终在泥泞之中,探索出一条正确的道路。我们交出过很多份关于官网设计的答卷;这些设计升级的背后,是我们对于用户体量、业务体系不断升级的回应,是对品牌的精细化雕琢与受众的精准化匹配的反馈。我们的坚持,不是源于它的「不同」,而是源于它的「正确」。

发表评论

登录后才能评论