夜航|影院购票流程练习
交互练习
一个电影购票流程练习,从选电影、选座、确认订单到出电子票,四个页面串成一条能点的流程。演示数据,不会真的出票扣款。
可交互原型
夜航购票流程
从选择场次、挑选座位到确认订单和查看电子票。模拟支付不会扣款,也不会生成真实票据。
项目概况
夜航是我做的一个手机购票界面练习,四个页面:电影详情、选座、订单确认、电子票。想检查的是每一步的信息有没有接上,选过的场次和座位会不会在后面丢掉。
要解决的问题
购票要先选场次,再选座位、确认费用。每一步都得保留之前的选择,让人知道自己选了什么、接下来做什么。
范围与限制
- 作品定位是个人界面与交互练习,不是商业票务产品。
- 电影、影院、场次、价格和二维码都是演示内容,不会真的出票或收款。
- 影院基础图标用的是 Material Symbols Sharp。
- 移动画板以 390 × 844px 为这次原型的基准。
设计过程
把四个画面连成一条能点的流程,电影、场次、已选座位和费用在后面的页面继续显示。用颜色区分可选、已选和不可选座位。
关键判断
用完整购票路径串联四个画面
为什么这样做
电影详情、选座、订单和电子票按一个任务连起来,才能检查页面之间的信息是不是一致。
考虑过的其他方案
- 只做四张独立的界面画板
说明模拟支付不会扣款
为什么这样做
保留确认订单和查看电子票的操作,同时说清楚这些只是演示,不会出票或收款。
工具
- HTML / CSS / JavaScript 原型
- Material Symbols Sharp(基础图标)
做完了什么
做出了一个四屏可预览的移动购票流程练习。没有真实订单、支付,也没有用户测试结论。
复盘
- 页面连起来之后,才能检查场次、座位和金额有没有在下一步正确保留。
- 原型里的演示数据和图标来源要说明清楚。
可从电影详情开始操作,选择场次和座位,再查看订单与电子票。二维码为演示内容,不能用于入场。