夜航|影院购票流程练习

个人界面与交互练习 · 2026 · 约 2 分钟阅读

交互练习

一个电影购票流程练习,从选电影、选座、确认订单到出电子票,四个页面串成一条能点的流程。演示数据,不会真的出票扣款。

可交互原型

夜航购票流程

从选择场次、挑选座位到确认订单和查看电子票。模拟支付不会扣款,也不会生成真实票据。

新窗口打开

项目概况

夜航是我做的一个手机购票界面练习,四个页面:电影详情、选座、订单确认、电子票。想检查的是每一步的信息有没有接上,选过的场次和座位会不会在后面丢掉。

要解决的问题

购票要先选场次,再选座位、确认费用。每一步都得保留之前的选择,让人知道自己选了什么、接下来做什么。

范围与限制

  • 作品定位是个人界面与交互练习,不是商业票务产品。
  • 电影、影院、场次、价格和二维码都是演示内容,不会真的出票或收款。
  • 影院基础图标用的是 Material Symbols Sharp。
  • 移动画板以 390 × 844px 为这次原型的基准。

设计过程

把四个画面连成一条能点的流程,电影、场次、已选座位和费用在后面的页面继续显示。用颜色区分可选、已选和不可选座位。

关键判断

用完整购票路径串联四个画面

为什么这样做

电影详情、选座、订单和电子票按一个任务连起来,才能检查页面之间的信息是不是一致。

考虑过的其他方案
  • 只做四张独立的界面画板

说明模拟支付不会扣款

为什么这样做

保留确认订单和查看电子票的操作,同时说清楚这些只是演示,不会出票或收款。

工具

  • HTML / CSS / JavaScript 原型
  • Material Symbols Sharp(基础图标)

做完了什么

做出了一个四屏可预览的移动购票流程练习。没有真实订单、支付,也没有用户测试结论。

复盘

  • 页面连起来之后,才能检查场次、座位和金额有没有在下一步正确保留。
  • 原型里的演示数据和图标来源要说明清楚。

可从电影详情开始操作,选择场次和座位,再查看订单与电子票。二维码为演示内容,不能用于入场。