UI Design
-
导航布局
构建 西门子低代码 应用程序要做的第一件事是选择导航布局。这些布局是动态页面所在的框架，在整个应用程序中提供了一致的结构。
导航布局使用平台布局编辑器构建，此编辑器支持创建页面所需的布局模式。
布局使用特定控件（如布局网格、内容占位符、滚动容器、滑动菜单栏和片段）集中定义在构建应用程序 UI 时将使用的所需页面布局模式。
该视频显示了在 西门子低代码 Studio 中为应用程序项目选择可重用的导航布局多么轻而易举：
-
页面模板
页面模板是构建模块的预先设计的集合，可以按原样使用或通过自定义构建模块和小组件进行改进。
该视频演示了如何为您的应用程序项目找到最佳的页面模板：
-
构建基块
构建基块是由多个小组件和样式组成的单一用途 UI 元素。通常在一个页面中同时使用多个构建基块。您可以将构建块拖动到任何的相应移动设备、平板电脑或响应页面中，以实现常见的 UI 模式，这大大加快自定义页面的开发速度。
该视频介绍了如何在应用的布局中使用构建基块：
-
小组件
小组件用于增强现有构建块的小型用户界面元素（例如，警报、按钮、图表）。
西门子低代码 提供了许多现成小组件，西门子低代码 Marketplace 中有数百种可用的开源小组件。您也可以如前端中如何扩展 西门子低代码 前端？所述，用 JavaScript 构建您自己的小组件。
-
设计属性
您可以通过更改其设计属性来进一步自定义小组件。如果样式或位置不太正确，可以根据具体情况更改颜色、文本和许多其他变量来自定义小组件。主题开发人员可以实施自己的（公司）设计属性，以便其他用户可以轻松更改小组件的外观和风格以匹配公司品牌。
此示例说明了在 西门子低代码 Studio 中更改按钮的设计属性是多么容易的一件事：
西门子低代码 提供越来越多的现成小组件。以下是最常用的小组件：
- 菜单小组件 – 允许最终用户浏览应用程序（例如，菜单栏、导航树）
- 数据小组件 – 是在 西门子低代码 中构建表单的核心，以便最终用户可以在应用程序中查看和编辑数据（例如，数据视图、数据网格以及常见的文本框和单选按钮等输入组件）
- 布局小组件 – 形成接口的主干，通常用于布局（例如，布局容器、标题）
- 常用小组件 – 通常可在任何页面，布局和片段中找到（例如，标签、图像）
- 容器小组件 – 用以包容其他小组件（例如，表格，
组框）
- 输入小组件 – 可以显示和编辑属性和关联的值（例如，文本框，日期选择器）
- 文件小组件 – 允许您处理文件（包括存储在文件中的图像）
- 按钮小组件 – 这些按钮用于触发操作（例如，保存按钮、关闭页面按钮、微流按钮）
- 可视化小组件 – 更多的图形小组件（例如图表、地图）
西门子低代码 核心开发团队和我们的开发人员社区始终使用标准可用工具来构建新的小组件。您可以在 西门子低代码 Marketplace 中找到并下载可用小组件并在您的应用程序中使用。
如何自定义我的应用程序界面外观？
西门子低代码 前端使用 Atlas UI 框架来呈现响应页面或原生移动页面。该框架基于完全定制的默认主题。使用 Theme Customizer 工具，您可以轻松上载用于确定品牌颜色的徽标。可以快速配置和预览各种颜色、字体和大小设置。
此外，西门子低代码 使用 Sass 定义样式。该平台包含一个配置文件，其中包含许多可用于配置和调整主题的变量。对配置进行设置，以便通过提供自定义 Sass 文件轻松更改和扩展配置。也可以使用自定义 CSS 直接扩展样式。如下一节有关创建一致的用户体验中所述，样式也可以共享。
有关更多信息，请参见 西门子低代码 文档中 Atlas UI 的操作方法。
-
片段
片段是包含设计元素、小组件和数据的页面设计片段。片段在模型级别集中构建和管理，并可在应用程序的多个页面上重用。
该视频演示了如何在应用程序项目中使用片段调用小组件：
-
布局、导航和页面模板
布局是将小组件、导航占位符和品牌组合到可重用组件的集中存储库中的线框页面设计。可以将布局设计为支持特定的外形尺寸，以便在设备之间创建通用的用户体验。布局在创建后将在设计时应用于应用程序页面。
-
构建基块
西门子低代码 Studio 优化了构建块以供重用。有关更多信息，请参见上面的构建基块。