MOVIE · TICKETS · TABLES — 桌游购票系统的构想
像选电影院一样,
挑一家
桌游店
——把「选游戏 → 选店 → 选同玩者」
做成像挑一场电影一样轻的事。
陈森
nbsp; · Chen Sen
Product · UX · UI
INDEX · 目录
01.
The Brief 设计原型
「电影院」的隐喻 · 三层匹配
↗
02.
Two People 两端的人
玩家 Jack · 店主 Alex
↗
03.
For the Player 玩家端 App
像看电影一样玩桌游
↗
04.
For the Host 商户端 Web
影院后台 · 一屏运营
↗
05.
The System 设计系统
色彩 · 字体 · 组件
↗
01
✦
CHAPTER ONE · 设计原型
起点 —
一个借用电影院的想法
在产品侧,这意味着平台必须同时服务两端:
对玩家,它是一个像猫眼 / 淘票票一样的「桌游购票应用」;
对商户,它是售票后台 + 影院调度系统。
这不是先做哪一端的问题
—— 而是从第一天起就要双端齐发的设计课题。
店主侧 · 既是影院,也是售票员
店主说 — 「我开店是因为爱桌游,
不是为了天天对着 Excel。」
01
桌位预订靠微信和电话,经常重复预订或漏接。
02
上百款桌游,库存损耗、丢失件,纯靠人工盘点。
03
员工排班发在群里,谁请假谁顶班全凭口头。
04
顾客问规则、退款、寻物等问题,全堆在店主一人。
05
无法预估客流,「冷场夜」与「爆桌夜」交替出现。
玩家侧 · 看似在选游戏,其实在选人
玩家说 — 「我不缺钱,我缺一群
水平差不多的牌友。」
01
新游戏想玩,但圈子里没人会规则,只能搁置。
02
朋友群里组局,在很多群里转着 @ ,一晚上都凑不齐人。
03
到店发现今晚没空桌,白跑;或店内玩家水平参差。
04
付完款进店,没人愿意把游戏「教学」给新手,体验断层。
05
玩完没有「沉淀」—— 下次再来不知道能不能遇到同一拨人。
电影院里,你不会问邻座
是不是好相处;
桌游店里,这件事比游戏本身更重要。
— FIELD NOTE · 关于「同玩者」
02
✦
CHAPTER TWO · 人
两端,两个真实的人
目
标用户不是一组标签,而是两个具象
的人 —— 一个进店的 Jack, 一个在
店里跑桌的 Alex。设计中的每一次
取舍,都回到他们身上问一句: 「他们此刻在想
什么?」
身份
资深桌游玩家 · 工程师
桌游经验
多年老玩 家,熟悉策略与剧本类
到店节奏
周末固定档期
常用渠道
微信群 · 小红书 · 大众点评
核心诉求
找到水平相当的同玩者
最在意
桌上的氛围,不是游戏本身
“
我不缺钱,我缺的是一群水平差不多、
不抬杠、能玩完愿意加微信的牌友。
J
Jack
PERSONA 01 · 玩家
身份
桌游餐吧店主 / 同时是玩家
经营特征
独立小店 · 既要跑桌也要算账
主要支出
房租 · 人力 · 桌游补货
数字化
低 —— Excel 记账,微信收款
核心诉求
稳定客流 + 减少琐事
排斥
复杂后台 · 学习成本高的工具
“
我开店是因为爱桌游,
不是为了天天对着 Excel 算账。
A
Alex
PERSONA 02 · 店主
Jack 和 Alex 本质上需要同一个东西:
一个能让供需互相看见的实时层。
— DESIGN BRIEF, V3
03
✦
CHAPTER THREE · 玩家端
像看一场电影那样,
玩一桌桌游
整个旅程对应电影院的体验:
海报墙 → 影片简介 →选场次和同场观众 →取票 → 散场聊片。
PLAYER · 玩家端
把「同玩者匹配」放到首
页第一屏,
而不是某个深层菜单。
桌游玩家的决策路径并不是「选游戏 → 选店 → 下
单」, 而是「找到一个能开局的局」 —— 一旦同桌的
人对了,玩什么游戏、去哪家店都是次要的。
所以主页第二屏就是「加入拼桌」:每张卡片直接呈现
游戏、店、剩余位、桌主的等级与历史 —— 像一张电
影场次卡,只是多了「同场观众」这一栏。 打开 App
第一眼看到的不是商品,而是一个能落座的位置。
TAKEAWAY
把决策的核心从「选什么」
切换到「坐下来」。
01.
DESIGN DECISION
02.
DESIGN DECISION
把
「我是谁、我擅长什么」
做成
可炫耀的角色卡。
桌游本质是社交游戏 —— 「我厉害」需要被看见,「我
会教学」也需要被看见。 个人中心首屏汇集了等级、
连胜、已玩游戏、好友数、勋章 —— 像一张实体桌游
卡牌的角色面板。
下一次拼桌时,这就是 Jack 的「演员表」: 桌主能看到
他玩过什么、擅长什么、是否愿意带新人。 匹配的依
据从此不只是「能凑够人数」,而是 「这群人坐在一起
会不会愉快」。
TAKEAWAY
玩家档案不是 KPI 报表,
而是一种社交身份。
取票
预订成功
大尺寸二维码 + 券码 + 桌位信息一屏直达—— 就像电影票。底部「加入游戏讨论群」把订票直接接驳到散场聊天。
影片简介
游戏详情
规则难度、时长、人数信息卡片化 —— 像电影豆瓣页一样,让玩家在加入之前判断这局适不适合自己。
散场聊片
局内群聊
顶部置顶游戏卡片(状态、剩余时长)—— 把「这局结束之前」做成可视化倒计时;支持照片分享,把桌上的瞬间沉淀下来。
其他关键屏幕
— PLAYER APP / SELECTED
SCREENS
MERCHANT · 商户端
04
✦
CHAPTER FOUR · 商户端
影院后台,
只是把电影换成了桌游
如果玩家端是猫眼,商户端就是
影院的中控系统
—— 排片、检票、清
场、库存、员工排班 都要在这里发生。 Alex 这样的店主每天
不会坐着
看后台
,他在跑桌。 所以这套系统只允许有一个原则:
关键信息一屏看完,
操作不超过两次点击
。
双端共享同一张「桌位」数据模型 —— 这是项目最关键的架构决策。
玩家 App 里看到的「8 号大厅 14:00」, 和商户端「桌号 V1 · 已预约
14:30」是同一条记录。 改一处,两端同步。
店主一旦标记「桌位空出」,附近浏览中的玩家秒级感知; 玩家匹配成功
的同时,商户端自动生成预订单,
无需店主手工录入
。 这条数据链的设计,
决定了之后所有 UI 的可能性。
PLATFORM
Web · Desktop First
USER
店主 · 楼面经理 · 服务员
MODULES
概览 · 库存 · 订单 · 排班 · 消息
FREQUENCY
高频 · 工作日全天驻留
STANCE
工具,不是炫技
01.
库存管理 · 把上百款商品一屏可见
进度条 + 百分比表示库存余量,缺货 / 低库存 / 有货三色状态,
远比单纯数字易扫读。
02.
订单与收银 · 售票窗口
顶部大字号呈现当日营收;左侧近期订单流提供时间感;右下角实时场地图与排班
共用同一信息层;FAB「+」一键开台。
03.
员工排班与绩效 · 把口头排班搬上来
周视图甘特图替代微信群里的文字接龙;
优秀 / 稳定徽章 + 顾客好评卡片回流到员工,让「软评价」也可见。
04.
店面概览 · 影院当晚的排片表
把当晚所有桌子的状态(空闲 / 占用 / 清理中 / 已预约)做成色彩明确的卡片,代替过去白板贴纸;员工排班与库存预警共存一屏。
FIG. 04.01 · STORE OVERVIEW
店面概览 — 实时桌位调度
DESKTOP VIEW
CHAPTER CLOSING · 商户端的承诺
把店主从这四重身份里释
放出来 ——
这是商户端唯一要做的
事。
让 Alex 把每天的精力还给客人和游戏,
而不是消耗在表格、群消息与电话上。
库管员
INVENTORIST
客服
CONCIERGE
调度员
COORDINATOR
售票员
RECEPTIONIST