39 | 产品案例分析：SeatGeek的订票设计

SeatGeek 是一个订票类的 App，我们买过电影票，可能也买过一些话剧或者体育比赛的票，所以应该都用过类似的应用，今天介绍的 SeatGeek 中有一些挺好玩的交互细节，希望可以给你带来启发。

SeatGeek 的整体结构比较简单，可以根据不同维度去浏览活动和节目，也可以搜索，还可以订阅追踪。

门票的快速浏览

我们重点看一下订票的交互流程。我们可以看到页面上方是一个场馆的缩略图，不同区域的座位用不同的颜色标识，不像我们平时买电影票或者一些演出的票那样，所有的座位都平铺开展示，这里只是有限的一些小点。

这里还有一个很有意思的交互，缩略图上的每一个点代表门票，每个门票蕴含的信息量比较大，那么如何快速地浏览所有的门票呢？

传统的思维可能是点击某个点的时候，浮层展示一下门票详情，这样做效率非常低，要不断地点；而 SeatGeek 采用的方式则是滑动下面的列表。

在滑动的过程中，利用图和列表的联动把门票的信息交代清楚，可以快速地浏览门票信息。滑动中还利用了 iPhone 的震动，每个切换会有一个微小的震动，这是一个新颖的设计。

票价的直观筛选

还有这里的 Filter，有一个细节，虽然很常见，但还是分享一下，就是当筛选价格的时候，它有一条曲线展示每个价格区间的门票量，随着你修改上下限，能够非常直观地看到总量和你选中的价格区间的门票量。

过去我们在做筛选或交互步骤的时候，思考逻辑是单线的，比如用户向系统发出请求，要求筛选某一个价格区间内的门票，系统响应请求，展示这个价格区间的门票列表。

如果我们跳出这个单线思维，去考虑在用户提出筛选请求时，还有没有其他对用户有价值的信息可以一起反馈。比如说，反馈的信息可以加入整体的票量以及价格区间的分布。

位置的真实视角

再看一个有意思的细节，当我们买门票选位置的时候，有一个痛点，就是如果我们不了解场馆，很难判断不同位置的视线怎样，我们来看这个 App 怎么解决这个问题。

打开个体育比赛，我们点击一个位置点，你可以注意看，上面的缩略图变成了这个位置的真实视线情况，我没有去研究这个图是怎么收集的，但可以想象这会是一个苦活儿，能做到这样很让人感慨，我觉得我自己有时候挺缺乏这种踏踏实实下笨功夫解决问题的劲头。

卡片的流畅转场

最后一个很小的细节，就是当我们点击 Checkout 的时候，不是替换页面，而是直接在当前页面浮出卡片，我们之前也讲过类似的细节，比如 Fabulous 里面，这么做不加入转场，交互体验衔接很流畅。这是移动端设计中，保证用户体验顺滑很重要的一点。

!

戳此获取你的专属海报