蜗牛派Matrix经纬设计体系，打造适用于产品团队、开发团队、设计团队的全链路通用产品解决方案。让项目开发更直观，更高效、更简单。
01、写在开始
如果你已经观看了上面的炫酷视频，那么你对Matrix的业务能力已经有了一个概括性的了解。企业级中后台系统拥有着各自不同的设计规范、交互形式和代码实现方法。此类系统由于其用户群体专业性强，逻辑复杂，跨团队之间协作多，导致设计产出物不规范，重复劳动力大，随之产生的体验性问题也越来越严重。为了解决这些问题，我们通过大量的项目实践和经验总结，逐步完善出一个致力于提升企业级产品体验的设计体系，基于准确、清晰、高效、通用的设计主旨来赋能产品业务，经纬Matrix Design System也由此诞生。
02、Matrix是什么
Matrix经纬设计体系（matrix.58.com，以下简称Matrix）致力于打造企业级的产品设计体系，提升劳动产能，建立适用于设计团队、开发团队、产品团队的全链路通用产品解决方案。让项目开发更直观，更高效、更简单。它由总体的设计指引，以及适用于设计师与开发者的“G1组件库，Matrix Magic模板网站”，以及适用于更多工作角色的“在线设计工具”等等内容构成。
Matrix体系结构
03、Matrix的价值
做为设计师的你是否经常会承接一些业务逻辑不同，但界面表现有规可寻的产品设计需求？做为开发者的你是否会经常遇到近似的中后台组件，却不得不重复开发来满足不同的业务场景需要？无论是设计还是开发，我们均需要站在更高层的视角，将此类产品的构建方式看待成一个系统化的整体。从UI一致性，设计与开发效率等等层面，能够建立一套设计体系（Design System） 是解决企业级产品规模化问题的关键。
· Matrix项目价值
1.对于开发团队：使用Matrix能够减少重复性的开发工作，并能达成验收的视觉统一、通用前端框架封装的代码，帮助前端快速开发。
2.对于设计团队：可以利用Matrix组件Library与模版页面快速输出设计稿，使用全局组件库持续获取最新的设计资源，减少重复性的设计工作。
3.对于产品团队：根据Matrix Axure元件库，快速搭建符合设计规范的产品原型，统一交互规则，提高效率并省去设计时间。
Matrix项目价值
04、Matrix的典型功能
在众多的业务形态中，我们根据其产品特点，总结出一些稳定且高复用性的内容，制定出统一的设计语言来做为企业级产品的整体指引，目前Matrix通过以下功能来构建中后台系统：
· G1组件库 Basis Gene
适用于开发团队的线上组件库
组件化、平台化在企业级中后台产品中已经被广泛使用，这类产品具有量级大、功能复杂、迭代频繁等特点，常常需要设计与开发能够快速的做出响应。
同时这类产品中通常存在大量且多样化的组件内容，可复用性的场景较多，通过对功能及视觉元素的拆分、归纳、重组，并基于可复用的目的，我们为Matrix建立了规范化的线上组件库，所有组件都在开发层面完成了代码的封装，通过多维度组件组合来构建中后台系统，可以最大化的提高开发的工作效率，解放其生产力，改善设计与开发的协作，做到标准化的产品构建。
在研发侧，Matrix PC 端规范的 Vue组件库，提供了整套的 UI 组件以及一些基础的业务组件。目前已经拥有7个大类共 50+个组件，这些组件有着及高的业务场景覆盖能力，并且已经在58同城的多个业务线中使用。我们还在有计划的对组件进行持续迭代，并且研发一些新的组件，以达到让项目开发更直观，更高效、更简单的目标。
线上组件库
适用于设计团队的sketch全局组件库：
在设计侧，Matrix的组件库整体进行了全局化的构建，全部组件均进行了变量化定义，更加方便业务的拓展。我们在设计侧对组件的总数进行控制，达到一类组件能够适配多种不同使用场景的目标，最大化提升组件的灵活度。
sketch全局组件库
我们将品牌色，中性色，功能色进行提取，通过调整色板，可以非常方便的对组件风格进行更换，简单调整几个参数即可完成视觉的全面换新，使组件库能够更加灵活的适配不同业务线的视觉风格。
通过全局组件库在设计侧轻松更新主题
· Matrix Magic 模板网站
Matrix Magic模板网站是一套开箱即用的设计解决方案，我们根据产品中常用的业务场景，将matrix中的组件以及模块进行再次组合，将模板库划分为“弹窗类，登录注册类，结果类，详情类，列表类，表单类，数据类”等7个大类别，将它们都提炼成为典型的模板页面资源，并进行开发。
Matrix Magic模板网站
根据Matrix Magic搭建业务场景的常用页面模版，例如表单录入、筛选表格、数据分析等典型页面，能够建立标准框架页面，并方便进行在线的整体风格预览。在当前场景不满足的情况下，可根据的设计栅格规范说明，在无设计师配合的情况下，根据说明与规范页面，进行组件组合自由搭建，进一步提升产品自动化设计的能力。
· 适用于产品团队的Matrix Axure 元件库
针对产品团队，我们基于Matrix的组件库与模板库，对高复用性的内容进行提取并合理分类，将这类内容创建为Axure的部件，使用Matrix元件库，能够从产品源头统一交互规则与框架形态，并可以创建出完全符合Matrix体系设计规范的高保真产品原型。
Matrix Axure 元件库
05、Matrix体系设计理论简介
· 原子设计理论
原子理论当下已经不再是一个陌生的话题，目前行业内多数的设计体系都或多或少的采用了这套理论，原子理论的设计理念来自物理世界，原子为最小颗粒且是构成万物的基础，组合后形成分子，分子进一步结合为整体并最终形成万物。它与我们的组件构成整体页面的概念非常相似，由小的颗粒构成大的元素，最终组成我们的用户界面与产品。原子理论包含：原子、分子、组织、模板、页面等5个阶段，从左到右为逐级递进关系，使用原子化理论将能够设计出架构严谨、规则统一的界面体系。
原子理论
例如依据原子理论，我们首先从最小的颗粒“原子”做起，通过梳理原子元素，来创建组件库的最基本内容，这些元素包含“定义基准颜色、定义文本、图标绘制规则”等最基础的内容。其次对原子进行排列组合并构成分子，分子即可以理解为我们所设计的具体组件，包含目前已完成的各类组件内容，例如包含：导航，按钮，表格，数据录入等内容，这样也就形成了我们最终的组件库。通过整合组件，形成区块化的模板，将matrix中的组件以及模块再次进行组合，就最终完成了页面的构建。
· 8倍数设计原则
8倍数设计原则，简单来说，就是以数字“8”做为一个步进值，在设计过程中建立一个以8为单位的网格系统，同时使用8的倍数来设定页面中元素的间距以及尺寸。使用此原则的优势在于能够更好的兼容主流的屏幕尺寸，让我们的设计在不同设备中可以做到更的好适配。
8倍数原则
我们在网格数以及页面布局中延续了 8 倍数的原则，在组件的设计中，大小均采用例如，32px（8×4），40px（8×5）；在布局中使用8px，16px（8×2），24px（8×3）等原则进行设计。
· 布局与响应式规则
由于PC端的机型分辨率各异，我们需要设定一个基准分辨率来做为我们的标准，并在此基础上进行多端适配，目前的PC端趋于主流的分辨率多数为1366×768、1440×900、1920×1080等设备，我们以1440×900趋于中间层的分辨率做为基准，进行向上或向下的响应式适配。
我们主要设定了“左右布局、上下布局、T字布局”三种结构。例如：左右布局包括左侧菜单栏（Sidebar），顶栏（Topbar），主体内容区（Content）等三个部分。其中顶栏固定为64px，左侧菜单栏分为常态化236px呈现、收起时64px呈现，右侧主体内容区域根据界面空间动态进行适配。基于1440分辨率，我们对网格数值的设定以8为基数，根据此方式我们也同步确定了响应式的规则。
布局规则
05、写在最后
Matrix在2020年1月发布了第一个内部版本，并且于2020年6月，正式通过公司技术委员会的开源申请，成为唯一一个由技术团队与设计团队共建的公司级开源项目。将进一步在业界内打造体系级的产品规范，并进一步提升58在此领域的影响力。我们已经迈出了坚实的第一步，也越来越接近我们的目标。
