竞品分析——猫眼和淘票票的购票流程

编辑导语：以前买电影票需要到现场去买票和选座位，去晚了可能没票或者没有想做座位了；但现在早就可以在手机上进行买票选座位，非常方便，买电影票平台也越来越多；本文作者分析了猫眼和淘票票的购票流程，我们一起来看一下。

在现代社会，人们休闲娱乐活动变得丰富多样起来，观看电影成为大家放松身心的方式之一，在线票务系统就在其中扮演者重要角色。

本文以猫眼和淘票票这两款应用为竞品，从电影热映界面开始进行购票，对购票流程中涉及到的界面进行视觉、交互和功能三方面的对比分析。

文中的观点仅基于我个人使用产品的体验。

一、体验环境

手机型号：iPhone 8 plus；

手机系统：ios 12.1；

应用版本：猫眼V9.8.1、淘票票V10.0.6；

二、视觉对比 1. 热映界面

从整体来看，猫眼的banner设计使界面内容更加丰富；对比之下，淘票票的界面则显得简洁干净。

顶部标签栏：

猫眼的选中状态为品牌色字体+品牌色短线，未选中状态为灰色；淘票票的选中状态为黑色字体+品牌色短线，未选中状态为灰色——两款应用在不同状态都使用了色相的对比，从对比效果来看，猫眼选中与未选中状态的的对比强度更加明显。

搜索：

猫眼仅用品牌色icon代表功能入口，可见搜索功能在猫眼中的层级不是很高——这样做的优点是比较节省空间，且位置较灵活；如果需要添加其它功能，直接调节搜索icon的位置即可。

淘票票使用浅灰色矩形框+深灰色icon+深灰色提示文案代表功能入口，可见搜索功能在应用中的层级较高；这样做的优点是搜索功能占据了界面更大的空间，吸引了用户更多的注意力，可以使用户一目了然，快速完成搜索任务。

按钮：形状上，猫眼和淘票票都使用的是全圆角按钮。颜色上，猫眼的按钮使用的是纯色填充+弥散投影；淘票票使用的是从左到右的渐变色；两者购票和预售按钮也都用了不同的颜色表示。

我个人更喜欢淘票票的设计，渐变既能进行视觉引导，又具有趣味性。

2. 影院选择界面

从整个界面来看，猫眼用浅灰色分割线进行影院信息的划分；淘票票则将每个影院都放在了一个卡片上面，卡片放在浅灰色背景层上。

筛选栏：猫眼将所有筛选条件通屏显示，整齐简洁；淘票票在这一栏，左右两边都有信息，中间留白，界面显得不太平衡。

每个影院模块：猫眼和淘票票都用不同颜色的标签代表可以提供的服务；对于影城卡和优惠券标签的设计，猫眼采用纯色填充，与其它描边的标签形成对比；淘票票则采用了和其它标签一样的描边形式——可见，猫眼更加注重影城卡和优惠券的推广。

3. 场次选择界面

顶部导航栏：猫眼采用纯白色背景；淘票票将导航栏与界面中间打通，采用深色图片背景；很明显，淘票票这么设计提高了影院信息在界面中的层级。

要进入导航界面，猫眼用定位icon代表功能入口，这么设计更加显眼，有助于促进用户进行下一步操作；淘票票则需要点击详情地址进入，这么设计就显得比较隐晦。

猫眼用2个位置推广折扣卡，占据了界面较多的空间，完全没有必要；不如像淘票票一样，直接用较亮的颜色卡片进行推广。

影院在播影片：猫眼采用深色背景，使用户的注意力更加集中到界面这部分区域，但是海报和背景的对比就不那么明显了；淘票票采用白色背景，海报与背景对比明显，每部影片的海报更加突出。

原始票价和折扣价两种不同的金额：猫眼为了突显折扣价，采用了纯色填充吸引用户注意力；淘票票仅用两种不同的颜色字体进行区分对比；个人认为，猫眼的设计对比效果更加明显。

当场次已经满座时：猫眼用品牌色降低透明度的按钮表示；淘票票直接用灰色表示，而且当余座较少时，淘票票还用文案进行提示，真的很人性化。

4. 选座界面

1）没选座位

在整个影院区域，淘票票用红色虚线圈出最佳观影位置。

对于不可选的座位，猫眼和淘票票都用和背景相同的灰色表示；已选的座位：猫眼用品牌色填充；淘票票不仅使用了品牌色，还在座位内加入了品牌头像，很好的传播了品牌形象。

底部确认按钮：猫眼的圆角半径比较小；而淘票票和热映界面一样，使用的是全圆角。