---
title: "移动应用程序主题设计能够提升用户满意度"
date: "2022-03-02"
categories: 
  - "app-development"
  - "mobile-development"
  - "mobiletogether"
tags: 
  - "mobile-app-themes"
  - "mobile-app-user-interface"
  - "mobile-development-tools"
  - "mobiletogether"
description: 探索如何通过允许用户自定义图表颜色和显示模式，利用MobileTogether强大的设计工具，从而提升移动应用的主题设计，从而提高用户满意度。
---
Status: #blog

Tags:  #mobile-app-themes #mobile-app-user-interface #mobile-development-tools #mobiletogether

Categories: [mobile-development](/blog/zh/category/mobile-development.md) | [mobile-development](/blog/zh/category/mobile-development.md) | [mobile-development](/blog/zh/category/mobile-development.md)
# 移动应用程序主题设计能够提升用户满意度

移动应用程序的主题功能能够提升用户满意度，因为它允许每位用户根据个人喜好自定义应用程序的外观。在用于报告和可视化数据的应用程序中，实现多种主题的一种方法是为用户提供一系列颜色方案，用于图表和图形。MobileTogether 结合了拖放式用户界面设计、强大的 Action Tree 可视化编程语言（用于事件处理），以及标准化的函数式编程（用于数据选择和处理）。开发者每天使用 MobileTogether 来[创建美观的跨平台应用程序](https://www.altova.com/zh/mobiletogether)，这些应用程序包含各种流行的格式的丰富图表和图形。

主要图表配置选项允许移动应用开发者选择四个内置的颜色方案，或者在设计应用程序时，自定义图表和图形的颜色方案。 结合深色模式和浅色模式的显示设置，这为显示自定义提供了十种不同的色彩方案。 与其强制开发者在设计时选择颜色，不如利用MobileTogether的功能，让用户自行选择。 让我们来看一个例子。

![](/blog/images/mt_darktheme_blog_3.jpg)

<!--more-->

以下图片展示了“移动协同”色彩方案选择对话框，以及一个移动应用程序中的图表，该应用程序用于报告屋顶太阳能发电系统的生产数据。

[![通过图表颜色方案来定义移动应用程序的主题](/blog/images/user-schema-def.png)](user-schema-def.png)

开发者在图表设置对话框中设置了自定义颜色方案，其中背景区域图填充为橙色，柱状图则为蓝色。如果图表包含更多元素，后续颜色将依次为绿色、黄色、紫色等。

开发者可以选择下拉菜单中的任何内置颜色方案

[![内置的色彩方案可以创建各种移动应用程序的主题](/blog/images/schema-choose.png)](schema-choose.png)

### **创建移动应用主题**

让我们探讨一种策略，旨在让用户在任何移动设备上，在应用程序运行时，选择一种配色方案。该应用程序已经有一个设置页面，因此，在设置页面上添加一个用于选择外观主题的控件是一个自然的选择。我们可以首先创建一个表格，其中包含单选按钮和用于展示每种配色方案的颜色样本。以下是在MobileTogether Designer中完成的表格的示例：

[![移动应用主题选择器界面，如在 MobileTogether 设计器中看到的](/blog/images/theme-buttons-1.png)](theme-buttons-1.png)

MobileTogether 支持所有常用的选择控件。例如，一个下拉框会立即显示在表格上方。为了同时展示所有颜色选项，我们选择了一组单选按钮，用于选择移动应用的主题。

此应用程序中的图表每个只包含一个或两个元素，因此每组颜色都代表每个模式中列表中的前两种颜色。以下是在 MobileTogether 模拟器窗口中，设置页面相同部分的视图：

[![颜色主题选择器，如在 MobileTogether 模拟器中看到的](/blog/images/theme-buttons-2.png)](theme-buttons-2.png)

主要图表设置对话框允许开发者快速设计最佳图表，以可视化几乎任何数据集，包括面积图、柱状图、K线图、仪表盘图和饼图。图表类型甚至可以分层组合。 上图中所示的月度产量图就是一个分层图表，其中包含一个叠加的柱状图。

但是，图表中的任何元素都可以被定义为XPath表达式在应用程序运行时处理的结果。在“动态XPath设置”对话框中的设置会覆盖原始的基本图表设置。

![动态 XPath 设置，用于选择颜色主题](/blog/images/dynamic-xpath-settings.png)

“动态 XPath 设置”对话框允许我们为 XML 元素中的每个图表指定颜色方案，该元素名为“graphColorBase”。在应用程序的“设置”页面上的单选按钮区域，会为“graphColorBase”分配以下字符串值之一：“默认”、“灰度”、“彩色”、“柔和色彩”或“自定义”。

以下是最终版本的应用程序截图，展示了在Android手机上使用深色模式时，如何选择不同的应用程序主题

[![在安卓手机上选择移动应用程序的主题](/blog/images/android-example.png)](android-example.png)

以下是在iPhone的浅色模式下，标准色彩方案和灰度色彩方案的示例：

[![在iPhone上查看的移动应用程序主题](/blog/images/iphone-example.png)](iphone-example.png)

灰度色彩方案可能非常适合色盲用户！

请查看我们的 MobileTogether 产品 [视频演示](https://www.altova.com/zh/mobiletogether/demos#video_Demos), 更多 [示例应用程序](https://www.altova.com/zh/mobiletogether/demos), 或者，甚至是…… [在线手册](https://www.altova.com/manual/MobileTogether/mobiletogetherdesigner/) 如果您想深入了解关于 MobileTogether 的所有信息，并且您已经准备好通过在自己的跨平台应用中使用移动应用主题来提升用户满意度，那么 [下载 MobileTogether 设计器](https://www.altova.com/zh/mobiletogether/download).