网页设计与交互
Gypsy — Tickets. 选择演出场次的戏剧化入口
为 Gypsy 做的售票页设计练习,把两个月的演出日历,放进霓虹灯、剧院灯牌和舞台幕布构成的视觉语言里。
- 我的职责
- 界面设计、视觉系统与交互原型制作
- 项目状态
- 设计练习 · 可交互原型
录制自原版原型,使用演示排期和占位文案。
我的贡献
需求简报要求做一个购票页面:两个月的可选演出日期、其他购票方式,以及三条可展开的常见问题。我把界面做成了可交互的原型,以演出方提供的视觉形象为起点。
这是一次技能评估练习。案例展示设计本身和能运行的界面状态,排期和文案都是演示用的,并不是一个正在运营的售票服务。
从灯牌到界面
霓虹红、暖色灯泡光和午夜蓝背景,营造出剧场氛围。日历放在一块受节目单启发的奶油色面板上,让密集的日期网格有了更安静、更易读的底面。
源码把色彩、字体、间距和动效整理成共用的 token。窄体的 Antonio 标题、几何风格的正文和手写体点缀,让首屏、日历和辅助板块在同一套视觉系统里各有各的角色。
先选日期,再选场次
相邻的两个月,让排期在一个视图里一目了然。可选日期带有小小的演出标记;选中某个日期,下方面板就会更新,显示这一天、演出场地,以及日场或晚场的选项。
月份控件可以在演示档期内翻页,已过去的日期和没有演出的日子则不可选择。所选日期在网格和面板里始终可见,把这个选择和下一步连在一起。原型到结算之前为止。
页面像舞台一样打开
入场动画把灯牌上的灯泡、Gypsy 霓虹标志,以及向两侧拉开、露出页面的幕布组合在一起。开场可以跳过;系统请求减弱动态效果时,原型会直接略过它。
动态版本和静态交付稿的用途不同:原型演示节奏和状态变化,导出的首屏、日历和辅助板块图则为设计评审保留了版面构成。
其他入口,答案就在旁边
三张带编号的卡片,把售票处、电话和抽签这三条途径分开。卡片下方是一个三项的手风琴式折叠面板,同一时间只展开一个答案,也允许把当前展开的答案收起。
这几个板块用的是评估简报里允许使用的占位文字。交付内容包括页面原型、可复用的视觉 token,以及为交付到 Figma 准备好的分板块导出图。



