设计实战！称职又好用的电影购票APP应该如何设计？

周围商圈和城市综合体的大屏幕越来越多，去电影院看电影也已经成为了我们日常生活中非常自然的一种娱乐方式。吃着爆米花喝着可乐，在大荧幕上看着别人的故事和人生，这种放松的体验非常受欢迎。

所以，买电影票是一个绕不开的钢需。我们常常会借助各种购票APP和网站来筛选电影信息，匹配时间表，挑选作为，甚至购买观影时吃的食品和饮料。如何让整个购票、观影的过程更加舒适，是这些服务商和APP、网站所需要做到的事情。今天的文章，我们来聊一聊，如何为一个电影购票APP设计页面UI和体验、功能。

个人页面

必须承认的是，现如今的应用APP 在个人化、个性化体验设计上越来越成熟，要求也越来越高了，相应的个人页面也成为了APP当中必不可少的组成部分。作为一款电影购票类APP，用户的个人购票信息都会集中在个人页面中呈现。更重要的是，个人页面的个性化设计能够更好地同用户产生联系，进而培养忠诚度；另一方面，通过个人页面来跟踪用户信息也会变得更加轻松。

个人页面只应该包含必要的信息，否则整个页面的UI复杂度很难控制。用户注册的时候，通常会需要用户提交用户名（ID、姓名）、电子邮件、注册地和电影偏好。由于购票是主要的功能，通常还需要提交信用卡或其他的支付信息，便于用户购买和预订。除此之外，通过用户的日常购买信息和地理位置信息，APP还能为用户提供更多有用的电影信息，比如周围的电影相关的活动和附近正在上映的电影的相关资讯。

主界面

主界面，或者说首页，是绝大多数数字产品的核心和基础，用户通常是从这里开始他们的旅程。主界面会因为产品类型的不同而有所差异。

对于这款电影购票APP而言，主屏幕无疑是要呈现电影本身的，其形式则是电影海报和电影名称，当天所播放的电影都会在主界面显示。这些电影会以列表的形式展现，这样用户可以快速浏览并选择。海报应该是可点击的，并且随后用户会随之进入特定电影的单独页面。

此外，主界面的UI当中，应该有搜索框，让用户能够搜索并快速找到他们想要的电影。在搜索结果中，添加筛选机制，帮助用户更快地在结果列表中筛选出他们想要的条目。

电影详情页

海报和一个名称并不能让用户完全了解整个电影的概况，所以在电影详情页当中，需要添加对于电影的详细说明，和细节信息，确保用户清楚他们面对的是什么电影。

电影详情页的UI设计并不复杂。电影海报+名称+详细信息构成了其中主要的内容，移动端排版也可以在视觉上做到非常突出，确保清晰的同时，为用户提供愉悦的浏览体验。

除此之外，电影的评分也是帮助用户判断的重要元素。诸如烂番茄和IMDB 这样的权威电影评分网站，能够帮助用户对于电影有更好的评估，在评分的参考下决定要不要购票。

当然，最好是能添加书签功能。总归是有一些电影是用户想看，但是暂时由于其他原因无法去观影的。这样有了愿望清单，之后时机成熟，就更容易购票观影了。

播放界面

现如今的电影为了更好地宣传营销，通常都会事先剪辑好预告片。视频内容相比于静态图片的优势就不在这里赘述了，将预告片放到电影详情页当中，无疑是个不错的选择。

应该提供视频播放功能让用户在应用内可以观看预告片。视频播放器可以是整个电影详情页的一部分，也可以通过单独的页面聚合电影预告片。当然，作为移动端播放器，它应该可以全屏播放，确保浏览体验。整个播放器功能其实谈不上有多关键，但是考虑到其他的应用都有了，所以尽量包含它，才能让产品更具竞争力。

排片时间表界面

排片时间表和购票息息相关，有了这个，用户才能购买对应时间的场次。设计师应该对这个环节进行深入的设计，因为，通常而言这个界面需要设计得紧凑而易于查看。

每个电影的排片都不一样，所以时间表要显示每一部电影每天的排片时间，不同播放时间的场次会占据不同的按钮，方便用户点击预订。

选座界面

完成电影场次的选择之后，用户就可以进入下一个界面选座了。座位的选取通常有2种不同的方式，一种是列表试图，一种是座位俯瞰试图。

列表视图很简单，就是将座位按照行和列制作成为表单，用户点击选取即可。但是这种设计和现场位置布局看起来有差异。

所以，视觉化的俯瞰图越来越受欢迎。这种视图能让用户更为清晰地看到座位布局，自己选择哪里会有更好的视野。不过，设计师在设计的时候要注意细节的掌控，电影院的座椅布局要能清晰地查看，还要能便捷地点击，确保用户一下就能点中想要的位置。

购买界面

能够尽早预订并且选取最佳的观影位置，是用户能从这个电影购票APP当中所能获得最大的好处之一。设计师的重任，是让整个购买过程安全而舒适。

购买界面当中，通常需要用户填写他们的个人信息表单（比如信用卡、名字和手机号）。正如我之前所说的那样，如果应用本身就在个人页面当中将这些信息存储好了，那么系统可以自动获取，整个购买过程会便捷很多。

另外，应用还得确保用户数据的安全，这一点非常重要。通过合理的安全验证机制和加密技术，让用户数据和支付环节尽量得到保证，或者同相关的安全机构进行授权、合作，来达到相应的目的。

电影票

电影票是用户进入影院观影的通行证。有些应用会将电影票通过电子邮件发放出来，有的则提供凭证让用户去影院领取或者单独打印。这些方式都是可行的。更优秀的策略，是将电子电影票存储在用户的个人页面当中，当用户去电影院的时候，直接展示出来，通过二维码激活影院相应的程序即可使用。

在这个环节当中，电子门票可以通过自定义插画等形式来呈现，这会明显提升应用的原创性。

地图界面

在很多小的城镇上，可能只有一家电影院，如果是在大城市当中，一个街区当中可能会有很多家电影院，那么当用户买票之后，第一次去可能还需要导航引导去电影院。所以，地图的功能其实是很重要的。

另一方面，应用应该提供自动选择最近的电影院的功能，这能让用户观影便捷不少。

在电脑和手机上看电影无疑是不能和大荧幕观影相提并论的，体验差距着实太大。电影行业不会因为数字技术的发展而衰落，相反它正在走上上坡路，所以，我们应该借助数字技术让观影拥有更好的体验。

【这些文章同样来自Tubik Studio】

1. 《游戏化设计中，任务和挑战是怎么发挥作用的》
2. 《游戏化设计的精髓是结合用户历程进行UX设计》
3. 《帮你理清创意的情绪板，是设计项目前期的利器》
4. 《超详细解读：UI导航设计不仅仅指的是导航栏》
5. 《在设计流程中，通过这6种方式来运用信息架构》
6. 《看似简单的几个动效，在APP中实现过程并不简单》

本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。

================明星栏目推荐================

优优教程网： UiiiUiii.com 是优设旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。

设计导航：国内人气最高的设计网址导航，设计师必备：http://hao.uisdc.com