Project Overview
项目背景
Pisell 是一家澳洲多端商业软件平台，Kiosk 是其中面向线下实体商户的自助点餐终端产品。用户在实体店内通过触屏终端完成浏览、选购、结账全流程，无需收银员介入。本项目覆盖：普通商品购买、预约服务下单、活动票务兑换三大核心场景。
01 · Onboarding
引导与欢迎体验
闲置状态下，终端以视觉吸引力强的动态欢迎页等待顾客触碰。支持语音唤起（"Hi Anna"）与多语言切换，在用户开始点单前完成语言选择，减少后续流程中的语言障碍。
💡 设计决策
欢迎页采用大图背景 + 简洁触发按钮的视觉层级，避免信息过载。语言选择优先于商品浏览，一次选择全程生效，减少后续操作摩擦。语音唤起功能降低了对触屏的依赖，对老年、障碍用户更友好。
02 · Main Interface
主界面 — Launchpad 与导航
清晰的场景入口分发
Launchpad 是用户进入实际流程前的核心分发页。根据商户配置，展示可选场景：零售购物、服务预约、票务兑换，每个场景有独立的视觉区分与导航路径。
- 图标 + 文字双重识别，降低认知成本
- 场景按钮根据商户后台动态配置显示或隐藏
- 2.0 版本新增「主推场景」大图卡片入口
- 支持无场景时直接进入默认商品列表
03 · Booking Flow
预约 & 零售购买流程
核心购买链路：商品列表 → 详情选择 → 加入购物车 → 结账，同时支持套餐商品、多规格变体、附加备注等复杂商品配置，保证在触屏大尺寸界面下的操作准确性。
💡 关键设计挑战
Kiosk 屏幕大但用户是站立操作，触控区域需大于 44px。商品详情页需要在有限高度内展示图片、规格选项、数量控件和加购按钮，通过吸底操作栏 + 可滚动内容区的分层布局解决竞争问题。套餐商品（Bundle）的多步选择采用分步确认而非一页展开，降低选项过载感。
04 · Checkout & Payment
购物车 & 支付结账
高成功率的支付体验设计
结账流程包括：订单确认 → 支付方式选择 → 扫码/刷卡 → 结果反馈。Kiosk 作为无人值守设备，支付失败的引导与重试机制尤为关键。
- 清晰的订单明细 + 总价展示，减少用户犹豫
- 支持多种支付方式：刷卡、扫码、现金（可配置）
- 支付中状态动画，避免用户因等待而重复操作
- 失败页提供明确的错误原因 + 重试入口
05 · Success & Tickets
成功反馈 & 票务页面
订单完成后的成功页设计以正向情绪强化为核心，同时展示取餐号码或二维码。票务场景下，用户可直接在终端查看、兑换已购票务，详情页展示票面信息与座位/场次信息。
Design Summary
设计总结
Kiosk 项目历经 1.0 初版与 2.0 迭代，从单一零售场景扩展为多业务模式统一平台。设计体系在迭代过程中积累了完整的组件库与规范文档，并与前端代码组件保持同步交付。