智能软件平台 XMagital 软件UI与UE规范：总则与基础组件

1. 引言

1.1 目的

本文档定义智能软件平台 XMagital 的UI&UE规范，用于约束产品UI界面、操作交互、通用组件等可视化相关内容，为平台产品、基于平台的行业应用产品提供通用的外观设计标准，并提供一致性的交互与操作行为参考。通过应用本规范，一方面保证用户具有较好的操作体验；另一方面希望在公司内部形成可复用的产品和界面外观方案，提高开发效率。

1.2 范围

本规范适用PC端应用，输入以鼠标+键盘为主。以触摸操作为主的移动端（智能手机、平板）应用另有UI&UE规范进行说明。

1.3 预期读者

本规范的预期读者包括：XMagital 平台软件的管理人员、设计人员、开发人员、测试人员，在 XMagital 平台基础上进行行业应用软件产品开发的设计人员、开发人员、测试人员。

1.4 术语与缩略语

本文使用的专业术语、自定义的词语、容易产生理解偏差的词语以及缩略语。

术语	解释
平台	一个公共的基础，在此基础上可以开发不同产品。平台是产品线开发的基础，它为衍生一个产品提供可共用和可重用的特性、设计元素（组件、代码功能）以及相关流程和工具。本文中所提及的平台即XMagital平台。 [GB/T37413-2019 数字化车间术语和定义]
应用	Application，为应用软件（application software）的简称，指专为特定工程或特定生产场景编写的程序包，或本身也具有一定的通用性，但是通过XMagital应用开发框架编写的、并可以随时从系统摘除的软件包或模块（如签名软件，称量软件，或WMS接口程序等等）。
工具	作为工具使用的程序包，与应用在概念上有重叠。本文档中将可独立运行的程序包称为应用，依赖其它环境运行的程序包称为工具。
环境	环境即应用运行时依赖的环境。例如，Java应用依赖JRE环境、NodeJs应用依赖NodeJs环境等。
HSM-ENG	XMagital平台中的工程配置环境，可以集中进行工程项目的组态配置。
HSM-Portal	XMagital平台中的应用门户，用于用户环境下的应用集成。
HSM-DEV	XMagital平台中的应用开发环境，支持以低代码方式进行应用开发。
HSM-OPM	XMagital平台中的运维环境，用于系统日常维护。

1.5 UI组件引用

本平台组件库基于elment-plus进行开发。

Element Plus：https://element-plus.org/zh-CN/

图标库：https://icon-sets.iconify.design/

1.6 设计约束

法律与标准

无

假设和约束

• 假设遵循本规范开发的软件面向的使用环境是PC端，以键盘、鼠标操作为主；
• 假设最终用户可接受使用浏览器，并通过浏览器完成相应的软件功能操作。

2. 概述

2.1 基本原则

本规范相关行为交互约束基于UCD相关方法论，参考尼尔森（Jakbob Nielsen）提出的十大可用性原则进行设计：
1）状态可见性原则
用户在页面上的任何操作，无论是单击、滚动还是按下键盘，页面应及时给出反馈。其中”及时“是指，页面响应事件小于用户能够忍受的等待时间。
2）环境贴切原则
页面一切表现和描述，应该尽可能贴近用户所在的环境（年龄、学历、文化、时代背景），而不要使用世界第二的语言。
3）撤销重做的原则
为了避免用户的误用和误操作，网页应提供撤销与重做的功能。
4）一致性原则
使用同一用语、功能、操作保持一致，同样的语言、同样的情景、操作应该出现同样的结果。
5）防错原则
通过页面的设计、重组或特别安排、防止用户出错，比出现错误信息提示更好的是更用心的设计防止这类问题发生。
6）易取原则
尽量减少用户对操作目标的记忆负荷，动作和选项都应该是可见的，把需要记忆的内容摆上台面。
7）灵活高效原则
中级用户的数量远高于初级和高级用户，不要低估和轻视为大多数用户的设计，保持灵活高效。
8）易扫原则
用户浏览网页一般是扫视阅读，这意味重点信息的突出、弱化无关项以及剔除无关信息就显得尤为重要了。
9）容错原则
错误信息应该用语言表达（不用代码），较准确地反映问题所在，并且提出一个建设性的解决方案。
10）人性化帮助原则
如果系统不使用文档是最好的，但是有必要提供的帮助和文档。任何信息应该易于去搜索，专注于用户的任务，列出具体的步骤来进行。

2.2 风格设定

极简、克制、友好

• UI 元素采用细微的圆角效果，使界面看起来更加友好。
• 通过配色、投影和微妙的描边等细节，来确保控件和背景之间有清晰的对比度，有足够的视觉层次感。
• 强调视觉设计要为用户使用提供指引，凸显页面当下的核心功能。
• 围绕宽屏终端进行UI交互设计，充分利用屏幕横向空间，使操作及浏览更高效。
• 系统采用线性图标和少量面性图标，设计理念原则：简洁友好、意义清晰易懂。

2.3 内容

注：上图为UI和UE规范总览，本文档内容包含总则和组件规范部分，其余内容单独成册。

2.4 主题规范

主题（Theme）是一套统一的视觉元素、颜色方案、字体样式、布局结构等组成的设计风格框架。良好的主题设计，有利于塑造产品形象、增强用户体验。本文档定义两到三种主题，同时提供可扩展方案，以适应不同的行业应用场景和目标用户。

配色方案一

主题色和功能色

主色：#0052D9    Hover：#266FE8   Disabled：#BBD3FB   Click：#0034B5  Light：#ECF2FE；
主色（暗黑模式）：#4787F0
成功色：#00A870   Hover：#48C79C  Disabled：#85DBBE  Click：#078D5C  Light：#E8F8F2；
警告色：#ED7B2F   Hover：#F2995F  Disabled：#F7C797  Click：#D35A21   Light：#FEF3E6；
危险色：#E34D59   Hover：#F36D78  Disabled：#F8B9BE  Click：#C9353F   Light：#FDECEE。
信息色：#909399   
辅助色

当功能色的数量不能满足使用场景时，辅助色作为补充，如不同状态，标记等。

注：以上每种辅助色的色阶变化方式为透明度100%、70%、30%。

中性色

视觉元素风格示例

主题色和功能色包括但不限于以下图中的场景，是一种选中和状态的体现。

弹窗样式

背景色：bg-color

分割线颜色：border-color-lighter

标题文字颜色：text-color-primary

表格样式

表头背景色：fill-color

斑马纹：bg-color ，fill-color-lighter 。

高亮行背景色：Brand1

边框色：border-color-lighter

抽屉样式

背景色：Base Background

分割线颜色：Base Border

标题颜色：Primary Text

投影：使用Elment组件默认样式

配色方案二

主题色和功能色

辅助色

当功能色的数量不能满足使用场景时，辅助色作为补充，如不同状态，标记等。

注：以上每种辅助色的色阶变化方式为透明度100%、70%、30%。

中性色

视觉元素风格示例

主题色和功能色包括但不限于以下图中的场景，是一种选中和状态的体现。

弹窗样式

标题栏：背景色#1E354A，文字颜色#FFFFFF

背景色：Blank Fill

分割线颜色：Base Border

文字颜色：Regular Text

表格样式

表头背景色：fill-color

斑马纹：bg-color ，fill-color-lighter 。

高亮行背景色：Brand1

边框色：border-color-lighter

抽屉样式

背景色：Base Background

分割线颜色：Base Border

标题颜色：Primary Text

投影：使用Elment组件默认样式

可扩展方案

参考上述配色方案，定义扩展配色方案。

• 定义主题色、功能色；

• 定义文本颜色；

• 定义边框颜色；

• 定义填充颜色；

• 定义背景色；

• 将以上方案定义应用到视觉元素。

注：视觉元素组件，参考组件规范章节。

可扩展配色方案示例表

内容 分类	色1	色2	色3	色4	色5	色6
主题色	primary #409eff
功能色	success #67c23a	warning #e6a23c	danger #f56c6c	info #909399
文本色	primary #303133	regular #606266	secondary #909399	placeholder #a8abb2	disabled #c0c4cc
边框色	light #e4e7ed	lighter #ebeef5	extra-light #f2f6fc	dark #d4d7de	darker #cdd0d6
填充色	light #f5f7fa	lighter #fafafa	extra-light #fafcff	dark ebedf0	Darker #e6e8eb
背景色	page #f2f3f5	overlay #ffffff

主题的应用方案

主题应用基本原则

1. 主题与用户关联，系统管理员定义有多少个主题和布局，用户决定用哪个主题和布局；若用户未选择，系统使用默认配置；

2. 主题作为公共资源，切换时可通知到应用，应用做一定适配处理。主题包含应用主元素，不是所有元素。超出主题元素的内容，应用可在主题色系范围内扩展；

3. 主题对框架和应用是要求相同，特殊颜色（报警色、标准色等）与主题无关。

主题应用方案

HSM-DEV开发环境、HSM-ENG工程配置环境、HSM-运维环境采用固定主题方案；

HSM-Portal采用可定制主题方案，以适应不同应用场景需求。

组件规范

描述常用组件的外观和交互。考虑阅读方便和简捷清晰原则，组件举例统一采用配色方案一。

基础组件

按钮

按钮形式

次按钮

常规按钮，用于非主要动作。如果不确定选择哪种按钮，次按钮永远是最安全的选择。次操作按钮，通常位于主按钮后，可在同一按钮区出现多个。也在按钮区单独存在。常用区域：列表页表格上方按钮区、表单页按钮区域、弹窗按钮区。

按钮文字14号，上下内边距5px，左右内边距16px。按钮与按钮之间边距8px。

主按钮

• 高频词操作为主按钮，其余使用次按钮，一个按钮区最多使用一个主按钮。

当按钮区域只有一个按钮时，可根据操作按钮的重要程度自定义按钮样式为主操作或次操作。

按钮文字14号，上下内边距5px，左右内边距16px。按钮与按钮之间边距8px。

文字按钮

弱化的按钮，采用更轻量的按钮样式，可用于需大面积展示按钮场景，例如表格组件中的操作列。也可单独使用。

图标按钮

图标提供视觉线索，避免逐字阅读按钮文案，更高效地使用界面。

• 需要在较小的空间内展示尽量多的按钮。

• 使用纯图标按钮必须有 Tooltip 提示按钮含义。

图标按钮尺寸：18*18px，线性风格。

图标+文字按钮

用于对按钮含义补充解释，提高按钮识别效率。

按钮文字14号，图标14px，文字与图标间距8px，上下内边距5px，左右内边距16px。

下拉按钮

下拉按钮的两种形式：一种是合并同类项；另一种是信息收纳。超过四个按钮建议下拉。

• 合并同类项。突出新建操作本身，更多操作项是新增的数据类型进行区分，减少重复文案的出现。

• 信息收纳。各操作项之间并没有关联性，只是缓解空间压力或突出使用最频繁的操作。当鼠标悬浮右侧部分时出现动作浮层。

按钮右侧的信息收纳下拉操作尺寸32px*32px，图标14px*14px，按钮分割线宽度1px，颜色color-primary-light-3。

小号按钮

小规格按钮在空间较小时使用。默认使用中等规格。

按钮文字：12号

左右边距12px，上下边距2px。

按钮图标：12px

图标文字间距：8px

按钮交互

按钮有以下五种状态。

正常

按钮的初始状态，即默认情况下的基础样式。

悬停

当鼠标指针移入按钮时的状态。为了暗示用户鼠标指针已进入按钮的可交互区域，按钮相较于正常状态在背景色彩等样式上会有明显的区别。

激活

鼠标点击即按下按钮时的状态。激活态是在悬停态基础上发生变化，鼠标指针样式和悬停态保持一致，按钮背景色发生变化。鼠标移出时或单击按钮区域外按钮恢复到初始状态。

禁用

鼠标点击即按下按钮时的状态。激活态是在悬停态基础上发生变化，鼠标指针样式和悬停态保持一致，按钮背景色发生变化，提示用户已触发点击操作。

按钮文案

• 建议使用中文

• 见“文案”章节（“用词精准”部分）。

滚动条

当内容超出屏幕时出现滚动条。

• 样式：

横向滚动条：高6px，圆角3px。

纵向滚动条：宽6px，圆角3px。

默认状态（左）：颜色border-color-lighter

悬浮、激活状态（右）：颜色border-color

• 使用场景：

表格、弹窗、文本框、页面等组件都可以触发滚动。

文字字号

我们对字体进行统一规范，力求在各个操作系统下、不同区域语言环境下都有最佳展示效果。

font-family: “Helvetica Neue”,Helvetica,“PingFang SC”,“Hiragino Sans GB”,“Microsoft YaHei”,“微软雅黑”,Arial,sans-serif。

1. 主要字号建议使用14号，字重400，（包含但不限于下列场景）

• 表单：标题和内容；

• 表格：表头（字重700）和内容区；

• 按钮：主按钮、次按钮、文字按钮等。

1. 辅助文字、或者空间有限使用12号字，字重400

2. 弹框标题16号字，字重400

3. 页面总标题18号，字重400

4. 区域级标题字号16号，字重400

5. 其余根据实际业务需求使用

圆角

组件圆角多为4px，少数情况例如开关等为20px。

投影

我们采用两层叠加投影以增强层次感，数值如下：

X0  Y8  B20  S0  rgba(0, 0, 0, 0.08)

X0  Y12  B32  S4  rgba(0, 0, 0, 0.04)

表单组件

Checkbox 多选框

多选框一般用于状态标记，需要和提交操作配合不建议放 5 个以上的选项值，超过 5 个时可考虑采取Select 选择器的形式。

• 单独使用时

表单中表示两种状态之间的切换，并需要保存的情况下建议使用如下展现形式而不是开关。

• 默认状态

• 禁用状态

Radio 单选框

• 选项在2-5 个之间， 如果你有很多的可选项你应该使用下拉框而不是单选框。

• 单选框不可取消选择

正常状态和禁用状态：

 

开关

表示两种相互对立的状态间的切换，多用于触发「开/关」

• 在需要提交的表单中状态选择建议使用多选框而不是开关。

• 用于在切换语言、切换亮暗模式等需要即时生效的场景使用此组件。

输入框

通过鼠标或键盘输入字符

类型及状态

默认状态

禁用状态

激活状态 可一键清空

• 密码框

• 文本域

默认状态

激活状态（如果有输入长度限制，激活时显示剩余字数）

文本域的最小高度显示2行，最大高度显示4行，超出出现滚动条。

不可拖拽调整高度。

• 复合型输入框

在输入框前置或后置文字，文字左右边距16px。

输入提示

• 输入规则（如有）以行内占位文字的方式显示。

• 如果说明文字过多，在标签旁边加上帮助按钮 ，鼠标悬浮时用Tooltip显示详细内容，鼠标离开时消失。

校验反馈

• 操作过程中可通过不同的校验规则和形式，让用户及时发现并纠正错误；

• 当用户进行相应的交互操作后才消失；

• 报错信息在输入框下方2px处用红色（功能色）文字提示，字号12px；

• 必填项 “*” 标志位置：

左对齐标签里放右侧，右对齐标签放左侧，顶对齐标签放右侧。

选择器

当选项过多时，使用下拉菜单展示并选择内容。

• 基础样式

• 多选

 

1. 根据场景选择适合的形式。

2. 当用数字收起时，鼠标悬浮用浮层展示所有选中项。

• 默认值

根据用户使用需求，下拉选择器支持默认选中集合中的任意一条数据（单选时），也支持默认选中集合中的多条数据（多选时）。

上传

上传文件

• 默认样式

提示文字：12号，上间距6px。

• 不同状态

提示文字：12号，上间距6px；

附件文件名文字：14号，上间距10px。左侧文件图标14px，右侧进度数字12号；

进度条：高2px，默认长度360px；

上传中断时默认显示红色删除图标按钮。

上传图片

分别是默认和hover状态。

表单

表单包含输入框、单选框、下拉选择、多选框等用户输入的组件。使用表单可以收集、验证和提交数据。

• 表单中对于状态的选择使用Checkbox而不是开关，展示方式为只显示肯定选项。

对齐方式

• 顶对齐（首选）

由于顶对齐标签结构浏览速度和填写效率高的特点，平台中表单建议采用顶对齐标签。

• 左对齐

横向筛选条件、空间有限时使用左对齐标签

组件宽度

输入框、选择器等组件尽可能评估数据宽度予以适合的宽度，而不是通栏宽度。

布局方式

在单个表单页中需要根据内容量进行合理地布局，以兼顾页面展示和用户效率。

复杂度：指信息的复杂程度。通常用信息量的多少（所占篇幅），信息的呈现方式（文本、图表、代码等），信息越多，呈现方式越多样，即信息复杂度越高。

关联性：指信息之间的相关程度。即信息之间是否有交互、关联或者相互影响。根据接近法则，相关性越高的内容应相邻或靠近，反之，独立性越高的内容，可以分散组织，降低页面内信息理解成本。

• 基础布局

在一个区域内从上到下单列布局，引导用户纵向阅读，据研究这是能够最高效完成任务的布局方式。

• 弱分组

在空间有限时，较短宽度且具有相关性的表单项可多个组合在一行中，形成分组的暗示。

• 区域内分组

当一个区域中内容较多且存在可分类归纳性时，可通过区分标题、加大间距来进行区域内分组。

常用表单形式

基础表单

表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。

分步表单

将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。

复杂表单

复杂表单常见于一次性输入和提交大批量数据的场景。

数据组件

Avatar 头像

Avatar 组件可以用来代表人物或对象， 支持使用图片、图标。

标题栏头像推荐尺寸：24px。

Badge 徽章

按钮和图标上的数字或状态标记。

   

• 建议设置最大值，超出的用+代替。

• 不重要的提示可以用小红点。

Tag 标签

用于标记和选择。

• 优先建议样式

注意：tag的默认状态色号为：文字部分#0052D9，底色和边框为#0052D9的演变色。其余状态用信息色。

• 次选

注意：tag的默认状态背景色：#0052D9。其余状态用信息色。

表格

使用场景：

1）当有大量结构化的数据需要展现时；

2）当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。

基础样式**：**

分为大中小三种规格（见Elment组件库），通常使用小号规格（注：文字大小14号，文字行高32px，其余例如边距等属性为small默认值）。

表格序号居中，金额、数字右对齐，其他左对齐，表头文本字重700，内容区域字重400。

表头

• 表头行可操作的功能通常包括排序、增减列表展示字段，也可根据场景增加其他便捷操作，系统记住用户的行为；

• 支持排序的字段：关于时间和日期的字段、关于数据展示为数字的字段，如ID、XX时间、XX日期、排序、数量等；

• 当视图窗口不足以完全展示当前行的数量时，固定表头，内容区可上下滑动，方便一页内展示大量数据。

表格内容区

• 当横向空间不够时，操作栏固定，滚动内容区，内容滚动区加入横向虚拟滚动条，始终展示；

• 当鼠标悬浮时，表格行高亮显示。

表格行内编辑

当“易编辑性”比“易读性”更重要时。

• 当“易读性”比“易编辑性”更重要时。

单击“编辑”，可进行内编辑，操作按钮变为保存和取消：

注：表格行高32px，输入框高24px，字号14。

表格行拖拽

• 默认

拖拽按钮位于行的最左侧

• 悬浮

鼠标悬浮时光标变成“手型”。

• 拖拽

拖拽时，整行移动。

表格操作区

• 顶部操作区

按钮在表格上方。

• 行内操作

行内文字按钮超过两个时，在按钮之间添加分割线，宽：1px，高14px，上下居中，左右间距16px。颜色：border-color-extra-light。

建议超过三个的操作使用“更多”收起，鼠标悬浮“更多”展开操作。

• 主操作（一般为新增XX）+ 批量操作（若批量操作较多或为同一类型操作，采用下拉按钮样式。）详情见“下拉按钮”规范5.1.1.1.6。

• 若操作过多，存在低频且辅助性的操作，可居于表格右上侧，和左侧常规进行区分

• 批量选中数据项，建议显示“已选中xx条”

表格单元格宽度

1. 尽可能评估数据宽度予以相对的单元格宽度，必要时可写死：如进度条等；

2. 建议尽可能多的显示列数据，原则上承载信息的单元格最小宽度为80px，溢出的数据用“…”代替并且在鼠标悬浮时以Tooltip展示；

3. Check box列建议宽度40px；

4. 列数过多导致显示不全时使用横向滚动条，操作栏始终固定。

分页

• 居于表格、列表等内容右下侧始终显示。

显示条数

• 通常情况下页面默认显示20 条表格数据。当高度有限时例如弹框等情况，默认显示10条数据。具体根据实际情况决定。

• 列表、卡片等数据根据组件高度显示适合的默认条数。

• 条数选项为：10、20、50、100。

基础样式

文字：14号

页码：32px*32px

• 默认情况下，当总页数超过6 页时，会折叠多余的页码按钮。

• 少于6页时，不显示跳转页。

• 显示总条数，支持选择页、跳转页。

缩略样式

文字：14号；

页码：32*32px；

页数少于6页时使用，建议每页显示20条内容。

小尺寸样式

文字：12号；

页码：24*24px；

空间有限时，如弹窗内等场景，使用小尺寸样式，每页显示10条，可设置显示条数。

小尺寸缩略样式

文字：12号；

页码：24*24px；

页数少时使用，建议每页显示10条内容。

极简模式

页面有大量信息时可使用极简模式

树

树型组件用于展示具有层级结构的数据。同时，树节可设计丰富的呈现效果，如：图标、前景色、背景色、选中效果、活动效果等。

树组件的典型应用场景：

• 应用导航菜单：具有丰富的外观表现和交互操作；

• 页面内容树：对外观和交互操作要求不高，以数据展示为主。

建议最小宽度200px，最大不超过304px。

• 基础样式

以上三种依次是默认、悬浮（背景色Light Fill）、点击（背景色Dark Fill）。

点击行可展开/收起。

• 可多选

点击行可展开/收起。

点击chekbox可选中。

• 文字溢出

树选择组件建议不要加横向滚动条，以影响体验感，文字过长时，显示“…”，鼠标悬停tooltip显示全部内容。

• 扩展功能：可选三种操作方式。

• 内部，常驻按钮点击出现下拉菜单

  • 顶部，图标操作按钮
  • 内部，悬浮出现操作按钮（各树节点有一致的操作时适用）

进度条

用于展示操作进度，告知用户当前状态和预期。

描述列表

列表形式展示多个字段。

搜索与筛选

搜索

宽：220px，高：32px

搜索框悬浮时外框变为主题色，点击搜索框出现光标提示文字消失，输入1个字段时，框内右侧出现清空按钮，单击后清空输入的内容。

1. 搜索框后没有查询按钮时，输入字符后自动加载搜索结果。

2. 搜索框后有查询按钮时，回车或点击按钮再查询结果。

筛选

1. 筛选条件录入使用下拉选择框、单选、多选、日期选择器等常用表单控件；

2. 选择条件后直接显示筛选结果，或点击“查询”按钮显示筛选结果，根据实际需要选用；

3. “查询”按钮可选，“重置”按钮必选；

自定义筛选

自定义筛选分为横向和纵向两种布局，根据业务需要、页面空间选择适合的形式。

• 横向筛选：位于表格上方。可展开收起。

查询条件行间距20px，左右间距24px，按钮间距离：8px。

• 纵向筛选：位于表格左侧或右侧（根据实际确定位置），可展开收起。

以下以左侧筛选框为例说明其交互：

• 点击“筛选”按钮，滑出筛选面板，此时选择所需条件点击确认按钮进行数据筛选。点击“关闭筛选”或筛选栏右上方按钮收起筛选面板。

  • 宽度200px。

• 筛选面板可浮动/钉住，默认钉住，点击浮动按钮切换为浮动展示，按钮随之切换。

筛选面板样式：

标题栏：文字16，上下边距8px，左边距10px。图标区域右边距10px，图标大小16px，图标之间间距8px；

标题栏高度：32px;

内容区：筛选条件之间上下间距10px；

按钮区：按钮右对齐，边距10px。

导航组件

Steps 步骤条

引导用户按照流程完成任务的分步导航条， 可根据实际应用场景设定步骤，步骤不得少于 2 步。

Tabs 标签页

分隔内容上有关联但属于不同类别的数据集合。

选中状态跟随主题色。

• 基础样式

• 卡片式

• 纵向

多标签页

以标签页形式打开多个页面。

• 当前页：

左右边距12px，上下边距4px，文字与图标间距8px，文字14号，关闭图标14px。外间距4px。

文字和关闭图标颜色：Brand Color。

背景色：Brand Color  透明度10%。

• 未选中页：

文字和关闭图标颜色：text-color-secondary。

背景色：Secondary Text。

• 常规状态

• 溢出状态

溢出的标签页tab横向滚动显示，并在左右两侧出现箭头按钮，点击可滚动。

右侧下拉按钮鼠标悬浮后出现浮层，可以进行关闭左侧、关闭右侧、关闭其他、关闭全部的操作。

面包屑

显示当前页面的路径，快速返回之前的任意页面。

反馈组件

MessageBox 消息弹框

通过一个操作引发的反馈浮层位于页面中心，询问是否进行此操作。反馈内容可通过确认/取消按钮关闭、也可点击空白处进行关闭。

使用场景：

删除、退出登录、是否保存等需要二次确认的场景。

Alert警告

警告是非浮层的静态展现形式，不会自动消失，用户可以点击关闭。关闭按钮和图标可根据业务需要增加或减少。

Message 消息提示

常用于主动操作后的反馈提示。

从顶部出现，3 秒后自动消失，关闭按钮可选。

使用场景：

保存、编辑、等其他操作后提示（成功/警告/失败），刷新成功时不提示，刷新失败时提示。

注：工程树内不可出现该组件。

Result 结果

用于对用户的操作结果或者异常状态做反馈，按钮可选。

加载状态进度反馈

在操作需要一段时间完成时系统应即时给予提醒，明确告知加载的状态或加载进度条，保持与用户的沟通。

• 当用户不必等待较长时间（少于2秒时）的加载时使用。

刷新的状态

正在加载数据的状态

• 在操作需要较长时间才能完成时使用（大于2秒时），显示该操作的当前进度和状态。

Popover 气泡卡片

可悬浮、点击触发。

可嵌套其他组件和操作。

Dialog 对话框

需要用户处理事务，又不希望跳转页面以致打断工作流程时，除属性栏外可使用对话框。

样式

• 标题栏：字号16px，左边距20px。上下边距8px；

• 内容区域：字号14px，四周外边距20px，内容左对齐；

• 按钮栏：按钮间距8px，按钮区距离右侧边距20px，上下边距8px；

• 模态遮罩：透明度0%；（由于各个应用的显示范围的局限，模态遮罩层不能在屏幕上完全显示，此种情况下为了更统一的视觉效果，建议遮罩层不可见。 ）

• 投影：使用组件库默认投影参数。

• 外边距：当对话框内容过多时，对话框与视图窗口上下阈值为64px，内容区（标题栏下方到按钮栏上方）滚动显示；

• 弹出位置：位于屏幕正中间；

编辑与非编辑类

• 编辑类的对话框：单击操作栏的取消按钮可关闭，点其他区域不可关闭；

  • 非编辑类对话框：点击按钮、对话框以外的区域都可关闭。在查看类的对话框中建议在底部操作栏放置“关闭”按钮。

多弹窗处理原则

• 尽量避免同时出现多个弹窗；

• 无法避免时，为多个弹窗指定优先级，优先级高的优先显示和处理；

• 根据实际业务需求进行UI设计，具有明显先后顺序的，可采用覆盖模式弹出；必须同时展示的，需要为多个弹窗进行专门UI和布局设计。

对话框规格

为了统一，设置了 5 个常用对话框组件尺寸，如默认尺寸都不合适，可自定义对话框尺寸。

• small：480px

系统中的最小对话框尺寸为宽480px，高204px，标题栏和按钮栏高度固定，内容区高度自适应。

• Medium：720px

多用途的中等尺寸对话框

• Lagre：960px

多用途的大尺寸对话框

• MAX：1232px

在 1280px 窗体宽度时，扣除页面左右空间24px*2，得 1232 的对话框宽度，然后再分配内部空间。一般用于承载表单项长度较长的双列/三列表单的对话框。

• 动态宽度：80%

跟随窗体宽度变化，在 1920px 窗体宽度时为 1536px。一般用于承载有大型表格的对话框。

• 对话框标题文案

见 “文案”章节“表述一致”篇。

抽屉

屏幕边缘滑出的浮层面板

交互规则：

• 抽屉的建议宽度为378px，具体根据业务需求设定；

• 建议从右侧滑出；

• 非模态，只能通过抽屉中的关闭按钮和取消按钮进行关闭；

• 正在编辑中的抽屉，若要在父级切换，需弹出MessageBox 消息弹框，询问是否保存。选择保存或者不保存、也可单击空白处关闭弹窗。

抽屉样式：

• 标题栏：字号16px，左边距20px。上下边距8px

• 内容区域：字号14px，四周外边距20px，内容左对齐。

• 按钮栏：按钮间距8px，按钮区距离右侧边距20px，上下边距8px。

• 投影：使用Elment组件默认样式

使用场景：

适合应用在表格/列表环境中，作为表格/列表内容的详情页形式展开，这样用户可以在一个页面中快速查看不同列表的具体信息或编辑。并且，表格/列表本身的特征会将标题放在最左侧，也方便抽屉的切换。因此，抽屉不太需要使用模态和遮罩将左侧内容遮挡掉。如果需要通过遮挡来吸引用户注意力，那么这种情况往往更适合使用Dialog 对话框。

Tooltip 文字提示

• 建议最大宽度不超过400px；

• 提供了浅色主题暗黑主题的方案。

缺省页

无内容或者异常状态时展示的页面。

空状态

页面空数据、搜索无结果等。属于正常网络显示场景，所以可在在缺省页附带有用户引导，如新建等操作按钮；

图片与状态文字间距：24px

文字与按钮间距：24px

表格为空

文字14号，颜色text-color-placeholder，图标宽度：64px。位置：居中（组件默认位置），图片和文字间距16px。

页面为空

文字16号，颜色text-color-placeholder，图标宽度：160px。位置：居中，图片和文字间距24px。

异常状态

加载失败、服务器异常、无网络等；页面一般会有重新请求或者返回按钮。

打开/查看详细数据

可以从以下几个角度判断如何打开详情

• 自然交互的角度，同页展开列表更自然，需注意展开的内容区高度不要超过一屏；

• 需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用对话框形式在当前页面正中打开一个浮层，承载相应的操作；

• 详情复杂的沉浸式任务，跳转独立页更合适；

• 每条详情中都可能有用户感兴趣的内容，以方便切换的导航，快速查看和处理不同的项目，可以使用双栏展示。

统计图表

图表颜色

标准色

通过整体颜色规范提取和增加，提炼出 12 个标准色，非状态色按顺序使用；

基准色

通过标准色扩展出 24个基准色，相互链接组成基准色环，如果图表用色数量较多，标准色无法满足颜色要求，可以从基准色中进行拓展与标准色近似的色值。

柱状图

刻度文字：12px，条形宽度10px。

饼状图

说明文字：12px，标注文字：12px

折线图

说明文字：12px，

折线：2px，节点直径：8px，描边2px。

面积图

刻度文字：12px，

曲线：2px，节点直径：8px，描边2px。

文案

在界面中，我们需要通过对话的方式与用户产生共鸣。精准、清晰的语言会更容易让用户理解，合适的语气更容易让用户建立信任感。

• 从用户角度出发；

• 表述一致；

• 重要的信息放在显著位置；

• 专业、精准、完整；

• 精简、友好、正面。

时间日期格式

时间和日期格式与地区相关，平台需要支持主要地区的时间和日期格式。

国内常用时间和日期格式：YYYY-MM-DD hh:mm:ss（24小时制）

1. 完整日期时间 ：2023-01-11 15:30:40

2. 日期：2023-01-11

3. 时间：15:30

4. 相对：30分钟前，1天前，3天前，1月前，3月前，1年前等等

美国习惯用法：MM/DD/YYYY hh:mm:ss AM/PM（12小时制）

1. 完整日期时间 ：01/11/2023 3:30:40 PM

2. 日期：01/11/2023

3. 时间：03:30 PM

4. 相对：30 minutes ago，1 day ago，3 days ago，1 month ago，3 months ago，1 yearago等等

欧洲地区习惯用法：dd.mm.yyyy hr:mi:se（24小时制）

1. 完整日期时间 ：11.01.2023 15:30:40

2. 日期：11.01.2023

3. 时间：15:30

4. 相对：30 minutes ago，1 day ago，3 days ago，1 month ago，3 months ago，1 yearago等等

报错信息

报错信息是在用户行为、系统运行、网络问题等因素引发问题后，通知用户并指导如何处理。
通用句式：问题阐述 + 操作指导（推荐）

如果具体的出错原因对于目标用户容易理解、对接下来的操作有帮助，则明确告知用户，反之则概括性说明出错原因或者不说明。

用词精准

• 通用基本用词要规范，不要写错字，词语表达要完整。

• 易混淆用词

1. 新增：从无到有，通过填写表单并提交来增加一条信息或数据。

2. 添加：指把已有的内容拿过来，是建立连接的过程。

3. 创建：创立并建造新生的事物，针对已有产品类型的大粒度事物使用，通常指一种较复杂的体系。

4. 描述：对某个事物的详细说明或解释。通常是一个较长的文本段落，用于解释功能的作用。

5. 备注：用于提供对某个项目、选项或功能的额外说明或补充信息，文本简短，通常是可选的。

6. 动词在前名词在后：例如导出XX、升级XX。

7. 编辑：对现有数据进行编辑的操作使用 “编辑”而非“修改”。

8. 确定：填写完表单进行提交的操作用“确定”，常与“取消”一起出现。

9. 完成：一般用于连续步骤的最终操作，确认选择并解散弹窗。

10. 应用：用于接受所做的更改但不关闭对话框，以便用户可以继续对其他设置进行更改。

精简语句

尽量提供简短、易于快速获取的内容。

表述一致

同一区块描述中出现了「受」和「被」两个不同的介词。

语序上不一致，会影响用户理解成本。

操作名称和目标页面的标题有关联（如新增按钮打开的页面名称应含有“新增”二字）。

完整、直接得阐述信息

当我们希望用户进行一个操作时，要专注于用户能得到什么，以及用户的感受。在操作前引导告知用户操作的目的或重要性，能促进用户更愿意去执行。

友好、尊重用户

多给用户支持与鼓励，不要命令和强迫用户。当出错的时候就不要责怪用户。专注于解决问题，而不是指责。

大小写

正确使用专有名词的大小写规范。

全英文的标题，标签，菜单项等等都要遵循英文句式中首字母大写的规范。

标点符号

只有中文或中英文混排中，使用中文全角标点。

中英文混排中如果出现整句英文，则在这句英文中使用英文/半角标点。

任何文字链接前的句子都需要加上标点。

标点名称	统一用法	不建议用法	描述
句号	中文「。」 西文「.」		不使用句号的情况： 输入框下的提示； 句末为文字链（链接前使用句号）； 按钮、标题、短语。
感叹号	中文「！」 西文「!」	出错！！	_ 只在需要表达强烈情感的情况下使用; _ 一句话末尾用一个感叹号，避免多个连用。
连接号	-	—	使用英文半角的「-」。
省略号	…	。。。	使用英文半角的「…」。
斜杠号	/	\	使用英文半角的「/」。
冒号	中文「：」 西文「:」		输入框标签后不加冒号。
隐藏符号	*		多用于替换显示隐私信息，如「135****7740」。

统计数据使用阿拉伯数字

多语言设计

XMagital 平台具有国际化需求，需要进行多语言设计。

信息技术领域，对软件产品进行国际化(i18n)与本地化(L10n)处理的含义是：通过配置软件，使之能适应目标市场的语言、地区差异以及技术需要。其中“国际化”意味着兼容，而“本地化”意味着定制，两者的共同实现，才能更好地服务不同文化背景的用户。

不同语言的差异

不同语言的差异包括：字符字形、内容长度、词汇分界、阅读顺序四个方面。

平台一期规划兼容中/英文，可暂不考虑阅读顺序的问题。

• 字符字形：UI设计过程中使用标准字体；

• 内容长度：尽早使用英文设计；

• 词汇分界：允许使用分界字符（英文主要为空格），设计和技术上不应把分界符作为无效字符处理。

设计原则

可读性

可读性包含字符可读性、内容可读性。

字符可读性，主要考虑使用特殊风格字体在不同语言下的显示效果，避免特殊风格的字体对字形产生影响。

内容可读性，指界面展示的信息是否足够用户理解要表达的含义。这一点主要针对内容的长度特性，尤其是使用缩略处理时，要谨慎确认展示的内容是否容易为用户理解。

包容性

包容性包含布局包容性、认知包容性。

布局包容性，即通过弹性布局设计，更好地兼容极限场景（内容极多或极少）。UI设计师需要在多种视觉元素、组件、外观模块等的UI设计中进行考量，比如：

• 预留横向宽度、纵向行数，为内容长度扩展留出空间；

• 字体的选择上，减少或避免使用字符宽度相差悬殊的字体。

认知包容性，指采用具有广泛共识的设计原素，不使用地区或个性化元素，避免产生歧义。

• 采用具有共识的设计风格和界面交互风格；

• 选用的图标具有全球性的群众共识；

• 图标和文字配合使用。

英文设计示例