2025年移动端APP设计规范手册.docxVIP

2025年移动端APP设计规范手册

第1章基础规范与通用规则

1.1色彩体系与视觉层级

建立基于WCAG2.1标准的色彩语义模型，严格区分“主色”、“辅助色”与“强调色”，确保在240色域下RGB值不越界，避免鲜艳度超过100%导致屏幕亮度异常。例如，主色选用2563EB（标准蓝），辅助色选用60A5FA（浅蓝），强调色选用F59E0B（琥珀黄），并统一在LightMode与DarkMode下的色值映射表，确保深色背景下的对比度不低于4.5:1。定义严格的视觉层级结构，通过对比度、大小与留白三个维度构建“主视觉-次级引导-辅助信息”的金字塔关系。主视觉区域需占据屏幕宽度的60%-70%，次级引导区控制在15%-20%，辅助信息区不超过10%，且所有层级元素之间的最小间距不小于12px，防止视觉混淆。

制定动态背景色切换逻辑，当用户切换主题时，需自动调整背景色与文字色的色值组合，并同步更新所有UI组件的阴影强度与透明度参数。例如，深色模式下背景色可设为111827，文字色设为E5E7EB，阴影参数需调整为0.12倍模糊度以增强层次感。规范色彩组合的色环位置，确保相邻色块之间的色相差值不超过60度，避免产生视觉上的“跳变”感。同时，必须设置色彩溢出检测机制，当任何单一色值超过100%时，系统需强制