移动端UI设计规范应同时说明尺寸单位、组件状态、导航、屏幕适配与无障碍。iOS的pt、Android的dp和Web的CSS像素不是同一个单位，不能用“按钮至少44px”概括所有平台。先确认目标平台，再把规范放进真实页面检查。
可以用墨刀设计整理按钮、输入框和导航组件，再用原型预览操作路径。本篇以订单确认页说明规范怎么落地，同时提供电商、导航与图标素材入口，方便从已有资源开始。
先统一pt、dp和CSS像素的使用口径
设计稿中的数值不应直接当成屏幕物理像素。先写明目标是iOS应用、Android应用还是手机网页，再约定画布逻辑尺寸、导出倍率和开发标注。一个设备的截图分辨率也不能代表所有目标手机。
| 平台或标准 | 触控目标参考 | 使用时的边界 |
|---|---|---|
| iOS / iPadOS | Apple按钮指南通常建议至少44×44pt的可交互区域 | 指触控区域，不等于图标视觉尺寸必须44pt |
| Android | Android无障碍指南建议至少48×48dp | 可通过周围留白扩大触控区域 |
| Web WCAG 2.2 AA | 2.5.8目标尺寸通常至少24×24 CSS像素 | 有间距、行内、等效操作等例外，不是所有产品的最佳尺寸建议 |
这些数字分别来自Apple按钮指南、Android无障碍设计和W3C目标尺寸说明。项目可以采用更宽松的触控空间，不能把合规下限当作所有场景都舒适的尺寸。
按钮和表单不仅要有默认状态
订单确认页的主要动作通常是提交订单，修改地址和选择优惠券属于辅助动作。给它们建立清楚的主次关系，避免每个按钮都一样突出。按钮标签说清结果，例如“提交订单”，比“确定”更容易理解。
为按钮整理默认、按下、禁用、加载等状态；为输入框整理未填、输入、错误和只读状态。必填项缺失时说明缺少什么，网络失败时保留已输入内容。不要用颜色变化作为唯一提示，也不要因为组件外观统一就让不同页面采用相反的操作逻辑。
可参考移动电商原型素材，将其中重复出现的价格、数量和按钮整理成自己的组件。使用前查看素材当前权限和授权，不默认每项内容都可无条件商用。
导航让用户知道当前位置，也知道怎样返回
底部导航适合稳定的一组主要目的地，不应把“提交订单”“保存”这样的页面动作塞进去。二级页面保留明确的返回方式；从优惠券页返回时，应保留订单商品、地址和已经填写的信息。
参考移动端UI组件素材中的导航元素时，先看它解决的是一级切换、分组筛选还是页面返回。标签页和底部导航即使都能切换内容，层级也不同，不能只凭外观相近互换。
深层页面还有直接进入的情况，例如用户从消息点开订单详情。这时返回不一定等于上一个页面的截图，应约定合理去向，避免出现空白页或无限返回循环。
成功、失败与空内容都要有清楚反馈
用户提交订单后，需要知道正在处理、是否成功以及接下来做什么。处理中避免重复提交，失败时提示可恢复动作，成功后给出订单入口。没有优惠券是正常空状态，不应使用与系统故障相同的错误图形。
提示信息应靠近相关对象。地址缺少门牌号时，在地址区域说明；整页网络不可用时，再采用页面级提示。短暂通知消失后，重要结果仍应能在页面或记录中找到，不能要求用户记住一闪而过的信息。
图标统一风格，更要统一含义
图标需要一致的线宽、视觉重量与对齐方式，但“看起来同一套”只是起点。陌生图形或容易混淆的操作配上文字，例如订单中的编辑地址、查看物流；删除和取消也不宜共用一个没有解释的叉号。
可以从界面图标素材挑选一套，再建立名称与用途对应表。实际开发时还需给有意义的图标按钮提供可访问名称；视觉上存在一个图标，并不代表读屏软件能理解它。
屏幕变窄、文字变长和键盘弹出时怎样布局
不要把桌面布局等比例缩小成手机页面。订单确认页可优先保留商品、地址、金额和主要动作，将次要说明展开显示；金额位数变长时，仍应与单位放在一起，不能和按钮重叠。
至少检查目标范围内较窄和较宽的屏幕、长商品名、长地址、缺图和较大字号。底部固定按钮考虑安全区；填写备注时检查键盘是否遮住输入内容或提交按钮。尺寸、换行和滚动规则应写进组件或页面说明，不能只留给开发凭截图猜测。
动效为操作服务，无障碍不只等于适老化
页面转场可以帮助理解前进与返回，展开动画可以说明层级变化；持续闪动的装饰如果不传递信息，就可能干扰下单。为减少动态效果的用户提供更克制的呈现，不把看完动画设为完成任务的必要条件。
无障碍还包括文字对比、焦点顺序、键盘或辅助技术操作、表单标签和错误说明。WCAG 2.2对普通文字通常要求至少4.5:1的对比度，大文本通常为3:1，并有具体适用条件；不要把这两个数当成所有图形的统一规则。
在墨刀里完成订单确认页后，用长地址和大字号走一遍选商品、改地址、选优惠券、提交失败后重试的流程；再由开发在目标设备上验证真实辅助技术表现。原型帮助发现问题，但不能代替运行中的无障碍测试。需要从需求到整个APP规划，可继续阅读APP设计流程。
刚开始做手机界面的读者，可以先用移动端UI设计入门指南了解整体任务，再回到尺寸、组件和状态规范建立自己的项目约定。
