My Secret Rainbow

Xconsole – 诞生于阿里云的管控类产品设计解决方案

阿里云向全球200多个国家和地区的企业、开发者和政府机构提供云计算产品和服务，那么用户通常如何去使用这些云产品呢？答案是通过控制台。控制台是统一查看和管理云产品及服务的平台，用户能够通过图形化界面对云产品进行配置操作。这是一个承载着超过100万付费云计算用户梦想的平台，我们就是这个平台的设计师、造梦师。

上百款云产品通过控制台为用户提供云计算服务，这些云产品设计的背后有一个共同的名字，Xconsole —— 为设计师、开发者提供了一站式的设计及开发解决方案。

Xconsole 的诞生是一个不断积累、验证、聚合的过程，是对大型复杂产品簇设计方法深度思考后的结果。这其中有非常多值得分享的经验和方法，相信对于想了解B类、企业级、特别是管控类产品设计的同学会有所启发。因为信息量会比较多，这里我们先以三个不同的维度带大家初识 Xconsole 设计解决方案，每一个维度的更多信息我们会在之后的系列文章后中进一步展开分享。

第一维  核心设计力1. 设计规范

设计规范是打造设计解决方案的基石。用户看到的、使用到的所有元素都需要被准确的定义、需要清楚描述它们的使用规则，让规范的使用者感到清晰易懂、不会产生歧义，能够与你一同为用户筑造相似的「梦境」。

构成设计规范的元素是逐层聚合的，色彩、字体、Icon、栅格、布局、插画、组件、模块、页面，每一层看似简单，但却都是“牵一发而动全身”的存在，再微小的变动也可能会不经意间影响用户对操作行为的判断，就像盗梦空间中斋藤通过地毯材质不同的这个小细节发现了自己并不是在现实中，而是在梦境中。

规范中元素的定义是需要有据可循的，并不是“你觉得”或“我觉得”，更多是需要结合经典的设计理论、专业共识、行业背景及品牌定位等等。举一个栅格与布局规则的例子，在管控类产品设计中，24列的栅格提供了更多的布局组合空间，灵活度也更高，栅格的整体宽度可以通过统计目标用户群的屏幕分辨率来确认，而列间距 Gutter、页边距Margin可根据页面的基准单位（比如2px）倍数计算出来，比如16px、24px。

将栅格带入真实场景中你会发现还是有很多横向、纵向的间距、对齐规则不清晰，Xconsole 将斐波那契数列做为重要辅助手段补全整个栅格布局规则，使页面中每一个元素应该如何放置、如何对齐都有据可循。

2. 框架结构

我们能够依据设计规范构建起用户看得见、摸得着的一切内容，但这并不够，设计师需要从产品的信息架构视角为用户串联起这些元素，提供更好的空间体验、让用户不会“迷失”在我们构建的“梦境”中。我们需要通过框架结构的设计为用户提供一种能力，一种能够在不同功能、页面、产品间自由切换，但同时又能清楚的感知自己所在信息层级的能力。

信息的层级可以从全局层、产品层、功能层、信息模块层逐级递进的拆解，帮助用户建立起去相对固定的位置寻找同类信息的心智。需要注意的是，根据信息层级确定框架结构的同时，也要保留一定的拓展空间，比如哪些是可选的、哪些是必选的，每一个模块可以有多少类变化等，都需要在框架的设计初期进行全盘思考，并且要将规则与用法向使用者清晰说明。

以阿里云控制台为例，我们将顶导航做为全局层，任何跳转、切变都不会影响顶导航结构，也因为这种稳定性，我们将产品的入口、全局型工具的入口也都放置在顶导航；页面左侧的产品功能导航则定位成每个产品自己的“全局层”，用户不论进入哪个产品都会很自然的到这里查找所需功能；内容区顶部我们提供了面包屑层与标题层，通过面包屑让用户时刻感知自己所在的页面层级，并能快速跳转到不同的目标信息层级；标题区则为用户提供了返回“来源地”的能力，用户可能因为产品或功能间的互链来到了另一个信息维度的页面，面包屑仅能告知当前信息维度的层级，用户如果需回到之前的信息维度，可以通过标题区的返回功能快速切换。

3. 最佳实践

一千个人眼中有一千个哈姆雷特，如果我们仅仅向设计系统的使用者提供设计规范和框架结构，设计师们可能还是会为用户创造出体验差异很大的产品，我们需要尽量避免这种情况的发生。通过对阿里云近百款云产品的设计总结，我们将产品设计中非常容易产生分歧、定义不清的问题进行归纳总结，编写了一系列的设计解决方案最佳实践。比如针对错误提示类设计方法的《控制台错误提示信息设计指南》、针对各类表单场景的《控制台表单设计指南》等。

除了提供通用类的最佳实践，我们的行业线设计师也不断的总结产品线设计方案的最佳实践，比如针对网络产品的《网络产品接入监控能力》、针对流量产品的《域名配置指南》，这些行业线类的最佳实践都会成为设计系统的宝贵资产，帮助使用者真正的通过设计去解决业务问题。

4. 工具化

提升效率最好的方法是提供相应的工具。现实工作中，多数人并不会先仔细阅读每一条设计规范然后才开始产品设计，通常是对照线上的同类产品界面，先上手搭建原型，遇到问题再看规范。如何让使用者快速上手是设计规范落地的关键。Xconsole为设计规范使用者提供了规范的Sketch版文件、组件的Sketch Symbol和组件的Axure库，方便不同类型的使用者快速上手，更高效的设计出符合规范的产品原型。

但无论是Sketch或是Axure，所生成的设计稿都是无法直接转化为代码的，需要开发者对照设计稿一点点还原；而常见的低代码搭建工具又往往是以开发者的视角提供界面搭建能力，很不符合设计师或产品经理的使用预期，为了解决这一系列问题，Xconsole正在为产品设计者们打造一款在线原型搭建工具，帮助使用者从一个设计师的视角，更轻松、高效完成一个产品原型的搭建，而所搭建的产品原型未来能够更便捷的转化为代码，真正的为设计者与开发者提效。

对于核心设计力，我们可以通过“更容易被理解”和“更容易被使用”两个坐标轴来构建一个象限。在这个象限中，如果我们仅提供设计规范，可能会让产品设计者不知从何下手，见木而不见林；当前我定义清了框架结构，规范中的元素有了明确的空间属性，设计者更容易快速搭建出可用的产品界面，但这时仍然无法为用户构建趋同的体验心智；而当我们提供了设计方案的最佳实践后，所有规则都会“更容易被理解”，我们整个设计解决方案也会变得“更容易被使用”。

第二维 标准与认证

1. 设计的团体标准

完善的设计解决方案通常是可被复制的，能够最大化它的效能。我们将Xconsole的核心设计力进行了抽象，进一步剥离业务属性，起草并发布了云计算行业的首个界面设计团体标准《云计算管控平台界面设计指南》，希望在更广的范围与大家携手，为云计算产品管控平台建立起相近的用户体验心智。

2. 体验的一致性

阿里云的产品是一个系统性产品簇，很多云计算产品的使用者都是跨产品用户，ECS、SLB、VPC、OSS等云产品同时使是很常见的事，还有一些是混合云用户，场景就更加复杂，仅日常运维就可能会接触数百个不同的操作界面。通过对阿里云核心产品设计分析、NPS反馈分析、用户访问数据分析发现，大量跨产品用户会受到体验不一致的影响，体验的不一致性增加了产品的使用、认知成本，提高了无效操作时长、错误率，降低了品牌的归属感、专业感，而且体验不一致的差距会随着产品迭代越来越大。

体验不一致的成因是多方面的，经过长期的调研，我们以Xconsole的核心设计力为基础，结合行业分析、学术分析，总结了一致性度量方法论，并设计了一致性量表工具，通过实践推动更多云产品体验一致性的提升。我们基于一致性评估方法撰写的论文展报，已被ACM收录，并于2019年在美国奥斯汀ACM CSCW大会现场进行分享。

“这套评估方法我们可以使用吗？”在大会现场Facebook、Google Cloud的产品专家们也问过我们相同的问题，答案是，当然可以！这套评估方法不仅适用评估产品界面的一致性，也可以通过调整参数、评估表去度量更多领域的一致性！

3. 符合性评价

如果说团体标准、一致性是设计解决方案中高屋建瓴的“指导建议”，那么符合性评价则是为设计落地质量背书的“官方认证”，是对设计解决方案使用水平的认证评价。Xconsole的设计解决方案会被不同的设计、研发团队或公司使用，那么大家对设计解决方案理解、使用的情况需要有相应的评判标准，确保设计方案的落地质量是可被预期的。

我们将核心设计力定义为设计解决方案能力维度，标准与认证则体现了设计解决方案在不同产品、团队等的实现结果维度，我们可以将这个维度的坐标轴定义为“更好的设计质量”。设计解决方案有可实践的标准与认证体系加持后，我们便能够更容易判断：解决方案使用者所搭建的产品是否有“更好的设计质量”。

第三维 平台与生态

控制台的英文叫做console，阿里云的管控类产品设计不止于公共云产品的console，还包括数据智能设计、企业服务设计、GTS、IoT、混合云等多个领域不同的console。而Xconsole的一个重要角色就是承载这些不同领域的设计规范，为他们提供一个统一的平台，让规范的使用者只跑一次，就能找到与管控类产品设计有关的全部信息，让初识管控类产品设计用户能更轻松高效的了解不同领域的设计规范。

Xconsole 平台中不同领域的设计规范是核心设计力结合各领域的业务场景演变而来的，通过底层组件的打通，形成了基础组件生态，各领域不再重复造轮子。比如按钮这类组件，我们在 Xconsole 核心设计力中定义了组件圆角率的规则为0、2、4、8…的递进，如果应用到GTS领域中，因为面向的更多是政企客户，会使用直角即0px圆角率，而在公共云、混合云领域中，为了体现更好的包容性和观感，会使用2px圆角率，在企业服务设计领域中则会使用4px圆角率。此外，不同领域的设计资产会随着业务的成长而不断累积沉淀，而因为核心设计力的打通，设计资产可以快速形变、复用到其它领域，形成管控类产品的设计资产生态。

未完待续

作为一套系统化的管控类产品设计解决方案，Xconsole还有很多值得分享的内容，像无障碍设计、移动端设计、图表设计、Widget设计、设计落地方法等等等等，也请大家期待后续更精彩实用的干货分享，参与到Xconsole的讨论中，一同思考如何让管控类产品设计更简单高效。

---

后续分享预告

• Xconsole核心设计力系列 – 色彩
• Xconsole核心设计力系列 – 圆角
• Xconsole核心设计力系列 – 操作与感受
• Xconsole核心设计力系列 – Icon
• Xconsole核心设计力系列 – 从设计到代码
• 标准认证系列 – 无障碍设计
• 标准认证系列 – 一致性设计
• 标准认证系列 – 团体标准
• Xconsole平台与生态

 

原文：https://mp.weixin.qq.com/s/yWVaQGZCJKZKHk_sk3JWEQ