UI 设计与客户评审指南
v0.1｜2026-10-25｜原型为静态交互，不连接任何真实服务
1. 设计定位
临时品牌 Sawasdee Table，关键词：温暖、清晰、安心、轻量。面向游客及本地顾客，优先展示服务位置、商品和应付金额。桌面仅作为评审展示壳，顾客、商户、打印配置均以移动端宽度交互。
应用 ui-ux-pro-max 的触达、无障碍、排版和状态规范；根据扫码即用场景，不采用其通用推荐中的 App 下载落地页。原型使用本地 SVG 食物插画与系统字体，无远程素材依赖。插画仅占位，正式商品建议使用商户实拍照片。
| Token | 设计值 |
|---|---|
| 主色 | 深松绿 #173F35；主按钮白字 |
| 强调 | 焦糖 #A64C24；浅杏底 #F4E4D4 |
| 背景 | 奶油白 #F7F5EF，卡片白 #FFFFFF |
| 正文 | #202E28；次要文字 #626A63 |
| 字体 | 系统 sans-serif；泰文优先 Tahoma/Noto Sans Thai；中文系统字体 |
| 字级 | 正文 16px、辅助 13–14px、标题 24–32px；泰文行高 1.6 |
| 尺寸 | 主触点 ≥44px；4/8px 间距；底部操作区预留 safe-area |
| 组件 | 圆角卡片、分类胶囊、底部固定购物车、可关闭原生 dialog |
| 动效 | 约 180ms 按压与状态反馈，尊重 prefers-reduced-motion |
本稿仅设计浅色主题，未承诺暗色主题。布局最小测试目标 375px；横屏与较大屏仍保持移动内容结构。
2. 页面及交互
| 页面 | 主要内容 | 可演示交互 |
|---|---|---|
| 评审首页 | 项目概览、四份文档、演示路径 | 打开文档、进入原型 |
| 顾客菜单 | 店名、桌/房来源、语言、分类、搜索、商品 | 四语切换、搜索/分类筛选、打开规格 |
| 商品详情 | 插画、描述、过敏原、规格、加料、备注、数量 | 单选必选规格、多选加料、加入购物车 |
| 购物车 | 商品行、规格、备注、数量、金额及政策 | 增减删除、返回菜单、确认提交 |
| 付款页 | 金额、PromptPay/TrueMoney/卡/银行 App | 切换方式、模拟成功或失败；不会真的付款 |
| 订单进度 | 门店、来源、订单号、支付与制作状态 | 模拟进度、继续加单；后付申请整桌结账 |
| 商户接单 | 演示订单、来源、支付状态、分部门 | 接单、制作、完成；已付拒单模拟退款状态 |
| 打印配置 | 收款模式、共享门店、主设备、部门路由 | 选择设备/部门目的地、全单与部门预览、离线模拟、补打反馈 |
顾客核心 UI 和菜单样例具有四语词条；商户评审面板为中文。后续正式交付需增加商户四语字典和专业母语审校；本地原型翻译属于样例，不能直接用于食品安全告知。
3. 客户演示路径
路径 A：咖啡/餐厅先付
- 打开原型，语言按浏览器偏好选择；手动切换 Thai / English / 中文 / Bahasa Melayu，观察商品与按钮同步变化。
- 在“演示设置”选择“先付款”、A 店 T12，加入奶茶和热菜，可选择糖度、加料和备注。
- 打开购物车，检查 THB 总额与费用说明，选择付款；先模拟失败，再模拟成功。
- 顾客看到已付款、等待接单；切换“商户接单”，接单后更新制作状态。
- 切换“打印配置”，预览全单与部门票；仅演示路由，不发真实打印任务。
路径 B：后付与多轮加单
- 重置演示，选择“先下单后结账”；演示假设店员已开台，真实系统需开台授权。
- 加购并提交，订单显示未付款；商户接单后制作。
- 返回菜单继续加单；再次提交后，查看累计未付总额。
- 申请结账，模拟支付后显示已结账；同一已付台账不能再次支付。
路径 C：酒店房间与共享打印
- 重置并选择 B 店 · Room 808，查看酒店来源与送餐说明。
- 下单后到打印配置，选“包含 A/B 店”，确认前台全单票头区分门店。
- 给酒水、热菜、烧烤选择不同设备，点选部门预览；没有匹配菜品时显示无任务。
- 模拟设备离线，再点击补打，观察操作反馈；这只是异常状态演示，不能证明物理出纸。
4. 原型边界
- 浏览器内存保存当前订单、语言本地保存；刷新会重置演示订单。重置不清除客户机器上其他网站数据。
- 来源选择器代替真实扫描，不生成生产二维码；支付页用明确的演示图形，不含可支付二维码。
- 金额基于固定样例价，假定已含税、无服务费；不是最终税务规则。
- 仅演示单浏览器顾客与商户状态，不实现多人同步、登录权限、后台推送或打印驱动。
- 打印配置不上传数据；设备在线状态、重试、补打都是可视化模拟。
- 商品样例覆盖饮品、热菜、海鲜/烧烤概念；真实菜单、品牌、实拍图、设备清单待客户提供。
5. 评审记录建议
每条意见记录页面、问题、期望变化、优先级、负责人和是否影响范围。先确认业务流程与信息，再确认视觉细节。客户确认此稿意味着认可设计方向，不意味着支付商准入或设备兼容性已经通过。