移动端原型 UI 基础规范
这不是视觉设计课。我们要练的是：把页面结构、内容层级、交互方式和状态边界画到别人能评审。
页面结构
先让人知道自己在哪、从哪来。
内容层级
再让人看懂主内容和当前任务。
交互方式
最后判断该用页面、弹层还是反馈。
状态边界
正常、加载、空、错都要能继续。
原型不是把控件摆满
如果一张原型让人觉得“怪怪的”，通常不是因为不好看，而是别人不知道该怎么看、怎么点、怎么验。
需求没有变成任务
你直接画页面，评审人看不出用户到底要完成什么。
页面没有变成路径
入口、返回、下一步不清楚，开发和测试就无法串流程。
状态没有变成规则
只画正常态，失败、禁用、空数据都没法验收。
先拆任务
谁在用，从哪里进，要完成什么。
再拆页面
入口页、列表页、详情页、表单页、结果页。
再定交互
二级页面、底部弹层、确认弹窗、Toast。
最后补状态
加载、空、错、无权限、成功和恢复路径。
交付前，替评审人问三句
你画的每一页，最后都要服务于评审、开发和测试。标准越清楚，返工越少。
别人看得懂吗
页面结构、当前位置和内容主次是否一眼明确。
别人点得通吗
入口、返回、主操作、关闭和异常恢复是否都有去向。
别人验得了吗
规则、组件状态、禁用、失败和边界是否能写成检查项。
一眼知道在哪
顶部说明位置，内容承载任务，底部给出稳定操作。
每一步有去向
入口、返回、提交、关闭都能解释下一步。
状态能被检查
页面状态和组件状态都有触发条件、限制和恢复动作。
先把需求问成任务
你不要先问“画什么控件”。先问清楚人、入口、目标、结果和异常，页面才不会凭感觉长出来。
谁在这个场景里操作
不同角色看到的入口、权限和默认信息可能不同。
他从哪里进来
入口决定页面层级，也决定顶部和返回怎么画。
完成后发生什么
成功结果、失败恢复和下一步动作要提前想清楚。
谁来处理
角色、权限、默认可见范围。
从哪进入
首页入口、Tab、消息、外部链接。
要做什么
找对象、看对象、填写、确认、提交。
结果如何
成功反馈、失败原因、下一步去向。
把一个任务拆成页面链路
新人最容易漏页面。你可以先把链路列出来，再逐页画线框，别边画边想。
先列入口和去向
用户从哪进来，第一眼看到什么，点完去哪。
再列主要页面
列表负责找对象，详情负责看对象，表单负责完成输入。
最后列结果和异常
成功页、失败态、空列表和无权限都要在清单里。
先判断这页属于哪一类
同一个信息，放在一级入口、二级页面、临时任务里，顶部、底部和返回方式都不一样。
长期反复访问吗
是，就考虑一级入口或 Tab，底部导航要稳定。
围绕某个对象深入吗
是，就用二级页面，标题、返回和下一步要清楚。
只是临时处理一下吗
是，就考虑弹层、弹窗或 Toast，但不要塞复杂任务。
这个任务该放在哪里？
点击一个判断，看看推荐的承载方式。
画页面时按这个顺序走
当页面清单列出来后，你可以按同一套动作画每一页：先骨架，再内容，再操作，再状态。
先定页面骨架
顶部、内容、底部先分清，别一上来堆组件。
再填内容类型
列表、详情、表单分别承担不同任务。
最后补操作和状态
主操作、提交反馈、加载、空、错都要画出来。
画骨架
顶部定位，内容承载，底部行动。
填内容
列表 / 详情 / 表单 / 设置 / 状态。
定交互
页面 / 弹层 / 弹窗 / Toast。
补边界
默认、加载、空、错、无权限、成功。
拿到一页，先按三块看
先不看细节，只看顶部告诉你在哪，内容让你处理什么，底部让你去哪或做什么。
我现在在哪
顶部用标题、返回和页面级操作给出位置感。
我主要看什么
内容区把主信息、辅助信息和状态分清楚。
我接下来做什么
底部只承担导航或主操作，不要两种职责混在一起。
先看顶部
只看标题和返回，能不能知道当前层级。
再看内容
用户扫一眼，能不能看懂当前任务。
再看底部
这里是在导航，还是在完成当前动作。
最后看状态
加载、空、错、无权限是否有恢复路径。
先让人知道自己在哪
你画顶部栏时，先别急着放图标。它最重要的任务，是把当前层级说清楚。
标题能说明对象吗
不要只写“页面”或“详情”，要说清当前对象或任务。
返回会让人放心吗
二级页面回上一层，临时任务可以关闭，路径要可预期。
右上角够克制吗
只放页面级操作，筛选和主按钮不要都塞到顶部。
只看标题
你应该能知道这页在讲哪个对象。
只看右上角
它应该是少量页面级操作，不是主流程入口。
再看内容
内容区要接住标题里的对象和任务。
先让主任务被看见
内容区不是把信息往下堆。你要先让阅读者知道：这页最重要的内容是什么。
主内容够靠前吗
列表、详情或表单的核心信息要放在首屏上方。
辅助信息有没有让位
说明、提示、关联内容可以有，但不要抢主任务的位置。
状态贴着对象吗
进行中、失败、禁用、待处理要靠近对应内容。
先看任务
你要知道这一页让人看什么或处理什么。
再看主内容
最重要的对象、列表或字段要在视觉中心。
最后看辅助
状态、说明和提示都围绕主内容出现。
先帮阅读者分好组
移动端页面要让人扫得懂。你先分组，再决定哪些内容需要卡片边界。
这一组在解决什么
每个区块都要能说清自己的任务。
同类有没有放一起
入口、列表、说明、操作不要混排。
边界是否稳定
卡片、间距、标题层级要一致，方便快速扫描。
先找核心组
当前页面最重要的一组内容要最先出现。
再看组标题
标题要说清这组内容的共同含义。
最后看边界
同一类内容用一致边界和间距。
底部先选一种职责
你看到底部时，先判断它是在带人换页面，还是让人完成当前任务。
如果是入口，就做导航
底部导航用于稳定的一级入口，跨页面保持一致。
如果是任务，就做按钮
二级页面可用底部主操作，一屏只突出一个。
危险动作别贴太近
删除、退出、清空不要和主按钮同权重，需要确认。
先判断导航
如果是一级页面，底部入口要稳定。
再判断主按钮
如果是任务页，底部只突出一个主操作。
单独处理风险
删除、退出等不要和主操作同权重并排。
让人知道自己在哪一层
导航不只是入口。你还要画出当前层级、Tab 选中态和返回路径。
一级入口稳定吗
用底部导航或首页入口承载，不要频繁变化。
二级页面回得去吗
标题和返回路径要能说明上一层是什么。
当前范围看得出吗
Tab 要有选中态，不要让人猜当前条件。
看底部入口
你能知道现在属于哪个大入口。
看顶部标题
你能知道当前层级和返回方向。
看当前范围
Tab 或筛选条件必须有清晰选中态。
先判断这页要承载什么
列表、详情、表单看起来都能装内容，但它们帮阅读者完成的任务不同。
要找对象，用列表
列表帮助人找到对象、比较状态、进入下一页。
要看对象，用详情
详情解释一个对象的上下文、状态和下一步动作。
要完成输入，用表单
表单承载输入、选择、校验和提交。
让列表项自己说清去向
列表不是字段越多越完整。你要让人能找对象、判断状态、知道点进去会去哪。
入口按大类稳住了吗
一级入口或二级分类先稳定，小条件放到筛选里。
列表项说清对象了吗
标题、摘要、状态和点击去向要贴近同一个对象。
状态能直接判断吗
未开始、处理中、失败、禁用要能直接看出来。
先看入口
大类入口稳定，小条件再进入筛选。
再看列表项
主信息、摘要、状态、去向都围绕同一对象。
最后看状态
状态贴近对象，不要放到页面角落。
筛选之后，也要告诉人发生了什么
筛选会改变列表结果。空列表不是补一张图，而是要解释为什么没有结果。
当前条件看得见吗
条件要显示出来，让人知道列表为什么变少。
空的原因说清了吗
说明是没有数据、条件太窄，还是权限不足。
下一步给了吗
清筛选、创建内容、返回上层至少给一个。
暂无内容
可清空筛选或新建内容。
先看条件
你要知道列表为什么被过滤。
再看原因
空状态要说明原因，不只是留白。
最后看恢复
给清空筛选、创建或返回入口。
详情页要回答“我为什么来到这里”
详情不是信息仓库。你要让人知道对象是谁、从哪进来、下一步可以做什么。
对象一眼能认出吗
标题和首屏摘要要能识别当前对象。
来处说清了吗
来自哪个列表或入口，当前状态是什么，都要能看出来。
下一步明确吗
继续、编辑、提交、分享、返回都要有合适位置。
先认对象
标题不要只写“详情”，要能识别对象。
再看上下文
来源、状态和关联内容要接得上。
最后看下一步
详情页要给出清楚的继续路径。
让填写的人少猜一步
移动端输入成本高。你要把字段分组、必填规则和提交反馈都放到人能顺手看见的位置。
字段分组了吗
按基础信息、设置项、补充说明分组。
能少输入吗
能选就不要打字，能默认就不要重复填。
规则贴近字段吗
必填、选填、说明文案要跟着字段出现。
先看分组
这一组字段是什么，要先告诉填写的人。
再看输入成本
枚举类信息用选项，减少手动输入。
最后看规则
必填和说明贴近字段，不放到页面底部。
提交不是只画一个按钮
你还要告诉填写的人：什么时候不能提交，哪里填错了，失败后怎么继续。
错在哪里看得见吗
不要只弹“提交失败”，要指出哪个字段错。
不能点的原因说了吗
未填必填项、无权限、条件不满足要能看出来。
失败后还能继续吗
提交失败要保留现场，并给重试或返回路径。
先看字段错误
错误提示贴近字段，避免来回找。
再看按钮状态
提交前、提交中、禁用原因都要画出来。
最后看恢复
保留已填内容，给重新提交或返回路径。
二级页面、弹层、弹窗怎么选
先别问“用哪个组件”。你要先判断这个操作有多重、风险多高、需不需要保留当前上下文。
任务长不长
信息多、步骤多、要保存草稿，用二级页面或全屏页。
是否围绕当前页
只是筛选、选择、排序，优先用底部弹层，保留上下文。
风险和反馈多重
高风险用确认弹窗；只告诉结果，用 Toast。
先点一个场景，再看推荐方式
这页训练的是判断，不是背组件名称。
选了弹层，也要分清轻重
不是所有浮在页面上的东西都叫弹窗。你要看它是在选择、反馈、确认，还是已经重到该变成页面。
只是轻选择吗
筛选、选择、分享、轻确认可用底部弹层，保留上下文。
只是关键确认吗
确认弹窗只处理一个决定，不承载长说明。
只是告诉结果吗
Toast 只适合轻反馈，不要求用户停下来处理。
轻量选择
保留当前页面上下文，完成后回到原页面。
确认当前操作？
只做一个明确决定。
轻选择
筛选、选择、轻确认，不离开当前页面。
关键确认
只做一个选择：取消或确定。
轻反馈
只告诉结果，不承载复杂说明。
状态要告诉人怎么继续
不要只画正常态。加载、空、错误、无权限和成功，都要让人知道下一步怎么办。
等待时有预期吗
用加载或骨架屏，避免页面突然空白。
空的时候知道原因吗
说明是没有数据、条件太窄，还是权限不足。
出错后能恢复吗
提供重试、申请权限、返回或清条件。
加载失败
说明原因，保留现场，提供重试入口。
先看位置
状态要出现在你预期看到内容的位置。
再看原因
告诉人发生了什么，不要只显示空白。
最后看动作
给重试、清筛选、申请权限或返回。
组件也要让人看懂状态
页面有状态，组件也有状态。按钮、Tab、输入框、列表项都要说明当前能不能用。
当前选择清楚吗
Tab、单选、多选要让当前选择一眼明确。
不能用的原因清楚吗
条件不足、无权限、未填写要说明为什么不能点。
错误跟着组件吗
错误提示靠近触发组件，减少寻找成本。
看选中态
你要知道当前选的是哪个范围。
看禁用态
不能点时，要有原因或触发条件。
看错误态
错误提示跟着组件，不只放 Toast。
别只说“看着不对”
评审时先把感觉翻译成具体问题：哪个区域、哪个对象、哪个状态让人看不懂。
先找结构混用
顶部放筛选，内容区放按钮，底部职责不清。
再找对象不清
列表项、详情、表单字段没有说明对象和规则。
最后找状态缺失
只画正常态，没有加载、空、错、无权限和恢复。
顶部先定位
如果顶部没有说明位置，就别急着塞操作。
内容先认对象
看不出列表项是什么，就很难判断去向。
操作先分主次
按钮主次和异常恢复都要能被评审。
现在请你按区域找问题
先不讨论好不好看。你只需要按顶部、内容、底部、状态逐层说出哪里不可评审。
先问顶部说清了吗
标题、返回、当前位置是否清楚。
再问内容看得懂吗
内容分区、列表项、详情和表单是否可评审。
最后问能不能继续
主操作、组件状态、弹层和异常恢复是否补齐。
顶部问题
标题含糊，返回和当前位置不明确。
内容问题
入口、列表、设置混在同一区块。
操作问题
保存、删除、下一步没有主次和风险确认。
状态问题
空、错、无权限、成功反馈没有画。
把你的判断写成修改项
不要只写“布局不好”。请写清楚：问题在哪、为什么影响评审、应该怎么改。
顶部要怎么改
标题改成具体页面，补返回路径和页面级操作。
内容要怎么改
入口、列表、设置分成独立区块，补分组标题。
状态要怎么补
补空、错、无权限、成功，并给下一步动作。
你可以这样输出
用问题带着自己评审
每一页都按同一套顺序扫，你就不会停在“感觉不对”，而是能说出具体改法。
先问结构
顶部、内容、底部职责是否清楚。
再问路径
入口、返回、主操作、关闭和恢复是否清楚。
最后问验收
规则、状态、禁用、失败是否能测试。
我在哪，看什么
顶部、内容、底部是否各自清楚。
点完去哪
入口、返回、提交、关闭后去哪里。
状态齐不齐
默认、加载、空、错、禁用、成功是否齐全。
改到哪里
每条意见都能改到某个区域或组件。
用行测专项刷题走一遍
前面学的是通用画法。最后用一个真实业务场景，把“拆任务、拆页面、画骨架、定交互、补状态”完整带一遍。
先把“刷题”问成任务
不要先画题目卡片。先问清楚：谁来刷、从哪进、刷什么、刷完之后要看到什么。
谁在刷
备考用户、薄弱项用户、继续上次练习的用户，入口可能不同。
刷什么专项
专项大类、二级题型、题量、难度、是否按错题筛选。
刷完看什么
正确率、用时、解析、错题归因和继续练习入口。
备考用户
可能从首页、学习计划、错题本进入。
专项入口
一级大类先稳定，再进入二级题型。
完成刷题
选专项、答题、提交、查看解析。
获得反馈
正确率、错题、解析、下一组练习。
把刷题任务拆成页面链路
专项刷题至少不是一个页面。你要把入口、选择、答题、解析、结果和异常都放进页面清单。
入口页负责选方向
先让用户知道有哪些行测大类和当前学习进度。
刷题页负责完成动作
题干、选项、进度、提交、上一题下一题都要稳定。
结果页负责反馈和继续
做完后要有结果、解析、错题归因和继续路径。
刷题页先按三块画
刷题页不是只放题目。顶部要定位专项和进度，内容区承载题目，底部稳定放当前主操作。
顶部说明当前练习
专项名称、题号进度、退出路径要清楚。
内容区先题干后选项
题干、材料、选项、已选状态要形成清楚层级。
底部只放主操作
未选择时禁用提交；提交后再进入解析或下一题。
先看顶部
用户知道自己在刷哪个专项、第几题。
再看题目
题干、选项、已选状态能不能扫清楚。
最后看操作
提交、下一题、退出不要互相抢位置。
把刷题过程里的边界补齐
专项刷题的体验问题，很多不是题目页本身，而是退出、提交、解析、无题和网络失败这些边界没画。
复杂任务用页面承载
刷题、解析、结果页都需要独立页面，不适合塞进弹窗。
高风险才用确认弹窗
退出练习、清空答案、提交整组前需要明确确认。
状态要给恢复路径
无题、加载失败、解析缺失、无权限都要能继续。
交付前，按这张表问自己
当你能把这些问题都回答清楚，这张移动端原型才算画到能评审。
别人看得懂吗
顶部、内容、底部和页面定位清楚。
别人点得通吗
列表、详情、表单、弹层和主操作都有去向。
别人验得了吗
页面状态、组件状态和异常恢复能测试。