设计体系简析

设计体系的诞生

伴随着互联网的发明与发展，设计师岗位不断细分，衍生出了越来越多的相关岗位：网页设计师、GUI视觉设计师、UX交互设计师、UED用户体验设计师、全栈设计师等。他们将平面设计的设计原则结合平台特点、自身工作流程，探索、总结方法以求设计研发高效率。于是，设计体系应运而生。

设计体系的演变

早期的设计体系以模块化思维主导设计规范的制定，强调页面制作的高复用度和低成本。它往往由设计与开发开始，在经过一定积累后抽取出其中的组件得以应用。当遇到组件库无法满足设计需求时，产品经理、设计师就创造出新的组件补充进组件库中。

在过去的这几十年里，我们见证了很多企业或社会团体创建组件库、样式代码、设计规范等工具以保证页面开发的界面统一性，却一直存在诸多问题且效率低下。这种模式虽然能够短时间内满足界面设计与开发的需要，但本身存在着设计规范与组件库更新滞后、新组件可能会与原有样式代码冲突的问题。

2014年，Brad Frost提出了原子设计这一概念，提出“原子设计是一种基于网络设计系统思维方式的规范性原则”的概念。它可以帮助网络设计者建立用户与产品元素互动的关系，以及如何将它们整合到一个整体的系统中。基于原子设计，设计系统先行，而后根据设计系统来完成业务与组件库搭建。这样做可以使得组件与业务同步更新并且多端响应。

然而，这种模式又是具体怎么样才能够实现呢？

或许是Brad Frost 的前端开发背景，前端模块化开发的鼻祖React的组件化思维给了他灵感。在Brad Frost 创建的设计系统理论方法——原子设计中将界面分为5个层次：Atoms/原子、Molecules/分子、Organisms/组织、Templates/模板、Pages/页面。

原子设计概念的提出使得设计体系由设计规范演变成为了一种更为高效、科学的设计系统。当我们改变原子时，整个体系都会产生变化，同时我们也可以逐级调整，总之你的每次改变都会影响到这个系统，但是它又是保持一致性的。

设计体系的代表

时至今日，市面上已经出现了不少设计体系，目前较为流行或具有代表性的设计体系主要有：Material Design、Windos Guidelines、SAP Fiori、Bootstrap、Ant Design：

1、Material Design

Material Design是 Google 主导的设计语言。 它和Apple的Apple Design、Microsoft的Fluent Design并列全球三大现代设计语言。由于取材于现实世界，Material Design很讲究反应出组件之间的（物理世界）层次关系，强调投影（Z轴）、动效、对比强烈的颜色的运用，更关心系统反应的质感、层次、深度，和其他物体的叠放逻辑。Google通过背后的隐喻来统一设计语言，可以看到所有的规范几乎都是围绕Material的隐喻展开的。在近年来安卓发布的Lollipop（5.0）、Marshmallow(6.0) 、Nougat（7.0）、Oreo（8.0），以及即将于2018年Pistachio Ice Cream（9.0）中均可以看到Material Design身影。

2、Windos Guidelines

Windos Guidelines是基于Windows桌面应用程序的详细用户体验指南。它帮助设计师创建采用清晰视觉对象、有用控件和通用输入的桌面应用程序，从而营造令人难以忘怀的用户体验。详细地介绍了控件、消息、视觉对象、命令、交互展现形式，甚至还对包括语音和声调指南的UI文本标准等进行了定义。

3、SAP Fiori

SAP Fiori是适应SAP转型升级需要，在SAP UI5（SAP UI Development Toolkit for HTML5的简称）这一前端技术框架上创建出的一整套新的用户交互系统。2016 年 10 月，SAP Fiori 2.0此版本用户体验设计概念在红点奖交互类设计竞赛中获得 2015 红点设计概念大奖。

Fiori 是 SAP 从自己庞大的业务模块中抽取、沉淀出来的设计规范，成功服务于 SAP 复杂且庞大的 ERP 系统。SAP Fiori包含了主要针对设计者查看的Fiori Design Guidelines，也包含了面向开发人员查看的 SAP UI5。

4、Bootstrap

Bootstrap是近年来极受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目，节省了浏览器兼容，大量提升组建复用并且响应速度很快。它方便团队快速开发Web站点，减轻甚至省略前端工程师的工作。与它类似的还有Foundation、Semantic UI。但运用Bootstrap也会因此受限，仅适用于轻量化产品界面。在大中型项目中，前端工程师为了在维护项目中可以方便地按设计师要求快速修改样式，肯定会逐步编写出各种业务组件、工具类，相当于为项目自行开发一套框架，而如果在Bootstrap基础上进行修改必然会面临css维护成本上升、代码冗余、第三方插件冲突情况发生。

5、Ant Design

中台设计语言 Ant Design提供了一套非常完整的组件化设计规范与组件化编码规范，提供从界面设计到前端开发的全链路生态，大大提升设计和开发的效率。Material Design和Bootstrap，前者具有严格的设计规范，后者是纯粹的UI框架， 而Ant Design，介于这两者之间。它主要用于用于构建 PC web 中后台管理系统和简单前台展示系统。从设计角度讲，Ant Design的价值不及MD。

Bootstrap在制作简单界面时具有非常强的实用性，Material Design和Windos Guidelines在制定设计规范时具有不错的借鉴意义。而SAP Fiori 、Ant Design作为设计系统，同时包含了界面设计规范（面向设计师、产品经理）与编码规范（面向开发者），都是从自己庞大的业务模块中抽取、沉淀出来的规范。只是前者一个是为自身业务前台而生，后者则是为后台场景而设计。

小结

回到设计体系诞生的初衷，它其实是界面设计行业生产工具的升级，是工业化提升效率诉求的体现。从设计原则、设计语言、设计规范，到前端框架，再到设计系统，是设计者与开发者对更高效更优雅实践落地方法的一次次探索。期待未来设计研发一体化，让设计者从重复劳动中释放出来，实现从设计支撑到设计驱动的价值转化。

欢迎关注微信公众号「鱼子酱聊设计」