UI Design

如何设计丰富的用户界面?

用户界面通过拖放界面与 WYSIWYG 页面编辑器的组合而构建。我们的 Mendix Studio 和 Mendix Studio Pro 环境可以与 Atlas UI 框架一起使用,它是完全响应的、开源的、可扩展的设计语言,可促进构建用户界面的设计思维方法的诞生。

通用页面模式(例如可搜索列表、数据视图、仪表板和向导)可作为入门模板使用,以帮助加快开发速度并确保跨多个设备提供一致的标准用户界面。

  • 导航布局

    构建 Mendix 应用程序要做的第一件事是选择导航布局。这些布局是动态页面所在的框架,在整个应用程序中提供了一致的结构。

    导航布局使用平台布局编辑器构建,此编辑器支持创建页面所需的布局模式。

    布局使用特定控件(如布局网格、内容占位符、滚动容器、滑动菜单栏和片段)集中定义在构建应用程序 UI 时将使用的所需页面布局模式。

    该视频显示了在 Mendix Studio 中为应用程序项目选择可重用的导航布局多么轻而易举:

  • 页面模板

    页面模板是构建模块的预先设计的集合,可以按原样使用或通过自定义构建模块和小组件进行改进。

    该视频演示了如何为您的应用程序项目找到最佳的页面模板:

  • 构建基块

    构建基块是由多个小组件和样式组成的单一用途 UI 元素。通常在一个页面中同时使用多个构建基块。您可以将构建块拖动到任何的相应移动设备、平板电脑或响应页面中,以实现常见的 UI 模式,这大大加快自定义页面的开发速度。

    该视频介绍了如何在应用的布局中使用构建基块:

  • 小组件

    小组件用于增强现有构建块的小型用户界面元素(例如,警报、按钮、图表)。

    Mendix 提供了许多现成小组件,Mendix Marketplace 中有数百种可用的开源小组件。您也可以如前端如何扩展 Mendix 前端?所述,用 JavaScript 构建您自己的小组件。

  • 设计属性

    您可以通过更改其设计属性来进一步自定义小组件。如果样式或位置不太正确,可以根据具体情况更改颜色、文本和许多其他变量来自定义小组件。主题开发人员可以实施自己的(公司)设计属性,以便其他用户可以轻松更改小组件的外观和风格以匹配公司品牌。

    此示例说明了在 Mendix Studio 中更改按钮的设计属性是多么容易的一件事:

Mendix 提供了哪些现成 UI 元素?

Mendix 提供越来越多的现成小组件。以下是最常用的小组件:

  • 菜单小组件 – 允许最终用户浏览应用程序(例如,菜单栏、导航树)
  • 数据小组件 – 是在 Mendix 中构建表单的核心,以便最终用户可以在应用程序中查看和编辑数据(例如,数据视图、数据网格以及常见的文本框和单选按钮等输入组件)
  • 布局小组件 – 形成接口的主干,通常用于布局(例如,布局容器、标题)
  • 常用小组件 – 通常可在任何页面,布局和片段中找到(例如,标签、图像)
  • 容器小组件 – 用以包容其他小组件(例如,表格,
    组框)
  • 输入小组件 – 可以显示和编辑属性和关联的值(例如,文本框,日期选择器)
  • 文件小组件 – 允许您处理文件(包括存储在文件中的图像)
  • 按钮小组件 – 这些按钮用于触发操作(例如,保存按钮、关闭页面按钮、微流按钮)
  • 可视化小组件 – 更多的图形小组件(例如图表、地图)

Mendix 核心开发团队和我们的开发人员社区始终使用标准可用工具来构建新的小组件。您可以在 Mendix Marketplace 中找到并下载可用小组件并在您的应用程序中使用。

如何自定义我的应用程序界面外观?

Mendix 前端使用 Atlas UI 框架来呈现响应页面或原生移动页面。该框架基于完全定制的默认主题。使用 Theme Customizer 工具,您可以轻松上载用于确定品牌颜色的徽标。可以快速配置和预览各种颜色、字体和大小设置。

此外,Mendix 使用 Sass 定义样式。该平台包含一个配置文件,其中包含许多可用于配置和调整主题的变量。对配置进行设置,以便通过提供自定义 Sass 文件轻松更改和扩展配置。也可以使用自定义 CSS 直接扩展样式。如下一节有关创建一致的用户体验中所述,样式也可以共享。

有关更多信息,请参见 Mendix 文档中 Atlas UI 的操作方法

原生移动应用的样式基于 JavaScript。有关更多信息,请参见原生样式

Mendix 如何支持设计模式和元素的重用?

Atlas UI 通过促进分层和组件化的应用程序设计方法促进元素和布局的重用。而且,Atlas UI 使您的 UX 设计人员可以扩展现成的组件、组装自己的构件、创建自定义小组件并覆盖默认设计属性。

新的和增强的设计元素会自动传播到使用每个元素的所有应用程序中。

下面介绍了三种主要重用类型。

  • 片段

    片段是包含设计元素、小组件和数据的页面设计片段。片段在模型级别集中构建和管理,并可在应用程序的多个页面上重用。

    该视频演示了如何在应用程序项目中使用片段调用小组件:

  • 布局、导航和页面模板

    布局是将小组件、导航占位符和品牌组合到可重用组件的集中存储库中的线框页面设计。可以将布局设计为支持特定的外形尺寸,以便在设备之间创建通用的用户体验。布局在创建后将在设计时应用于应用程序页面。

  • 构建基块

    Mendix Studio 优化了构建块以供重用。有关更多信息,请参见上面的构建基块