什么是设计系统？

为什么要使用设计系统？

如何建立设计体统？

设计系统有没有弊端？

有哪些相关的资源？

---

什么是设计系统？

设计系统将产品团队围绕着一种共同的视觉语言。它减少了设计负担，加速了设计过程，其中包括与开发人员的协作沟通，并在协同工作的团队之间架起了桥梁，将产品变为现实。1968年，在NATO软件工程会议上，Douglas McIlroy提出了基于组件的开发作为解决这一两难问题的可能方案。基于组件的开发提供了一种通过使代码可重用来加速编程潜力的方法，从而使其更高效，更容易扩展。这降低了工作量并提高了软件开发的速度，使软件能够更好地利用现代计算机的强大功能。日常UI审核工作中，你会发现使用了几十种色调不一致或形状不同的按钮排列吗？在这个时应该就会开始意识到设计的不一致性，不完整性和难以维护性。它有很多名称，也可以称之为设计语言，其他标题包括：：模块化、模块化设计、组件设计、设计语言、用户界面库。

Ella

收集了简单UI元素的许多排列，来说明设计债务有多深。

为什么要使用设计系统？

1.规模—您是否正在设计具有超过300个屏幕的产品（或多个产品）？您的产品会显着增长吗？

2.一致性—您希望您的产品具有一致的品牌，外观和体验吗？您的产品目前有20种不同的按钮样式吗？

3.效率—您是否希望您的可视化设计人员，用户体验设计人员和前端开发人员更快地工作并节省时间？

4.团队设计—您是否有项目设计师或许多设计师同时在同一个项目上进行大量交接？

如果对上述问题之一回答“是！”，那么设计系统适合我们。大规模工作，提高一致性和效率是创建和使用设计系统的最大好处。

设计系统的价值：

规模设计：随着团队的发展，设计师通常会专注于搜索和发现帐户管理等应用程序，这可能会导致一种支离破碎的视觉语言，由于没有通用的设计语言来统一产品，用户体验也开始崩溃。当缺乏设计惯例时，设计批评变得无效。要在团队中建立一致，必须有一个共享的真实来源—一个参考官方模式和风格的地方。

管理你的债务：随着应用程序及其团队的老化，他们会构建债务。不是金融债务，而是技术和设计债务。设计债务由过多的不可重用和不一致的风格和惯例组成，随着时间的推移，这种债务的积累成为减缓增长的重要因素。但是，使用设计系统可以通过降低设计和代码开销来保持预算，同时仍然允许您扩展和改进应用程序。

设计一致：标准化组件使用一致且重复地创建更可预测且易于理解的应用程序。标准化组件还使设计人员可以将更少的时间花在注重风格上，而将更多时间用于开发更好的用户。

原型更快：在现有的设计系统中允许设计师将组件进行交互拼接，并且效率很高速度也很快，可以构建无数的原型和变体进行实验，帮助团队快速获得洞察力和数据。

更快的迭代：无论是改进UI的样式还是技术在实现的时候，使用设计系统都可以减少数百行代码到少量字符的工作量。这使得迭代快速而轻松，提高工作效率。

提高可用性：不同的样式会妨碍可用性。当无数独特界面元素及其交互的CSS增加时，认知负荷和页面权重也会增加。这会带来糟糕的用户体验。还有可能CSS和JavaScript冲突，可能界面会崩溃。通过使用设计系统，可以通过构建整体的组件库而不是更新整个页面来避免这些冲突，可以在短时间内保证页面的质量。

建立可访问性：通过优化，慢速的网络或老版本的可访问性，可以在组件级实现可访问性。帮助提高产品的可访问性并符合您所在国家/地区的法律。

如何建立设计系统？

建立自己的设计系统设计师首先要设计风格，如何设计模块化和可扩展性，如何将其用于其他团队，如何将想法准确的传达给Leader。要确认好从哪里开始。

其次要考虑到谁需要参与设计系统的创建以及团队如何协同工作。人员确定下来后就可以开始考虑系统的设计语言，包括颜色，排版，间距等等。设计师的可视化设计语言将成为UI库的基础—一系列可以快速组装以创建界面的组件。

1. 谁应该参与？

设计师（定义系统的可视元素）

前端开发人员（创建模块化，高效的代码）

用户调研人员（帮助了解客户真正的 需求）

运维工程师（可以确保您的系统在所有设备上快速加载）

产品经理（确保系统符合客户需求）

设计总监（支持并协调整个产品生态链的愿景）

Ella

2. 采访客户

与任何产品设计过程一样，进行研究非常重要 。你的设计系统将会更频繁地使用。通过采访用户，您可以提前查明问题，定义有助于他人正确使用系统的原则精力集中在重要的事情上。

通过实践研究建立赋权风格指南

通过客户访谈获得的见解，是时候进行盘点了。要创建两种类型的接口清单：

(1)视觉属性（例如间距，颜色和排版）的清单，这将有助于创建编码的视觉语言。

(2)每个UI元素的清单（例如按钮，卡片和模态），这将有助于创建组件的UI库。

3. 创建可视化设计语言

（1）颜色

（2）排版（大小，前导，字体等）

（3）间距（边距，填充，定位坐标，边框间距）

（4）图像（图标，插图）

（5）视觉形式（深度，高度，阴影，圆角，纹理）

（6）运动

（7）声音

Ella

考虑每个设计元素在一个简单的组件（如按钮）中扮演的角色。

颜色

为设计系统选择的颜色不仅仅是您品牌的延伸。UI使用颜色来传达：

（1）反馈：错误和成功状态

（2）信息：图表，图形和寻路元素

（3）层次结构：通过颜色和排版显示结构化顺序

设计系统中的常见颜色包括代表你品牌的1-3种原色，如果没有采用这个3个颜色，那么可能还有一个额外的颜色。对链接和按钮背景使用相同的颜色是个好方法，因为它使用户更容易识别交互元素。最后将获得错误警告和成功等状态的颜色。将这些颜色分组以查看它们如何协同工作。

Ella

检查颜色对比度

有多种颜色对比务必检查背景和文本颜色配对的对比度。

Ella

字体

选择的字体对您的品牌和用户体验都有很大影响，但是有些公司喜欢自定义一些字体用来更好的反映其平台，但是要注意特别使用，因为兼容可能会受到影响。

Ella

了解模块化规模

详细了解模块化比例，以创建更有意义的排版。

Ella

进行视觉审核

当我们开始采用库存之前，需要进行视觉上的审核与CSS样式的确认，属性、声明、选择器的确认。确认有多少独特的颜色，字体大小和字体系列。显示间距和尺寸值的条形图。查看合并或调整的好办法。

Ella

弊端？

太有限了：很有可能无法满足其他领域的特殊需求。

失去创造力：如果设计师被限制使用设计系统，那么设计师将不再自由探索风格。

原文可参考：https://www.designbetter.co/

非特殊说明，本文版权归原作者所有，转载请注明出处