UI设计
如何设计丰富的用户界面?
用户界面是通过拖放界面与所见即所得页面编辑器相结合构建的。我们的 Mendix Studio Pro 环境可以与 Atlas 用户界面 框架,这是一个完全响应的, 开放源码以及可扩展的设计语言,有助于采用设计思维方法来构建用户界面。
可搜索列表、数据视图、仪表板和向导等常见页面模式可作为入门模板使用,有助于加速开发并确保跨多种设备的一致、标准用户界面。
-
导航布局
建立一个 Mendix 应用程序,您要做的第一件事就是选择导航布局。这些布局是动态页面所在的框架,它们为整个应用程序提供一致的结构。
导航布局是使用平台布局编辑器构建的,它允许您创建页面所需的布局模式。
布局使用特定的控件(例如布局网格、内容占位符、滚动容器、滑动菜单栏和片段)来集中定义构建应用程序 UI 时将使用的所需页面布局模式。
-
页面模板
页面模板是预先设计的构建块集合,可以按原样使用,也可以通过自定义构建块和小部件进行增强。
-
积木
构建块是单一用途的 UI 元素,由多个小部件和样式组成。多个构建块通常在一个页面上一起使用。您可以将构建块拖放到相应的移动、平板电脑或响应式页面中,以实现常见的 UI 模式,从而大大加快自定义页面的开发速度。
-
小工具
小部件是用于增强现有构建块的小型用户界面元素(例如,警报、按钮、图表)。
Mendix 提供了许多现成的小部件,并且有数百个开源小部件可用 Mendix 市场。您还可以使用 JavaScript 构建自己的小部件,如本节所述 如何延长 Mendix 前端? of 前端.
-
设计属性
您可以通过更改小部件的设计属性来进一步自定义小部件。如果样式或位置不太合适,可以更改颜色、文本和许多其他变量以根据具体情况自定义小部件。主题开发人员可以实现他们自己的(公司)设计属性,以便其他用户可以轻松更改小部件的外观和感觉以匹配公司的品牌。
UI 元素的作用 Mendix 提供开箱即用的产品吗?
Mendix 提供不断增加的现成小部件列表。以下是一些最常见的小部件:
- 菜单小部件 – 允许最终用户浏览应用程序(例如菜单栏、导航树)
- 数据小部件 – 对于构建表单至关重要 Mendix 以便最终用户可以在应用程序中查看和编辑数据(例如,数据视图,数据网格,以及文本框和单选按钮等常见输入小部件)
- 布局小部件 – 构成界面的主干,通常用于布局(例如布局容器、标题)
- 常用小部件 – 通常出现在任何页面、布局和片段中(例如标签、图像)
- 容器小部件 – 可以包含其他小部件(例如,表格,
组框)
- 输入小部件 – 可以显示和编辑属性和关联的值(例如,文本框、日期选择器)
- 文件小部件 – 允许您处理文件,包括存储在文件中的图像
- 按钮小部件 – 这些按钮触发操作(例如,保存按钮、关闭页面按钮、微流按钮)
- 可视化小部件 – 更多图形小部件(例如图表、地图)
核心和平台始终在构建新的小部件 Mendix 开发团队和我们的开发者社区使用标准可用工具。您可以在 Mendix 市场 并下载它们以用于您的应用程序。
如何自定义应用程序的外观和感觉?
- Mendix 前端使用 Atlas UI 框架来呈现响应式页面或原生移动页面。该框架基于可完全自定义的默认主题。使用主题定制器工具,您可以轻松上传用于确定品牌颜色的徽标。可以快速配置和预览各种颜色、字体和大小设置。
除此之外, Mendix 使用 萨斯 定义样式。平台包含一个配置文件,其中有许多变量可用于配置和调整主题。配置设置得非常方便,可以通过提供自定义 Sass 文件轻松更改和扩展。还可以使用自定义 CSS 直接扩展样式。样式也可以共享,如下一节关于创建一致用户体验的讨论中所述。
欲了解更多信息,请参阅 Atlas UI 操作方法 ,在 Mendix 文档。
对于 原生移动应用程序,样式基于 JavaScript。有关更多信息,请参阅 原生样式.
如何 Mendix 支持设计模式和元素的重用吗?
Atlas UI 通过促进分层和组件化的应用程序设计方法,促进元素和布局的重复使用。此外,Atlas UI 还使您的 UX 设计师能够扩展现成的组件、组装自己的构建块、创建自定义小部件以及覆盖默认设计属性。
新的和增强的设计元素会自动传播到使用每个元素的所有应用程序中。
下面介绍了主要的重用类型。
片段
片段是包含设计元素、小部件和数据的页面设计片段。片段在模型级别集中构建和管理,并且可以在应用程序内的多个页面中重复使用。
此视频演示了如何在应用项目中使用代码片段调用小部件:
布局、导航和页面模板
布局是将小部件、导航占位符和品牌整合到可重复使用组件的集中存储库中的线框页面设计。布局可以设计为支持特定外形尺寸,以便在各种设备上打造通用的用户体验。创建布局后,布局将在设计时应用于应用页面。