我们关注哪些 UX/UI 工具

mstmahmuda11121

设计系统目前是许多忙于创建或进一步开发数字产品的团队的中心主题。所有相关的 UI 工具都集成了与设计系统或设计服务相关的功能，以便设计师、利益相关者和开发人员之间更好的协作。让我们概述一下这些工具可以实现什么以及仍然存在哪些差距。 我们关注哪些 UX/UI 工具 本文介绍的 UI 工具在视觉设计过程中不需要任何编码知识，而是以图形方式工作并尝试优化开发的移交。在这个市场上，目前最相关的程序是Sketch、Figma和Adob​​e XD 。 图 - 设计工具调查计工具调查 设计系统开发背后的动机 大多数团队都会建立设计系统来确保用户界面的一致性——通常是同一家公司的不同数字产品之间的一致性。为此，每个人都可以集中使用设计的各个组件。由于可以使用现有元素，团队可以更有效地工作。


扩展设计系统也可以毫无问题，因此扩展和修改都很容易。 另一个动机可能是打 瑞士 电话号码 破公司的筒仓结构。不同的项目团队与设计系统一起工作，不会意外地并行开发类似的解决方案。 组件库、UI 套件还是设计系统？ 在基本形式中，设计系统至少涵盖以下主题，所有这些主题都可以以所谓的库的形式组织在 Sketch、XD 和 Figma 中： 设计标记：外观的总体特征，例如颜色、字体、间距、图像和图标 组件：不同复杂度的 UI 元素，例如按钮、卡片、标题等。通常基于原子设计 模板：由组件组成的不同页面类型 图 - Atomic Design 中视觉设计系统的可视化Atomic Design 中视觉设计系统的可视化 严格来说，这三点并不是一个设计系统，而是一个UI套件。一个“真正的”设计系统缺乏大量表征整个设计的内容，但不一定必须具有视觉特征。




除此之外，设计系统中通常描述以下几个方面： 交互和动画的规则 调性和语言作为设计手段 贫困障碍规则 前端代码中定义的组件！ 图 - Shopify 的“Polaris”设计系统中的章节 Shopify 设计系统“Polaris”中的章节 在这一点上，意见常常存在分歧。像 Brad Frost 这样的流行代表认为Sketch 库不是一个设计系统，因为只有当可以用它构建最终产品时，设计系统才“完成”。这不适用于 UI 套件——设计系统必须包含“生产就绪代码”。 然而，你也可以听到反对的声音，认为UI 套件确实代表了一个设计系统，因为中心点得到了满足。即，设计保持一致并节省时间和金钱。 “真正的单一真相来源”还是“交接”？ 大多数设计系统仍然区分设计和开发。许多公司和机构提倡跨学科的设计/开发工作流程，但首先在 UX/UI 设计中开发静态设计组件，第二步由前端开发人员在代码中重新创建。 只有用代码构建组件时，您才能看到它们的实际外观以及它们在不同浏览器中的行为方式。