T-CIDADS 00021-2024 人工智能机器学习平台界面设计指南

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