CCS Y 70
中国工业设计协会团体标准
T/CIDADS 00021—2024
人工智能机器学习平台界面设计指南
Guidelines of artificial intelligence machine learning platform interface design
2024- 11 - 20 发布2024 - 12 - 20 实施
中国工业设计协会 发布
目次
前言....................................................................................................................................................................... II
1 范围................................................................................................................................................................... 1
2 规范性引用文件............................................................................................................................................... 1
3 术语和定义....................................................................................................................................................... 1
4 设计原则........................................................................................................................................................... 2
4.1 一致性........................................................................................................................................................ 2
4.2 人性化........................................................................................................................................................ 2
4.3 实用性........................................................................................................................................................ 2
5 通用设计指南................................................................................................................................................... 2
5.1 布局............................................................................................................................................................ 2
5.2 导航............................................................................................................................................................ 2
5.3 栅格............................................................................................................................................................ 2
5.4 色彩............................................................................................................................................................ 2
5.5 字体............................................................................................................................................................ 2
5.6 图标............................................................................................................................................................ 3
6 建模可视化界面设计指南............................................................................................................................... 3
6.1 概述............................................................................................................................................................ 3
6.2 模型构建流程............................................................................................................................................3
6.3 界面类型....................................................................................................................................................3
6.4 数据管理界面............................................................................................................................................4
6.5 建模可视化界面........................................................................................................................................9
6.6 结果可视化界面......................................................................................................................................17
参考文献..............................................................................................................................................................21
T/CIDADS 00021—2024
II
前言
本文件按照GB/T 1.1—2020《标准化工作导则第1部分：标准化文件的结构和起草规则》的规定起
草。
请注意本文件的某些内容可能涉及专利，本文件的发布机构不承担识别专利的责任。
本文件由中国工业设计协会设计标准分会提出并归口。
本文件起草单位：艾普工华科技（武汉）有限公司、西安迅腾科技有限责任公司、中电云计算技术
有限公司、中移（苏州）软件技术有限公司。
本文件主要起草人：徐昀、冯佳宁、郜婕、赵晖、杜俊志、王蔚、于东、路露、陈罡、浦玉。
本文件为首次发布。
T/CIDADS 00021—2024
1
人工智能机器学习平台界面设计指南
1 范围
本文件规定了人工智能机器学习平台界面设计的设计原则、通用设计指南及建模可视化界面设计指
南。
本文件适用于电脑端的人工智能机器学习平台界面设计。
2 规范性引用文件
本文件没有规范性引用文件。
3 术语和定义
下列术语和定义适用于本文件。
3.1
机器学习Machine learning
功能单元通过获取新知识或技能，或通过整理已有的知识或技能来改进其性能的过程。
[来源：GB/T 5271.31-2006 31.01.02（28.01.21）]
3.2
机器学习平台Machine learning Platform
提供数据准备、模型训练、模型评估等功能的软件平台。
3.3
监督学习Supervised Learning
获得的知识的正确性通过来自外部知识源的反馈加以测试的学习策略。
[来源：GB/T 5271.31-2006 31.01.08]
3.4
数据集Dataset
用于训练和测试机器学习模型的数据的集合。
注：数据集通常包含输入特征和相应的标签或目标值。
3.5
特征Feature
数据集中的属性或变量，用于描述每个样本。
注：特征可以是数值、文本、图像等不同类型的数据，它们用于构建机器学习模型。
3.6
模型Model
对数据进行预测或决策的数学表示，它接受输入数据并产生输出或预测。
3.7
算子Operator
预定义的数据运算或函数，是构建机器学习模型的基本构建模块。
T/CIDADS 00021—2024
2
3.8
模型训练Model Training
使用数据集来调整机器学习模型的参数，使其能够捕捉输入数据和标签之间的关系。训练的目标是
最小化模型的预测误差。
4 设计原则
4.1 一致性
保持视觉一致性、行为一致性和感知一致性，从而降低用户学习和使用的认知负荷，以极低的学习
与理解成本培养用户认知，在系统的产品体系中快速使用产品。
4.2 人性化
用户所接触到的现有概念符合其认知，用户可以时刻明确当前界面的任务。在产品设计中，汲取人
对自然以及行为习惯的认知，让用户在操作过程中具有主动权，操作过程保持愉悦、自由、幸福的体验，
让人机交互行为更自然。
4.3 实用性
使用该产品或者产品功能时可以使用户完成产品使用目标。以实际情景场景为立足点，满足用户核
心需求，简化和优化工作流程，上手即用。帮助用户更简单，更智能，更快捷的完成工作目标，提升工
作效率。
5 通用设计指南
5.1 布局
5.1.1 宜采用响应式设计，确保界面在不同设备上均表现良好。
5.1.2 大型数据处理和复杂计算宜在后台进行，不影响界面响应。
5.1.3 布局应考虑未来功能扩展的可能性，支持插件或扩展模块的集成。
5.1.4 对应人工智能机器学习平台的数据管理、建模可视化、结果可视化这三种界面类型，可分为三
类界面布局，分别为：数据管理界面布局、建模可视化界面布局、结果可视化界面布局。
5.2 导航
宜具有清晰的导航结构，方便用户快速定位功能。
5.3 栅格
用于布局的容器组件，宜方便快速搭建页面的基本结构。
5.4 色彩
5.4.1 基于产品色彩进一步定义符合产品调性以及功能诉求的颜色。可分为主色、功能色、辅助色。
5.4.2 主色是体现产品特性和传播理念最直观的视觉元素之一。考虑组件库的通用性，设置主色为组
件变量，可以针对不同业务使用不同的基础色板中的色彩。主色通常占据整个色彩方案的60%~70%，
用户产品的主要交互元素、如按钮、导航栏、图标和关键信息的强调。
5.4.3 功能色用于展示界面中的错误、成功、警告等各类状态。
5.4.4 辅助色主要被大量的应用在界面的文字部分，此外还用于背景、边框、分割线等场景。辅助色
的比例通常在10%~30%之间，辅助色可以是主色的对比色，以确保突出和易于识别。
5.5 字体
5.5.1 宜优先使用系统默认的界面字体，在不同的平台和浏览器下，字体宜始终保持良好的易读性和
可读性。
5.5.2 观看电脑屏幕宜保持眼睛与屏幕的距离大于50 cm，电脑屏幕比视线低于0°~30°的位置，以
T/CIDADS 00021—2024
3
保证视力的舒适度和减少眼睛疲劳。
5.5.3 主字体宜使用14 px 字体大小以保证在多数常用显示器上的用于阅读效率最佳。
5.5.4 字体宜支持多种语言和字符集，特别是对于国际化的应用程序及公式函数的支持。
5.5.5 字体宜有合适的许可，尤其是对于商业网站，避免侵犯版权。宜选择提供多种字重（如细体、
常规、粗体）的字体族，不应使用过多的字体，通常一个网站使用2 种~3 种字体。
5.6 图标
图标为界面汇总的重要视觉识别，帮助用户更好的理解及区分功能与模块，在设计平台的用户界面
时，图标的呈现宜遵守一系列的标准以确保一致性和可用性。图标设计宜符合以下准则：
a)风格一致性：平台界面内所有图标宜遵循统一的设计语言和风格。
b)清晰可读：图标在各种设备屏幕上宜能保持清晰易读。
c)尺寸规范：图标尺寸宜分为几个等级，每个等级的尺寸宜与字体大小规范中的相应尺寸相匹配。
d)行业适应性：图标的设计宜直观易懂，以便行业用户能够迅速识别。
6 建模可视化界面设计指南
6.1 概述
提供一个直观、交互式的环境，使用户能够轻松地创建、理解和操作模型。
6.2 模型构建流程
根据机器学习原理，构建模型的流程为：数据采集—模型搭建—模型训练—模型评估。流程见图1。
图1 机器学习原理对应模型构建流程示意图
6.3 界面类型
可视化界面分为以下类型：
T/CIDADS 00021—2024
4
a) 数据管理：对应数据准备流程。在模型可视化界面设计中，数据管理是指对于建模和分析的数
据进行组织、处理、维护和优化的过程。在模型的数据准备阶段，用于进行模型的数据引入。
b) 建模可视化：对应模型搭建、模型训练流程。通过图形化的方式展示复杂的数据和模型，帮助
用户更好地理解数据结构和模型逻辑。提供拖放、参数配置等直观的交互方式，简化模型的构建和调整
过程。
c) 结果可视化：对应模型评估流程。它涉及到将分析结果以直观、易理解的方式展示给用户，帮
助用户做出更准确的业务决策。
6.4 数据管理界面
6.4.1 布局
根据数据量大小以及数据的复杂性，可选择分步引入或单页引入。
数据分步引入参考见图2，单页引入参考见图3。
图2 数据分步引入示意图
T/CIDADS 00021—2024
5
图3 数据单页引入示意图
6.4.2 功能模块
6.4.2.1 数据上传/引入模块
为了更好的将不同来源的数据集成到一个统一的模型中，以支持全面的分析。数据上传/引入，宜
支持本地数据上传、服务器/数据库等数据的引入。
数据的上传/引入宜符合流程，第一步上传文件或连接服务器/数据库，第二步选择文件及预览数据
的条件配置。
本地上传功能模块参考见图4，数据库引入功能模块参考见图5，服务器引入功能模块参考见图6。
图4 本地上传功能模块参考示意图
图5 数据库引入功能模块参考示意图
T/CIDADS 00021—2024
6
图6 服务器引入功能模块参考示意图
T/CIDADS 00021—2024
7
6.4.2.2 数据浏览模块
支持数据预览和基本统计信息的快速查看，宜提供富媒体内容列表，支持图片、音频、视频内容的
的浏览查看。参考见图7。
图7 数据浏览模块参考示意图
T/CIDADS 00021—2024
8
6.4.2.3 数据处理模块
在建模之前宜对数据预处理和清洗，包括处理数据中的错误、重复或不完整的信息、检查数据的一
致性和准确性以确保数据质量，宜合理的组织和呈现信息，避免信息过载。参考见图8。
图8 数据处理模块参考示意图
T/CIDADS 00021—2024
9
6.5 建模可视化界面
6.5.1 布局
将复杂的数据和模型以直观、易于理解的方式呈现给用户，宜采用模块化布局，将界面划分为多个
功能模块，每个模块负责特定的功能。参考见图9。
典型的布局宜包括：
a) 顶部导航区：提供清晰的导航结构，方便用户快速定位。
b) 工具栏：汇集常用的对模型的操作，如训练过程中的暂停、启动、保存、恢复等。
c) 左侧边栏：用户文件管理、数据集列表、算法列表等。
d) 画布区：模型搭建的主要区域，采用可视化的交互方式，展示模型的逻辑结构和训练的过程。
e) 右侧边栏：信息展示区，展示调参、配置、提示等当前操作的详细信息。
图9 建模可视化界面的典型布局示意图
T/CIDADS 00021—2024
10
6.5.2 功能模块
6.5.2.1 数据/算法选择模块
在页面的左侧边栏区域，给模型构建提供多元的训练数据和丰富的算法库，参考见图10。
图10 左侧边栏区域示意图
6.5.2.2 模型搭建模块
6.5.3 模型的搭建过程，从左侧边栏选中的文件/算法/数据源，通过拖拉拽的方式放置于画布区，用有
向线定义多个算法、数据之间的关系，形成一种叫有向无环图（DAG）的模型数据结构。DAG 模型结
构见图11。
6.5.4 DAG 模型的基本构成元素：
a) 节点：代表一个任务、事件或数据。在机器学习建模场景中，DAG节点的类型一般包括，算子
节点、其他元素节点。
b) 边：表示节点之间的关系。
T/CIDADS 00021—2024
11
图11 DAG 模型结构示意图
6.5.4.1.1 算子操作状态
算子在整个建模搭建场景中，有多种操作状态，如默认状态、hover状态、选中时有无结果输出的
状态等。参考见图12。
T/CIDADS 00021—2024
12
图12 算子操作状态示意图
T/CIDADS 00021—2024
13
6.5.4.1.2 算子运行状态
在模型搭建及运行过程中，算子有多种运行状态。参考见图13。
图13 算子运行状态示意图
6.5.4.1.3 其他元素节点
包含数据表、样本、模型等，参考见图14。
图14 其他元素节点示意图
T/CIDADS 00021—2024
14
6.5.4.1.4 边
边包含连接点以及连接线，边的交互参考见图15。
图15 边的交互参考示意图
T/CIDADS 00021—2024
15
6.5.4.2 配置参数及调优模块
6.5.4.2.1 右侧边栏
右侧边栏主要承载信息的展示和配置，在画布中选择某一节点，右侧边栏将展示对应的节点信息或
配置项。参考见图16。
图16 右侧边栏区域示意图
6.5.4.2.2 底部浮层
6.5.5 当模型在运行状态下，在画布中选中某一算子节点，右键菜单查看算子的运行状态将触发底部
浮层。参考图17。
6.5.6 底部浮层多用于模型的训练或运行过程中复杂信息的展示，比如算子的运行详情、系统资源情
况、任务排队情况、任务的统计信息、实时日志等。参考见图18。
图17 底部浮层在界面中的区域展示示意图
T/CIDADS 00021—2024
16
图18 底部浮层区域示意图
T/CIDADS 00021—2024
17
6.6 结果可视化界面
6.6.1 布局
将全局视角中最关键的指标，以平铺的方式展现在整个界面中，通常是“总-分”的机构，多维度
的展示数据的全貌，建议采用卡片式设计，根据不同的指标内容，灵活布局。参考见图19。
图19 模型报告示意图
6.6.2 可视化展示模块
6.6.2.1 折线图
用于展示数据随着时间或有序类别的趋势变化，能够反映事物的发展趋势。
适合展示模型的训练详情、准确率曲线、数据评估结果指标等场景。参考见图20。
T/CIDADS 00021—2024
18
图20 折线图
6.6.2.2 面积图
类似于折线图，但区域被填充颜色，用于展示量随着时间变化的趋势。
适合展示受试者工作特征曲线（ROC）等指标。参考见图21。
图21 面积图示意图
6.6.2.3 饼状图
展示各部分占整体的比例关系。
适合展示数据组成结构。参考见图22。
T/CIDADS 00021—2024
19
图22 饼状图示意图
6.6.2.4 柱状图
比较不同类别的数据量。
适合展示特征重要性系数、模型各指标的对比等。参考见图23。
图23 柱状图示意图
6.6.2.5 树形图
展示层次数据的结构，适合展示具有层级关系的数据。
适合展示模型结构。参考见图24。
图24 树形图示意图
T/CIDADS 00021—2024
20
6.6.2.6 箱线图
展示数据的分布情况，包括中位数、四分卫数据等，适合比较数据的几种趋势和离散程度。
适合展示多组数据特征分布比较。参考见图25。
图25 箱线图示意图
6.6.2.7 堆叠柱状图
展示各部分岁时间变化的累积效果或不同类别的组合数据。
适合展示群体稳定性指标（PSI）分箱详情和类别分布等。参考见图26。
图26 堆叠柱状图示意图
6.6.2.8 混淆矩阵
也称为误差矩阵，表示精度评价的一种可视化工具，用n行n列的矩阵形式来表示。
常用来可视化地评估监督学习算法的性能、比较分类结果和实际测得值。参考见图27。
图27 混淆矩阵示意图
T/CIDADS 00021—2024
21
参考文献
[1] GB/T 5271.31-2006 《信息技术词汇第31 部分人工智能机器学习》
[2] GB/T 18976-2003《以人为中心的交互系统设计过程》
[3] GB/T 21051-2007《人-系统交互工效学支持以人为中心设计的可用性方法》
[4] GB/T 20527.1-2006《多媒体用户界面的软件人类工效学第1 部分：设计原则和框架》
[5] GB/T 32632.2-2016《信息无障碍第2 部分：通信终端设备无障碍设计原则》
评论