阿里云向全球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正在为产品设计者们打造一款在线原型搭建工具，帮助使用者从一个设计师的视角，更轻松、高效完成一个产品原型的搭建，而所搭建的产品原型未来能够更便捷的转化为代码，真正的为设计者与开发者提效。
对于核心设计力，我们可以通过“更容易被理解”和“更容易被使用”两个坐标轴来构建一个象限。在这个象限中，如果我们仅提供设计规范，可能会让产品设计者不知从何下手，见木而不见林；当前我定义清了框架结构，规范中的元素有了明确的空间属性，设计者更容易快速搭建出可用的产品界面，但这时仍然无法为用户构建趋同的体验心智；而当我们提供了设计方案的最佳实践后，所有规则都会“更容易被理解”，我们整个设计解决方案也会变得“更容易被使用”。
