影视App界面设计分析

齐壮 许佳

编者按：随着网络信息时代的飞速发展，用户对影视App界面设计的要求也越来越高，符合用户行为习惯的App界面设计更能满足用户的需求，给用户带来更好的使用感受。哔哩哔哩（bilibili）是以ACG相关的弹幕视频分享网站，是国内首屈一指的原创社区。这篇文章结合用户行为在哔哩哔哩界面设计中应用的思路，以此寻找用户行为对界面设计的价值。

用户行为在哔哩哔哩中的价值体现

在一众主流视频App激烈的竞争下还能占据一席之地，哔哩哔哩（bilibili）的独特之处是悬浮在视频上方的时事评论功能，爱好者称其为“弹幕”，这种独特的视频体验让基于互联网的即时弹幕能够超越时空限制。区别于其他主流影视App版式设计的是它的弹幕开关在明显的位置，更多其他的功能也很好地被隐藏了起来，符合二八定律，大部分的常用功能占20%且分布在常用的位置上，不常用的80%被隐藏且布局合理。在进入App时，哔哩哔哩的首界面会有进入青少年模式的提示，充分考虑到了用户的需求。将常用的功能分布在顶部和底部，且顶部可滑动，方便使用者的操作使用。个人主页分为两个界面，分别从左上角和右下角点击进入，左上角点击界面即为常用功能，且直接显示常用功能和节目，右下角的个人界面即为操作使用的具体功能。

哔哩哔哩是影视和自媒体的有机结合，这种模式与YouTube接近。App的使用极其人性化，根据个人喜好及观看历史推荐视频作品。哔哩哔哩的背景为白色，以突出视频封面内容。视频展示区以及功能区一目了然。视频封面图片分类清晰，时间、标题明确。通过为当前栏增加醒目的颜色，用户会很清楚自己所处的位置。而哔哩哔哩与众不同的是，它是一个能将艺术作品呈现得很好的一個方式，它设计风格独特，各种作品都能在这个载体上尽情地展现。心理学家证实，用户在后期的体验要比初期和中期重要得多，对事件的记忆要比事件的实际情况更为重要。在用户界面设计上主要体现在用户进入App的等待阶段，可以设计具有网站特征或者趣味性较强的等待动画以缓解用户的焦虑心理，还能提供用户可以或者有必要完成的干扰性任务，因为即便物理时间一样，在心理上空闲时间被认为比忙碌时间更短，欢乐时间比平淡时间更短。哔哩哔哩在各个部分的界面都有其特色，可以让用户在操作的不同阶段都能获得不同的交互感受。这要功归于哔哩哔哩界面设计的可视性。交互界面中的信息表达大都是通过视觉元素来呈现的，因此在通过计算机可视化技术将抽象信息内容转化成软件交互界面中可视的视觉元素时，视觉元素的刺激应当符合用户对其的心理和生理作用。哔哩哔哩界面中的icon设计、动效设计、交互设计，在视觉化信息的类型、形状、大小、色彩等方面的运用刺激了用户的感官。

用户行为是影响影视界面设计的重要原因之一，一个好的影视App界面设计在满足用户功能需要的同时，也要满足用户的情感需求。用户行为的产生总是与环境、个人需求、先前经历和其他的原因有关。并且，要改变用户行为，在界面的设计中也要满足线索提示、行为反应、受益权衡、使用门槛以及合适时机的条件。在用户行为影响界面的设计中，线索提示就是动作漏斗的第一步，线索提示的呈现对于无意识的习惯以及有意识的习惯都非常重要。在哔哩哔哩界面内容呈现的设计中，动态与静态相结合，以字体设计辅助图案造型更加便于识别。在加载区域通过简短的动态图标加以提示，为用户操作界面提供有趣的线索。在推送界面的设计中，左右滚动、上下滚动与静态界面相结合，突出推送内容的同时也唤起了用户的行为反应。从用户行为出发，提升用户的使用体验是哔哩哔哩成功的因素之一。影视App在节目选择、播放体验、操作便捷度上都有着传统视频播放方式无法比拟的优势，然而影视版权的分散以及繁琐的会员充值模式常常给用户带来额外的麻烦，如何以最简便的操作方式拥有更多的观影体验呢？哔哩哔哩就是这方面的榜样。

哔哩哔哩又称“B站”，是国内最大的年轻人潮流文化娱乐区，创建于2009年6月12日。目前哔哩哔哩活跃用户超过1.5亿，每天视频播放量超过2亿，弹幕总量超过14亿，原创投稿总数超过1000万，用户平均年龄17岁，75%的用户年龄在24岁以下。并在2017年发布的《移动互联网2017年Q2夏季报告》中荣获24岁及以下年轻用户偏爱的App第一名。

用户行为在哔哩哔哩中的应用

人们的大脑有两种不同的思维加工模式：一种是理性的，一种是直觉的。心理学家们对“两种加工的运作模式”有非常深刻的研究，并由此发展出“双通道加工理论”。这个理论认为，人们通常意识不到这个模式的存在，大脑的直觉模式根据人们过去的经历以及一些简单的经验规则，让人们在当下的场景时直接产生判断，这种判断往往来自人们此时的情绪感受以及身体的感知。如果场景与人们先前的经历十分相似，直觉会非常的有效;相反，在陌生的场景会收获甚微。哔哩哔哩在整体界面设计的布局上区别于大多数国内的视频软件，在信息栏的组织排列上，紧密丰富并将数量控制在了用户可接受的范围内，它的界面设计以用户熟悉的操作界面为基础，有效地增强了用户的动机，提升了用户的行动。在栏目和版式的设计中，视觉重点放在分组的内容而不是标题上，习惯有规律地驱动直觉行为，也使整个界面的设计显得更加饱满。

在哔哩哔哩的界面设计中，有很多需要用户完成的行为，这种操作不仅为用户提供了有效的引导，还减轻了用户对于新的操作界面在认知上的负荷，为用户的操作提供了有效的线索。精心设计的图标按钮作为奖励在界面中随时出现。完成了一套完整的行动过程。当用户产生新的行为时，外部线索是非常重要的，产品可采用将产品植入用户的日常环境中的外部提示策略。每次提示保持一定的变化，以免被用户忽略。如果一个行为越来越频繁，那么产品就可以帮助用户建立行为与内部线索的关系。改变用户行为而设计时，还应注意到同时存在并让用户分心的线索提示，我们需要避免或增强这种提示，来争夺用户的注意力或造成干扰。在哔哩哔哩的视频播放界面的右上方，分享与“更多”按钮在外观设置上，与其他视频类App没有太大区别，符合一般用户的使用习惯。点击分享，从下方“弹出”的交互动作，不同样式的分享形式以及同种风格的icon设计，增强了用户的操作动机。点击更多，从界面右侧弹出画面设置界面，用不同颜色区分主次，整体风格区别于其他弹窗，且页面可自定义功能。无论是交互操作、功能内容还是品牌视觉上都有规律地引导行为。

从用户行为角度出发构建界面版式

人们许多日常行为是下意识的。当我们进行产品设计时，习惯与其他直觉行为同样需要被考虑。大脑的运作方式在当今社会中存在两种极端矛盾的解释观点：一种认为人总是理性的、谨慎的;另一种观点则认为，人类是情感动物，仅仅靠着运气才能应付生活中的各种难题。其实这两种观点都是正确的，并且这两种情况会在我们任何一个人的身上同时出现，这个事实非常关键，它为如何能设计一款改变人们行为的产品提供了思路。一个产品，如果希望我们产生某种特定行为，就必须提示我们，避免我们下意识地做出消极的反应，让我们觉得做这件事是值得的，感受到事情的紧迫性，同时还要确保我们有条件做这些事，所以产品应该如何组织，简化并构建出人们这些心理过程。

通过艺术和科技结合的手段来支持人性化的交互界面，以区别于传统的只注重功能设计的界面。科学技术的快速发展对人类的艺术活动产生了巨大的影响。电子技术、计算机技术、卫星技术等科学技术的发展及其在文化领域的广泛应用，拓展了艺术的定义、传播方式和功能。但只注重功能设计的界面有其技术工具水平的限制。人性化的交互界面，在于许多设计所需要的基础技术得到普及化后，艺术在其中的作用和意义就更大。哔哩哔哩App界面沿用ICON的粉白配色，配合招牌式的趣味风格，显得年轻化十足。其主导的导航系统采用App上常用的上、下导航。大部分的功能在上下导航栏都可以实现操作。导航需求就是打破时空之限制，在包罗万象的网络信息中，导航是人机交互实践活动的一种富有创造性的方式。导航根据App构建目标，以用户为中心，组织信息层次并在信息之间建立有目的的关联。在设计时不仅要按照美的规律来塑造导航的外观，还需要按照信息体系结构设计原则把握导航的构架。有效地提供用户获取信息途径，引导用户实现App所有者的业务目标。导航推荐是艺术与科学、形式与功能、感性与理性结合的产物，它需要在满足功能实现的前提下保持足够的美观，以用户为中心的设计强调用户及其需求，充分调动人们的兴趣并给人以美的享受。导航不仅是App页面间跳转的方法，还是体现导航及其所包含内容之间关系的重要手段。它的目的并不是炫耀内容，它是用户的GPS，在不被过度关注的舒适环境中使用户体验获取信息的快感是导航设计的目标。导航明显，目的明确，到达便捷。通过合理的导航设计，将信息服务充分地展现在用户面前，缩短查询时间，提高App浏览深度和曝光率，进而，为网络用户提供更强大、舒适的浏览环境。导航设计是否合理对于App建设是否成功具有非常大的意义。影视App的版式设计中，应以用户的角度作为设计的出发点，在用户体验的基础上构建出用户的心理版式界面。用户的心理版式界面是基于用户在使用影视App的过程中形成的印象，反映出了用户对影视类App的整体特点。但想要引起对界面的注意，进而使用户产生愉悦的体验就不得不在版式中加入陌生化设计。做出有别于其他同类型App的功能或框架，给用户新鲜的体验感受。界面是交互行为的平台，哔哩哔哩首页精选栏目的界面中，将热播的影视截屏以左右自动滑动的方式显示。界面最上方是视频搜索、个人主页和消息，以及哔哩哔哩的特色——游戏方面的内容的标识。下方是各个功能按钮。界面主要部分可以通过直接左右滑动的方式切换界面。整个界面的按钮大小合理，符合人机工程学的需求。整个界面的图标设计有一定的新鲜感同时也与用户的熟悉程度基本保持了一致，体现出了一致性的设计原理。在视频播放时，点击界面右上方的省略号，后台播放、镜像反转、电视投屏等功能体现出了设计的兼容性。而整个界面采用大块面分割，信息呈现简洁清晰，体现出了设计的简化性原则，给用户提供了一个清晰明确的界面。

以情感为切入点，提升用户交互体验

情感是人类的特质，情感不是物的属性，也不是App的属性，情感是用户的，虽然不能设计用户的感情，但可以设计令用户产生感情的产品。情感是快速的，人类情感的反应远远快于理智的反应。用户对于网站的最初印象是本能水平的。用户在二十分之一秒就能评估出App对他的吸引力，App的外观是影响App可信度的首要因素。情感上最初印象产生的晕轮效应会附加在用户对App的总体理解和交互行为上。影视App界面设计应考虑到用户的情感需求，减少认知摩擦，根据用户的需要传递重要信息，并关注到用户的有限注意力。哔哩哔哩根据用户的喜好自动推送内容，并且以简洁清晰的方式呈现。在哔哩哔哩界面的呈现方式上，色彩简单又不单调，易于识别又富有创意。文字介绍通过深浅颜色和大小区别主次，唤起用户的视觉情感体验。从用户的情感体验入手，体现出了用户与界面的交流方式，并且区别于传统的只注重功能设计的界面。良好的交互界面布局可以给用户可控制、可预测和易理解的使用体验，使得界面信息丰富而合理，减少用户在使用时花费的不必要的时间，提高用户的信心和满意度，并进一步产生愉悦的心理感受。用户体验基于以用户为中心的观点，强调产品或软件的应用和审美价值，包括印象、功能、易用性、内容等因素。这些因素相互关联、不可分割，共同构成了用户体验。用户体验的重点就是以用户为中心，而以用户为中心的设计思想来源于工业设计和人类工效学，提倡让产品适应人的需求，而不是让人来适应产品。美国国会图书管咨询员托马斯在其著作《图书馆研究模型：分类、编目和计算机指南》中指出，大部分人在搜索信息时会选择更容易获得的信息资源，尽管这些获得的信息可能在质量上并不高。如果想要质量较高的信息，就要付出更多努力。并且，人们更倾向于使用简单、方便、熟悉的工具。在一定程度上，人们认为搜索过程的简便性比所获得的信息质量更重要。虽然哔哩哔哩的用户主要以年轻化的人群为主，随着市场的推广，越来越多的专业人士也把哔哩哔哩作为一个视频学习的App，关键词的搜索，以及根据用户需要推荐的简便操作，使得用户减少了在学习时搜索部分的时间，进而提升效率，在观看视频学习时的弹幕功能更让用户感觉到“不是自己一个人在学习”，体会到App交互的乐趣。

总结

人本主义学家马斯洛提出的需求层次理论，把人类需求分为五个层次：生理需求、安全需求、社交需求、尊重需求、自我实现需求。随着用户需求的升级，在实现功能性的前提下，交互界面的用户体验创新和升级是大势所趋，在基于理性化的框架加上感性的创新，用一种全新的角度完成设计，丰富使用者的体验。随着操作系统的更新和硬件设施性能的提升，如何开发出易于用户使用又能够给用户良好交互体验的产品，成为了普遍关注的问题。哔哩哔哩是影视App界面设计的一个创新开端，它虽然有目标用户的限制，但在界面版式上做的有别于其他影视App而不失特色，信息架构清晰便于用户定位和管理，引导富有新意且明确，提升了用户的操作效率。在提升用户体验的同时也创造了更高的用户价值。基本上满足了马洛斯提出的层次需求理论。通过在界面与引导上的创新提升用户与App的粘性，体现出交互设计的内涵。

参考文献：

[1]王愉.互联网产品视觉设计[M].北京：清华大学出版社，2015：23-30.

[2]方兴，周娉.交互界面设计[M].北京：北京大学出版社，2017：62-65.

[3]施奈德曼.用户界面设计[M].张国印，李健利等译.北京：电子工业出版社，2004：332.

[4]史蒂芬·温德尔.随心所欲：为改變用户行为而设计[M].张一弛，孙锦龙译.北京：电子工业出版社，2016：35-57.