《云计算管控平台界面设计指南》标准全文及编制说明.pdf

1 团体标准 ICS 13.180 A 25 T/CIDADS XXXX — 2019 云计算管控平台界面设计指南 Design Guide for Cloud Computing Console Interface （征求意见稿） XXXX - XX - XX 发布 XXXX - XX - XX 实施 中国工业设计协会 发 布 I ⺫ 次 前言.................................................................. 引言.................................................................. 1. 范围 ............................................................. 1 2. 规范性引用文件.................................................... 1 3. 术语和定义 ....................................................... 1 4. 设计要素 ......................................................... 3 4.1. 基础要素 ........................................................ 3 4.2. 导航 ............................................................ 3 4.3. 组件 ............................................................ 3 5. 设计指南 ......................................................... 8 5.1. 基础要素设计指南 ................................................ 8 5.2. 导航设计指南 .................................................... 8 5.3. 组件设计指南 .................................................... 9 参考文献.............................................................. 13 II 前 ⾔ 本标准依据 GB/T1.1-2009 给出的规则起草。

本标准由阿里云计算有限公司提出 本标准由中国工业设计协会标准分会归口 本标准主要起草单位: 阿里云计算有限公司 本标准参与起草单位：北京服装学院、北京天源迪科信息技术有限公司、软通智慧科技 有限公司 本标准主要起草人：杨煜炜、刘昕雯、李想、温佳智 1 云计算管控平台界面设计指南 1 范围 本标准给出了云计算管控平台界面的设计要素和设计指南 本标准适用于云计算管控平台的界面设计 2 规范性引⽤⽂件 下列文件对于本文件的应用是必不可少的 凡是注日期的引用文件， 仅注日期的版本适 用于文件凡是不注日期的引用文件，其最新版本（包括所有的修改单）适用于本文件 GB/T 18978.10 – 2004 / ISO 9241-10：1996 使用视觉显示终端（VDTs）办公的人类 工效学要求 第 10 部分 对话原则[ISO 9241-11, Ergonomic requirements for office work with visual display terminals(VDTs)—Part 10: Dialogue principles] GB/T 18978.12 – 2009 / ISO 9241-12：1998 使用视觉显示终端（VDTs）办公的人类 工效学要求 第 12 部分 信息呈现[ISO 9241-11, Ergonomic requirements for office work with visual display terminals(VDTs)—Part 12: Presentation of information] GB/T 18978.13 – 2009 / ISO 9241-13：1998 使用视觉显示终端（VDTs）办公的人类 工效学要求 第 13 部分 用户指南[ISO 9241-11, Ergonomic requirements for office work with visual display terminals(VDTs)—Part 13: User guidance] GB/T 18978.143 – 2018 / ISO 9241-143：2012 人-系统交互工效学 第 143 部分：表 单[Ergonomic of human-system interaction – Part 143:Forms] GB/T 18978.151 – 2014 / ISO 9241-151：2008 人-系统交互工效学 第 151 部分：互 联网用户界面指南[Ergonomic of human-system interaction – Part 151: Guidance on World Wide Web user interfaces] Web Content Accessibility Guidelines（WCAG）2.0：2018，可从以下网址获得： 3 术语和定义 下列术语和定义适⽤于本⽂件。

3.1 云计算管控平台 cloud computing console 管理云计算产品和服务的应用程序 3.2 字体 font 计算机系统中的 font，也称字型 ⽰例：宋体、苹⽅等 3.3 字号 font-size 计算机系统中的 font-size，描述字体的大小 ，以像素（px）为单位 3.4 字重 font-weight 计算机系统中的 font-weight，描述字体的粗细 3.5 灰度 gray scale 计算机系统中的 gray scale，以黑色为基准色，通过不同饱和度的黑色来显示文字、 图像 3.6 语义⾊ semantic color 2 能够代表一类状态或寓意的颜色，这些颜色所在领域或环境容易达成共识如：代表危 险的红色、代表成功的绿色、代表提醒的黄色等 3.7 栅格系统 grid 一种使用固定格子设计布局的平面设计方法与风格 3.8 导航 navigation 在网络页面之间或网络页面的内部， 或者在页面中的某个部分内部的移动， 用户借此操 作来找到某个特定的功能或某个信息 [GB/T 18978.151—2014，定义 3.22] 3.9 组件 component 界面的组成部分，一般是可以交互的，可在页面内重复出现。

3.10 按钮 button 页面内主要的行动点，单击按钮可进行操作 3.11 穿梭框 transfer 进行多项选择的一种形式 通常以两栏的形式展示， 用于从源集合选择项目到目标集合 中去，用直观的方式在两栏中移动元素，完成选择行为 3.12 步骤条 step 用于告知用户当前操作流程的进程 3.13 单选按钮 radio button 用于用户从一个数据集中选择单个选项 3.14 勾选框 checkbox 用于选中 3.15 翻⻚器 pagination 用于告知用户当前场景所处的页面位置，以及共有多少页面，并提供跳转至上一页、下 一页的功能 3.16 徽标 badge 用于标识状态，提醒用户操作 3.17 进度条 progress 可视化当前进展或完成度 3.18 开关 switch 用于在两种状态之间进行切换 3.19 ⽇期选择器 date picker 用于输入或选择日期 3 3.20 输⼊框 input 信息输入的主要组件 3.21 上传组件 upload 用于将本地的文件上传 3.22 信息提醒 message 用于展示提示信息 3.23 容器 container 可以在其内部容纳其他组件的界面组成部分。

3.24 系统消息 system message 系统管理者以信息广播形式向目标用户发布的公告、通知、提示等 3.25 对话框 dialog 用于承载相关操作或展示信息内容的一类组件 3.26 抽屉 slide panel 用于承载较复杂的表单或者更多信息内容的一类组件 3.27 卡⽚ card 通常用于展示一组相关信息的一类组件 3.28 折叠⾯板 collapse 用于收起和展开需要显示的信息内容的一类组件 3.29 表单 form 组件的结构化显示，用户可以进行阅读、填写、选择输入或修改 注：改写 GB/T 18978.143—2018,定义 3.9 3.30 表格 table 通过行和列来组织和展示信息的一类组件 3.31 选项卡 tab 用于切换展示不同类型的内容的一类组件 4 设计要素 4.1 基础要素 4.1.1 ⾊彩 色彩分为基本色彩、语义色彩、字体色彩 4.1.2 字体 字体包括所需要使用的全部字体、字号范围、字重范围 4.1.3 布局 4 布局包括栅格规则与对齐规则 4.2 导航 导航包括顶部导航与左侧导航左侧导航可以通过按钮进行收起或展开。

4.3 组件 4.3.1 按钮 按钮分为填充按钮、线框按钮、文字按钮，示例见图 1 图1 按钮示例 4.3.2 标签 标签表示不同的状态或类别，分为可删除和不可删除两种 4.3.3 徽标 徽标分为圆点徽标、数字徽标、文字徽标 4.3.4 信息提⽰ 信息提示由信息提示容器和信息内容构成，也可包含图标或按钮，示例见图 2 图 2 信息提示示例 信息提示有两种用法： ——用于展示操作反馈，会在短时间内自动消失，可遮挡界面其他内容； ——用于展示其他提示信息，如系统消息等，一般不会自动消失，不会遮挡页界面其他 信息 信息提示有四种类型： ——成功； ——告警； ——错误； ——说明 4.3.5 开关 开关代表两种状态，点击开关会切换状态 4.3.6 单选按钮 未选中的的单选按钮点击后会切换为选中状态， 此时之前选中的按钮切换为非选中状态 4.3.7 勾选框 未选中的的勾选框点击后会切换为选中状态 4.3.8 穿梭框 穿梭框由左右两栏选项列表和中间的穿梭按钮组成，分为单选穿梭框和复选穿梭框： a）单选穿梭框中，左侧栏中的条目点击后会穿梭到右侧栏中，反之亦然； b）多选穿梭框中，左侧栏中的条目选中后，需要点击穿梭按钮，穿梭进入右侧栏，反 之亦然。

4.4 输⼊框 输入框中可在两侧放置文字或者图标，示例见图 3 5 图 3 输入框示例 输入框右侧可有删除按钮，点击后删除输入框内所有内容 4.4.1 ⽇期选择器 日期选择器分为日期与时间选择器、日期选择器、时间选择器 当用户需要输入一个日期或时间，可以点击输入框，弹出面板进行选择用户亦可直接 输入 4.4.2 上传组件 上传宜显示上传结果，并允许用户更改或撤销上传行为 上传方式分为点击上传与拖拽上传： a) 点击上传指点击后弹出对话框选择需要上传的文件； b) 拖拽上传指把本地文件拖动到指定的上传框中来完成选择行为 支持拖拽上传的组 件也宜支持点击上传 4.4.3 步骤条 步骤条有横向和竖向两种，示例见图 4 图 4 步骤条示例 4.4.4 翻⻚器 翻页器可包含：单页条目数量选择、翻页、页码、页码省略、自定义页码跳转其中翻 页是必要组。