移动端APP界面视觉规范

移动端APP界面视觉规范一、总则说明（一）适用范围。本规范适用于公司所有移动端APP产品的界面视觉设计，包括但不限于iOS和Android平台，涵盖首页、功能页面、系统弹窗等所有用户交互界面。（二）基本原则。界面设计需遵循简洁直观、高效易用、品牌统一的原则，确保用户在不同设备、操作系统版本下获得一致的使用体验。二、色彩体系规范（一）主色调定义。主色调为0066CC，用于按钮、关键操作图标等视觉引导元素，饱和度不低于65%，亮度适中，确保在深浅背景下的可辨识度。（二）辅助色规定。辅助色采用FFCC00，主要用于信息提示、次要操作区域，需与主色调形成60%以上色相差异，避免视觉冲突。（三）中性色使用标准。中性色包括FFFFFF（白色）、333333（深灰）、EEEEEE（浅灰），分别用于背景、文字、分隔线，其中正文文字颜色必须保证在白色背景下的对比度系数不低于4.5:1。三、字体排印规范（一）标题层级体系。一级标题使用思源黑体（Bold），字号22px；二级标题使用思源黑体（Regular），字号18px；三级标题使用思源宋体（Regular），字号14px，所有标题行高统一为28px。（二）正文排版要求。正文使用思源宋体（Light），字号14px，行间距1.5倍，段落首行缩进2字符，英文及数字字符间距调整为0.5px，确保阅读流畅性。四、图标设计标准（一）图标风格统一。所有图标采用扁平化设计，线条粗细为1.5px，圆角半径不得小于2px，确保在6px及以下尺寸下依然保持可辨识度。（二）图标尺寸规范。基础图标尺寸为20x20px，关键操作图标为24x24px，系统提示图标为28x28px，所有图标需提供透明背景和白色背景两种版本。五、布局结构规范（一）栅格系统要求。界面设计必须基于4px栅格体系，元素间距取值必须为4的倍数，组件边缘与容器边缘间距不得小于8px。（二）页面布局原则。首页必须采用“上导航+内容区+底部标签”三段式布局，非首页优先使用卡片式垂直布局，单屏信息密度不得超过8个核心操作入口。六、交互反馈规范（一）点击状态反馈。可交互元素在点击状态下必须呈现0055AA的色变效果，同时执行0.2s的弹性缩放动画，动画曲线为ease-out。（二）加载状态表现。全屏加载需使用旋转进度条，颜色与主色调保持一致，加载文案使用“正在加载”加粗小字，置于进度条下方。七、品牌元素整合（一）Logo使用规范。APP启动页及所有全屏页面必须展示白色边框Logo，尺寸不小于120x120px，不得出现任何形式的变形或色块覆盖。（二）品牌色应用标准。品牌色0066CC必须用于所有品牌宣传相关的视觉元素，如活动Banner、下载引导页等，需与产品主色调保持100%一致。八、特殊场景适配（一）夜间模式设计。夜间模式下所有界面文字亮度降低至85%，背景色调整为1A1A1A，按钮及关键图标需增加333333的描边效果，描边宽度1px。（二）无障碍设计要求。所有表单输入框必须提供视觉焦点提示，色盲模式需使用红绿蓝三色组合的辅助标识，放大镜功能支持200%无失真缩放。九、版本迭代管理（一）视觉基线建立。每次重大版本更新必须同步更新视觉规范文档，新增设计元素需标注适用版本及替代关系。（二）变更控制流程。任何视觉标准调整需经设计总监审批，并通过设计评审会确认，相关决议需在规范文档中逐条记录。十、附则说