---
id: cloud-tencent-cloud-design-zh
service: Tencent Cloud
website: https://www.tencentcloud.com
category: cloud
document: DESIGN.MD
source_prompt: cloud-tencent-cloud-representative-zh
language: zh-CN
generated: 2026-07-18
---

# Tencent Cloud DESIGN.MD

> 在制作云基础设施网站或应用前，把本 DESIGN.MD 作为持续的设计标准。可直接交给设计师、前端工程师、AI 构建器或代码代理。Tencent Cloud 仅作为信息架构参考。

## 使用目的

- Tencent Cloud: https://www.tencentcloud.com
- 云基础设施: 部署与运营数字服务
- 资源、部署与用量
- 成本可见性、权限与可用性
- cloud

## 设计简报

设计一个支持部署与运营数字服务的独立产品，让用户能快速浏览、比较并操作资源、部署与用量，同时把成本可见性、权限与可用性作为首要设计约束。界面起点：运营控制台 · 分析性与精确 · 信息密度高 · 项目导航 -> 核心指标 -> 运营表格或日志 -> 响应操作 · #006EFF · Tencent Cloud。

## 公开界面设计分析

- 分析依据: 这些是公开首页和代表性任务流程中反复出现的视觉与结构模式。服务会持续更新，最终请以真实网站截图确认。
- 界面原型: 运营控制台
- 语气与风格: 分析性与精确
- 信息密度: 高
- 色彩策略: 深色表面上的高对比品牌重点 (#006EFF)
- 导航结构: 以侧边栏切换上下文
- 结构顺序: 项目导航 -> 核心指标 -> 运营表格或日志 -> 响应操作
- 可复用模式: 项目导航、关键指标、数据表或日志、状态筛选与响应操作
- 独立应用规则: 只参考顺序与决策原则，不复制标志、文案、图像、图标或专有页面构图。

## 页面结构

- 清晰显示当前位置、账户与系统状态的全局导航
- 让用户立刻看到资源、部署与用量下一步关键操作的概览
- 只在能降低决策成本时提供搜索、筛选、排序或分段视图
- 详情页同时保留上下文、状态、证据与主要操作
- 为成本可见性、权限与可用性持续提供帮助、恢复、隐私与安全入口

## 设计令牌

```css
:root {
  --color-primary: #006EFF;
  --color-ink: #17201D;
  --color-canvas: #F6F8F7;
  --color-surface: #FFFFFF;
  --color-tint: #006EFF22;
  --color-danger: #DC2626;
  --radius-control: 6px;
  --radius-card: 8px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --content-reading: 720px;
  --content-wide: 1280px;
}
```

## 组件规范

- 导航：当前、悬停、焦点、禁用与折叠状态
- 卡片与列表：稳定尺寸、真实内容、清晰元数据层级和完整点击区域
- 表单：标签、说明、校验、错误汇总、进度与恢复
- 操作：每个区域一个明确主操作；图标按钮必须有可访问名称和提示
- 反馈：行内状态、Toast、横幅、骨架、进度、确认与危险操作对话框

## 状态设计

为每个数据区域定义加载、空、部分数据、过期、错误、离线、无权限、禁用、保存中与成功状态。保持布局尺寸稳定，避免状态切换导致周围内容跳动。

## 响应式规则

- 360px：单主列、页面无横向滚动、触控目标至少 44px
- 768px：仅在两侧都可读时使用双栏以保留上下文
- 1280px 以上：限制阅读宽度，把额外空间用于比较或持续上下文
- 不要随视口缩放字号；长标签必须换行并支持翻译文本扩展

## 无障碍标准

- 语义化地标与正确标题层级
- 完整键盘操作与清晰可见的焦点
- 所有状态满足 WCAG AA 对比度
- 程序化标签、说明、错误与实时区域
- 验证 200% 缩放、减少动画、强制颜色与读屏

## 给 AI 构建器的设计指令

```text
为[产品名称]设计独立的云基础设施界面。目标是部署与运营数字服务，核心对象是资源、部署与用量，关键风险是成本可见性、权限与可用性。使用本文件中的令牌和页面规则，给出真实内容、组件契约、全部数据状态、响应式、无障碍与验收条件。不得复制 Tencent Cloud 的标志、专有文案、图片或精确布局。
```

## 完成清单

- [ ] 无需说明即可理解部署与运营数字服务的关键流程
- [ ] 资源、部署与用量具有清晰层级、状态与操作
- [ ] 已为成本可见性、权限与可用性设计预防与恢复
- [ ] 已验证手机、平板、桌面、键盘、读屏、缩放与减少动画
- [ ] 加载、空、错误、离线、部分数据、权限与成功状态完整
- [ ] 没有复制 Tencent Cloud 的受保护品牌素材或像素级布局