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

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

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

一、体验环境

手机型号：iPhone 8 plus；

手机系统：ios 12.1；

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

二、视觉对比

1. 热映界面

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

顶部标签栏：

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

搜索：

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

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

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

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

2. 影院选择界面

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

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

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

3. 场次选择界面

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

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

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

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

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

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

4. 选座界面

1）没选座位

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

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

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

在还没选择座位时，猫眼的确认按钮呈不可点击状态，用橙色button降低透明度表示，对用户进行提示；淘票票的设计和猫眼基本一致，使用从左到右的渐变button，降低透明度；不过，渐变的button比纯色填充更加有活力和趣味性。

2）选座界面（选定座位）

当座位选择好了，两者的座位图都使用绿色+对号表示，颜色上与红色形成鲜明的对比；底部确认按钮的透明度变为100%，刺激用户进行下一步操作。

5. 订单详情页

猫眼的整个界面利用颜色进行信息分割，由于在界面中间重新进行了价格的计算，占据了界面的空间，购票须知则没有在界面中显示；这样界面承载的内容没有那么多，看起来比较整齐和简洁。

淘票票利用卡片进行信息的划分，因为只在界面底部显示需付金额，界面就有了显示购票须知的空间；和猫眼相比，淘票票的界面就显得有些复杂。

猫眼和淘票票的影城折扣卡都利用彩色背景吸引用户注意力；开卡后的节省金额是重点，猫眼虽然利用颜色进行突显，但是字体却变小了；淘票票利用节省金额后的icon吸引了用户更多的注意力。

确认付款的按钮：根据设计语言的一致性，猫眼仍然是橙色小圆角+文案，淘票票是渐变的全圆角+文案。

6. 电影票详情页

猫眼电影票界面使用的是浅灰色背景，一屏之内承载了很多的信息，给人一种拥挤的感觉；淘票票则有很大不同，使用的是深色背景层，与白色卡片形成鲜明的对比，而且第一屏界面仅显示最必要的内容，这样看起来就干净清爽了许多。

猫眼用红色矩形来显示距离开场的时间，可以很好的吸引用户的眼球；淘票票则直接将时间放在界面的顶部，通过增加空间占比，来吸引更多的注意力，保证用户第一眼就可以看到。

申请改签和申请退款的按钮：猫眼在第一屏内直接用彩色和灰色表示按钮是否可以点击，用户从视觉上就可以知道是否符合申请条件；淘票票将按钮放在了最后一屏的底部，可以很大限度的减少申请改签和退款的可能；但是仅从颜色上用户根本无法判断是否符合申请条件，只有阅读按钮下方的文案，或者点击按钮才能知晓；这一点，淘票票的设计不如猫眼人性化。

猫眼在第一屏的底部露出一小部分下一屏的内容，告知用户界面还有其它信息，这一点设计的很好；淘票票单从视觉上用户根本不知道还有没有内容，除非要寻找需要的功能或信息，才会向上滑动；当然，这样设计也对减少改签和退款情况起到一定作用。

7. 电影详情页

猫眼的前一屏半用的是深色背景，而且色相使用的是海报中的颜色，每部电影的详情页深色背景都不同；之后的影评、详细信息和推荐等内容则是白色背景，前后形成对比，防止视觉疲劳；淘票票通屏都是白色背景。

预告片在猫眼的详情页无法直接播放，只能跳转界面；而淘票票将第一屏界面的上半部分空间提供给了预告片的播放功能，其它信息则依次向界面下面让步。

猫眼将电影购票评分用橙色表示，非常吸引眼球，而且很直观；淘票票的评分没有用彩色，使用的是黑色，但是用橙色星形进行了视觉补充。

8. 预告片播放页

猫眼有两种不同的预告片播放页，这里用（图1）和（图2）进行区分。

在预告片播放页（图1）中，全部视频以左边预览图，右边介绍文案的列表形式向用户呈现；在预告片播放页（图2）中，界面则更聚焦视频播放功能，介绍文案在视频播放区域的顶部，覆盖在黑色渐变的图层上；两种预告片播放页，都在显眼的位置提供了购票按钮，以刺激用户购票消费。

淘票票的预告片播放页只有极少数的电影介绍文案，购票按钮在电影介绍文案的上方；点赞、评论和分享按钮被分配在界面的右下角，用户方便操作的区域；除此之外，界面没有任何多余的元素，几乎全屏的视频播放界面，给了用户极大的视觉冲击力，让用户的注意力集中在预告片播放区域。

前面是对用户在热映界面直接点击购票按钮进行购票的流程分析，但是如果在热映界面向上滑动几屏之后，没有找到想看的影片，用户就会利用搜索功能进行检索；对于这样的情况，搜索页的设计也会影响用户的体验。

这里分析的搜索页指的是点击热映界面的搜索icon或搜索框跳转到的搜索界面。

9. 搜索输入页

从搜索页很明显可以看出，淘票票的界面是经过精心设计的，同时印证了前面说的搜索功能在淘票票中的层级较高。

在搜索输入页，猫眼仅在搜索框内显示搜索范围，没有其它的设计元素。

在淘票票的搜索界面默认显示3个榜单，每个榜单显示前十名，用红色向上箭头表示在榜单中上升，绿色向下箭头表示下降，灰色横线表示不变。

热搜榜前三的排名用彩色字体与其它名次的灰色进行区分，且前三名电影名字的后面会有彩色标签。

淘票票的周票房榜和想看榜不再只是显示影片的的名字，还将海报展示出来。

10. 搜索结果页

猫眼的搜索结果页以feed流形式向用户展示，每个电影模块由左边海报、中间电影信息、右边评分和按钮组成；右边醒目的的红色和橙色按钮可以吸引用户点击。

淘票票的搜索结果分两类，电影和资讯/视频；其中电影部分会详细介绍其中的一部，且提供轮播图和购票按钮。

资讯和视频部分为了最大限度的利用界面空间，视频主要以横向浏览方式呈现，资讯主要以左边文案，右边图片的feed流形式向用户展示；有些视频穿插在资讯的feed流中，以左边文案，右边预览图的版式呈现，并在预览图上提供播放按钮，以和资讯内容进行区分。

在资讯的feed流中穿插视频的设计方式，可以让用户在长时间观看资讯的时候，休息一下，减缓疲劳且有惊喜感。

三、交互对比

1. 刷新

猫眼有两种交互手势可以进行刷新，点击底部tab栏icon，或者下拉；淘票票只能通过下拉刷新。

这两种刷新方式都比较常见，每个用户的习惯会有所不同，猫眼则兼顾了两者。

2. 加载动画

对于网络迟缓、操作时间长或者数据太多等特殊情况，应用的运行速度没有达到用户的预期；这时候界面就应该向用户提供明确的反馈信息，提示用户系统并没有崩溃而是正在解决问题——加载动画可以很好的吸引用户注意力，减轻用户心理焦虑。

猫眼和淘票票都使用的是无限循环加载动画，提示用户应用程序正在执行操作，需要等待一段时间，但不会指定需要等待的时长，而且两者都将品牌形象融入到了加载动画中。

猫眼的设计更加的传统常规，看起来干净直观；相比较而言，淘票票的设计更具情感化、更有温度。

3. 影院选择界面

当用户再次购票时，进入影院选择界面，最有可能选择熟悉的影院，因为重新进行选择和输入搜索的操作成本都很大。

淘票票会在影院的选择界面优先显示上次去过的影院信息，与其它影院不同的是，上次去过的影院内电影场次也会显示出来，方便用户选择。

雅各布·尼尔森（Jakob Nielsen）10大可用性原则中曾提到，要帮助用户记忆；淘票票在影院选择界面中充分体现了这一原则。

4. 从场次选择界面跳转至影院详情页

在场次选择界面，猫眼点击区域①，可以跳转至影院的详情页。

淘票票则需要点击深色图片区域才能进入，这是一个隐形的交互手势，不易被用户发现；淘票票在界面中增加影院信息空间占比的设计，可能也有一部分这个原因。

5. 当用户进入选座界面后

猫眼和淘票票都会在整个影院选座区域的左上方，显示影院的座位布局，几秒后就会消失，阻断性较弱，不会对用户造成过多的干扰，而且淘票票还会用红色表示出最佳观影区。

如果选择的观影时间不是今天时，猫眼和淘票票还会在屏幕上方显示Toast，达到提示用户的目的；猫眼提示弹窗的用色与背景的对比度不大。

相比较而言，淘票票的强对比能够吸引用户更多的注意力，提醒用户关注自己选择的观影时间，不要错选。

6. 切换场次

当用户进入选座界面后，又想更换电影的观看场次时，怎么办？

猫眼需要点击返回按钮，重新进入影院的场次选择界面选择观看场次；淘票票在选座界面就可以直接通过左右滑动进行更改，如果觉得场次信息占据界面空间，还可以将其收起；相比较而言，猫眼的设计增加了用户的操作路径，淘票票的设计更方便、更快捷。

7. 锁定座位

当用户选定座位，点击确认选座按钮之后，为了避免出现座位被重复选择的特殊情况，在界面跳转至订单详情页之前，系统会锁定座位。

锁定座位这段时间需要给用户提供反馈信息，和前面界面加载的处理方式不同的是，猫眼和淘票票都使用了Toasts ——这是一种轻量级的反馈提示，对用户的干扰较小。

这里的主要作用是通知用户系统的操作状态，避免让用户不知所措。

8. 当取消选座时

仅是在选座界面取消先前的座位选择，猫眼和淘票票都不会有任何弹窗提示。

但是，如果购票流程已经进行到订单详情页，再返回选座界面，点击选座界面的返回icon，此时无论界面是否已经取消选座，淘票票都会出现警告框（Alerts）。

警告框提供两个选项，让用户做出决定，保证用户是基于主观意愿才取消的选座，避免误操作；其实可以在弹窗的设计中加入情感化的元素，例如，一个哭泣的品牌形象，这样更有利于挽留用户。

点击猫眼选座界面的返回icon，直接跳转至前一步操作界面，不会有任何警告或挽留用户的提示信息。

前文提到过猫眼的预告片有两种播放界面，这里从交互角度进行分析，不同的跳转路径，连接着不同的播放界面。

9. 预告播放页

1）猫眼预告片播放页

图1：跳转至预告片播放页（图1）的路径有很多，这里主要分析我使用产品时了解到的两种情况；从热映界面点击播放button，或者在详情页点击海报上的按钮，都可以跳转到预告片播放页（图1）。

在预告片播放页（图1）中，当一条预告片播放完之后，按全部视频的列表自动播放下一条；（图2）预告片与官方视频这两个标签栏中包含的所有影片视频都会在（图1）全部视频的播放列表中。

图2：从详情页可以跳转至预告片播放页（图2），在（图2）中点击播放button之后才会播放预告片；播放完一条，自动暂停，要想观看下一条预告片还需要点击下一条的播放button。

这么做虽然增加了操作成本，但用户可以完全根据自己的意愿选择想看的影片视频。

2）淘票票预告片播放页

淘票票预告片播放页的界面只有一种情况，但是根据不同的跳转路径，播放列表有两种情况。

第一种情况，从热映界面点击播放button之后，跳转至预告片播放页；系统会自动播放预告片，当预告片播放完之后，不滑动界面，这一条预告片会循环播放；向上滑动，播放热映界面列表中第一部影片的第一条预告片。

例如：在热映界面，点击《我在时间尽头等你》的播放button之后，播放的是《我在时间尽头等你》详情页视频列表中的第一条，播放完之后，不滑动界面，会自动循环播放；若向上滑动，播放的是《八佰》详情页视频列表中的第一条；播放完之后，继续向上滑动，跳过《我在时间尽头等你》，播放《盗梦空间》详情页视频列表中的第一条预告片。

第二种情况，从详情页跳转至预告片播放页；不滑动界面，会循环播放这一条预告片；若向上滑动，则按其视频列表进行播放。

在预告片播放界面向左滑动，会跳转至影片详情页，这有助于用户了解电影详细信息，进而消费。

我个人认为猫眼的设计更符合我的预期，在热映界面我点击了海报上的播放按钮，我想看的就是当前这个影片的预告片。

在使用淘票票时，如果从热映界面进入预告片播放页，就只能观看一条；并且在播放完这一条之后，我向上滑动，播放的是其它影片的预告片，我的预期是播放相同影片的下一条预告片；要想看更多的预告片，只能进入详情页，重新点击，增加了用户的操作成本。

10. 搜索输入页

用户进入搜索输入页时会立即弹出键盘，并且输入框是焦点状态，保证用户无需进行任何点击，直接输入搜索内容即可。

11. 搜索结果页

猫眼和淘票票在搜索结果页的设计上有相同的地方。

例如，两者都会将关键字进行高亮显示，这样可以让用户快速找到自己想要的目标；并且在搜索结果页上添加可以操作的购票或想看的按钮，这有利于用户提升操作效率。

当搜索结果的内容过多时，进行分类展示，这样可以提升信息的清晰度和可读性；在猫眼的搜索输入页可以看到，搜索范围仅为影视剧，因此搜索结果页使用蓝色标签进行简单的区分。

淘票票搜索结果页分为电影和资讯/视频两部分，其中的影片部分展示搜索的结果数量，让用户清晰了解搜索内容的多少，默认仅显示三部，其它影片折叠；资讯和视频采用水平和垂直的十字型交互，可以尽可能多的向用户展示内容。

四、功能对比

1. 热映界面

标签栏Tabs，点击切换当前频道，提供给用户更大的选择性，带来更多的流量入口。

两者不同的是，除了热映、影院和待映/即将上映之外，淘票票还提供了在线看的功能；这就为那些不想去影院，但又想看电影的用户提供了帮助，满足了他们的需求，解决了这部分用户的痛点。

由于搜索功能在应用中的层级不同，猫眼的设计就为运营banner提供了界面空间，可以起到很好的引流作用；淘票票在热映界面没有banner位置。

淘票票在搜索框的右边有一项二维码的扫描功能，用户可以进行扫码、验票；猫眼在热映界面没有这个功能，但是猫眼将这一功能放在了电影票界面的底部。

2. 影院选择界面

猫眼和淘票票在影院选择界面的设计上，有许多相似的地方。

例如，在每个影院模块都会显示影院与我之间的距离，用户可以将筛选条件定为“距离最近”，通过数字对比，直接选择想去的影院。

淘票票在导航栏还提供了一个定位功能，用户可以根据自己的定位选择影院；在定位界面，默认显示距离最近的影院，且影院位置做放大处理。

两种选择影院的方式进行对比：

直接在影院选择界面通过距离对比来确定想去的影院，这种方式非常方便、快捷；相比之下，根据淘票票提供的定位功能选择影院的方式就显得有些复杂了，增加了用户的操作成本，而且也不如前者直观。

3. 分享截图

猫眼和淘票票都提供了分享截图的功能。使用猫眼截图后，系统会弹出活动视图（Activity Views），用户可以进行分享。

使用淘票票截图后，会在屏幕的上方出现Snackbar，可以把场次信息和座位信息分享给好友；Snackbar会在屏幕上方停留几秒，然后自动消失，不会打断用户当前的操作；既可以起到提示作用，又不会让用户反感。

4. 电影详情页

猫眼在详情页中不可以直接播放预告片，需要跳转到其它界面才行。

正如前文提到的，跳转路径有很多种，但是预告片播放界面只有两种；淘票票在详情页可以直接播放预告片，而且预告片的播放顺序是按视频部分的列表进行的。

淘票票还在详情页显示影片在周票房榜的排名，方便用户了解榜单情况。

在详情页点击想看按钮，猫眼会在按钮下方弹出预告片列表，可以引导用户观看预告片，了解电影内容；淘票票点击想看之后，在按钮下方不仅给出反馈信息，还提供了分享功能，这一点有助于增加观看影片的用户。

5. 电影票详情页

在电影票详情页，猫眼将分享功能放在导航栏，能够吸引更多的注意力，而且方便用户操作；淘票票的分享功能放在了第二屏，相比较猫眼，分享功能在淘票票电影票详情页中的层级就不那么高了。

猫眼在界面底部提供扫一扫，验证票纸真伪的功能，这一点前文已经提到，淘票票则将该功能放在了热映界面的导航栏。

个人认为，这一功能使用到的几率很小，淘票票将功能层级放得有点高，猫眼的设计相对好一些。

五、思考与总结

这次仅从几个比较小的方面对猫眼和淘票票的购票流程进行了对比分析。

当然，由于产品的不同背景和定位，两者还有很多各自的优缺点，只要在使用产品的过程中多观察、多思考、多总结，就会发现许多有趣的设计细节。

 

作者：星辰Hester

来源：星辰Hester