如何从头开始构建设计系统

善微科技 2019 07月22日 发布

入门 - 设计和开发审计

网站建设开发过程中要开始构建设计系统,我们首先与公司合作以识别系统的用户。通过与用户(即产品设计人员和开发人员)交谈,我们能够了解他们希望在日常工作流程中利用设计系统的程度。上海网站建设从这里我们可以评估最适合他们公司的设计系统的类型(是严格还是松散?是模块化还是集成?是集中还是分布式?)。


虽然设计系统的要求可能因公司而异,但其核心是设计系统由三个要素组成:


设计原则:关于如何在整个组织中进行设计的一套共同标准。

风格指南:关于品牌标识的一整套使用指南(即颜色,排版,间距,网格/布局,图标,插图,动作等)

组件库:常用界面元素的术语表,可以扩展到多个产品。

为了询问公司可能已经拥有的设计系统的哪些元素以及他们需要开发的其他元素,我们对其现有产品进行设计和开发审核。此审计用作跟踪可能成为设计系统一部分的现有样式和组件以及了解使用这些元素的上下文的方法。一旦我们对现有的样式和组件有了很好的把握,我们就可以填补任何空白,并将这些差异优先考虑到设计系统开发计划中。


我们的方法 - 优先考虑组件

我们的开发计划首先要优先考虑设计系统的原子级别,例如排版样式,颜色样式和间距规则。我们首先完善这些样式规则,因为它们最终影响设计系统的分子元素,例如基本组件(可以通过排版,颜色和间距样式的组合制作)。然后我们构建基本组件(即按钮,下拉列表,输入字段等),因为这些组件可能是更复杂组件的构建块,其中可能包含多个基本组件。例如,模态组件可以是卡组件,文本输入组件和按钮组组件的组合。




从最小的元素开始,我们为强大的设计系统奠定了必要的基础。在我们意识到这一点之前,设计系统将通过排列成长为数百种不同的组件。


测试系统 - 制定并打破它

无论何时构建组件,它都要经过广泛的测试,以确保它遵循公司提出的设计原则并满足以下标准:


流体:组件可以根据设计人员,开发人员和用户的需求进行扩展。

可访问:所有用户都可以访问最常见的组件和模式。

一致:使用现有的颜色和样式的原子基础。评估是否有必要或可以简化特定的变化。

功能:该组件易于使用; 因此,尽可能简化每个组件的解剖结构,以便每个设计决策都是有目的的。

有了这个指导标准,我们就可以确保设计系统满足设计和开发期望。


经过大量的迭代测试后,每个批准的组件都会被添加到设计系统中并进行抛光,以确保未构建模式的设计人员能够轻松理解图层名称,图层顺序,符号结构和符号层次结构。同时,这些组件也将由开发人员采用并转换为可重用的前端代码,该代码将部署到未来的产品中。


文档 - 要彻底

文档是开发过程中的关键步骤,因为它可以作为一种媒介,使公司内的其他设计人员和开发人员能够使用设计系统。组件完成后,我们会提供任何其他设计说明,说明每个组件的用途,预期行为和最佳实践。此外,还补充了其他开发文档,例如组件代码段。


如没特殊注明,文章均为善微网络原创,转载请注明来自https://www.sanways.com/news/552.html