xiaoyu/txw

Fork 0

liulujian 362a9a3d4c style: 调整首页样式

2026-04-10 13:27:01 +08:00

20 KiB

Raw Blame History

可信碳信息网 UI/UX 设计规范手册 V1.0

生效日期：202X年X月X日 适用范围：可信碳信息网全平台（Web端、响应式移动端）所有页面、组件、交互设计 核心目标：统一设计语言、提升专业质感、优化用户体验、强化品牌认知，解决原界面“粗糙、混乱、无层级”问题

一、设计总则

1.1 产品定位与核心调性

产品定位：面向政企、双碳领域企业的国家级可信碳信息服务平台，核心提供碳数字身份证、碳链上链、绿色服务等专业服务
核心调性：专业可信、科技感、绿色低碳、严谨权威，拒绝花哨、廉价、违和的视觉元素
用户群体：政企管理人员、企业碳管理专员、双碳领域从业者，核心需求是高效、清晰、可信的服务体验

1.2 核心设计原则

一致性原则：全平台色彩、字体、组件、交互100%统一，杜绝样式混用
层级清晰原则：通过字号、字重、色彩、间距明确信息主次，核心操作一眼可见
状态可见原则：所有交互元素必须有完整的状态反馈（默认/hover/点击/禁用）
极简专业原则：用最少的元素传递最清晰的信息，拒绝冗余装饰、违和背景
无障碍原则：符合WCAG 2.1 AA标准，色彩对比度≥4.5:1，支持键盘导航

1.3 规范落地要求

所有设计师必须严格遵循本规范，禁止私自修改样式、色值、组件逻辑
新增组件/样式必须提交规范评审，更新后同步全团队
开发必须1:1还原设计规范，禁止前端私自调整样式

二、色彩系统规范

2.1 主色系统（品牌色，双碳主题）

色号	HEX	RGB	使用场景
主色-深绿（品牌主色）	`#00A870`	`rgb(0, 168, 112)`	主按钮、核心图标、标题强调、品牌LOGO、分割线、选中态
主色-浅绿（辅助主色）	`#81C784`	`rgb(129, 199, 132)`	标签、次要按钮、背景高亮、卡片标题栏

2.2 辅助色系统（科技感补充）

色号	HEX	RGB	使用场景
辅助色-科技蓝	`#2196F3`	`rgb(33, 150, 243)`	次要操作按钮、信息提示、链接、图表强调
辅助色-浅蓝	`#BBDEFB`	`rgb(187, 222, 251)`	背景、标签、hover态高亮

2.3 中性色系统（全平台通用，保证可读性）

阶数	HEX	RGB	使用场景
01（纯白）	`#FFFFFF`	`rgb(255, 255, 255)`	页面背景、卡片背景
02（浅灰1）	`#F5F7FA`	`rgb(245, 247, 250)`	页面次级背景、列表hover态
03（浅灰2）	`#E5E6EB`	`rgb(229, 230, 235)`	分割线、输入框边框、禁用态背景
04（中灰1）	`#C9CDD4`	`rgb(201, 205, 212)`	次要文字、图标、占位符
05（中灰2）	`#86909C`	`rgb(134, 144, 156)`	辅助文字、说明文字
06（深灰1）	`#4E5969`	`rgb(78, 89, 105)`	正文文字
07（深灰2）	`#1D2129`	`rgb(29, 33, 41)`	标题文字、重点内容
08（纯黑）	`#000000`	`rgb(0, 0, 0)`	仅用于特殊强调，禁止大面积使用

2.4 功能色系统（状态提示，B端必备）

状态	HEX	RGB	使用场景
成功色	`#00B42A`	`rgb(0, 180, 42)`	成功提示、完成状态、正向操作
警告色	`#FF7D00`	`rgb(255, 125, 0)`	警告提示、待处理状态
错误色	`#F53F3F`	`rgb(245, 63, 63)`	错误提示、删除操作、异常状态
信息色	`#168CFF`	`rgb(22, 140, 255)`	信息提示、通知、帮助

2.5 色彩使用禁忌

❌ 禁止在主按钮中混用蓝色、其他绿色，主操作必须使用主色深绿
❌ 禁止使用超过规范外的自定义色值，全平台仅可使用本规范定义的颜色
❌ 禁止使用高饱和度、刺眼的颜色，保证视觉舒适度
❌ 禁止在文字与背景间使用低对比度配色，必须符合WCAG对比度要求

三、字体系统规范

3.1 字体选型（跨平台一致，Web安全）

中文首选：思源黑体 (Source Han Sans SC)

系统 fallback 字体栈：

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

字重规范：仅使用 400(Regular)、500(Medium)、700(Bold) 三个字重，禁止使用其他字重

3.2 字体层级规范（桌面端Web）

层级	字号(px)	字重	行高(px/倍数)	颜色	使用场景
H1 一级标题	36	700	44 / 1.2	`#1D2129`	页面大标题（如「可信碳信息网」）
H2 二级标题	28	700	36 / 1.3	`#1D2129`	模块大标题（如「核心驱动」「共性能力」）
H3 三级标题	20	500	28 / 1.4	`#4E5969`	卡片标题、功能入口标题
正文	16	400	24 / 1.5	`#4E5969`	描述文字、政策列表、说明内容
辅助文字	14	400	22 / 1.5	`#86909C`	小字说明、标签、版权信息
迷你文字	12	400	18 / 1.5	`#86909C`	角标、提示、次要信息

3.3 移动端字体层级（响应式适配）

层级	字号(px)	字重	行高(倍数)	使用场景
H1	28	700	1.2	页面大标题
H2	24	700	1.3	模块标题
H3	18	500	1.4	卡片标题
正文	14	400	1.5	正文内容
辅助文字	12	400	1.5	辅助说明

3.4 行高、字间距规范

行高计算：标题行高=字号×1.2-1.3，正文行高=字号×1.5，辅助文字行高=字号×1.5
字间距：仅标题可使用0-0.5px字间距，正文/辅助文字字间距为0，禁止自定义字间距
中英文混排：英文/数字使用同一款无衬线字体，字号与中文一致，行高统一

3.5 字体使用禁忌

❌ 禁止使用宋体、楷体等非无衬线字体，保证科技感与可读性
❌ 禁止随意调整字号、字重，必须严格遵循层级规范
❌ 禁止在正文中使用700字重，仅标题可使用粗体
❌ 禁止使用小于12px的字号，保证移动端可读性

四、图标系统规范

4.1 图标风格定义（统一线性风格，解决原界面割裂问题）

风格：线性轻量图标，2px统一描边，圆角端点，圆角转角，视觉重量完全一致
造型：简约、识别性强，符合B端专业感，禁止使用2.5D、面性、卡通风格图标
色彩：默认使用中性色#86909C，hover/选中态使用主色#00A870

4.2 图标尺寸规范（全平台统一）

尺寸(px)	使用场景
16×16	按钮内图标、列表内图标、标签内图标
20×20	导航图标、功能入口图标
24×24	核心模块图标、首页核心驱动图标
32×32	大功能入口、banner图标

4.3 图标分类与使用场景

功能图标：用于操作、导航（如搜索、返回、提交），统一线性风格
业务图标：用于碳核算、碳交易、碳金融等业务模块，统一线性风格，与功能图标视觉一致
装饰图标：仅用于页面点缀，禁止干扰核心操作，使用低透明度主色/辅助色

4.4 图标交付规范

格式：SVG矢量格式，保证无限放大不失真
命名规范：icon_功能_场景.svg（如icon_search_nav.svg）
交付要求：图标必须居中对齐，描边统一2px，无多余路径，可直接用于前端开发

4.5 图标使用禁忌

❌ 禁止混用线性、面性、2.5D等不同风格图标
❌ 禁止私自修改图标描边粗细、造型，必须使用统一规范的图标库
❌ 禁止使用与业务无关、辨识度低的图标
❌ 禁止在图标中使用多种颜色，仅可使用单色（默认灰/选中主色）

五、布局与栅格系统规范

5.1 栅格系统定义（12列栅格，Web端标准）

最大内容宽度：1200px（桌面端）
列数：12列
水槽(Gutter)：24px（列与列之间的间距）
边距(Margin)：左右各24px（页面安全区，适配不同屏幕）
计算公式：列宽 = (1200 - 24×2 - 24×11) / 12 = 72px

5.2 响应式断点规范

断点	屏幕宽度	布局模式	栅格列数
桌面端	≥1200px	三列/两列布局	12列
平板端	768px - 1199px	两列布局	12列，水槽16px
移动端	<768px	单列布局	4列，水槽12px，边距16px

5.3 留白与间距规范（解决原界面拥挤问题）

间距类型	数值(px)	使用场景
模块间距	48	页面大模块之间的间距（如首屏与核心驱动、核心驱动与共性能力）
卡片内边距	24	卡片内部内容与卡片边框的间距
组件间距	16	卡片内按钮、输入框、列表项之间的间距
文字行间距	遵循字体层级规范	文字行与行之间的间距
按钮内边距	上下12px，左右24px	按钮内部文字与按钮边框的间距

5.4 页面布局模板（首页专属，解决原界面层级混乱）

页面区域	布局要求	核心内容
首屏（首屏黄金区）	全屏宽度，突出核心价值	导航栏+搜索栏+核心服务入口（碳数字身份证、国家可信碳链、绿色服务）+「建立您的碳数字身份」核心banner
第二屏	12列栅格，4列等分	核心驱动模块（4个能力，统一卡片样式）
第三屏	12列栅格，4+4+4等分	共性能力（4列）+企业出海（4列）+行业动态（4列），突出共性能力
页脚	全屏宽度，纯色背景	指导单位、运营单位、联系我们、版权信息

5.5 对齐规范

所有内容左对齐（标题可居中，正文/列表必须左对齐）
所有元素必须像素级对齐，禁止出现偏移、不对齐的情况
卡片、按钮、输入框必须居中对齐栅格线

六、核心组件规范（1:1落地，解决原界面组件混乱）

6.1 按钮组件（Button，全平台统一）

按钮类型与样式

按钮类型	背景色	文字色	边框	圆角	阴影	使用场景
主按钮（Primary）	`#00A870`	`#FFFFFF`	无	8px	`0 2px 8px rgba(0,0,0,0.1)`	核心操作（如「申请服务」「搜索」「提交」）
次按钮（Secondary）	`#FFFFFF`	`#00A870`	1px `#00A870`	8px	无	次要操作（如「办证指南」「查证查询」）
文字按钮（Text）	透明	`#00A870`	无	0	无	链接、次要操作、弹窗按钮
图标按钮（Icon）	透明	`#86909C`	无	8px	无	导航、操作栏图标

按钮状态规范（必须完整实现）

状态	样式变化
默认态	遵循基础样式
Hover态	主按钮：背景色`#00905F`，阴影加深；次按钮：背景色`#F5F7FA`
点击态	主按钮：背景色`#007A4D`；次按钮：背景色`#E5E6EB`
禁用态	主按钮：背景色`#C9CDD4`，文字色`#86909C`，不可点击

按钮尺寸规范

尺寸	高度(px)	字号(px)	内边距	使用场景
大按钮	48	16	上下12px，左右32px	核心操作、banner按钮
中按钮	40	14	上下10px，左右24px	卡片内操作、列表操作
小按钮	32	12	上下8px，左右16px	标签、迷你操作

按钮使用禁忌

❌ 禁止在主操作中使用次按钮、文字按钮，核心操作必须用主按钮
❌ 禁止混用圆角，所有按钮统一8px圆角
❌ 禁止自定义按钮样式，必须严格遵循规范

6.2 卡片组件（Card，全平台统一，解决原界面卡片粗糙问题）

卡片样式规范

属性	规范值
背景色	`#FFFFFF`
圆角	12px（大卡片）/8px（小卡片）
阴影	`0 2px 8px rgba(0,0,0,0.08)`
内边距	24px
边框	无（仅特殊场景可加1px `#E5E6EB`边框）

卡片状态规范

状态	样式变化
默认态	基础样式
Hover态	阴影`0 4px 16px rgba(0,0,0,0.12)`，卡片上浮2px
选中态	边框1px `#00A870`，阴影`0 4px 16px rgba(0,168,112,0.15)`

卡片使用场景

大卡片：模块容器（如碳数字身份证、核心驱动、共性能力）
小卡片：列表项、功能入口、政策条目

6.3 输入框组件（Input，含搜索框）

样式规范

属性	规范值
高度	40px（中）/48px（大，搜索框）
圆角	8px
边框	1px `#E5E6EB`
背景色	`#FFFFFF`
内边距	左右16px
字体	16px（大）/14px（中），字重400，颜色`#1D2129`

状态规范

状态	样式变化
默认态	基础样式
Focus态	边框1px `#00A870`，阴影`0 0 0 2px rgba(0,168,112,0.2)`
Hover态	边框1px `#C9CDD4`
禁用态	背景`#F5F7FA`，边框`#E5E6EB`，文字`#86909C`
错误态	边框1px `#F53F3F`，阴影`0 0 0 2px rgba(245,63,63,0.2)`

搜索框专属规范

高度48px，圆角8px，左侧加搜索图标（16×16，#86909C）
右侧主按钮（大按钮样式），与输入框组合，圆角统一8px

6.4 其他核心组件规范（精简版，完整规范可补充）

导航组件

顶部导航栏高度：64px，背景#FFFFFF，阴影0 2px 8px rgba(0,0,0,0.08)
导航项字号16px，字重500，默认#4E5969，hover/选中#00A870
移动端导航折叠为汉堡菜单，点击展开

列表组件

列表项高度：48px，内边距左右24px
背景#FFFFFF，hover态#F5F7FA
分割线：1px #E5E6EB，仅列表项之间添加

标签组件（Tag）

高度：32px，圆角16px
背景#E8F5E9，文字#00A870，字号14px
内边距：左右12px，上下6px

七、交互体验规范

7.1 页面交互规范

页面滚动：平滑滚动，模块进入视口时添加淡入动效（时长300ms，缓动函数ease-out）
页面加载：首屏加载骨架屏，数据加载完成后淡入内容
页面跳转：淡入淡出过渡，时长200ms，避免生硬跳转

7.2 组件交互状态规范

所有可点击元素（按钮、卡片、链接、列表项）必须有完整的4种状态：默认/hover/点击/禁用
所有表单元素必须有focus状态反馈
所有操作必须有加载状态（按钮loading、骨架屏、进度条）

7.3 反馈机制规范

操作反馈：点击按钮后100ms内给出视觉反馈（按钮变色、loading）
结果反馈：操作成功/失败后弹出Toast提示（时长3s，自动消失）
错误反馈：表单错误时实时提示，红色文字+错误态输入框
加载反馈：所有异步操作必须显示加载状态，禁止空白等待

7.4 无障碍设计规范

色彩对比度≥4.5:1（文字与背景）
支持键盘导航（Tab切换、Enter确认、Esc关闭）
所有图标、图片必须添加alt文本
所有交互元素可被屏幕阅读器识别

八、品牌与视觉规范（解决原界面违和问题）

8.1 LOGO规范

LOGO设计建议：以「碳」「链」「可信」为核心元素，主色#00A870，简约线性风格
最小尺寸：24px（移动端）/32px（桌面端）
安全区：LOGO周围必须保留≥LOGO宽度1/4的空白，禁止其他元素侵入
使用场景：页面左上角、导航栏、页脚、物料设计

8.2 页面背景规范（核心优化，解决原界面粗糙问题）

禁止使用：山水、风车、螺旋、渐变炫彩等违和、廉价的背景素材
规范背景：
1. 页面主背景：#F5F7FA（浅灰1），纯色，无装饰
2. 首屏背景：低透明度抽象区块链/碳元素纹理（主色#00A870，透明度5%），不抢内容
3. 卡片背景：纯白#FFFFFF，禁止添加背景图
Banner背景：简约渐变（主色浅绿到浅蓝，透明度10%），无多余装饰

8.3 内容与图片规范

图片风格：专业、简约、科技感，禁止使用卡通、花哨的图片
图片格式：WebP格式，压缩后体积≤200KB，保证加载速度
图片尺寸：首页banner 1920×500px，卡片配图 80×80px（方形）
数据可视化：图表使用主色+辅助色，统一字体、线条样式，背景纯白，无多余装饰

九、响应式适配规范

9.1 断点适配规则

断点	布局调整
桌面端(≥1200px)	12列栅格，三列布局，完整展示所有模块
平板端(768-1199px)	12列栅格，两列布局，合并次要模块，突出核心操作
移动端(<768px)	4列栅格，单列布局，折叠导航，模块垂直排列，按钮放大至48px

9.2 组件适配规范

按钮：移动端统一使用大按钮（48px高），点击区域≥48×48px
卡片：移动端内边距调整为16px，圆角8px
字体：遵循移动端字体层级规范，缩小字号，保证可读性
导航：移动端折叠为汉堡菜单，点击展开全屏导航

9.3 移动端交互优化

所有可点击元素点击区域≥48×48px，避免误触
表单输入框高度≥48px，适配移动端输入
禁止使用hover态，仅保留点击态反馈
页面滚动流畅，无卡顿、错位

十、落地验收检查清单（设计师/开发必查）

10.1 设计验收清单

所有色值严格遵循色彩规范，无自定义颜色
所有字体、字号、字重、行高符合字体规范
所有图标风格统一，尺寸规范，无混用
所有组件样式、状态完整，符合组件规范
页面布局、间距、留白符合栅格与间距规范
无违和背景、冗余装饰，符合品牌调性
响应式适配完整，移动端布局正常
色彩对比度符合WCAG 2.1 AA标准
交互状态完整，所有可点击元素有反馈

10.2 开发验收清单

1:1还原设计样式，无私自调整
所有组件状态完整实现
响应式适配正常，无错位、样式错乱
页面加载速度符合要求，无卡顿
无障碍功能正常实现

十一、规范版本管理

当前版本：V1.0（202X年X月X日生效）
迭代规则：每3个月迭代一次，根据用户反馈、业务需求更新规范
变更流程：所有变更必须提交评审，通过后同步全团队，更新版本号
文档管理：规范文档统一存储在团队知识库，设计师/开发必须使用最新版本

附：原界面问题针对性优化对照表

原界面问题	规范解决方案
按钮混用绿/蓝，样式混乱	明确主/次按钮样式，主操作用主色绿，禁止混用
图标风格割裂，造型粗糙	统一线性2px描边图标，规范尺寸与使用场景
背景违和（山水、螺旋），廉价感	禁止使用此类背景，规范为简约科技感纯色/低透明度纹理
信息层级混乱，无主次	建立字体层级、栅格布局，明确页面视觉流，突出核心操作
卡片样式不统一，无质感	统一卡片圆角、阴影、内边距，添加hover态
留白不足，页面拥挤	规范模块间距、内边距，增加呼吸感
交互状态缺失，体验生硬	补全所有组件的4种状态，添加反馈机制

📌 设计师落地说明

本规范为强制落地标准，所有设计必须严格遵循，禁止私自修改
如需新增组件/样式，必须提交规范评审，更新后再落地
交付设计稿时，必须标注所有色值、字号、间距，方便开发还原
可基于本规范生成组件库（如Figma组件库），提升设计效率

20 KiB Raw Blame History Unescape Escape

可信碳信息网 UI/UX 设计规范手册 V1.0

一、设计总则

1.1 产品定位与核心调性

1.2 核心设计原则

1.3 规范落地要求

二、色彩系统规范

2.1 主色系统（品牌色，双碳主题）

2.2 辅助色系统（科技感补充）

2.3 中性色系统（全平台通用，保证可读性）

2.4 功能色系统（状态提示，B端必备）

2.5 色彩使用禁忌

三、字体系统规范

3.1 字体选型（跨平台一致，Web安全）

3.2 字体层级规范（桌面端Web）

3.3 移动端字体层级（响应式适配）

3.4 行高、字间距规范

3.5 字体使用禁忌

四、图标系统规范

4.1 图标风格定义（统一线性风格，解决原界面割裂问题）

4.2 图标尺寸规范（全平台统一）

4.3 图标分类与使用场景

4.4 图标交付规范

4.5 图标使用禁忌

五、布局与栅格系统规范

5.1 栅格系统定义（12列栅格，Web端标准）

5.2 响应式断点规范

5.3 留白与间距规范（解决原界面拥挤问题）

5.4 页面布局模板（首页专属，解决原界面层级混乱）

5.5 对齐规范

六、核心组件规范（1:1落地，解决原界面组件混乱）

6.1 按钮组件（Button，全平台统一）

按钮类型与样式

按钮状态规范（必须完整实现）

按钮尺寸规范

按钮使用禁忌

6.2 卡片组件（Card，全平台统一，解决原界面卡片粗糙问题）

卡片样式规范

卡片状态规范

卡片使用场景

6.3 输入框组件（Input，含搜索框）

样式规范

状态规范

搜索框专属规范

6.4 其他核心组件规范（精简版，完整规范可补充）

导航组件

列表组件

标签组件（Tag）

七、交互体验规范

7.1 页面交互规范

7.2 组件交互状态规范

7.3 反馈机制规范

7.4 无障碍设计规范

八、品牌与视觉规范（解决原界面违和问题）

8.1 LOGO规范

8.2 页面背景规范（核心优化，解决原界面粗糙问题）

8.3 内容与图片规范

九、响应式适配规范

9.1 断点适配规则

9.2 组件适配规范

9.3 移动端交互优化

十、落地验收检查清单（设计师/开发必查）

10.1 设计验收清单

10.2 开发验收清单

十一、规范版本管理

附：原界面问题针对性优化对照表

📌 设计师落地说明

20 KiB

Raw Blame History