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