软件开发行业前端部工程师UI设计规范手册.docxVIP

软件开发行业前端部工程师UI设计规范手册

第1章基础规范

1.1颜色规范

颜色是UI设计的核心要素，直接影响用户体验和品牌识别度。一套合理的颜色规范能确保产品视觉一致性，降低用户认知成本。

1.1.1主色系与辅助色系

主色（PrimaryColor）通常是品牌的核心色，如蓝色、红色或绿色，用于关键按钮、导航栏等强调性元素。辅助色（SecondaryColor）配合主色使用，用于次要按钮、图标和分隔线。例如，主色为1890FF时，辅助色可选择096dd9或69c0ff。

经验数据：主色饱和度建议控制在60%-80%，太高易刺眼，太低则不够突出。辅助色饱和度可适当降低至40%-60%，形成层次感。

1.1.2背景与文本对比度

高对比度设计能提升可读性，尤其对弱视用户至关重要。WCAG2.0标准要求普通文本对比度≥4.5:1，大号文本≥3:1。例如，白色背景（ffffff）配深灰色文本（333333）对比度达7:1，符合规范。

1.1.3状态色定义

定义明确的交互状态颜色：

-激活态：主色纯色（如1890ff）

-悬停态：主色变浅（如40a9ff）

-禁用态：灰色调（如d9d9d9）

设计建议：状态色变化需明显，用户可通过颜色快速判断交互可能性。

1.2字体规范

字体的选择与排版直接影响信息传达效率。统一