【案例复盘】淘票票APP设计思路深入解析

静电说：又到了APP案例复盘栏目的时间了，今天我们为大家解析的是淘票票这款应用。这是一款可以查看影讯，买电影票和演出票的应用。虽然疫情冲击导致电影行业普遍低迷，但是淘票票这款应用却通过自己的不断改善来满足用户在不同环境和使用场景下的需求。

我们主要通过产品，交互，设计三个层面来为大家解析。

001.首页

淘票票的首页内容非常多，但并不显得凌乱。头部黄+粉色的渐变背景，可以让设计更加活跃，避免大白板背景带来的无趣感。继续往下，淘票票的2级tab内容非常多，在单纯“购票”行为低迷的大环境下，转型为内容型的设计更符合当前的需求。轮播图区域则更矮，腾出更多的空间来展示下方内容。而影视互动区域则是淘票票的创新，已经保留了非常长的时间。通过动态影片与下方热门电影的叠加展示，吸引用户来产生购票欲望。菜单方面，我们则主要观察设计师是如何设置栏目的，依据当前应用的重心来设计菜单，会员栏目占据了非常重要的位置，说明产品目前的经营重点。

002.二级菜单栏目

对于2级Tab菜单，设计师采用不同的颜色来表达不同风格和功能的页面，另外需要注意上方榜单栏目的做法，一般采用较重的颜色卡片，然后对于title和下方榜单进行分区处理。

在下面的这个页面中，如果你想把卡片做出一点与众不同的效果，或者想凸显它，最好的方式就是加上一点背景和渐变效果，还有纹理。而很多同学对卡片模式下的列表标题不太会处理，在这里大家可以选择将标题放在卡片区域外，并加大加粗文字的方式处理。

003.VIP会员页

淘票票将会员栏目入口放在了菜单的中间，可见这个模块对于产品的重要程度。而页面内部，遵循VIP页面设计的规则，用户名和用户头像，以及积分放在了最显著的位置上。而升级会员模块则排在了紧随其下的位置，激励用户升级成为会员，并给出了明确的进度提示。会员特权则在下方，并突显表达，因为这是用户最关注的内容，不能没有。下方的运营广告和积分兑换则是活跃用户的重要手段。

设计上，在头部，黄+橙+紫色的渐变模式背景可以有效的突出卡片内容。而下方的两个卡片，内部也采用边框，背景色等方式来凸显各自的内容。“会员特权”模块，Title的另一种表现形式，异型图形加居中排列，让会员特权模块更明显。

004.“我的”页面

我的页面是几乎所有应用都具备的功能性页面，必要的内容为：用户头像，用户名，用户成就，设置按钮。还有常用工具的入口以及下方的推荐内容，这个页面也是促进用户进一步转化的重要页面，因此下方的内容推荐也一样必不可少。

设计上，一般我的页面会再次展示“VIP会员”的入口，将普通用户转化为VIP用户。所以这个模块会再次加强展示一遍，一般采用较重颜色的卡片形式。金刚区图标和“我的服务”图标，采用彩色图标与线性图标进行区分，可以有效的让用户区分重要程度。“我的观影时光”模块，渐变卡片与角标相结合的形式，凸显模块重要性。

005.影片详情页

在影片详情页中，淘票票同样采用了视频+图片相结合的方式，并直接在页面头部采用播放宣传片的方式来展示电影。另一块值得我们学习的，就是“淘票票口碑”模块， 大卡片中使用细线设计强调了这个子模块的归属性 。

006.总结

淘票票这个应用中，最值得我们学习的内容就是 卡片与模块设计 ， 不同的模块采用不同的设计风格，线框，渐变色等等形式 ，设计师用灵活的展示方式强化了不同模块之间的层次关系，且更具有视觉效果和可读性。小伙伴们，大家学起来！