移动端UI设计规范：APP界面组件、交互、适配、图标标准化手册

引言：标准化是专业设计的基石

在移动互联网高度成熟的今天，用户对一个APP的审美阈值极高。一个视觉混乱、交互不统一的产品，会立刻遭到用户抛弃。同时，面对iOS、Android以及层出不穷的折叠屏、平板等设备，一套严谨、全面的UI规范，是保证产品在各终端拥有一致高品质体验、降低设计与开发团队沟通成本、提升迭代效率的基石。本手册基于《iOS人机交互指南》和《Material Design 3》的核心理念，结合国内主流APP实践，整理出一套可直接落地执行的UI标准化方案。

📐 一、基础组件尺寸标准（以逻辑分辨率750x1334为设计基准）

组件标准尺寸(px)设计说明与交互建议 状态栏40px (iPhone) / 24dp (Android)通常只需留出黑色透明区域，显示时间、电量等系统信息，开发者会调用原生API，设计师需注意背景内容不要覆盖此区域。 顶部导航栏88px (44pt)全局高度统一，包含返回按钮、页面标题和右侧功能图标。标题字号一般为36px (18pt)，加粗。这是用户操作的“锚点”，风格需保持全APP一致。 底部标签栏98px (49pt)APP最核心的5个以内入口，图标+文字组合。选中态需高亮（品牌色）。此栏应始终固定在屏幕底部，不随页面滚动。 可点击按钮高度≥88px，宽度适应内容遵循菲茨定律，手指触控区域最小为88x88px。主要按钮（Primary Button）可使用品牌色填充；次要按钮（Secondary Button）为描边或透明背景。 列表单元格高度通常为98px或120px信息层级清晰的列表项，标准高度为98px，用于单行文本；若包含图片、两行文字或辅助信息，建议使用120px。 正文文本28px (14pt) ~ 32px (16pt)14pt是移动端正文阅读最舒适的字号，适用于文章、长文本。辅助说明文字（如时间、来源）使用24px (12pt)。 卡片圆角16px, 24px, 32px小卡片（如个人名片）用16px，中型卡片（如商品卡）用24px，大模块（如Banner）用32px。圆角越大，风格越柔和、现代。

🎨 二、色彩系统：原子化的品牌基因

色彩系统必须像原子一样定义清晰，不可随意添加新色。全局色彩分为三大体系：
主色（Primary Color）： 通常是品牌色，占比约60%，用于主要按钮、选中态、关键图标、链接等，传递品牌基调。
辅助色（Secondary Color）： 用于区分不同功能或信息层级，如成功（绿色）、警告（橙色）、错误（红色）、消息提醒（蓝色）。它们的用途必须全局统一，例如红色永远代表删除或错误。
中性色（Neutral Color）： 黑、白、以及一系列灰度色（通常定义10个色阶，如#333, #666, #999等），用于文本、背景、分割线、阴影。规范的灰度层级是界面干净、清晰的基础。
所有色值必须在设计文件中定义为“颜色变量”，开发人员也会维护一份相同的色值代码表，保证设计与实现的精准对应。

🔘 三、图标设计统一规则：风格是图标的灵魂

全APP所有图标必须遵循同一套设计规则，保证视觉重量的均衡：
- 风格统一： 要么全部使用线性图标，要么全部使用面性图标。线性图标的线宽必须统一（标准2px或3px），端点（cap）和连接点（join）样式一致。
- 网格规范： 所有的图标都应在同一个网格（如24x24或48x48）内绘制，预留安全边距，确保它们虽然形状各异，但视觉大小一致。
- 功能隐喻： 图标的图形应能清晰传达其功能。例如，放大镜代表“搜索”，齿轮代表“设置”，垃圾桶代表“删除”。避免使用抽象、费解的设计。

👆 四、交互体验规范：给用户确定无疑的反馈

好的交互是“润物细无声”的，它让用户感到掌控和流畅：
- 即时反馈： 所有可点击元素（按钮、卡片、列表项）在被点击时，必须有视觉反馈。常见形式是添加一个透明度变化（如高亮40%）或微小的缩放动效（点击时缩小到0.95倍）。
- 页面转场： 统一页面跳转动效（如iOS的从右向左滑入，Android的从下向上展开）。转场时长控制在300-400毫秒，速度过快显得仓促，过慢则让用户感到卡顿。
- 加载与空白： 所有异步操作都需要有加载状态（骨架屏或菊花转）。对于无数据、无网络的空白页，需要提供友好的插图说明和“点击重试”按钮，而不是直接显示一个冰冷的报错。

📱 五、多机型适配方案：拥抱碎片化的屏幕世界

面对从iPhone SE到iPad Pro，再到各种异形屏、折叠屏的复杂局面，设计师必须拥抱动态布局：
- 布局策略： 采用弹性布局（Flexbox）或相对布局（ConstraintLayout），关键原则是“固定间距优先，固定尺寸其次”。让UI元素间的间距比例随屏幕宽度变化，而非固定元素的绝对宽度。
- 安全区： 对于有“刘海”、“灵动岛”的屏幕，所有交互元素和关键文本必须放置在系统定义的安全区内。顶部和底部边缘用来放置背景颜色或装饰性元素。
- 关键适配点：
1. 横竖屏切换： 应用在iPad或折叠屏展开时，应考虑横屏布局。信息流应由单列变为多列网格，以充分利用宽度。
2. 折叠屏： 针对折叠和展开两种状态，设计不同的布局方案。展开时，可以像平板一样展示更多内容；折叠时，恢复手机单列布局。

总结：UI规范不是束缚，而是专业团队的共识和效率引擎。建立并严格执行一套活化的设计系统，能让产品在快速迭代中始终保持高水准的体验和视觉一致性。本手册应作为团队的基础文档，定期更新和维护。