My Secret Rainbow

LightBUY-全新云计算售卖领域规范设计

“复杂看不懂”“密密麻麻的选配好窒息”，大概是云计算产品购买最痛的问题。

目前的云产品购买体验，用户仍需翻阅大量复杂文档或者从0开始学习整个云计算知识结构。云计算的购买体验已经远远落后于其行业发展的速度。

本文将介绍针对ToB云产品售卖场景的全新规范设计LightBUY。从用户调研、确定设计理念到实践落地，帮助提升用户购买云产品体验。

｜全文共 1660 字，阅读需要 5 分钟。

①

现状和用户反馈

放眼国内外竞品不难发现，几乎所有云厂商（包括旧版的阿里云售卖页面）都在使用 「选配项平铺、信息过载」 的界面展示。

这种「普遍」的设计是「正确」的吗？

｜2024年截图

〇看不懂 看不清

我们通过网站投放共回收2784份问卷，以了解用户的真实需求。从总量来看，用户最不满意阿里云售卖页面的问题是 售卖内容复杂看不懂 和 价格展示不清楚。

“界面信息量过多，新用户看着非常多的文字会产生一种迷茫感，字太多眼花，无法找到自己需要的，我不知道该如何解决这个问题，希望优化”。

②

Design as Air – LightBUY

结合用研结论，密密麻麻的同质化选项、参数表格、嵌套菜单，平均需要学习30个专业术语、点击20次配置，是线上云产品购买页面“窒息感”的来源。

当界面信息过载时，设计不是装饰，而是氧气。

氧气为何让人感到舒适？因为氧气化学分子的条理有序和物理属性的透明清晰，使其达到其轻量和无感的效果。相同的理念同样可以应用在云计算售卖上：通过 有序 Structured（结构化分层）和 清晰 Clear（视觉调整）达到页面 轻量 Light（适合的信息密度）、无感 Uninterrupted （全链路统一）目的。

由此得出的设计方法，我们称为——LightBUY。

③

云计算售卖的结构分层

〇有序：从界面到组件

云计算用户有非常强烈的「同时操作和阅读」诉求，我们需要考虑不同操作的界面空间分割。

云产品售卖核心操作是 价格 和 主行动点，且两者常强绑定。遵循自上而下、从左到右的一般阅读顺序，我们将 选配 和 确认订单 2个上下结构的页面 合并为 1个左右结构的页面，右边固定价格和主行动点操作。以此简化流程步骤，强化核心操作。

此外，我们将这些选项进行规范标准分析，不难发现，支持用户下单的核心内容可以统一表达为 模块标题、选项标题、选项选配、参数明细，其中后两者是导致同质化信息重复出现的重要原因。至此，我们可以先将组件拆分为2大结构：一级外部信息，支持用户下单的核心内容；二级内部操作，更多选项选配和参数明细。

〇清晰：视觉量感分层

视觉量感指视觉元素在用户观看区域内的体感分量，通常受多维视觉因素影响。售卖场景的视觉量感分层包括3个维度：色彩（Color）、字体（Typography）、规范（Design Guideline） 。

#Color

色彩（Color）指通过改变信息的饱和度、明度等色彩通道以调整视觉层级。我们重新梳理了信息的视觉层级，有明显商用语义的橙色放在L1第一层级（购买&营销），蓝色作为辅色位于L2第二层级（已选规格&用户操作），让杂乱无章的页面像素趋于有序。

#Typography

为了提高用户对价格的敏感度，我们采用特殊字体 D-DIN显示价格。作为标志性公路牌字体，DIN在数字场景有更高的识别度，使得用户先注意到最关键的总价信息。

#Design Guideline

未来阿里云商业化全生态链路都将应用 LightBUY设计规范，将结合创新组件、业务套件、场景模板，保证用户全链路的体验一致。

#Design Verification

通过Chrome浏览器自带的CSS overview工具，与旧版相比，使用LightBUY规范的页面Elements 减少16%，Style Rules减少6300%，页面展示元素的明显减少。

除此之外，倘若将3个视觉层级以图形化的方式呈现于“方块”中，便会得到有趣的“售卖页面图例”。一个清晰的视觉分层图例应呈现“正三角锥型”，各层级面积从上到下依次增大，层级间区分度明显，该方法论可延伸于任何需要查看视觉层级的页面设计。

〇轻量和有序：提升购买效率

通过以上有序、清晰的手段，我们希望让云产品商业化全生态链路都能达到体验优化的效果。

其信息本身，由于云产品的复杂性和特殊性，还需要更为专业的产品技术架构来解决。不过从设计角度出发，我们仍可以通过 LightBUY 让云计算售卖进入「轻量化」时代，通过结构分层帮助用户提升购买效率和体验。

商业化全生态链路涉及多个场景及功能，除了购买页（BUY），阿里云也上线 配置报价器 和 定价详情全新产品功能和页面，旨在帮助用户一站式了解、购买、创建云产品，多方面提升用户的购买体验。

③

写在最后

LightBUY 设计是阿里云创新设计中心在云计算行业垂直领域的一次探索。LightBUY 不只是在设计购买界面——更在于重新定义用户如何与云上基础设施服务对话。

我们深知这套方法还很浅显，仍有很多需要细化。然而相比“完美”，我们更看重的是“往前一步的探索”。

亦路漫其修远，跬步所向，星汉即无疆。

原文：https://mp.weixin.qq.com/s/rY2_m5rfyR9eq51-GjUePA