实践案例 | 巧用主题定制功能，轻松定制企业个性化UI

小编推荐

在数字化浪潮中，企业如何统一众多业务系统的UI风格，降低员工对系统界面的认知成本、提升操作效率，并强化企业品牌形象呢？

本期案例巧妙运用“主题定制”功能，以低成本、高效率的策略，轻松实现客户系统的个性化UI定制，让企业形象和工作效率双提升。

一、业务背景

客户公司拥有众多业务系统，为了节省员工对系统的认知成本、提升操作效率，并强化企业品牌形象，客户要求所有系统的UI风格与公司的整体视觉标准保持一致，比如统一的主题色、文字规范、组件规范（如弹窗、按钮、步骤条等）。

然而，由于客户的系统页面繁多，且需要在确保开发效率和降低成本的前提下，实现系统界面风格的定制，这样的需求对于任何供应商来说都是巨大的挑战。

二、解决方案

方案概述

针对客户的诉求，我们提出了一个基于“主题定制”特性的解决方案。

该方案允许通过简单配置+少量开发的方式来实现UI的个性化定制，极大地提高了开发效率并降低了成本。具体实施步骤包括：

1. 整体色彩规范调整：包括主色、功能色、辅助色、中性色的统一设定，确保视觉上的一致性。

2. 文字规范统一：包括正文、锚点、标题、辅助文字等，以保证文本的可读性和美观度。

3. 组件规范样式：涵盖确认弹窗样式、标签页、步骤条、单选/多选按钮、输入框（包含各种状态如normal、hover、active/focus、filled、disabled）、选择器、级联选择、开关、滑块、日期时间选择器、上传控件、表单、列表、分页、缺省页面、加载动画、导航等，根据客户提供的UI要求逐一进行调整。

关键步骤及效果展示

“主题定制”特性路径：

V6.0及以上版本：“基础服务云>个性设置>主题定制”

V6.0以下版本：“系统服务云>系统管理>配置工具>主题定制”
注：客户所属系统版本为V5.0.011，后文展示界面以该版本为准。

进入【主题定制】页面后，除了可修改系统预置的主题外，还可点击“新增”自定义客户主题，以可视化的方式编辑主题的各种属性配置，同时也支持代码修改。

接下来以几个场景为例，展示“主题定制”特性的使用方法和效果。

1. 色彩调整

根据客户个性化UI诉求，通过色号录入，将系统的主题色调整为“#CC3D3D”、中性悬停色调整为“#F7F5FA”，状态色中的成功色调整为“#007AFF”、警示色调整为“#D09338”、失败色调整为”#AD3333”，如下图所示：

配置后，各界面的主题色统一，文本按钮、工具栏按钮的颜色也为主题色。

导航栏

列表及列表按钮

表单按钮

2. 字号调整

客户要求表格所有文字字体大小为14px，对此，可通过调整字号为14来实现。

3. 表单内容紧凑度调整

客户希望表单界面，form-item标题与表单内容应一行显示，不能换行，且表单内容项有上下左右边框。对此，通过代码进行调整，示例如下：

{
 "defaultProps": {
  "advcon": {
   "paddingBottom": 7,
   "paddingRight": 12,
   "hideCollapseIcon": false,
   "paddingLeft": 12
  },
  "common": {
   "field": {
    "horizontalInputWidth": 200,
    "fieldPanelItemInputHeightForBorder": 28,
    "horizontalTitleFontSize": 14,
    "labelDirection": "h",
    "marginRight": 8,
    "horizontalTitleAlign": "left",
    "horizontalTitleWidth": 112,
    "fieldPanelItemAdaptive": true,
    "fieldPanelItemMarginBottom": 5,
    "fieldStyle": 2,
    "fieldPanelItemPriorHorizontalMarginRight": 20
   },
   "grid": {
    "headerHeight": "28",
    "rowHeight": "32",
    "pageType": "nicety",
    "FseqName": "序号"
   },
   "ui": {
    "cancelConfirmBtnPositionExchange": true
   }
  },
  "f7ListGrid": {
   "headerHeight": "28",
   "rowHeight": "32"
  },
  "listGrid": {
   "toolbarLocation": "1",
   "headerHeight": "28",
   "rowHeight": "32"
  },
  "entryGrid": {
   "headerHeight": "28",
   "rowHeight": "32"
  }
 },
 "theme": {
  "@treemenu-lower-level-bg-color": "#FAFAFA",
  "@treemenu-first-level-hover-bg-color": "#FAECEC",
  "@treemenu-first-level-color": "#666666",
  "@treemenu-lower-level-hover-color": "#CC3D3D",
  "@treemenu-first-level-bg-color": "#FAFAFA",
  "@warning-color": "#D09338",
  "@hover-color": "#F7F5FA",
  "@treemenu-star-color": "#666666",
  "@success-color": "#007AFF",
  "@treemenu-first-level-hover-color": "#CC3D3D",
  "@treemenu-star-select-color": "#CC3D3D",
  "@error-color": "#AD3333",
  "@treemenu-lower-level-color": "#666666",
  "@theme-color": "#CC3D3D"
 }
}

效果如下图所示：

注：V6.0及以上版本可直接采用系统