企业级规范

UI Design System
通用版 v2.1

一套克制、清晰、轻盈的移动端设计语言。
融合 HarmonyOS、iOS 与 Android 多端特性，提供像素级还原与流畅交互体验。

1. 设计原则 (Principles)

1.1 清晰 Clarity

信息层级一眼识别：
标题 > 模块 > 行标题 > 正文 > 注释。
文本对齐统一、节奏一致。

1.2 克制 Deference

UI 为内容服务。减少装饰，强调留白。颜色仅在交互、状态、重点时出现。

1.3 层次 Depth

使用卡片、透明度和柔和阴影建立层级。动效提供自然空间感，不追求炫技。

2.1 排版体系 (Typography)

2.1.1 字体栈 (强制统一)

注意： 本手册 v2.0 版本已移除所有非鸿蒙字体备选。

HarmonyOS Sans SC

2.1.2 字号等级表 (Design @2x)

📐 设计基准：750px 画布 🛠 开发换算：数值 ÷ 2 (逻辑像素)

Level	字号 / 行高 (@2x)	字重	预览 (缩放 50%)
Display	80 / 96	700	强主标题
H1	64 / 80	700	页面标题
H2	48 / 64	700	卡片标题
H3	36 / 52	600	模块小标题
Body	28 / 44	400	正文阅读体验 (CSS 14px)
Caption	24 / 36	400	辅助说明信息
Micro	22 / 32	400	标签/脚注 (Min 11px)

2.1.3 排版规则演示 (Typography Rules)

1. 对齐策略 Alignment

特殊：空状态/Footer 允许居中

2. 垂直间距 Spacing

标题 Title

Gap ≥ 24px

正文段落内容...

Gap 16px

下一段落内容...

3. 等宽数字 Tabular

NormalTabular-nums

111.1111.1

888.8888.8

数据展示必须对齐

2.1.4 文字落地规范详解 (Text Specs)

1. 行高设定 (Line Height)

Heading (Tight)

标题行高 1.25
@2x 系数

Body (Relaxed)

正文行高设定为 1.5~1.6 倍，确保多行文本阅读时的呼吸感与舒适度。

2. 信息层级 (Hierarchy)

Primary

标题 / 正文 / 强操作

Secondary

次要信息 / 说明文案

Tertiary

占位符 / 禁用 / 辅助标签

3. 通用规则 (General Rules)

最小字号： 移动端正文 @2x 推荐 28px (14px)，最小 Micro 字号不小于 22px (11px)。
字重选择： 标题推荐 600/700 (Semibold/Bold)，正文使用 400 (Regular)。
标点符号： 遵循“中全英半”原则，数字与单位之间保留 1/4 空格 (或紧贴)。
数字字体： 在表格、价格、倒计时场景必须强制开启 tabular-nums。

2.2 颜色体系 (Color System)

双模式适配 (Dual Versions)

本规范所有 Color Token 均包含 Light / Dark 两套映射值。
当前页面支持实时切换，点击右下角浮窗按钮即可预览深色模式效果。

BG/Canvas

#F5F5F7#000000

页面背景

BG/Card

#FFFFFF#1C1C1E

卡片背景

BG/Subtle

#F5F5F7#2C2C2E

子容器

Text/Pri

#1D1D1F#F5F5F7

主文本

Text/Sec

#86868B#86868B

次级文本

Divider

#000 6%#FFF 12%

分割线

Blue

#0071E3#0A84FF

主操作

Red

#FF3B30#FF453A

错误/危险

Green

#34C759#30D158

成功

Orange

#FF9500#FF9F0A

提醒

2.2.2 语义色彩应用演示 (Semantic Colors)

展示颜色 Token 在实际组件中的组合方式，推荐使用 Alpha 变体作为背景。

状态反馈 (Status)

✓操作成功 Success

✕连接失败 Error

!账户待认证 Warning

品牌与强调 (Brand)

了解更多 >

选中项

2.2.3 颜色使用边界演示 (Color Usage)

1. 交互语义 (Interaction)

标题 Title保存

√ 正确：蓝色仅用于可点击操作

纯展示标题详细

× 错误：不可点击内容误用蓝色

2. 状态双重编码 (Status)

网络连接断开

√ 正确：颜色 + 图标/文字双重提示

Item 01

× 错误：仅靠颜色区分状态 (色盲不友好)

2.3 间距与布局 (Spacing)

Token	值 (px @2x)	说明
CanvasWidth	750	设计稿基准
SafePadding	24	页面左右安全边距
CardPadding	40	卡片内边距
GapL	40	模块间距
GapM	24	内容块间距
Divider	1	分割线宽度

2.3.1 间距可视化演示 (Visual Spacing)

通过颜色块直观展示页面边距与组件间距。

Safe 24

Gap M (24px)

Gap L (40px)

2.3.2 垂直节奏演示 (Vertical Rhythm)

使用统一的间距变量建立页面韵律感。

Page Title

32px (Header to Card)

24px (Title to Content)

24px (Block to Block)

40px (Card to Card)

2.4 / 2.5 圆角与阴影 (Radius / Shadow)

2.4 圆角 (Radius)

Radius L

Card / Sheet

Radius M

Dialog / Inner

Radius S

Button / Input

2.5 阴影 (Shadow)

Shadow Soft (Card)

Shadow Float (Sticky)

2.4/2.5 落地规范 (Specs)

圆角策略 (Radius Strategy)

Radius L (32px)： 用于页面级卡片、Bottom Sheet 顶部圆角。
Radius M (24px)： 用于弹窗、次级容器、大图。
Radius S (16px)： 用于按钮、输入框、Toast、Tag。
同心圆原则： 内层圆角 = 外层圆角 - Padding (如不满足则视觉协调即可)。

阴影层级 (Shadow Depth)

Level	Y / Blur	Opacity
Soft	Y=8 / B=24	4% (Black)
Float	Y=20 / B=50	8% (Black)

* 深色模式下阴影不透明度需加倍或使用纯黑背景区分层级。

2.6 动效演示 (Motion)

Object

Bottom Sheet

3.1 按钮 (Buttons)

3.1.1 主按钮 (Primary / L/M/S)

3.1.2 变体 (Variants)

3.1.3 规则 (Rules)

文案建议 ≤ 8 个中文字符；Icon 与文字间距 12px；按钮间距 16px（横排）或 24px（竖排）。

3.2 / 3.3 卡片与列表 (Card / List)

3.4 表格 (Table)

3.4.1 商城订单/商品列表 (Retail)

商品名称 Product	状态 Status	价格 Price
无线降噪耳机 Pro 曜石黑 / 30小时续航	热销中	¥ 1,299.00
男士透气缓震跑步鞋 42码 / 荧光绿 / 夏季款	有货	¥ 599.00
智能运动手表 S9 45mm / 午夜色铝金属	暂时缺货	--

3.4.2 视觉规范详解 (Visual Specs)

1. 对齐规则 (Alignment)

TEXT: LEFT

NUMBER: RIGHT

• 文本信息左对齐，符合阅读习惯
• 金额/数值右对齐，便于个十百位比对

2. 分割线逻辑 (Divider)

有分割线 (Indent)

无分割线 (Last)

• 中间行：左缩进对齐文字，右侧通栏
• 最后一行：不画分割线，保持卡片底部纯净

3.5 / 3.6 输入与表单 (Input / Form)

用户名 (Form Label)

错误状态

请输入有效的邮箱地址 (Error Hint)

3.5.1 表单规范 (Form Specs)

Label: H3 / 行间距 GapM=24px / 错误提示与控件间距 12px

3.7 弹窗 (Dialog / Modal)

3.7.1 弹窗示例 (Dialog Demo)

宽度：内容宽度 - 48px (SafePadding*2) / 圆角：Radius/L / 阴影：Shadow/Float

标题 H2

正文内容说明...

确认

3.7.2 设计规范 (Design Specs)

尺寸与布局 (Layout)

宽度：内容宽度 - 48px（SafePadding*2）；最大宽度建议 560px（桌面端居中）。
内边距：24px~32px（示例为 24px），标题与正文间距 8px~12px。
按钮区：底部独立分区，顶部用分割线/留白分隔，触控热区 ≥ 44px。

层级与视觉 (Visual)

圆角：Radius L（建议 24~32px）；与页面卡片保持一致。
阴影：使用 Shadow/Float（深色模式建议更依赖背景对比而非强阴影）。
遮罩：Scrim 30%~50%（浅色），深色可适当降低并配合 blur。

交互与动效 (Motion)

进入：300ms（opacity + translateY），使用 spring/ease-out，避免生硬。
关闭：200~300ms；支持点击遮罩关闭（可配置）。
键盘：Esc 关闭（本页已支持），焦点回到触发按钮。

3.8 综合组件演示 (General Components)

3.8.1 徽标与轻提示 (Badge & Toast)

Toast: 2s 自动消失

3.8.2 标签 (Tag)

标签 Tag

3.8.3 骨架屏 (Skeleton)

微光扫描 Shimmer (1200ms)

3.8.4 组件落地规范 (Specs)

以下为 3.8.1~3.8.3 的单项规范（避免与 Web 组件混淆），并保留现有汇总说明。

3.8.1 Badge / Toast 规范

Badge（数字）： 高 32px(@2x)，圆角 16px；左右内边距 12px(@2x)；建议 1~2 位数字，超过用 99+。
Badge（红点）： 直径 16px(@2x)；优先贴右上角，距离边缘 8px(@2x)。
颜色： 使用 Status/Red（如 --status-red），避免自定义红色值造成多套红不一致。
Toast： 圆角 14px~16px；内边距 10/14（示例）；展示时长 1.5s~3s，默认 2s；多行最多 2 行并截断。

3.8.2 Tag 规范

尺寸： 高度建议 32px(@2x)；左右内边距 12px(@2x)；圆角 10px~12px。
颜色： 背景使用品牌色 Tint（8%~12% 透明度），文字使用品牌色（如 --accent-blue）。
文案： 单行显示，超长省略；避免把 Tag 当按钮使用（可点击需另有交互态）。

3.8.3 Skeleton 规范

圆角： 与真实内容形态一致（文本条 6~8px；图片 10~16px；卡片跟随外层圆角）。
动效： Shimmer 周期 1200ms（示例）；浅色模式高光透明度约 50%，深色模式降低对比以免“闪”。
策略： 加载时间 < 300ms 可不显示；超过 300ms 显示骨架，内容到达后淡出替换。

1. 状态反馈 (Badge/Toast)

Badge： 红点直径 16px (@2x)，数字高度 32px，圆角 16px。背景色 #FF3B30。
Toast： 黑色半透明背景 (Alpha 90%)，居中显示，展示时长建议 1.5s - 3s。

2. 标签与加载 (Tag/Skeleton)

Tag： 背景色使用主题色的 10% 透明度 (Tint)，字号 22px (@2x)。
Skeleton： 基础背景色 #F5F5F7，高光条透明度 50%，动画周期 1.2s linear infinite。

3.9 / 3.12 导航与页面组件 (Tabs / Nav)

3.9 底部导航 (Tabs)

基础高度：88px + SafeAreaBottom

●
Home

○
Me

Specs

高度：88px(@2x) + SafeAreaBottom；内容区建议 56px(@2x)，底部安全区为系统 inset。
图标/文字与状态：Icon 24x24（或 48x48@2x）；Caption 12px~13px；选中态使用 --accent-blue，未选中态使用 --text-tertiary。
触控热区：每个 Tab 的可点击区域 ≥ 44x44（CSS），建议整列可点。
徽标/背景：角标靠右上，超过两位用 99+；背景可用 --bg-glass + blur，顶部 1px 分割线使用 --line-divider。

3.10 导航栏 (Navigation)

包含顶部导航栏（Top Bar）与底部导航栏（Bottom Bar），用于页面切换与关键操作入口。

‹ 返回标题 Title 编辑

●
Home

○
List

○
Me

Top Bar: 高 96px+Status，标题 H2，操作 Tertiary。
Bottom Bar: 高 112px（含安全区）。

3.11 搜索栏 (Search Bar)

Apple Store 常见组件：用于内容检索与筛选入口。

⌕ 搜索商品 / 订单 / Token

取消

Specs

高度：44px（触控热区 ≥ 44px）
圆角：Radius S~M（推荐 12~16px）
内边距：左右 12~16px；Icon 与文字间距 8~10px
文案：Placeholder 使用 Tertiary 色；“取消”使用品牌色

3.12 空状态 (Empty State)

📦

暂无数据

内容居中，位于页面上方 1/3

4. 交互与状态 (Interaction)

4.1 按压反馈 (Pressed)

点击/按住我 (Touch Me)

普通按压：黑色 6% Overlay

选中按压：蓝色 12% Overlay

4.2 选中状态 (Selected)

选项 A (Normal)

选项 B (Selected)

✓

背景：Brand Color 8-10% Opacity
文本：Brand Color (Primary)

4.3 交互规范说明 (Interaction Specs)

按压反馈 (Feedback)： 必须即时响应。列表项/卡片使用 Overlay 遮罩，按钮使用 Opacity 或 Scale 缩放。
避免误导： 不要对仅展示信息的文字/标题添加点击反馈。
选中样式： 选中态应具备高辨识度，建议同时改变 "背景色 + 文字色 + 图标状态" (三维提示)。

5. 深色模式 (Dark Mode)

5.1 光暗对比演示 (Light vs Dark)

深色模式不仅是简单的反色，而是基于层级的重绘。

Light Mode

卡片标题

背景色 #F5F5F7
卡片色 #FFFFFF

列表项详细 >

Dark Mode

卡片标题

背景色 #000000
卡片色 #1C1C1E

列表项详细 >

5.2 适配规范 (Specs)

层级与背景 (Elevation)

Page： 纯黑 #000000 (省电/沉浸)。
Card： 深灰 #1C1C1E (区别于背景)。
Modal： 更亮 #2C2C2E (提升层级)。

文字与色彩 (Colors)

文字： 避免纯白，使用 #F5F5F7 (Primary)。
彩字： 适当提升亮度，避免在深色背景下显得暗沉。
分割线： 透明度降低，使用 rgba(255,255,255,0.1)。

6. 交付与协作 (Handoff)

6.1 研发还原对照表 (Spec vs Code)

交付不仅仅是设计稿，而是设计意图到代码语言的翻译。

DESIGN FILE

确认提交

H: 44px (Min 44)
R: 12px (Radius-S)
C: #0071e3 (Blue)

CSS / CODE

.btn-primary
 {
  height: 44px;
  background: var(--accent-blue);
  border-radius: var(--radius-s);
  color: var(--text-inverse);
}

6.2 交付规则 (Rules)

1. 资源导出

图标 (Icons)： 必须使用 SVG 格式，去除无用编组，保持 Viewbox 正方形 (24x24)。
位图 (Images)： 提供 @2x 和 @3x 格式，压缩后交付 (WebP 优先)。

2. 标注语言

拒绝硬编码： 标注时使用 Token 名称 (如 Gap-M) 而非像素值 (24px)。
逻辑说明： 需备注空状态、加载态、超长文本截断方式及最大宽度。

7. 变量字典 (Design Tokens)

7.1 语义化映射逻辑 (Semantic Mapping)

Token 是设计与开发的通用语言，分为“基础层”与“语义层”。

Token Name (变量名)	Value (原始值)	Description (语义/用途)
`--accent-blue`	#0071E3	Global: 品牌主色，用于按钮、高亮文本
`--bg-canvas`	#F5F5F7	Semantic: 页面底层背景 (浅灰)
`--radius-l`	32px	Spacing: 大圆角，用于卡片容器、弹窗
`--radius-s`	16px	Spacing: 小圆角，用于按钮、输入框

7.2 JSON 配置文件示例

{
  "global": { "font": "HarmonyOS Sans SC", "base-unit": 4 },
  "colors": {
    "primary": { "value": "#0071e3", "desc": "Brand Blue" },
    "success": { "value": "#34C759", "desc": "Status Green" },
    "warning": { "value": "#FF9500", "desc": "Status Orange" },
    "danger":  { "value": "#FF3B30", "desc": "Status Red" }
  },
  "spacing": {
    "gap-s": { "value": "16px", "desc": "Compact Gap" },
    "gap-m": { "value": "24px", "desc": "Standard Gap" },
    "gap-l": { "value": "40px", "desc": "Section Gap" }
  }
}

UI Design System通用版 v2.1

联系我 Contact

1. 设计原则 (Principles)

1.1 清晰 Clarity

1.2 克制 Deference

1.3 层次 Depth

2.1 排版体系 (Typography)

2.1.1 字体栈 (强制统一)

2.1.2 字号等级表 (Design @2x)

2.1.3 排版规则演示 (Typography Rules)

1. 对齐策略 Alignment

2. 垂直间距 Spacing

3. 等宽数字 Tabular

2.1.4 文字落地规范详解 (Text Specs)

1. 行高设定 (Line Height)

2. 信息层级 (Hierarchy)

3. 通用规则 (General Rules)

2.2 颜色体系 (Color System)

双模式适配 (Dual Versions)

2.2.2 语义色彩应用演示 (Semantic Colors)

状态反馈 (Status)

品牌与强调 (Brand)

2.2.3 颜色使用边界演示 (Color Usage)

2.3 间距与布局 (Spacing)

2.3.1 间距可视化演示 (Visual Spacing)

2.3.2 垂直节奏演示 (Vertical Rhythm)

2.4 / 2.5 圆角与阴影 (Radius / Shadow)

2.4 圆角 (Radius)

2.5 阴影 (Shadow)

2.4/2.5 落地规范 (Specs)

圆角策略 (Radius Strategy)

阴影层级 (Shadow Depth)

2.6 动效演示 (Motion)

2.7 可访问性演示 (Accessibility)

2.7.1 触控热区 (Touch Target)

2.7.2 阅读对比度 (Contrast)

2.7.3 可访问性落地规范 (Accessibility Specs)

1. 视觉与交互 (Visual)

2. 辅助技术 (Assistive)

3.1 按钮 (Buttons)

3.1.1 主按钮 (Primary / L/M/S)

3.1.2 变体 (Variants)

3.1.3 规则 (Rules)

3.2 / 3.3 卡片与列表 (Card / List)

猜你喜欢

设计规范 (Design Specs)

1. 卡片容器 (Card)

2. 列表项 (List Item)

3.4 表格 (Table)

3.4.1 商城订单/商品列表 (Retail)

3.4.2 视觉规范详解 (Visual Specs)

1. 对齐规则 (Alignment)

2. 分割线逻辑 (Divider)

3.5 / 3.6 输入与表单 (Input / Form)

3.5.1 表单规范 (Form Specs)

3.7 弹窗 (Dialog / Modal)

3.7.1 弹窗示例 (Dialog Demo)

3.7.2 设计规范 (Design Specs)

尺寸与布局 (Layout)

层级与视觉 (Visual)

交互与动效 (Motion)

3.8 综合组件演示 (General Components)

3.8.1 徽标与轻提示 (Badge & Toast)

3.8.2 标签 (Tag)

3.8.3 骨架屏 (Skeleton)

3.8.4 组件落地规范 (Specs)

3.8.1 Badge / Toast 规范

3.8.2 Tag 规范

3.8.3 Skeleton 规范

1. 状态反馈 (Badge/Toast)

2. 标签与加载 (Tag/Skeleton)

3.9 / 3.12 导航与页面组件 (Tabs / Nav)

3.9 底部导航 (Tabs)

Specs

3.10 导航栏 (Navigation)

3.11 搜索栏 (Search Bar)

Specs

3.12 空状态 (Empty State)

4. 交互与状态 (Interaction)

4.1 按压反馈 (Pressed)

UI Design System
通用版 v2.1