产品设计规范手册标准设计版.docVIP

产品设计规范手册通用标准设计版

第一章总则

一、编制目的

本规范旨在统一企业内部数字产品设计语言，保证产品体验的一致性与专业性，降低设计-开发协作成本，提升设计效率与用户满意度。通过标准化流程与输出物，为设计团队、开发团队及产品团队提供明确指引，支撑产品快速迭代与规模化扩展。

二、适用范围

本规范适用于公司所有数字产品设计场景，包括但不限于：Web端产品、移动App（iOS/Android）、小程序、H5页面等。覆盖产品从概念设计、原型制作、视觉设计到开发落地的全流程，适用于新功能开发、老版本迭代及设计系统维护。

三、核心设计原则

一致性：视觉风格、交互逻辑、术语表达需在全产品线保持统一，降低用户学习成本。

用户中心：以用户需求为核心，优先保障操作便捷性、信息可读性与体验流畅性。

可扩展性：规范需预留弹性空间，支持业务快速迭代与新场景适配，避免频繁大规模修订。

可访问性：遵循WCAG2.1AA级标准，保证色觉障碍、视力障碍等特殊用户群体可正常使用产品。

第二章设计元素标准化规范

一、色彩系统

1.色彩定义

色系类别

色值（HEX）

使用场景说明

主色

#1890FF

品牌核心元素、主要操作按钮（如“提交”“确认”）、核心信息高亮

辅助色1

#52C41A

成功状态提示（如“操作成功”“已通过”）、正向引导按钮

辅助色2

#FAAD14

警告提示（如“注意事项”“待补充”）、中性操作按钮（如“编辑”）

辅助色3

#F5222D

错误状态提示（如“操作失败”“必填项未填”）、危险操作按钮（如“删除”）

中性色-深

#262626

主要文字内容（如标题、核心信息）

中性色-中

#595959

次要文字内容（如副标题、辅助说明）

中性色-浅

#D9D9D9

边框、分割线、占位符

中性色-底

#F5F5F5

页面背景、卡片背景

2.色彩使用规范

单色场景：主色使用占比不超过页面面积的20%，避免视觉过载；

组合场景：主色+辅助色不超过3种，保证层级清晰（如主按钮用主色，次按钮用辅助色2）；

禁用场景：禁止使用高饱和度纯色（如纯红、纯绿）作为背景色，避免文字难以辨识。

二、字体规范

1.字体定义

语言

字体族

适用场景

中文

-apple-system,BlinkMacSystemFont,“PingFangSC”,“MicrosoftYaHei”,sans-serif

全场景（优先使用系统默认字体，保证跨平台一致性）

英文

-apple-system,BlinkMacSystemFont,“SegoeUI”,“Roboto”,sans-serif

英文内容、数字、符号

2.字号与字重

文字类型

字号（px）

字重

行高（px）

使用场景示例

大标题

24

Bold

32

页面主标题（如“个人中心”）

小标题

18

SemiBold

24

模块标题（如“基本信息”）

16

Regular

24

内容、表单说明

辅助文字

14

Regular

20

提示文字、补充说明

标注文字

12

Light

16

时间戳、状态标签

三、图标规范

1.图标风格

采用线性图标（2px线宽），图标边缘清晰、转角圆润，避免复杂细节；

图标需保持视觉统一，单色填充（默认使用主色或中性色-深）。

2.尺寸规范

使用场景

图标尺寸（px）

备注

导航栏

24×24

底部导航/侧边栏导航图标

按钮内

16×16

按钮内嵌图标（如“搜索”按钮）

列表项

20×20

列表项前缀图标（如“用户”图标）

功能入口

32×32

页面功能入口图标（如“设置”入口）

3.命名规则

图标文件名采用“功能模块_功能名称_状态”格式，如“user_profile_edit_normal”（用户资料编辑-常态）、“search_loading”（搜索-加载中）。

第三章组件库规范

一、基础组件定义

组件名称

类型

尺寸规格（px）

状态类型

核心使用场景

按钮

主要/次要/文本

高36/32/28，宽自适应

默认/悬停//禁用

表单提交、页面跳转、操作触发

输入框

单行/多行

宽度320/640，高36/自适应

默认/聚焦/错误/禁用

用户信息录入、搜索框

下拉菜单

单选/多选

宽320，最大高度480

默认/展开/选中/禁用

选项筛选、分类选择

弹窗

模态/非模态

宽480/640，高度自适应

默认/打开/关闭/加载中

确认操作、信息展示、表单填写

二、组件属性表（示例：按钮组件）

属性名称

属性值说明

必填

备注

类型

主要/次要/文本

是

主要按钮用主色，次要按钮用中性色-浅

尺寸

大（40px高）/中（36px高）/小（28px高）

是

大按钮用于核心操作，小按钮用于辅助操作

状态

默认/悬停（透明度90%）/（透明度80%）/禁用（透