T/CIDADS 00032-2026 云计算 SaaS 产品界面设计规范

　　S 13. T/CIDADS

　　中 国 工 业 设 计 协 会 团 体 标 准

　　T/CIDADS00032—2026

　　云计算 SaaS 产品界面设计规范

　　User Interface Design Guideline for Cloud Computing SaaS Products

　　2026-03-30发布 2026-04-30实施

　　T/CIDADS 00032—2026

　　T/CIDADS00032—2026

　　前 言

　　本文件按照GB/T1.1-2020《标准化工作导则第1部分：标准化文件的结构和起草规则》给出的规则起草。

　　本文件由中国工业设计协会提出并归口。

　　本文件起草单位：阿里云计算有限公司、中电云计算技术有限公司、中移(苏州)软件技术有限公司、中国电子科技集团公司第三十六研究所、美的集团、北京服装学院、清华大学。

　　本文件主要起草人：王路平、程遥、李丽君、李健鹏、于东、何达、浦玉、毛韫琳、赵宇、韩智洵 、江俊豪、张帆、崔艺铭、王国胜。

　　T/CIDADS00032—2026

　　云计算SaaS产品界面设计规范

　　1. 范围

　　本文件规定了云计算SaaS产品界面设计的设计元素 、设计组件和用户界面场景的设计规范。

　　本文件适用于云计算SaaS产品界面设计(本规范仅适用于电脑PC工作台的设计，不包括移动端SaaS产品的设计) 。

　　2. 规范性引用文件

　　下列文件中的内容通过文中的规范性引用而构成本文件必不可少的条款。其中，注日期的引用文件，仅该日期对应的版本适用于本文件;不注日期的引用文件，其最新版本(包括所有的修改单)适用于本文件。

　　GB/T 18978.143 人-系统交互工效学 第143部分： 表单

　　GB/T 18978.151 人-系统交互工效学 第151部分： 互联网用户界面指南

　　3. 术语和定义

　　GB/T 18978.143 、GB/T 18978.151界定的以及下列术语和定义适用于本文件。

　　3.1. 软件即服务

　　软件即服务 (Software as a Service， SaaS) 是一种通过互联网向用户提供软件功能的服务模式 。 云技术提供商开发和维护云技术应用软件，提供自动软件更新，并通过互联网以即用即付费的方式提供给客户的一组计算机程序 、规程以及可能的相关文档和数据。

　　3.2. 用户

　　B 端用户指的是组织或企业，以团队或机构的目标为核心使用产品，通常关注效率提升、成本优化、

　　流程规范和可持续业务价值

　　3.3. 用户体验

　　用户与系统交互过程中形成的全部心理感受 。 注： 通常分为表现层 、框架层 、结构层 、范围层和

　　战略层(内容来自用户体验五要素) 。

　　3.4. 字号

　　字体的大小或高度 ， 以像素(px)为单位。

　　3.5. 字重

　　T/CIDADS 00032—2026字体的粗细程度。

　　3.6. 布局栅格

　　一种使用固定格子设计布局的平面设计方法与风格，指导产品中一切视觉元素的基础框架 。使

　　用栅格系统， 赋予视觉元素以规律的秩序感 。

　　3.7. 面包屑

　　一种辅助导航模式，可帮助用户理解当前页面在系统结构中的位置并能向父级页面或者上一步骤返回 。

　　3.8. 按钮

　　页面内主要的行动点， 单击按钮可进行操作 。

　　3.9. 进度条

　　进度条用于协助用户完成分多步骤的任务，可以展示总步骤数和当前所处步骤，引导用户完成全任务流程。进度条通过将一个大型任务分解成多个子任务，告知用户当前操作流程的进程，从而提升用户完成度。

　　3.10. 分页器

　　用于告知用户当前场景所处的页面位置，以及共有多少页面，并提供跳转至上一页、下一页的功能。协助用户快速导航到目标页面的组件。分页器一方面有呈现功能，呈现信息体量方便用户查看;另一方面有导航功能， 帮助用户快速定位到要找的信息。

　　3.11. 数据可视化

　　借助于图形化手段来展现数据， 以便对数据进行更直观和深入的观察与分析。

　　3.12. 图表

　　可直观展示统计信息属性(时间性、数量性等)，对知识挖掘和信息直观生动感受起关键作用的图形结构，是一种很好的将对象属性数据直观、形象地可视化手段 。(注： 经常以所用的图像命名， 例如柱状图 、折线图 、饼状图 、 圆环图等 。)

　　3.13. 抽屉

　　用于承载较复杂的表单， 或者更多信息内容的一类组件。

　　3.14. 导航菜单

　　承载网站信息结构，为用户提供功能导航的组件，承载了一个网站功能与信息的结构层级。用户依赖导航在不同功能与页面间进行跳转。

　　T/CIDADS 00032—2026

　　3.15. 卡片

　　常用于展示一组相关信息的一类组件。根据卡片内部信息的不同，卡片可以有多种组合样式。包括

　　纯文字样式 、有行动点的样式以及有图形和视频等富媒体信息的样式。

　　3.16. 折叠面板

　　用于收起和展开需要显示的信息内容的一类组件。

　　3.17. 表格

　　通过行和列来组织和展示信息的一类组件。

　　3.18. 选项卡

　　用于切换展示不同类型的内容的一类组件。

　　4. Saas 产品类型介绍

　　4.1. 业务垂直类

　　覆盖各类行业，为企业用户提供管理工具满足日常办公与通用管理需求，如日程管理、在线文档和视频会议等， 典型产品： CRM 、HCM 、财务管理等。

　　4.2. 行业垂直类

　　指面向某个垂直行业的业务系统，根据企业的行业，领域，运行业务不同，会有很大差异化，主要包含零售， 金融， 数字政务，设计， 算法， 物流等 。业垂直类 SaaS 专注于特定行业， 通过深度理解行业流程提供专业化的解决方案，如酒店管理云系统或云供应链系统，具有明显的行业壁垒与规模化优势，头部企业的竞争力会随时间持续增强。一般在定制交付场景中，每个都有自己独特的业务逻辑。是企业自身业务运作的核心系统。

　　T/CIDADS 00032—2026

　　5. 设计元素

　　5.1. 文字

　　5.1.1. 字体

　　IOS 设备中文字体推荐使用 PingFang SC，英文字体推荐使用 Roboto。Windows 系统推荐使用 Microsoft YaHei， 英文字体推荐使用 Helvetica Neue。

　　图 1 字体示意图

　　5.1.2 字重

　　规范中推荐字重有细体(Light)、常规(Regular) 、中等(Medium)3 种，推荐使用常规(regular)。

　　图 2 字重示意图

　　5.1.3 字号

　　中文文字大小比例示意图见图3， 英文文字大小比例示意图见图4 。分别将中文字体PingFang SC、英文字体Roboto用于所有标题 、正文 、备注和说明文字中， 从而产生连贯的排版体验。

　　T/CIDADS 00032—2026

　　图 3 中文文字大小比例示意图

　　图 4 英文文字大小比例示意图

　　5.2. 颜色

　　5.2.1. 色板制定规则

　　T/CIDADS 00032—2026

　　规范的色系基于 HSB(Hue 色相; Saturation 饱和度; Bright 明度) 和 Accessilibity Scale 调整 。每一个颜色都分为从浅色到深色的 10 个色板，从 100 到 10，核心色设定在 60;H 值保持不变。主体色的Accessibility Scale 见图 5。

　　5.2.2. 文字色

　　从 Black 到主题色 100-60， 适用于白色文字， 从主题色 50-10 到 White， 适用于黑色文字。

　　图 5 文字色

　　5.2.3. 行业主题色

　　核心色值计算方式需要按照统一的 Accessibility Scale 计算，确保可读性与易识别性。本规范根据行业特性，制定了关于， 党政 、零售 、公安 、教育后台 、教育前台五个行业的色板。

　　T/CIDADS 00032—2026

　　5.3. 图标

　　图标设计需要简洁、清晰、适应性强，推荐图标尺寸为 16x*16 px 和 32x*32 px 两种尺寸 。16*16px的图标通常用于界面中的辅助性、信息密度较高的位置，例如工具栏按钮、列表项前的标识、小型按钮、标签页 、状态提示等 。它的主要作用是快速传达含义 、节省空间， 让界面保持紧凑。

　　32×32px 的图标更适合用于信息相对独立 、视觉层级更高的区域， 例如设置入口 、应用首页功能入口、卡片模块的图标、引导页或弹窗中的图形元素等，这种情况下图标可以具备更多细节和更明确的视觉特征，从而提高识别度和吸引力 。图标细节原则为外圆内尖，确保图标视觉不过分尖锐，并与规范的圆角元素保持统一。

　　图 7 Icon 尺寸对比示例

　　5.4. 插画

　　设计风格应简洁 、清晰 、敏捷 、多样 。插画的推荐尺寸有1:1 、2:1 、3:2 、4:3 、 16:9 。非标准尺寸，用户可根据合适的场景自定义， 如banner 、页面插图等。

　　图 8 插画示意图

　　T/CIDADS 00032—2026

　　5.5. 布局栅格

　　5.5.1. 基础序列

　　栅格基础数字原则为2 的 X 平方(X 大于等于 2)， 即最小数字单位为4 。基础序列为 2 的平方数(22 、2 3 、24 、25 、26… )。

　　图 9 基础序列示意图5.5.2. 扩充序列

　　扩充序列基于基础序列， 在 8 至 48 之间， 每一级通过额外增加 4 来进行有序扩充， 以更好应对更多细分场景。

　　图 10 扩充序列示意图

　　5.5.3. 基础单元

　　即最小平面几何单位， 为一个边长为8px的正方单元 。基础单元的不同组合方式形成页面中不同元素之间的排布逻辑： 行 、列 、卡片 、表格 、填充区域 、 白边区域等。

　　T/CIDADS 00032—2026

　　5.5.4. 布局规则

　　在页面中根据需要可以使用布局24列 (标准网页版) 、 16列 (桌面端) 、8列 (Pad端) 、4列 (手机端)， 保持列间距为16px。

　　图 12 24 列基础布局示意图

　　5.6. 层级与阴影

　　层级与阴影能反映物体之间的相对距离以及内容的层级关系，指导更清晰的设计和更完美的视觉体验。

　　图 13 不同卡片间的阴影层级

　　6. 组件

　　T/CIDADS 00032—2026

　　6.1. 按钮

　　6.1.1. 使用规范

　　一个应用一次可以在布局中显示多个按钮，高强调按钮可以与执行次要功能的中强调按钮和低强调按钮配合使用。每个页面宜有且仅有一个主要按钮，使用多个按钮时，一个按钮的可用状态与另一按钮的禁用状态应不同。

　　不宜将按钮用于导航功能， 如果需要将用户引导到下一页面， 宜使用文字链接。

　　按钮文字内容清晰表达触发的操作， 宜使用“动词+名词 ”的形式， 如“购买虚拟机 ”“ 开通服务 ”“新建实例 ”等 。通用按钮的文字内容可使用简单词汇， 如“确定 ”“取消 ”“删除 ”“ 关闭 ”等。

　　6.1.2. 按钮类别

　　6.1.2.1. 面性主按钮

　　有关页面上的主要号召性用语。每个屏幕上的主按钮应只出现一次(不包括应用程序标题或在对话框中)。

　　6.1.2.2. 文字二级按钮

　　对于每个页面上的辅助操作。当有多个号召性用语时，二级按钮可单独使用或与主按钮、文本按钮搭配使用。

　　6.1.2.3. 灰色三级按钮

　　不太突出的动作 。 当有多个号召性用语时， 三级按钮可单独使用或与主按钮及二级按钮同时使用， 也可 2个三级按钮并列加 1 个主要按钮使用。

　　6.1.2.4. 次要文本按钮

　　对于最不明显的动作， 通常与二级按钮结合使用。

　　图 14 不同层级的按钮样式示意图

　　6.2. 弹窗

　　T/CIDADS 00032—2026

　　6.2.1. 使用规范

　　需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用Modal 在当前页面正中打开一个浮层， 承载相应的操作 。需要一个简洁的确认框询问用户时， 建议使用最小尺寸弹窗XS=360。

　　6.2.2. 分类

　　6.2.2.1. 基础弹窗

　　推荐基础弹窗从小到大，分为4个尺寸，超小号：超小号(XS)=宽360px*高320px,小号(S)=宽480px*高320px, 中号 (M) =宽640px*高345px,大号 (L) =宽800px*高500px， 标注的宽度为固定宽度， 高度为最小高度， 可以根据业务场景进行调整 。弹窗外边缘保持8px圆角， 里面控件， 例如按钮等保持 4px圆角。

　　6.2.2.2. 全局弹窗

　　当弹窗尺寸大于800px时， 推荐按钮尺寸32px， 靠右对齐。

　　6.2.2.3. 状态弹窗

　　当弹窗尺寸小于480px时， 推荐使用文字按钮， 靠右对齐。

　　T/CIDADS 00032—2026

　　图 16 弹窗边距尺寸标注示意图

　　6.3. 加载

　　针对页面的某个局部处于等待异步数据或正在渲染过程时， 使用加载动效， 可分为两种类型(圆形加载和条形加载)和尺寸(16*16px， 40*40px)， 根据使用场景选择需要的尺寸和效果。

　　图 17 圆形加载示意图

　　T/CIDADS 00032—2026

　　图 18 条形加载

　　6.4. 链接

　　默认链接的文字为蓝色， 悬停 (hover) 时有下划线出现， 示意该文字可点击链接 。链接相比按钮更为弱化， 宜使用在页面非主要内容的跳转上 。链接样式及尺寸示意图见下图。

　　图 19 链接样式

　　图 20 尺寸示意图

　　T/CIDADS 00032—2026

　　6.5. 卡片

　　6.5.1. 使用规范

　　卡片尺寸根据页面内的信息量来确定，可是一个小模块的信息展示，也可用于楼层的分隔。卡片与卡片之间的间隔，宜遵循页面栅格进行布局。卡片内如有行动点，宜将主要行动点放在下方， 以单独楼层展示。次要的辅助行动点，可放在右上角， 以链接或图标形式出现 。内部信息较长的卡片，可根据情况在卡片内部设置滚动条 。此时行动点应固定底部展示。

　　图 21 卡片尺寸示意图

　　6.5.2. 分类

　　6.5.2.1. 配置型卡片

　　卡片内存在核心数据信息， 点击跳转对信息进行编辑或配置操作。

　　T/CIDADS 00032—2026

　　图 22 配置型卡片(单数据卡片及多数据卡片) 示意图

　　6.5.2.2. 功能型卡片

　　卡片为某个功能/模块入口， 点击跳转进入具体模块/配置项。

　　图 23 功能型卡片示意图

　　6.5.2.3. 列表型卡片

　　卡片为某个功能/模块入口， 卡片间的关系为同一分类下列表项的并列关系， 点击跳转进入该列表项。

　　T/CIDADS 00032—2026

　　图 24 列表型卡片示意图

　　6.6. 导航菜单

　　6.6.1. 使用规范

　　主导航需保持结构简洁，避免过深的层级， 以减少用户理解负担 。同一导航层级的命名应具有一致的语义范围，避免概念重叠或歧义。导航项的顺序应遵循功能使用频率、用户任务流程或业务优先级进行编排。

　　6.6.2. 分类

　　6.6.2.1. 顶部导航为一级

　　顶部导航为一级侧边导航为二级。

　　图 25 顶部导航为一级侧边导航为二级示意图

　　6.6.2.2. 侧边导航为一级。

　　侧边导航为一级， 点击后可以展开。

　　T/CIDADS 00032—2026

　　图 26 侧边导航为一级示意图

　　6.7. 面包屑

　　6.7.1. 使用规范

　　使用位置面包屑还是路径面包屑取决于业务场景，在同一产品和系统中，面包屑类型保持一致。面包屑出现在页面的左上角，居标题栏之下，页面标题之上。如果面包屑过长，则保留第一个和倒数两个面包屑， 中间面包屑用下拉菜单形式隐藏。面包屑最后一层为当前页面，且不可点击，面包屑不应出现换行的情况。

　　6.7.2. 分类

　　6.7.2.1. 位置面包屑

　　根据信息架构父子结构展示面包屑结构， 可清晰展示当前页面在系统中的位置或当前页标题。

　　图 27 位置面包屑示意图

　　6.7.2.2. 路径面包屑

　　根据页面下钻路径展示面包屑结构， 可清晰展示页面来源， 路径面包屑通常是动态生成的。

　　T/CIDADS 00032—2026

　　图 28 路径面包屑示意图6.7.2.3. 其他形态

　　其他形态面包屑。

　　图 29 其他形态面包屑示意图

　　6.8. 分页器

　　6.8.1. 使用规范

　　默认一页展示数量 、是否记忆用户修改应根据场景制定 。分页器的信息应包括当前位置 、页面总数、每页展示信息数 、上一页 、下一页 、输入页面等。

　　6.8.2. 分类

　　6.8.2.1. 基本分页器

　　分页数较少时使用基础分页样式， 提供全量页面展示和上一页下一页按钮。

　　T/CIDADS 00032—2026

　　图 30 基本分页示意图

　　6.8.2.2. 更多分页器

　　分页数较多时使用更多分页样式，提供当前位置 、页面总数、每页展示信息数、上一页、下一页 、输入页面。

　　图 31 更多分页示意图

　　6.8.2.3. 跳转分页器 快速跳转到某一页。

　　图 32 跳转分页示意图

　　T/CIDADS 00032—2026

　　6.8.2.4. 迷你分页器

　　迷你翻页， 用于小空间。

　　图 33 Mini 分页示意图

　　6.9. 进度条

　　6.9.1. 使用规范

　　应符合用户流程心智，展示顺序为从左到右和从上到下。用户可返回上一步进行修改。信息应尽量简洁清晰， 清晰区分已完成 、正在进行 、未完成的任务， 且视觉应有渐进性 。注意数据提交和保存逻辑，不应有跳转步骤或者误操作导致的已输入数据丢失。

　　6.9.2. 分类

　　6.9.2.1. 流程条

　　引导用户的分步骤操作， 实时显示用户当前所在的操作界面和下一步预演。

　　T/CIDADS 00032—2026

　　图 34 流程条示意图6.9.2.2. 时间线

　　垂直展示的时间流信息 。

　　图 35 垂直时间线示意图

　　7. 用户界面场景

　　7.1. 用户欢迎页

　　7.1.1. 运营+引导模式

　　增加功能与产品曝光， 使用占位图来提升用户愉悦度 。

　　T/CIDADS 00032—2026

　　图 36 运营+引导模式示意图

　　7.1.2. 单一入口模式

　　简洁入口， 聚焦操作， 适用于强操作和管理类产品， 引导用户快速开始唯一行动 。

　　图 37 单一入口模式示意图7.1.3. 引导模式

　　用户强操作流产品， 协助用户完成接入 。

　　T/CIDADS 00032—2026

　　图 38 引导模式

　　7.2. 列表页

　　7.2.1. 基础单表

　　包含标题， 操作， 文本搜索， 表格内容 。

　　图 39 基础单表示意图

　　7.2.2. 复杂筛选表

　　部分复杂筛选表， 增加标签等筛选项楼层 。 高级搜索可折叠 。

　　T/CIDADS 00032—2026

　　图 40 复杂筛选表示意图

　　7.2.3. 多表切换

　　表格的主体部分有多个维度的内容， 使用 Tab 页签切换 。

　　图 41 多表切换示意图

　　7.2.4. 局部表格

　　页面局部内容为表格， 可能与其他模块产生交互 。

　　T/CIDADS 00032—2026

　　图 42 局部表格示意图

　　7.2.5. 卡片表格

　　表格形式用卡片展示， 用于商品图片或照片等强呈现场景 。

　　图 43 卡片表格示意图

　　7.3. 详情页

　　7.3.1. 基本模式

　　包括标题模块 、基本信息 、详情信息 。

　　T/CIDADS 00032—2026

　　图 44 基本模式示意图

　　7.3.2. 复杂模式

　　全局 tab 切换+卡片内 tab 切换—+左右结构信息模块展示+卡片嵌套 。

　　图 45 复杂模式示意图

　　7.4. 信息填写类

　　7.4.1. 整页表单

　　对于较为复杂的信息填写，使用完整页面承载，包含面包屑与标题的部分。信息填写部分向左对齐，

　　T/CIDADS 00032—2026保持用户视觉中心竖直。

　　图 46 整页表单示意图

　　7.4.2. 分步式表单

　　对于需要填写较多信息，且信息有明显的前后顺序，依赖关系的场景，使用分步式表单填写，常用于创建等场景。

　　图 47 分步式表单示意图

　　7.4.3. 侧滑面板表单

　　T/CIDADS 00032—2026

　　对于较为复杂， 较多输入信息， 但是又不适合跳转编辑的场景， 可以使用侧滑面板侧滑面板。

　　图 48 侧滑面板 (slide panel) 表单示意图

　　7.4.4. 弹窗内表单

　　低复杂度表单场景， 建议使用弹框交互。

　　图 49 弹窗内表单示意图

　　7.5. 文档阅读

　　7.5.1. 纯文档展示

　　目录与正文左右排布， 目录悬浮跟随内容， 正文不应较长需要用户滚动鼠标导致目录不可见 。

　　T/CIDADS 00032—2026

　　图 50 纯文档展示示意图

　　7.5.2. 包含图片表格代码行等辅助信息

　　顶格左对齐 。表格或者代码行过长时展示全部，列表过宽时出现横向滚动条，视频和图片过大时控制高度在一屏以内 。

　　图 51 包含图片表格代码行等辅助信息示意图

　　T/CIDADS 00032—2026

　　7.6. 异常状态

　　7.6.1. 整页丢失与异常

　　包括403， 无权访问页面; 404， 访问的页面不存在; 500， 服务器出错等。

　　图 52 整页丢失与异常示意图

　　7.6.2. 区域信息异常或无权限

　　暂无数据; 暂无数据权限; 数据加载出错。

　　图 53 区域信息异常或无权限

　　T/CIDADS 00032—2026

　　参 考 文 献

　　[1] GB/T 18976以人为中心的交互系统设计过程

　　云计算 Saas产品界面设计规范