技术文章

什么是代码设计？

简而言之，设计到代码是将软件应用程序从其设计阶段过渡到软件实现的过程。这个过程通常涉及多个团队之间的交接。

什么是代码设计工具

名词

Web 应用程序设计和开发平台可作为单一事实来源，将团队聚集在一起，消除交接，并简化 Web 应用程序设计和开发过程中的每个阶段。

这就是我定义这些应用程序开发加速器的方式。

对节省时间的工具的需求正在增长，来自不同行业（金融科技、临床研究、IT、健康、旅游、物流）的企业已经开始将它们视为关键业务解决方案并将其实施。因此， Indigo.Design 和 App Builder 等创新技术介入以取得巨大进步并改进 Web 应用程序的设计和开发。

试用 APP BUILDER

让我们潜入水中。

• Web应用程序是如何产生的

• 了解 Indigo.Design 和我们的从设计到代码的方法

• 我们的设计到代码解决方案的核心部分
  

• Indigo.Design 和 UI 套件

• 界面组件

• 通用应用模型

• 应用程序生成器

• 代码生成

• GitHub 集成

不同规模的公司如何构建 Web 应用程序

这个过程可以快速总结如下——如果你想构建一个应用程序，你可以从一个设计开始，然后你将把它组合成一个应用程序。由于在个人开发人员/小型商店规模的组织中，设计人员和开发人员可以而且通常是同一个人，因此您将再次接受该设计并为其开发 Web 应用程序。一旦你对你所做的感到满意，你就可以再次将它与设计相匹配。你看着它，你说“一切看起来都很好，我已经测试了一切”，然后，你部署它。这个网络应用程序已经上线。 

很简单，对吧？但是等一下。

这个过程包括设计-开发-部署阶段，几乎没有任何子阶段，这对于包括最多 5 人（通常是开发人员）和最多一名设计师的个人开发人员/小型商店组织来说是典型的。

如果我们将一个中型组织作为比较，它们由大约 250 名员工组成——当然，并非所有人都是开发人员。

有不同的部门——销售、营销、指定的设计团队等等。他们要么为自己构建应用程序，要么作为承包商构建应用程序——响应其他公司和外部项目的需求。应用程序开发过程几乎相同，但还有其他几个中间步骤。

然后，我们有大型组织，这里的应用程序开发过程如下。

更多步骤、更多批准、更多利益相关者参与每一步——设计、开发、批准、部署。通常，团队必须在不同的媒体、平台、应用程序甚至国家和时区进行协作。该组织使用各种类型的软件来制作线框图、查看设计、屏幕设计，并最终交付实际的 Web 应用程序。

此外，对此类组织提出了更多要求，并且应用程序通常是为内部目的和使用而构建的。系统集成商属于大型组织类别，但他们仍然主要为其他组织构建大型应用程序。

看看这些组织，他们构建软件通常采取的步骤之间没有显着差异。使流程复杂化的是协作周期和交接的数量。这是团队协作时面临的最大挑战之一——他们通常通过太多的媒介进行协作。他们将 Outlook 用于电子邮件，将 Teams 用于视频通话，将 GitHub 和 Web 工具用于任务。还有 Visual Studio Online 或 TFs git、矢量图形设计平台和团队协作框架，它们混合在所有其他工具之上。这是很多。工具和软件产品之间的杂耍通常会带来很多摩擦。

我们的解决方案不仅考虑了设计和开发操作，还考虑了协作过程。它从一个集成了低代码/无代码 App Builder的设计系统开始，以协调 UX、产品管理和产品开发。    

Indigo.Design in a Nutshell

Indigo.Design 是一个从设计到代码的平台，可在产品级别 (DesignOps) 实现操作一致性、深度协作和持续创新，并为 Web 应用程序交付提供完整的低代码多用户体验。  

• 使企业用户体验和产品交付团队能够实现用户体验、产品管理和产品开发之间的兼容性

• 支持 Sketch 和 Adobe XD（即将推出 Figma）设计文件

• 作为跨企业团队的单一事实来源，促进与利益相关者的协作

• 允许使用深度分析和基于图像的原型进行用户测试

Infragistics 的设计到代码解决方案的核心部分

UI 套件- Indigo.Design 系统 的第三方设计工具实现 

UI 套件对所有技术都遵循完全相同的设计系统，这意味着设计人员甚至可以切换他们的工具以供选择（比如从 Sketch 到 Figma），并且仍然支持他们继续使用我们为特定工具提供的符号进行设计 。  

• 无论他们使用什么工具，他们都针对并帮助设计人员，使他们能够使用自己选择的工具，同时能够与 App Builder 集成，减少摩擦

• 作为 UI 组件的真实来源，独立于平台实现

• Sketch、Adobe XD 的适配器（很快也适用于 Figma）利用 UI 套件符号背后的元数据，以便将设计的屏幕带入 App Builder 并根据实际组件将它们可视化

UI 组件 - 特定于框架的可重用组件实现

他们的行为、外观和感觉是由设计系统驱动的。 

• 跨框架概念的可重用性

• 每个新组件都可在 App Builder 平台中使用

• Ignite UI为Angular、Blazor、React、Web Components和其他框架 提供了一个工具箱    

通用应用模型 - 系统的核心

它允许我们以与框架无关的方式描述应用程序。

• 抽象一种定义应用程序结构、视图和交互的方法

• 使您能够 在不同的技术中拥有一个相同的应用程序

• 接受设计，使其对 App Builder 易于理解，并为 Angular 或 Blazor 启用代码生成（Web 组件和 React 仍在进行中）

• 定义跨技术的通用模式

• 由 UI 套件、App Builder 或其他第三方插件之上的设计工具解析器生成

App Builder  - 我们设计到代码解决方案的皇冠上的明珠

简而言之，App Builder 是一个平台，它允许您以低代码/无代码方式可视化设计应用程序并针对 Angular 或 Blazor（Web 组件和 React 即将推出）为它们生成代码。一切都是拖放，提供真正的所见即所得的开发体验。工具箱中有组件，可以选择不同类型的视图布局，以及视图之间的导航/结构。 

• 将 Infragistics 的 Ignite UI 用于 Angular/Blazor 组件，涵盖所有设计和应用要求

• 可以节省时间，生成代码以启动您的应用程序，其质量与您自己编写的代码相同或更好

• 允许您从头开始、从现成的项目模板或已完成的 Sketch 或 Adobe XD 设计文件开始您的应用程序

• 作为一个单一的事实来源，促进开发人员、设计师、PM、利益相关者之间的协作，可以在应用程序开发周期的任何阶段进入

• 通过解析器（从 UI 工具包提供的元数据）使用通用应用程序模型，并通过其设计表面生成它

• 获得持续的增强和功能