极客时间已完结课程限时免费阅读

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

39 | 产品案例分析：SeatGeek的订票设计-极客时间

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

2018-02-17 邱岳 来自北京
《邱岳的产品手记》
课程介绍
00:00 / 00:00
    1.0x
    • 2.0x
    • 1.5x
    • 1.25x
    • 1.0x
    • 0.75x
    • 0.5x
    网页全屏
    全屏
    00:00
    SeatGeek 是一个订票类的 App，我们买过电影票，可能也买过一些话剧或者体育比赛的票，所以应该都用过类似的应用，今天介绍的 SeatGeek 中有一些挺好玩的交互细节，希望可以给你带来启发。
    SeatGeek 的整体结构比较简单，可以根据不同维度去浏览活动和节目，也可以搜索，还可以订阅追踪。

    门票的快速浏览

    我们重点看一下订票的交互流程。我们可以看到页面上方是一个场馆的缩略图，不同区域的座位用不同的颜色标识，不像我们平时买电影票或者一些演出的票那样，所有的座位都平铺开展示，这里只是有限的一些小点。
    这里还有一个很有意思的交互，缩略图上的每一个点代表门票，每个门票蕴含的信息量比较大，那么如何快速地浏览所有的门票呢？
    传统的思维可能是点击某个点的时候，浮层展示一下门票详情，这样做效率非常低，要不断地点；而 SeatGeek 采用的方式则是滑动下面的列表。
    在滑动的过程中，利用图和列表的联动把门票的信息交代清楚，可以快速地浏览门票信息。滑动中还利用了 iPhone 的震动，每个切换会有一个微小的震动，这是一个新颖的设计。

    票价的直观筛选

    还有这里的 Filter，有一个细节，虽然很常见，但还是分享一下，就是当筛选价格的时候，它有一条曲线展示每个价格区间的门票量，随着你修改上下限，能够非常直观地看到总量和你选中的价格区间的门票量。
    过去我们在做筛选或交互步骤的时候，思考逻辑是单线的，比如用户向系统发出请求，要求筛选某一个价格区间内的门票，系统响应请求，展示这个价格区间的门票列表。
    如果我们跳出这个单线思维，去考虑在用户提出筛选请求时，还有没有其他对用户有价值的信息可以一起反馈。比如说，反馈的信息可以加入整体的票量以及价格区间的分布。

    位置的真实视角

    再看一个有意思的细节，当我们买门票选位置的时候，有一个痛点，就是如果我们不了解场馆，很难判断不同位置的视线怎样，我们来看这个 App 怎么解决这个问题。
    打开个体育比赛，我们点击一个位置点，你可以注意看，上面的缩略图变成了这个位置的真实视线情况，我没有去研究这个图是怎么收集的，但可以想象这会是一个苦活儿，能做到这样很让人感慨，我觉得我自己有时候挺缺乏这种踏踏实实下笨功夫解决问题的劲头。

    卡片的流畅转场

    最后一个很小的细节，就是当我们点击 Checkout 的时候，不是替换页面，而是直接在当前页面浮出卡片，我们之前也讲过类似的细节，比如 Fabulous 里面，这么做不加入转场，交互体验衔接很流畅。这是移动端设计中，保证用户体验顺滑很重要的一点。
    分享给需要的人，Ta购买本课程，你将得18元
    生成海报并分享

    赞 17

    提建议

    © 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
    上一篇
    38 | 如何做好需求评审（下）：在评审中控住全场
    下一篇
    40 | 新年给产品经理的几碗鸡汤
    unpreview
     写留言

    精选留言(6)

    • CC
      2018-02-17
      SeatGeek让我对不加入转场，交互体验衔接流畅的设计体验有了更多的了解。 这种设计理念，尝试在一个页面上展示尽可能多的信息，减少用户下一次点击的成本，避免来回切换的尴尬。页面局部产生的信息更新，通过为用户提供适当的反馈（比如震动），来建立视觉与触觉之间的联系，这种反馈本身也是一种信息。 Google 在2017年开放的 Payment Request API，采用的是和 SeatGeek 同样的 Checkout 设计。在 Chrome Dev Summit 2017 Keynote 上公布的一个数据提到，一个时尚品牌 J.Crew 在其电商 App 上采用该设计后，用户在手机的Checkout流程上花费的时间减少了75%。这在一个侧面说明浮动滑出的checkout卡片设计的优势。 在2017年，福布斯选出25家有可能成为十亿美元估值的创业公司，SeatGeek是其一。同年，还和Facebook合作，让用户可以直接在Facebook上买票。这家公司不仅产品设计精细，市场运作也是可圈可点。 谢谢二爷的分享，新年快乐！
      展开

      作者回复: 关于有可能成为十亿美元估值的创业公司这个事情我之前还真不知道，谢谢 CC 的分享，也祝你春节快乐！一切顺心

      8
    • 听天由己
      2018-02-17
      最近趁着假期去旅游了，所以换了头像，感谢二爷的祝福。 对预订流程也有很多体会： 一是展现座位票的详情采用了下拉滑动，非常流畅而且能够呈现更多信息，不只是简单浮层。 这一交互形式在各大旅游预订应用上很常见，例如携程或是马蜂窝，滑动景点或是酒店能够在地图上展现更多的信息。 第二是关于浮动划出的卡片设计，体验后真的很佩服，这样的形式我一直在想是否适合多信息或是条件筛选，显然他们在这方面做得非常好。 第三是关于点击列表直接显示所有门票，而不是演唱会信息，这是我非常好奇的，他们为什么要这样处理？这和我们传统做法是相悖的。难道是默认用户是来订票，节省用户操作步骤并且确定业务重心的？ 感谢分享，真的受益匪浅。我看看如何运用在自己的产品设计上。
      展开
      6
    • 皮特尔
      2020-07-01
      展示位置视线那个功能，用的可能是“360度全景图”吧？ 一个场馆只需要一张大的全景图，展示的时候计算一下位置和场馆中心的距离、角度，把全景图调整到对应的位置、角度，就可以了。
      4
    • Dylan
      2018-07-25
      这样的弹窗在网易考拉中看到过，从选择商品规格到支付确认，再到添加身份证，再到付款成功，整个流程非常流畅，体验很赞。 另外我觉得产品经理其实要针对具体问题，灵活的想出多种解决方案，而且还要站在用户角度考虑它的价值和可用性
      3
    • 方薇
      2022-10-19 来自上海
      点赞
    • 刘洋3
      2022-02-22
      课程安排合理，赞