2025年软件开发前端部前端工程师UI设计工作手册.docxVIP

2025年软件开发前端部前端工程师UI设计工作手册

第1章设计规范与视觉语言

1.1品牌VI视觉系统规范

本章节旨在确立公司软件产品的“数字身份”，确保从Logo到交互的视觉一致性。

品牌Logo采用矢量图形格式（SVG/EPS），严格限制在200pxx200px分辨率下使用，像素放大不超过30%，严禁使用位图（JPG/PNG）进行放大渲染，以防止模糊。品牌主色值提取自官网主视觉图，需记录HEX(0052CC)及RGB(0,82,204)数值，并定义其作为按钮、卡片背景及标题栏的默认主色调，用于建立用户认知锚点。

辅助色体系包含强调色（FF6B6B，用于错误提示或关键操作）与中性色（F5F5F5，用于卡片背景及留白区域），严禁混用主色与强调色，避免视觉冲突。所有UI组件必须遵循“正交”布局原则，水平或垂直对齐，禁止出现斜向倾斜的按钮或卡片，保持软件界面的秩序感与专业性。字号层级需严格区分标题（H1-H3）、正文（Body）、标签（Label）及辅助文本（Subtitle），字号最小不得小于12px，行高（Line-height）统一控制在1.6至1.7之间，确保阅读舒适度。

品牌色在深色模式（DarkMode）下的对比度不得低于WCAG2.1的AA级标准，确保在夜间环境下用户依然能清晰辨认操作元素