网页设计师如何建造自己的设计系统

在数字设计领域工作的人一定听说过“设计系统”这个词;不过，你可能不确定这是什么意思。
在本文中，我们将准确地定义什么是设计系统、使用设计系统的原因、如何创建设计系统。

什么是设计系统?

设计系统是设计人员和开发人员共同创建、参考和开发的系统。它是一系列规则和一个符号库组成——字体、图标、颜色、形状、网格、动画、音调或更多——这些符号具有不同的含义，由它们的功能和层次关联决定。
它本质上是一个由元素组成的生命体，这些元素随着产品复杂度增加而增加。这些元素被转换为可用于开发的组件，这些组件可以在活动环境中立即使用。

谁定义了设计系统?

设计人员和开发人员紧密合作，以建立设计系统的规则。设计师定义视觉传达的所有方面——用户界面、品牌和用户体验——同时与开发人员一起将这些属性转换为编码的组件，通过不断地迭代它们，直到它们以自包含的方式在技术上和风格上表现出来。

为什么要有设计系统?

虽然设计系统是任何可伸缩的数字产品的基本要求，但其核心是适用于任何设计工作的原则。最重要的方面是设置一组规则，当重复一遍又一遍时，将始终返回相同的原则。
建立一个系统的目的是拥有一个经过测试的组件库，这些组件可以被一致地重复使用，并期望每次都在所有产品维度上执行——样式、品牌、行为、功能和交付。设计系统最大的优点是能够高效地进行原型设计，并在开发高质量产品的过程中对设计和代码进行共生迭代。
如何开发设计系统?
网页设计师如何要创建一个设计系统，大致需要实现如下三个步骤：
第一，建立一个清晰的产品愿景。
你需要对你正在开发的产品有一个清晰的概念。以下是一些需要考虑的基本问题:
它是做什么的?你的产品的用途是什么?产品需要什么样的功能来执行?是给谁的?这个产品的受众是谁?用户是否有任何可能影响产品接收方式的怪癖?用户为什么要使用这个产品?是什么让它独一无二?
用户是否熟悉同类产品?该产品是响应一个确定的需求还是创建一个新的需求?它是否解决了可访问性?这个产品是网站吗?一个web应用程序?一个应用程序吗?它应该提供相同的跨平台体验，还是专注于特定环境中的特定微体验?
设计系统的目的是通过处理已知的关注点以及在概念阶段识别新的关注点来减少开发中的复杂性。在过程的早期定义产品映射是很重要的，因为它将有助于识别在原型阶段可以避免的潜在停顿。
第二，制定你的创建计划。
你需要评估最好的方法。如果你正在开发一个新产品，你可能会从一个MVP(最小可行产品)开始，你的注意力将会放在验证功能和学习用户的反馈上。在这些情况下，使用现有平台上的UI套件是有意义的，比如谷歌的MaterialUI或Apple的UIkit。
如果你已经经过了MVP阶段，或者从头开始创建了一个完整的设计系统，你的产品映射——应该包括关键方面，比如信息架构、站点地图和用户旅程——将会告诉你哪些基本功能需要首先解决。
例如，如果你的产品是一个电子商务应用程序，你需要在整个用户旅程中有什么元素来执行购买——从主页到产品页面，结帐和订单确认?是垂直导航还是水平导航?cta是什么样子的:它们的图标是纯文本的，背景是彩色的吗?你考虑的图像比例是什么:纵向、方形、横向?
通过分层功能处理每个元素的属性，您将能够为渐进的UI版本打下坚实的基础，从而构建一致可靠的系统。
第三，选择合适的工具。
开发一个产品应该始终是一个包容的过程，这取决于所有相关方:设计师、开发人员、产品所有者、客户和用户。这些人一起创造了一个生态系统，一个试验场，在最终产品交付的整个过程中塑造设计系统。
由于进度需要共享，有时需要实时工作，因此选择最适合您的工作流的工具是很重要的。值得庆幸的是，当涉及到设计和原型工具时，我们有太多工作可以选择。
通过如上三步骤，设计师就可以创建一个可使用的设计系统，该设计系统将会极大提高重复的设计工作，以及降低设计师的工作强度。