编辑导读:官网是企业的一张“脸”，记录着企业一路的发展历程。随着产品的迭代升级，官网首页的改版设计是一个通病。设计师修改主页需要考虑哪些因素？笔者从阿里云官网首页改版项目出发，深入浅出的阐述了首页的重要性和设计思路，分享给大家。

从2009年阿里云成立到现在，已经11年了。官网作为其载体，在这11年里交出了很多关于首页的设计答卷；但在看得见的设计背后，更多的是看不见的设计思维，是我们对用户体量和业务体系不断升级的回应，是对品牌的精细化雕琢和受众的精准匹配。

—阿里云官网的每一个首页，都是设计的升级，商业的升级。

在上一个版本中，基于业务需求的契合度，我们尝试了一个版本的首页方案，在业内引起了很大的争议和讨论。尽管如此，我们始终认为这样的尝试是非常必要的，这样才能不断验证和推动业务，从而实现设计策略和业务策略的深度融合。

2020年，以阿里云在官网的业务升级为契机，我们再次将“首页改版”提上日程。在对齐业务需求的同时，更深入用户，希望在新首页中以“人”为基础，在用户需求、业务需求、品牌需求之间创造平衡。

解决问题的前提是明确真题。

项目开始后，我们不打算只优化表面视觉，而是希望跟上用户的诉求，让设计策略为用户服务。

对于用户行为数据的观察，如果局限在页面内部，就如同管中窥豹，因为在大多数情况下，页面数据受到页面当前信息结构深度的制约。相对于首页本身的内容，我们更关注从首页开始的不同客户在整个网站内的流通行为链接，从而进一步分析深层诉求。通过分析典型用户的时间序列路径数据，我们发现不同的客户群体在行为上存在显著差异。为了客观提取差异化行为的原因，我们采用深度访谈、电话访谈和问卷调查相结合的方式，对现有数据结论进行定性的深度解读，辅助数据判断，形成初步的客户群体模型。

清楚的了解我们面对的受众是谁，他们的特点是什么，他们需要什么样的服务，可以帮助我们提交一份更好的答卷。

—— 2020新版官网首页

除了首页结构的调整，视觉上的升级也是此次改版的重要内容。

经历了2019年品牌色彩的快速变化和官网运营策略的调整，过去一年我们一直在思考和寻找阿里云的品牌特色。应该是我们体内的某个基因，不随着外界环境的改变而改变。

经过对品牌原型的推演，对用户调研结果的提炼，对众多脑洞大开的内容的收集，我们有了“智者”的心理品牌原型，定义了当前阿里云进化设计语言的核心和外部。

“虚拟现实-对虚拟现实的希望”、“秩序-秩序是生活的关键”、“几何-充满想象的几何”、“运动-运动体现智能”这四个关键词体现了阿里云技术的领先性和设计的独特点，成为本次首页改版视觉升级的核心点，给予风格指导和设计演绎。

1.“虚拟超越虚拟”

形象地表示虚拟云产品一直是我们的研究课题。经过几年的不断探索和迭代，我们已经沉淀了200+个能够传达云产品特性的产品形象系列。

在以上基础上，本次首页焦点图采用GPGPU的代码技术，结合云产品的图像，形成全新的虚实结合的视觉体验。不仅有助于提升视觉体验，还能进一步提高第一焦点区块的点击率。

——从云产品形象到粒子交互模型

2.“订单”订单和节奏

利用合理的模块裁剪，将秩序感和节奏感贯穿整个页面设计，使信息得到更好的分类和传达；

3.“几何”图标和图像

几何图像是语义的高度概括。简洁明了的几何图形可以增强文字信息传递和气氛渲染的效果。无论是几十个像素的图标，还是大面的辅助图形，都延续了几何感和规整的视觉风格。

4.“运动”用户界面动画

同样的动画时长，不同的运动缓冲率(Ease)会对用户的视觉体验产生微妙的体感差异。为了调试出适合Web的动画速率，我们对四次、三次、指数等经典缓冲区运动做了大量的设计实践验证，通过CSS代码还原出理想的动画速率贝塞尔曲线，从而达到整个页面各部分体验的一致性和优雅性。

实时粒子动画WEBGL实时粒子

如前一段所述，除了常见的设计方法，我们引入了WebGL技术，将代码与云产品模型相结合，创建交互式实时粒子动画效果。这是设计中心首次将WebGL应用于门户网站，面临技术与性能平衡的挑战。如何将实时渲染图形技术应用到消费客户端？

1.图形技术— GPGPU x FBO

通常，如果我们想要设计和开发实时渲染粒子动画，我们需要在CPU中计算它，例如，通过for循环语句(例如For(让I = 0；我& lt粒子.长度；I++) {...}).问题是超过一万个粒子的普通电脑很难承受，无法表现出更科学、细腻、丰富的粒子效果。

在阿里云官网的场景中，我们使用的是GPGPU+FBO (aka)的图形技术。帧缓冲对象)在WebGL技术(three . js+自研Shader)的框架下计算着色器层中粒子的三维运动、聚集与分散、力场漩涡风向等等，充分利用WebGL这种主要使用显卡的图形技术，只需要一块消费级独立显卡。

GPGPU图形处理器通用计算(简称GPGPU)是基于WebGL的高级图形技术。图形由GPU通过着色器和显卡的帧缓冲对象(FBO)计算。

GPGPU计算的粒子可以承受100万+(如FBO帧缓冲1024 x1024+)粒子的高速计算和渲染。目前根据用户的显卡设备自动检测、适配、分层，开放到9 ~ 29万左右的粒子进行实时渲染，用技术设计的方法解读云计算公司的首页焦点动画。

FBO帧缓冲对象的原理，即通过在内存缓冲区中不断更新计算的动态位图，例如512×512是26万像素，每个像素的RGBA通道可以存储每个粒子的XYZW 3D 空信息，从而达到CPU无法承受的如此多粒子的高速计算负荷。

2.阿里云产品的高性能图标

在设计过程中，为了保证页面加载速度和运行性能，我们使用Blender将模型的面数、节点数、拓扑数优化到极致(例如最终glTF 3D模型的K数为40 ~ 150K，比一张图还轻)，将代码与模型解耦，按照优化后的规格输出模型，无需代码，人工生成新的粒子。

3.粒子& amp相互作用

粒子在流动和光影下表现出最好的视觉冲击，这是区别于黑色的神秘和白色的纯粹。灰色有一种沉稳中性的气质，不带任何感情色彩，也能让首屏的文案信息和动作点更加明显。

在技术与门户网站结合的过程中，我们遇到了许多挑战和问题，比如有效性和性能。最后，我们在两者之间找到了平衡，我们相信这就是未来。

“首页”是用户浏览和使用“阿里云官网”的开始，我们的“改版”也是不断提炼和打磨阿里云官网体验的开始。就像一个蹒跚学步的孩子，前进的路上会有很多磕磕绊绊。会有阶段性设计突破的喜悦，也会有走弯路的遗憾；最后，在泥泞中，摸索出一条正确的道路。

关于官网设计，我们交过很多答案；这些设计升级的背后，是我们对用户体量和业务体系不断升级的回应，以及对品牌精细化雕琢和受众精准匹配的反馈。

我们的坚持，不是源于它的“不同”，而是源于它的“正确”。

作者:阿里云设计中心；微信官方账号:AlibabaDesign

资料来源:https://mp.weixin.qq.com/s/bntPjROWz8XqUvDBL6h-kA

本文由@AlibabaDesign授权，以产品经理的身份发布给大家。未经作者允许，禁止转载。

图片来自Unsplash，基于CC0协议。