移动端UI设计不是把网页缩小到手机屏幕，而是围绕触控、单手使用、碎片时间、网络波动和系统能力重新组织体验。UI基础方法可查看UI设计完整指南，本文集中讲手机与App场景。
移动端UI设计的主要约束
- 屏幕有限：信息必须分层，避免一次展示所有内容。
- 手指不精确：可点击区域要足够大，相邻操作要避免误触。
- 环境变化：强光、移动、单手、弱网都会影响使用。
- 系统差异：需要处理安全区、系统导航、字体缩放和权限。
- 输入成本高：表单要减少输入，合理利用系统键盘和自动填充。
移动端UI设计流程
确定高频任务
根据用户场景和数据确定首要任务，把它放在易发现、易触达的位置。不要让首页同时承担所有业务目标。
梳理导航层级
底部导航适合少量高频一级入口；标签适合同级内容切换；抽屉与更多菜单适合低频功能。导航选择应符合任务频率。
建立栅格与组件
统一间距、字号、图标、按钮、列表和表单规则，并为不同设备宽度预留弹性。组件要覆盖正常、按下、禁用、加载和错误状态。
用真实设备验证
在不同尺寸设备上测试单手触达、键盘弹起、长文本、深色模式、权限拒绝和弱网恢复。仅在画布中查看无法发现所有问题。
常见移动界面规范
触控与操作
点击区域应大于可见图标，危险操作与常用操作保持距离。滑动、长按等隐藏手势需要提供可发现线索或替代入口。
文字与信息层级
正文应保持可读，避免大段居中和过密信息。标题、正文、说明、错误和禁用状态要有稳定层级，并适应系统字体放大。
表单与键盘
使用匹配内容的键盘类型，支持自动填充，及时验证输入但不要频繁打断。键盘出现后，当前字段和提交按钮仍应可见。
加载、空与错误状态
加载时间较长时说明进度；空状态解释原因并给出下一步；网络失败保留已输入内容并允许重试。
移动端组件和设计系统
组件库的价值不只是提高出图速度，还能统一交互和研发实现。建议至少沉淀按钮、输入、导航、列表、弹窗、提示、加载、空状态和反馈组件，并记录使用条件、内容规则和状态。
设计工具需要支持组件、自动布局、多人协作和研发查看，可参考UI设计工具对比。
移动端研发交付检查清单
- 标注安全区、固定区域和滚动范围。
- 说明不同屏幕宽度下的布局变化。
- 提供组件的全部状态和交互反馈。
- 补齐键盘、权限、弱网、空和错误场景。
- 图标、图片和动效资源格式明确。
- 在真实设备检查字号、触达和实现差异。
AI在移动端UI设计中的用法
AI可以快速生成页面结构和视觉候选，但常忽略平台规范、系统权限、键盘和异常状态。使用AI生成UI界面时，应先提供设备、用户任务、内容和组件约束，再由设计师校验。
常见问题
移动端UI设计要分别做iOS和Android吗
品牌和业务组件可以共享，但系统导航、控件习惯、权限和返回行为需要分别验证。不是所有页面都要做两套视觉，但差异必须被说明。
移动界面应该尽量少文字吗
应减少无价值文字，而不是删除必要说明。关键是分层、分步和使用清楚文案，让用户在需要时得到信息。
怎样避免移动端页面拥挤
先缩减同屏任务，区分主要与次要信息，再用分组、留白和渐进披露组织内容，不要只缩小字号。
总结
移动端UI设计要从真实环境出发：小屏、触控、键盘、权限和网络都会改变界面质量。先确定高频任务，再建立导航与组件，最后通过真机和异常状态验证，才能得到稳定可交付的App界面。
