软件工程师需要设计系统来构建具有良好用户体验的产品

许多现代产品团队继续创建原始的用户体验设计，从零开始制作数字体验。在这样做的过程中，他们忽视了使用现有和经过验证的设计模式的优势，导致了糟糕的可用性、视觉和行为的不一致，以及更长的设计周期。为了提高整体用户体验质量，软件工程领导者应该部署一个设计系统——一组可重用的设计资产和表示层代码组件，由明确的标准管理，以构建各种数字产品。

“设计系统是公司最重要的战略资产之一。它是一个鲜活的数字产品，需要一个团队、一个计划和一套专门的工具，”他说布伦特·斯图尔特， Gartner的高级总监分析师。

立即下载:通过建立数字免疫提高软件质量

设计系统增加了什么价值?

设计系统创造了“真相的单一版本”——UX设计师的中心设计语言，使他们能够跨不同团队、渠道和平台创造一致的用户体验。设计系统的价值主张包括:

• 速度:它利用经过试验和测试的UX设计模式，而不是从头开始创建一切，从而显著减少了设计和编码时间。
• 规模:它允许设计师和开发人员在整个数字产品组合中共享公共的、经过批准的设计资产和代码组件。
• 品牌合规:它确保每个设计资产与组织的品牌属性保持一致，如颜色、标志、排版、声音、色调等。
• 缺陷减少:随着时间的推移，设计系统的代码组件变得“僵化”，使得生产缺陷在表示层变得罕见。

设计系统由什么组成?

理想的设计系统包括设计令牌、可定制的UX设计模式、可生产的代码和有效交付的指令高性能数码产品．以下是设计系统的四个组成部分:

风格资产

视觉、文字和行为属性，如logo、调色板、图像、排版、声音或音调，都属于风格资产的范畴。

先进的设计系统使用设计令牌来集中管理颜色、文本样式、图标等。设计令牌是平台中立的实体，它存储设计变量，并用于取代硬编码值(如像素或十六进制值)，以在设计系统扩展时保持UI和UX的一致性。

结构性资产

结构资产是用户体验设计元素(特定的按钮、页面模板等)的集合，用于创建具有较短周转时间的用户友好的屏幕设计。

原子设计方法是描述结构资产层次结构的最流行的方法之一。以下是一个大致的分类:

• 原子:原子是用户界面的基本单元。单个表单字段、下拉菜单、按钮或图标都是原子。
• 分子:分子是一组UI元素作为一个单位一起工作——由几个原子组成的簇。表单字段的集合或相关的提交按钮可以是分子的一个很好的例子。
• 生物:有机体是UX设计层次结构中更复杂的实体——分子和原子的集合。有机体的例子包括实用工具导航、全局导航、英雄空间和页脚。
• 模板:模板是由原子、分子和生物聚合而成的可重复使用的框架或设计布局。标准模板包括主页、产品列表页面、产品详情页面和购物车。
• 页:页面是模板的完全开发和优化版本。当模板中添加了占位符或文本、图像或广告单元等真实内容时，它就变成了一个页面。

代码组件

代码组件是所选框架中可用于生产的代码的清单。它们使用原子设计方法层次结构进行组织。每个设计原子、分子、有机体和模板都有一个相关联的代码组件来匹配。复杂的设计系统对代码组件进行标记，以集中方式更新颜色、排版、间距等。

标准

应制定可执行的指导原则、使用指南和治理策略，以创建高效的设计系统。

指导原则确保设计资产和代码组件是模块化的、可组合的、通用的、灵活的和可访问的。使用指南包括与排版、配色、尺寸和间距、语法、纵横比、写作风格等相关的规则。

治理策略对于长期维持给定的标准是必要的。软件工程领导者可以使用wiki风格的方法，而不是实现传统的IT治理模型。它可以让贡献者自由地创建、更新和删除样式资产、结构资产和代码组件，允许产品团队“动态地”改进设计系统。

为了保持设计系统的可信度，领导团队可以在一个重要的版本中审查添加、编辑和删除，除了他们的季度审查。

利用现有的UX设计系统

多年来，各种基于平台和开源的设计系统已经推出，以确保高性能的用户体验。对于在主流平台上开发应用，我们强烈建议尽可能地重新利用这些现有的设计系统。这些系统中的设计资产和代码组件得到了对客户关系管理(CRM)和企业资源规划(ERP)等产品类别中的用户体验的广泛研究的支持。

为设计系统分配一个团队

通过建立由产品负责人、用户体验主管和开发主管组成的产品领导，将您的设计系统视为数字产品。

三位领导可以通过操作指导、设计指导和技术指导来完善设计体系。该团队还可以有用户体验设计师、内容策略师、前端开发人员和易访问性专家等贡献者来处理设计系统的每个版本。