TCIDADS0002-2020 云计算管控平台界面设计指南

TCIDADS0002-2020云计算管控平台界面设计指南1范围本指南规定了TCIDADS0002-2020标准下云计算管控平台（以下简称“管控平台”）的界面设计原则、布局规范、组件设计、交互设计、视觉设计、适配要求及安全设计等内容。本指南适用于TCIDADS0002-2020标准覆盖的各类云计算管控平台的界面设计、开发、测试及验收工作，包括公有云、私有云、混合云管控平台，涵盖平台管理端、运维端、用户端等各类交互界面。2规范性引用文件下列文件对于本指南的应用是必不可少的。凡是注日期的引用文件，仅注日期的版本适用于本指南；凡是不注日期的引用文件，其最新版本（包括所有的修改单）适用于本指南。TCIDADS0001-2020云计算管控平台通用技术要求GB/T18336-2015信息技术安全技术信息技术安全性评估准则GB/T25000.10-2018系统与软件工程系统与软件质量要求和评价（SQuaRE）第10部分：系统与软件质量模型ISO9241-110:2012人机交互工效学第110部分：对话原则W3C网页内容无障碍指南（WCAG）2.13术语和定义3.1云计算管控平台用于对云计算资源（计算、存储、网络、安全等）进行集中管理、监控、调度、配置及运维的一体化平台，具备资源全生命周期管理、故障告警、性能分析等核心功能。3.2界面组件构成管控平台界面的基本元素，包括按钮、输入框、下拉菜单、表格、弹窗、导航栏、图表等可复用交互单元。3.3交互流程用户在管控平台中完成特定操作的步骤序列，包括操作触发、反馈响应、流程跳转等环节。3.4视觉层级通过色彩、字体、间距、尺寸等视觉元素，区分界面内容的重要程度，引导用户注意力的层级关系。3.5无障碍设计为不同能力的用户（包括视觉、听觉、运动障碍用户）提供平等使用管控平台的设计，确保界面可感知、可操作、可理解。4设计原则4.1实用性原则界面设计需围绕管控平台核心功能展开，优先满足资源管理、运维监控、故障处理等核心业务需求，避免冗余设计，确保操作流程简洁高效，降低用户学习成本。4.2一致性原则界面的布局、组件样式、交互逻辑、视觉风格需保持统一，包括同一页面内、不同页面间、不同终端间的一致性，确保用户操作习惯可复用，提升使用连贯性。4.3易用性原则界面操作需简单直观，流程清晰，关键操作步骤不超过3步；提供明确的操作指引、错误提示和帮助信息，确保用户无需专业培训即可完成基本操作。4.4安全性原则界面设计需结合管控平台安全需求，明确权限分级展示，敏感操作（如资源删除、权限修改）需增加确认环节，避免误操作；敏感数据（如密码、密钥）需进行加密显示和保护。4.5可扩展性原则界面设计需预留扩展空间，支持新增功能模块、资源类型和交互场景，确保后续版本升级时，界面结构和风格无需大幅调整，保持设计的连续性。4.6无障碍原则遵循WCAG2.1标准，确保界面支持屏幕阅读器、键盘操作等辅助工具，色彩对比度、字体大小满足无障碍要求，保障特殊用户的使用权益。5界面布局设计规范5.1整体布局结构管控平台界面采用“顶部导航栏+左侧侧边栏+中间内容区+底部状态栏”的经典布局，各区域功能划分明确，布局比例合理，具体要求如下：顶部导航栏：高度固定（建议48px-64px），包含平台logo、用户信息、通知中心、退出登录等核心入口，样式统一，不随页面滚动而隐藏。左侧侧边栏：宽度固定（建议200px-240px），展示平台核心功能模块导航，支持折叠/展开操作，折叠后仅显示图标，展开后显示图标+文字，当前选中模块需有明显视觉标识。中间内容区：占据界面主要区域（建议宽度≥1200px），用于展示当前模块的具体内容，支持滚动，内容布局需遵循“上标题、中内容、下操作”的逻辑，间距均匀。底部状态栏：高度固定（建议32px-40px），展示平台版本号、版权信息、联系方式等辅助信息，字体颜色浅于正文，不干扰核心操作。5.2布局间距规范界面间距需遵循统一标准，确保布局整齐有序，提升视觉舒适度，具体要求如下：页面内边距：上下左右边距统一为24px，最小不低于16px。模块间距：不同功能模块之间间距为24px，同一模块内子元素间距为16px或8px，避免间距杂乱。组件间距：按钮、输入框、表格等组件之间的横向间距为16px，纵向间距为12px，确保操作区域不拥挤。5.3响应式布局要求管控平台界面需支持响应式适配，适配不同屏幕尺寸（桌面端、平板端），具体适配规则如下：桌面端：屏幕宽度≥1200px，采用标准布局（顶部+左侧+中间+底部），中间内容区可分栏展示（如两栏、三栏）。平板端：768px≤屏幕宽度＜1200px，左侧侧边栏可自动折叠，中间内容区自适应调整，取消分栏布局，核心操作保持可见。适配原则：响应式调整时，核心功能和操作入口不隐藏，组件尺寸按比例缩放，避免出现内容溢出、布局错乱等问题。6界面组件设计规范6.1通用组件设计6.1.1按钮按钮分为主要按钮、次要按钮、文本按钮、危险按钮四类，样式统一，功能区分明确，具体要求如下：主要按钮：用于核心操作（如“确认”“提交”“创建”），背景色采用平台主色调，文字为白色，圆角半径4px，hover状态亮度降低10%，点击状态亮度降低20%。次要按钮：用于辅助操作（如“取消”“返回”），背景色为白色，边框为平台主色调，文字为平台主色调，圆角半径4px，hover状态背景色为浅灰色。文本按钮：用于次要操作（如“编辑”“删除”“查看”），无背景、无边框，文字为平台主色调，hover状态背景色为浅灰色，仅在操作区域较小时使用。危险按钮：用于高危操作（如“删除资源”“注销账号”），背景色为红色，文字为白色，圆角半径4px，hover状态亮度降低10%，点击时需弹出确认弹窗。按钮尺寸：默认按钮高度36px，宽度根据文字长度自适应（最小宽度80px）；小型按钮高度28px，大型按钮高度44px，用于特殊场景。6.1.2输入框输入框用于用户输入文本、数字等信息，分为单行输入框、多行输入框、带图标的输入框，具体要求如下：样式：输入框高度36px，边框为浅灰色（#E5E6EB），圆角半径4px，聚焦时边框颜色变为平台主色调，无阴影或轻微阴影（模糊度4px）。单行输入框：适用于短文本输入（如账号、密码、搜索关键词），宽度根据场景自适应，默认提示文本（placeholder）颜色为浅灰色（#C9CDD4），字体大小14px。多行输入框：适用于长文本输入（如备注、描述），默认高度80px，可拖动调整高度，最大高度不超过200px，支持换行。带图标的输入框：在输入框左侧或右侧添加图标（如搜索图标、密码可见/隐藏图标），图标尺寸20px，与输入框文字间距8px，用于提升操作便捷性。错误提示：输入内容不符合要求时，输入框边框变为红色，下方显示红色错误提示文本（字体大小12px），提示内容简洁明确（如“请输入正确的IP地址”）。6.1.3下拉菜单下拉菜单用于展示可选择的选项，分为普通下拉菜单、搜索下拉菜单、级联下拉菜单，具体要求如下：样式：下拉菜单触发按钮与输入框样式一致，下拉面板边框为浅灰色，背景色为白色，圆角半径4px，有轻微阴影（模糊度8px），面板宽度与触发按钮一致。普通下拉菜单：选项高度32px，hover状态背景色为浅灰色，选中状态背景色为平台主色调（浅色系），文字颜色为平台主色调。搜索下拉菜单：在下拉面板顶部添加搜索输入框，用于快速筛选选项，搜索框样式与普通输入框一致，筛选结果实时展示。级联下拉菜单：用于多维度选项选择（如“地区选择”“资源分类选择”），采用多级展开形式，每级选项宽度一致，展开时右侧显示下一级选项，无下一级时不显示展开图标。选项数量：下拉菜单选项数量不超过10个，超过10个时添加滚动条，滚动条样式统一（宽度4px，背景色浅灰色，选中色平台主色调）。6.1.4表格表格用于展示批量数据（如资源列表、运维日志、告警信息），分为普通表格、可编辑表格、分页表格，具体要求如下：样式：表格边框为浅灰色，表头背景色为浅灰色（#F5F7FA），表头文字为黑色（#1D2129），字体大小14px，加粗；表体行高40px，奇数行背景色为白色，偶数行背景色为浅灰色（#F5F7FA），hover状态背景色为浅色系平台主色调。普通表格：用于展示不可编辑数据，单元格内容居中或左对齐（文本左对齐，数字、状态右对齐），内容过长时显示省略号（hover时显示完整内容）。可编辑表格：用于可修改数据，编辑状态下单元格显示输入框或下拉菜单，与普通组件样式一致，编辑完成后显示修改后内容，提供“保存”“取消”操作按钮。分页表格：数据量超过10条时添加分页控件，分页控件位于表格底部居中位置，包含页码、每页条数选择、上一页/下一页按钮，每页条数默认10条，可选择20条、50条、100条。表格操作：表格右侧添加操作列，包含“编辑”“删除”“查看”等操作按钮，采用文本按钮或小型次要按钮，操作按钮间距8px，避免操作区域拥挤。6.1.5弹窗弹窗用于展示临时信息、确认操作、表单填写等场景，分为确认弹窗、表单弹窗、提示弹窗，具体要求如下：样式：弹窗背景色为白色，圆角半径8px，有阴影（模糊度12px），弹窗宽度根据内容自适应（最小宽度300px，最大宽度600px），居中显示在页面中，背景添加半透明遮罩（透明度50%，颜色#000000）。确认弹窗：用于高危操作确认（如删除资源），包含标题、提示文本、“确认”“取消”按钮，标题字体加粗，提示文本简洁明确，按钮位于弹窗底部右侧，间距16px。表单弹窗：用于填写表单信息（如创建资源、修改配置），包含标题、表单内容、“提交”“取消”按钮，表单布局与页面表单一致，标签与输入框对齐，间距均匀。提示弹窗：用于展示操作结果（如“操作成功”“操作失败”），包含图标、提示文本，自动关闭（默认3秒），也可手动关闭，图标与提示类型匹配（成功为绿色对勾，失败为红色叉号，提示为蓝色感叹号）。弹窗关闭：弹窗右上角添加关闭图标（×），点击图标或遮罩可关闭弹窗（表单弹窗、确认弹窗点击遮罩不关闭，避免误操作）。6.2专用组件设计6.2.1导航组件导航组件用于引导用户在不同功能模块间切换，包括顶部导航、左侧导航、面包屑导航，具体要求如下：顶部导航：展示平台核心模块（如资源管理、运维监控、系统设置），每个模块为文本按钮，选中状态文字颜色为平台主色调，下划线为平台主色调（高度2px）。左侧导航：展示当前顶部导航模块下的子模块，采用“图标+文字”形式，图标尺寸20px，文字字体大小14px，选中状态背景色为平台主色调（浅色系），文字颜色为平台主色调，子模块可折叠/展开。面包屑导航：位于中间内容区顶部，展示当前页面的层级路径（如“资源管理→计算资源→云服务器”），路径之间用“/”分隔，点击路径可跳转至对应页面，字体大小12px，颜色为浅灰色，当前页面路径颜色为黑色。6.2.2监控图表组件监控图表用于展示资源性能、运维数据等可视化信息，包括折线图、柱状图、饼图、仪表盘等，具体要求如下：样式：图表容器背景色为白色，边框为浅灰色，圆角半径4px，图表标题位于容器顶部左侧，字体大小16px，加粗，颜色为黑色。折线图/柱状图：用于展示趋势数据（如CPU使用率、内存占用），横轴为时间维度，纵轴为数据维度，坐标轴标签字体大小12px，颜色为浅灰色；折线颜色为平台主色调，柱状图颜色为平台主色调（浅色系），hover时显示数据详情。饼图：用于展示占比数据（如资源分配占比），颜色采用平台辅助色系列，避免颜色过于鲜艳，hover时显示占比详情和具体数值。仪表盘：用于展示单一指标的实时状态（如磁盘使用率），指针颜色为平台主色调，仪表盘背景色为浅灰色，数值显示在仪表盘中心，字体大小16px，加粗。图表交互：支持时间范围筛选（如近1小时、近24小时、近7天）、数据下载（导出Excel、PNG格式）、刷新等操作，操作按钮位于图表容器右上角，采用小型文本按钮。6.2.3告警组件告警组件用于展示资源异常、故障等告警信息，包括告警列表、告警提示、告警详情，具体要求如下：告警级别区分：根据告警严重程度分为紧急告警（红色）、重要告警（橙色）、一般告警（黄色）、提示告警（蓝色），颜色统一，便于用户快速识别。告警列表：展示告警时间、告警级别、告警内容、关联资源、处理状态等信息，紧急告警优先展示，处理状态分为“未处理”“处理中”“已处理”，用不同颜色标签区分。告警提示：在顶部导航栏通知中心显示未处理告警数量，用红色角标标注，点击可查看告警列表；紧急告警可弹出提示弹窗，提醒用户及时处理。告警详情：点击告警列表项可查看告警详情，包含告警描述、告警原因、处理建议、关联日志等信息，提供“标记已处理”“忽略告警”等操作按钮。7交互设计规范7.1操作交互点击交互：按钮、链接、表格行等可点击元素，点击时需有明确反馈（如按钮颜色变化、表格行背景色变化），避免用户不确定是否点击成功。输入交互：输入框聚焦时自动选中原有内容（便于修改），输入内容实时校验，错误提示及时显示，避免用户输入完成后才提示错误。滚动交互：页面滚动时，顶部导航栏固定，左侧侧边栏可跟随滚动（折叠状态下固定），中间内容区滚动流畅，无卡顿，滚动条样式统一。拖拽交互：支持拖拽操作的组件（如表格列调整、图表时间轴），拖拽时显示拖拽提示，拖拽完成后有确认反馈，拖拽过程流畅，无卡顿。7.2反馈交互操作反馈：用户完成操作后（如提交表单、删除资源），需显示明确的操作结果提示（如“提交成功”“删除成功”），提示弹窗自动关闭，避免干扰用户后续操作。加载反馈：页面加载、数据请求时，显示加载动画（如旋转图标），加载动画位于页面或组件中心，加载完成后自动消失，加载失败时显示失败提示，并提供“重新加载”按钮。错误反馈：操作失败、数据异常时，显示错误提示，提示内容需明确（如“网络异常，请检查网络连接”“资源不存在，无法删除”），并提供解决方案（如重新操作、联系运维）。7.3流程交互核心流程：资源创建、故障处理、权限修改等核心操作流程，步骤清晰，每一步操作有明确指引，步骤切换时有过渡动画，避免流程跳转突兀。回退流程：支持操作回退（如表单填写一半返回上一页，保留已填写内容），避免用户误操作导致数据丢失，回退时需提示用户（如“是否放弃已填写内容？”）。批量操作流程：支持批量选择资源进行操作（如批量删除、批量重启），批量选择后显示选中数量，操作时需确认，操作完成后显示批量操作结果。8视觉设计规范8.1色彩规范管控平台界面色彩以简洁、专业、沉稳为原则，色彩体系分为主色调、辅助色调、中性色调，具体要求如下：主色调：采用蓝色系（建议#1890FF），用于按钮、选中状态、核心标识等，体现专业、可靠的气质，主色调在界面中占比不超过20%，避免过度使用。辅助色调：用于区分不同状态、层级和功能，包括绿色（#52C41A，成功状态）、红色（#FF4D4F，错误/紧急状态）、橙色（#FAAD14，警告状态）、蓝色（#1890FF，提示状态），辅助色调仅用于提示、标识等场景，不用于大面积展示。中性色调：用于背景、文本、边框等，包括白色（#FFFFFF，页面背景）、浅灰色（#F5F7FA，模块背景）、中灰色（#E5E6EB，边框）、深灰色（#C9CDD4，次要文本）、黑色（#1D2129，主要文本），中性色调占界面色彩的80%以上，确保界面简洁清爽。色彩对比度：文本与背景的色彩对比度不低于4.5:1，确保文本清晰可见；特殊文本（如提示文本）对比度不低于3:1，符合无障碍设计要求。8.2字体规范界面字体采用无衬线字体（优先使用微软雅黑、思源黑体），字体大小、粗细统一，确保文本清晰易读，具体要求如下：字体大小：页面标题（如一级标题）18px，模块标题（如二级标题）16px，正文文本14px，辅助文本（如提示、备注）12px，避免使用过小或过大的字体。字体粗细：标题字体加粗（600-700），正文文本常规（400），强调文本（如选中状态、关键数据）加粗（600），避免过度加粗导致视觉杂乱。文本对齐：页面标题、模块标题居中或左对齐，正文文本左对齐，数字、状态文本右对齐，表格文本对齐统一，确保布局整齐。文本溢出：长文本无法完整显示时，显示省略号（…），hover时显示完整文本，避免文本溢出影响界面美观。8.3图标规范界面图标用于辅助表达功能、提升操作便捷性，图标样式统一、简洁，具体要求如下：图标风格：采用线性图标（线条粗细2px），风格统一，避免混合使用线性、面性图标，图标颜色与所在场景匹配（如操作图标用主色调，提示图标用辅助色调）。图标尺寸：导航图标20px，按钮图标16px，提示图标14px，尺寸统一，避免大小不一导致视觉杂乱。图标含义：图标含义需直观，与对应功能一致（如搜索图标用放大镜，删除图标用叉号），避免使用歧义图标，新用户可快速理解图标含义。图标交互：可点击图标hover时颜色变为主色调，点击时颜色加深，提供明确的交互反馈。9适配与兼容性要求9.1终端适配管控平台界面需适配主流桌面终端和平板终端，具体要求如下：桌面终端：适配Windows、macOS系统，支持Chrome、Firefox、Edge、Safari等主流浏览器（最新版本及前两个版本），界面布局、组件样式无错乱，功能正常。平板终端：适配iPad、安卓平板（屏幕尺寸7-12英寸），支持横屏显示，界面响应式调整，核心功能可正常操作，无内容溢出、布局错乱。9.2浏览器兼容性界面在不同浏览器中需保持一致的显示效果和交互体验，具体要求如下：样式兼容性：CSS样式在不同浏览器中显示一致，避免出现边框错位、颜色偏差、间距异常等问题，优先使用标准CSS属性，避免使用浏览器私有属性。功能兼容性：交互功能（如点击、输入、滚动、弹窗）在不同浏览器中正常运行，无卡顿、无失效，加载速度一致（页面加载时间≤3秒）。兼容性测试：每轮界面开发完成后，需在主流浏览器中进行兼容性测试，记录并修复兼容性问题，确保界面在所有支持的浏览器中正常使用。10安全设计规范10.1权限控制界面设计权限分级展示：根据用户角色（管理员、运维人员、普通用户）分级展示功能模块和操作权限，未授权的模块和操作需隐藏，避免用户看到无关内容或进行越权操作。权限申请界面：用户申请权限时，需填写申请理由、权限范围等信息，表单设计简洁明确，提交后显示申请进度，管理员审批后及时通知用户。权限日志界面：展示用户权限变更记录（如权限授予、权限收回），包括操作人、操作时间、权限变更内容等信息，便于审计和追溯。10.2敏感操作与数据保护敏感操作确认：高危操作（如删除资源、修改权限、注销账号）需增加确认环节，弹出确认弹窗，明确提示操作风险，用户确认后才可执行操作。敏感数据保护：密码、密钥、IP地址等敏感数据，输入时显示为星号（*），查看时需验证权限，避免敏感数据泄露；数据传输过程中需加密，界面显示时需进行脱敏处理（如隐藏部分字符）。操作日志记录：所有敏感操作（如登录、权限修改、资源删除）