做用户界面设计，要把信息层级、字段规则、提交反馈和失败恢复写清楚，再用具体任务检查。下面以299元订单申请99元部分退款为例，说明设计原则怎样落到界面说明和测试用例中。需要先了解概念与通用制作流程，可看界面设计入门指南。
用户界面设计包含什么
常见图形界面包含导航、内容区、按钮、输入框、选择器、列表、图表、提示和弹窗。设计师需要定义这些元素的层级、位置、样式、状态与行为，同时考虑用户使用的设备、环境和能力差异。
用户界面设计的核心原则
可见性
关键入口和当前状态应足够明显。重要操作不能隐藏在用户无法预期的位置，系统变化也不能只在后台发生。
匹配用户认知
文案、图标和流程应尽量采用用户熟悉的概念。内部术语、技术字段和组织结构不应直接暴露给普通用户。
一致性
相同控件保持相同含义、外观和行为。新模式确有价值时再引入，否则会增加学习成本。
反馈与状态
操作后要说明发生了什么：正在处理、已经成功、哪里出错、下一步怎么办。反馈需要及时且靠近问题发生的位置。
容错与恢复
通过合理默认值、输入限制、撤销、自动保存和二次确认预防错误；发生错误后，应保留用户已完成的工作并提供恢复路径。
可访问性
保证文字可读、对比度足够、点击区域合理，并支持键盘焦点和辅助技术。不要只用颜色区分成功、警告和失败。
常见用户界面类型
| 类型 | 典型场景 | 设计重点 |
|---|---|---|
| 图形用户界面 | 网页、App、桌面软件 | 层级、控件、布局与状态 |
| 语音用户界面 | 音箱、车载、语音助手 | 意图识别、确认与纠错 |
| 手势与触控界面 | 手机、平板、可穿戴设备 | 可发现性、反馈与误触防护 |
| 对话式界面 | 客服、AI助手、机器人 | 上下文、边界、引用与失败恢复 |
一套可执行的界面设计方法
用“已购买用户申请部分退款”练习。订单 ORD-1024 实付299元，当前没有处理中或已完成的退款，可申请金额为299元。用户发现一件商品损坏，希望申请99元；本次只设计申请提交与查询，不涉及售后审核、退货物流或实际打款。
把退款页需要的内容排出主次
从订单详情进入“申请退款”后，页首显示订单与商品，接着显示“最多可申请299.00元”，再填写金额与原因。不要把金额限制藏在问号里。主操作使用“提交退款申请”，提交后的文案使用“申请已提交，等待审核”，避免用户把提交成功理解为钱已到账。
| 界面对象 | 本例内容 | 为什么这样安排 |
|---|---|---|
| 订单摘要 | ORD-1024，实付299.00元 | 防止在相似订单中申请错对象 |
| 申请金额 | 99.00元；最高299.00元 | 金额上限和输入框相邻 |
| 原因 | 商品损坏（必选）；补充说明选填 | 先结构化选择，再容纳解释 |
| 主要按钮 | 提交退款申请 | 明示动作，不用“确定”代替 |
| 结果页 | 申请编号RF-1024-01，等待审核 | 保留可查询对象，不承诺到账时间 |
用六个动作画出退款页的行为
- 从订单详情打开申请页，订单号与最高金额自动展示；不要要求用户再次输入订单号。
- 金额为空时点击提交，在金额区域提示“请输入退款金额”；不要清空已经选择的原因。
- 输入350元时，提示“退款金额不能超过299.00元”，金额保留，便于修改。
- 把金额改为99元但不选原因，定位到原因字段，提示“请选择退款原因”。
- 填完整后提交，按钮进入处理中，阻止相同申请重复提交；其余信息仍可阅读。
- 返回结果页后，显示99.00元与“等待审核”；从订单再次进入时可以查看这份申请。
金额校验不能只比较大小。还要约定大于0、最多两位小数；本例对0、负数和99.999分别提示修正，不静默四舍五入用户申请金额。前端原型展示这些反馈，研发还需要在服务端验证可退余额与重复提交。
失败分两类：未提交成功，还是结果尚不清楚
如果明确收到业务拒绝，例如可退金额已变化，显示新的可退金额，保留99元输入和原原因，要求用户重新确认。若网络中断导致提交结果未知，直接恢复“重新提交”可能创建两份申请。此时应显示“正在确认申请结果”与查询入口，先查到没有受理，再允许重试。
在原型中各画一份状态：正常填写、金额错误、原因缺失、处理中、结果待确认、等待审核。状态可以使用不同页面或组件变体表达；不必为了演示而假装接通真实退款接口。
评审者拿着这张任务卡就能开始
你在订单ORD-1024中收到一件损坏商品，想申请99元退款。请完成申请，并判断现在是否已经退款到账。如果提交时没有立刻出现结果，你会怎样确认？
不要告诉评审者按钮在哪。记录他是否看见金额上限、能否修正350元输入、是否把“等待审核”误读为到账，以及失败时是否重复提交。不能只记“操作顺利”，要把问题关联到字段或状态。
| 可观察现象 | 可能的界面原因 | 先修改什么 |
|---|---|---|
| 把299元当作已经申请的金额 | 上限与输入值视觉无区分 | 上限作为辅助说明；99元放输入框 |
| 改了金额却要重新选原因 | 错误状态重置整个表单 | 仅更新金额错误，保留其余内容 |
| 看到成功图标就认为已到账 | 结果标题只写退款成功 | 改为申请已提交，并显示等待审核 |
| 超时后连续点击提交 | 缺少处理中与结果查询 | 将按钮状态与申请查询绑定 |
下载已填写的退款界面说明和退款界面测试表后，可以替换为自己的订单规则。涉及更多输入字段时，继续阅读表单原型的字段、校验与提交状态。
界面评审检查清单
- 页面目的能否在几秒内被理解。
- 主要操作是否比次要操作更突出。
- 按钮文案是否说明动作，而非模糊的“确定”。
- 错误提示是否指出原因和解决办法。
- 不同状态是否完整且保持一致。
- 真实长文本和极端数据是否破坏布局。
- 小屏、键盘和低对比环境是否仍可使用。
用户界面设计与工具
工具只能帮助绘制、协作和交付，不能自动替代设计判断。选择工具时要关注组件、原型、多人协作、研发查看和AI结果可编辑性，可参考UI设计工具场景对比。如果需要把原则沉淀为组件和研发规则，可查看UI设计规范与交付清单。
常见问题
界面设计和UI设计是同一个概念吗
中文语境中通常高度重合。用户界面设计更强调界面本身，UI设计在招聘和产品团队中还常包含视觉规范、组件系统与研发交付。
怎样判断界面是否简洁
简洁不是元素少，而是用户完成任务时没有多余理解和操作。必要信息可以丰富，但层级必须清楚。
界面设计需要做用户测试吗
关键流程值得测试。即使没有正式实验室，也可以邀请目标用户完成任务，记录理解错误、停顿和失败点。
总结
用户界面设计应把“美观”转化为可验证的质量标准：信息能否被看见和理解，操作是否符合预期，系统是否及时反馈，错误能否恢复。用任务与状态评审界面，才能得到可使用、可交付、可持续维护的设计。
