UX:组织操作流程
比较客房

花园客房
选择日期
住宿日期
查看住宿信息
花园客房
住宿日期
所选日期有房吗?
有空房
调整日期
- 用户需要完成什么任务?
- 做出每个选择前,需要了解哪些信息?
- 操作出错或改变选择后,如何返回修改?
- 键盘和辅助技术能否支持完整操作?
- 用户可能在哪一步犹豫?需要如何验证?
以同一个选房界面为例,了解页面结构、视觉设计和开发交接如何衔接。打开演示,还可以试用预订流程。
先明确操作路径,以及修改选择时如何返回。
交付:经过评审的用户流程图
01 / 理解
集中展示客房信息,让住客比较后再选择日期。
花园客房
特大双人床 · 花园景观
庭院客房
特大双人床 · 庭院景观
有可选客房吗?
没有客房 → 修改日期 → 重新浏览
需要调整?返回客房和日期选择。
先确定信息顺序,再考虑配色与图片。
交付:低保真页面结构
示例界面 · 日期仅供演示
为同一预订流程设计字体、图片和视觉层级。
交付:响应式视觉设计
示例界面 · 日期仅供演示

选择客房和日期,试用住宿信息确认流程。
交付:可供评审的交互原型
示例界面 · 日期仅供演示

交互演示 · 不会预订或付款
说明组件状态与交互规则,方便开发实现。
交付:组件、状态与开发说明
示例界面 · 日期仅供演示

UX 关注用户如何完成任务,包括操作路径、所需信息和关键判断;UI 负责在界面上清楚呈现这些选择。无障碍体验和响应式设计都需要两者共同考虑。
比较客房

花园客房
选择日期
住宿日期
查看住宿信息
花园客房
住宿日期
所选日期有房吗?
有空房
调整日期

特大双人床 · 花园景观
以上概念示意仅用于说明设计决策,并非用户测试结论。
以下是概念设计,并非客户项目。展示内容为静态效果图,名称和数据均为虚构。
设计概念 01
精品酒店 · 网站与移动预订
设计概念 02
业务运营 · 仪表盘与工单
设计概念 03
生活方式会员服务 · 移动应用
具体交付内容以项目约定为准;研究和用户测试需另行确定范围。
在视觉设计前,先梳理用户任务、关键判断、访问权限和页面流程。
将已确认的重点流程制作成交互原型,供团队评审。
针对已确认的屏幕尺寸,设计布局、内容层级和主要状态。
提供带标注的组件、响应式规则和实现说明,供开发团队落实。
