“用代码们为乐：Progress设计系统工具包让UI设计有趣的6个方法”
了解Telerik的进展设计系统，一个端到端的设计语言，用于创建简单、直观、美观的体验
在本文中，我们将介绍Telerik的Progress设计系统，这是一个端到端的设计语言，用于创建简单、直观和美观的体验。我们将讨论Progress设计系统作为一个在众多UI设计解决方案中脱颖而出的UI设计解决方案，以及如何将该方法定位为良好UI的基础组件库。
我们与Telerik的Progress设计系统合作创建了本文。感谢您支持使CodesCode成为可能的合作伙伴。
Telerik的Progress设计系统
Telerik的Kendo UI组件库在开发社区中非常受欢迎，对UI设计的需求也在不断增长。Progress设计系统的独特之处在于，它既为开发人员量身定制，又适用于设计师。这确保了开发工作能及时交付，而不会被UI问题所困扰。
通过增强团队协作能力，Progress与竞争对手区别开来。该设计系统提供了主题、工具和文档，以支持大多数设计需求。在设计系统介绍页面，可以找到入门的好指南。
Telerik和Kendo UI的许多用户都是后端开发人员，他们没有时间或技能来处理高级样式要求。设计师也可以通过工具与开发人员合作，帮助他们为设计工作做出贡献。Progress设计系统旨在满足设计和开发的双重需求。
关于设计系统
设计系统通常有助于团队提供一致的用户友好和直观的UI。这是铸造应用程序的外观和感觉的关键。
任何应用程序开发工作的关键成功因素，无论是为内部还是外部使用，都是满足UI设计要求的能力。如果UI不一致、令人愉悦和直观，用户就不会享受使用它。支持负担和成本也会增加，因为UI体验不一致或令人困惑。
如果UI不是最佳选择，则竞争对手会胜出。一个开发团队可能会创建最具创新性的应用程序，但如果用户不接受新的UI，这一切都是徒劳的。
问题在于时间、资源和才能。开发人员必须花费时间来精确调整CSS，而他们更希望将精力放在功能和工程上。开发团队可以从设计团队获取模型、样式指南甚至是一个完整的设计系统。无论如何，费时费力的CSS工作以及开发和设计之间的反复沟通，使得整个工作变得困难，有时甚至不切实际。即使计划良好的开发项目也可能在团队成员不得不重新做任何工作时迅速失控。
没有设计师参与的团队也可以从Progress设计系统中受益。全栈开发人员往往没有构建良好UI的设计技巧。Progress旨在通过最小的努力实现出色的UI设计。
Progress对解决这个问题有着独特的方法，即Progress设计系统套件。
让我们谈谈这个设计系统提供了什么。
开箱即用的主题
Kendo UI组件库随附四个专业设计的主题（默认、材料、流畅和Bootstrap）。开发人员和设计师可以选择其中任意一个，这将自动应用于整个项目，确保一致性。如果不需要自定义，这是实现出色UI的最简单途径之一。
- 默认：基于Telerik和Kendo设计系统的中性样式
- Bootstrap：与Bootstrap 5样式匹配
- 材料：遵循Material Design指南
- 流畅：实现Microsoft设计系统
主题是一组精心制作的视觉属性，如颜色、字体和间距。Material、Bootstrap和Fluent等可用的设计系统广受欢迎并且众所周知。一旦应用了主题，您就可以在没有任何进一步努力的情况下获得一致的外观。
Telerik的网站上有数百个演示。确保更改主题和颜色板以便自己查看这些主题。例如，查看网格组件和可用的即插即用选项。
无需CSS的自定义（基本或高级）
ThemeBuilder是一个非常强大的设计工具，可以帮助开发人员和设计人员进行全局或精细的自定义，而无需编写复杂的CSS。
ThemeBuilder几乎没有学习曲线，因为它是一个可视化工具。您可以为Telerik和Kendo UI组件的每个元素进行样式设置，从高影响力的主要颜色到最小的细节。
开发人员可以专注于丰富的功能，而设计人员可以创建令人愉悦的美妙体验。CSS很难，它是一套最好由经验丰富的专业人员来处理的技能。
您可以在几次点击中设置全局属性，如颜色、边框半径和排版，或者您可以进入高级模式并进行自定义，直到原子级别。ThemeBuilder是一个允许您轻松样式化组件的Web应用程序。
一旦设计人员确定了项目设计，他们就能够只用几次点击就共享他们的自定义设置。
您可以通过 7 天免费试用版了解ThemeBuilder。
内置协作
ThemeBuilder是一个云应用程序，可以安全地存储项目在您的帐户中。当团队成员需要贡献时，他们只需登录并打开项目。无需手动共享文件或通过源代码控制。这使设计师能够无缝地协作和共享想法与开发人员。
ThemeBuilder可供设计人员和开发人员使用。这将工具置于所有UI自定义的中心，并减少团队成员之间的隔阂。
此外，管理人员可以为每个项目设置权限，以实现更多的团队控制。团队只需专注于完成任务，而不会被一堆无关的项目淹没。
设计师的自助服务
一般来说，设计人员在将设计交给开发人员后就会失去对项目的掌控。这可能意味着在应用程序完善时设计师和开发人员之间的多次往返。
ThemeBuilder是无需编码且易于访问的，因此设计人员可以登录并自己更新实际设计，无需来回沟通。开发人员也可以获得使用工具的权限，以便及时了解最新的可用设计。该工具有助于开发项目加速，使团队能够相对轻松地解决具有挑战性的UI设计问题。
随着Telerik和Kendo UI的发展，设计人员可以通过自动更新了解最新的组件功能。这会自动调整您的样式以匹配更新的HTML，确保一致的体验和令人兴奋的新组件功能。
Figma支持
设计人员可以将Figma中的Sass/CSS变量整合到ThemeBuilder中。还可以导入颜色、排版和效果等设计标记。
ThemeBuilder对于Figma可以导出以下内容：
- 样式，如颜色、排版和效果：这些是Sass或CSS标记
- 自定义SVG图标：这些被导出并转换为图标字体
要安装Figma的插件，您只需要一个Figma帐户作为前提条件。然后，找到Figma的Progress ThemeBuilder plugin for Figma（通过Figma的Community页面可用），然后点击Install。
为了进一步加强设计师与开发者之间的合作，Telerik 和 Kendo UI 以两种方式支持 Figma：
- Figma UI kits：Progress 提供了 Figma UI kits，代表库中的每个组件。设计师可以制作像最终产品预期外观一样的像素完美设计。
- 在 ThemeBuilder 中导入设计令牌：开发者可以直接从 Figma 获取设计令牌，以进一步简化设计师与开发者之间的合作。
Progress Design System 是为设计师和开发者构建的，旨在尽量减少交付项目时的意外延迟。
详细且互动的前端文档
Telerik 和 Kendo UI 具有一流的文档，它们详细、全面且互动。开发者和设计师可以阅读关于 Progress 设计系统的总体信息，还可以了解每个组件的标记、样式和配置选项。
例如，开发者可以访问文档，设置一些属性并检查标记。想快速查看文档，可以查看 按钮组件的文档。
一个具体示例是使用 React 构建的 自动完成组件文档。开发者可以快速评估标记以及可用的属性。他们还可以选择 JavaScript 或 TypeScript 作为标记语言。
如果 React 不是您选择的工具，还有其他可用选项，如 Angular、Blazor、jQuery 和 Vue。文档内容非常全面，无论您选择哪种工具，都将获得支持。
这种技术可以极大地提升后端系统的开发，比如必须与 UI 设计集成的 API。例如，后端开发人员可以检查设计并开始构思领域数据模型的样貌。有了对领域的清晰愿景，开发人员可以快速开始完成解决方案的其他部分，如 DTO、后端存储和缓存。
注：Telerik 和 Kendo UI 正在继续完善文档，截至本文撰写时还没有覆盖所有组件。希望到2024年能达到这一点。
改变您的工作方式
Telerik 和 Kendo UI 备受开发者的信赖，提供出色的用户界面体验已经数十年。随着 UI 样式需求的不断演变，Progress Design System 及其工具也随之发展。如今，Progress 已经达到了一个令人瞩目的独特样式解决方案，无论您需要即插即用的解决方案还是真正独特的定制设计，这条道路将为您提供最简单的方式来让客户真正满意。
Leave a Reply