39 | 产品案例分析：SeatGeek的订票设计
邱岳
该思维导图由 AI 生成，仅供参考
00:00 / 00:00
1.0x
- 2.0x
- 1.5x
- 1.25x
- 1.0x
- 0.75x
- 0.5x
SeatGeek 是一个订票类的 App，我们买过电影票，可能也买过一些话剧或者体育比赛的票，所以应该都用过类似的应用，今天介绍的 SeatGeek 中有一些挺好玩的交互细节，希望可以给你带来启发。
SeatGeek 的整体结构比较简单，可以根据不同维度去浏览活动和节目，也可以搜索，还可以订阅追踪。
门票的快速浏览
我们重点看一下订票的交互流程。我们可以看到页面上方是一个场馆的缩略图，不同区域的座位用不同的颜色标识，不像我们平时买电影票或者一些演出的票那样，所有的座位都平铺开展示，这里只是有限的一些小点。
这里还有一个很有意思的交互，缩略图上的每一个点代表门票，每个门票蕴含的信息量比较大，那么如何快速地浏览所有的门票呢？
传统的思维可能是点击某个点的时候，浮层展示一下门票详情，这样做效率非常低，要不断地点；而 SeatGeek 采用的方式则是滑动下面的列表。
在滑动的过程中，利用图和列表的联动把门票的信息交代清楚，可以快速地浏览门票信息。滑动中还利用了 iPhone 的震动，每个切换会有一个微小的震动，这是一个新颖的设计。
票价的直观筛选
还有这里的 Filter，有一个细节，虽然很常见，但还是分享一下，就是当筛选价格的时候，它有一条曲线展示每个价格区间的门票量，随着你修改上下限，能够非常直观地看到总量和你选中的价格区间的门票量。
过去我们在做筛选或交互步骤的时候，思考逻辑是单线的，比如用户向系统发出请求，要求筛选某一个价格区间内的门票，系统响应请求，展示这个价格区间的门票列表。
如果我们跳出这个单线思维，去考虑在用户提出筛选请求时，还有没有其他对用户有价值的信息可以一起反馈。比如说，反馈的信息可以加入整体的票量以及价格区间的分布。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
SeatGeek是一个订票类的App，其设计中融入了许多有趣的交互细节，为用户提供了更加便捷和直观的订票体验。首先，其门票浏览采用了滑动列表的方式，结合了图和列表的联动，使用户能够快速浏览门票信息，同时还利用了iPhone的震动效果，增强了交互体验。其次，在筛选价格时，通过展示每个价格区间的门票量的曲线，让用户能够直观地了解不同价格区间的门票量，提高了筛选的效率。此外，该App还解决了用户在选座时难以判断不同位置视线的问题，通过展示真实视线情况的缩略图，提供了更直观的位置选择体验。最后，在结账时，采用了浮出卡片的方式，而非替换页面，保证了用户体验的流畅性。这些设计细节的运用，为用户带来了更加直观、高效和流畅的订票体验。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《邱岳的产品手记》，新⼈⾸单¥59
《邱岳的产品手记》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(6)
- 最新
- 精选
CCSeatGeek让我对不加入转场，交互体验衔接流畅的设计体验有了更多的了解。 这种设计理念，尝试在一个页面上展示尽可能多的信息，减少用户下一次点击的成本，避免来回切换的尴尬。页面局部产生的信息更新，通过为用户提供适当的反馈（比如震动），来建立视觉与触觉之间的联系，这种反馈本身也是一种信息。 Google 在2017年开放的 Payment Request API，采用的是和 SeatGeek 同样的 Checkout 设计。在 Chrome Dev Summit 2017 Keynote 上公布的一个数据提到，一个时尚品牌 J.Crew 在其电商 App 上采用该设计后，用户在手机的Checkout流程上花费的时间减少了75%。这在一个侧面说明浮动滑出的checkout卡片设计的优势。 在2017年，福布斯选出25家有可能成为十亿美元估值的创业公司，SeatGeek是其一。同年，还和Facebook合作，让用户可以直接在Facebook上买票。这家公司不仅产品设计精细，市场运作也是可圈可点。 谢谢二爷的分享，新年快乐！作者回复: 关于有可能成为十亿美元估值的创业公司这个事情我之前还真不知道，谢谢 CC 的分享，也祝你春节快乐！一切顺心
2018-02-1710
听天由己最近趁着假期去旅游了，所以换了头像，感谢二爷的祝福。 对预订流程也有很多体会： 一是展现座位票的详情采用了下拉滑动，非常流畅而且能够呈现更多信息，不只是简单浮层。 这一交互形式在各大旅游预订应用上很常见，例如携程或是马蜂窝，滑动景点或是酒店能够在地图上展现更多的信息。 第二是关于浮动划出的卡片设计，体验后真的很佩服，这样的形式我一直在想是否适合多信息或是条件筛选，显然他们在这方面做得非常好。 第三是关于点击列表直接显示所有门票，而不是演唱会信息，这是我非常好奇的，他们为什么要这样处理？这和我们传统做法是相悖的。难道是默认用户是来订票，节省用户操作步骤并且确定业务重心的？ 感谢分享，真的受益匪浅。我看看如何运用在自己的产品设计上。2018-02-176
皮特尔
展示位置视线那个功能，用的可能是“360度全景图”吧？ 一个场馆只需要一张大的全景图，展示的时候计算一下位置和场馆中心的距离、角度，把全景图调整到对应的位置、角度，就可以了。2020-07-014
Dylan这样的弹窗在网易考拉中看到过，从选择商品规格到支付确认，再到添加身份证，再到付款成功，整个流程非常流畅，体验很赞。 另外我觉得产品经理其实要针对具体问题，灵活的想出多种解决方案，而且还要站在用户角度考虑它的价值和可用性2018-07-253- 方薇点赞2022-10-19归属地：上海
- 刘洋3课程安排合理，赞2022-02-22
收起评论