4款视频app交互设计案例分析

除此之外,腾讯视频多了一个投屏按钮;爱奇艺多了一个投屏和VR按钮。界面元素1,2,3协助用户在非全屏时也能轻松完成观看体验,这3个控件对应的需求是观看体验中的刚需;全屏、投屏和VR是切换至另一种观看模式的入口。

剧集阵列:

剧集按钮上没有记录该集是否观看过的状态及观看了多少时长,海淘科技小编认为原因有三点:首先,应用默认大部分用户都是顺次观看的,每次打开视频时应用都会接着上一次结束观看的位置继续播放,用户不用去思考哪集看过、该从哪集开始看;其次,剧集阵列上的按钮尺寸也不允许显示如此多的信息;最后,和娱乐型内容相比,深度学习型内容更适合显示完成百分比,例如得到app里的音频文件和网易公开课里的视频,就会显示完成的百分比或时长。

点击竖屏模式右下角的屏幕切换按钮,播放器进入横屏模式。横屏的导航栏和工具栏包含的控件更丰富,除此之外,左右两侧也放置了按钮控件。在横屏模式下更容易辨别出各家的栏设计对观看体验的影响。美观与可用性之间在这个巴掌大的空间里不是很好平衡。爱奇艺的滑块设计使它必须使用边界清晰的工具栏,边界清晰的栏本可以增强栏上的按钮的辨识度,但爱奇艺并没有做到,因为icon的线条都太细了;搜狐视频没有填充栏的背景色,而是在视频内容上盖上一整屏的半透明深色遮罩来凸显栏;芒果TV和腾讯视频使用渐变来填充栏背景色,看起来更通透。4种做法的交互方式都没问题,只是视觉的不同,但具体哪一个更好地通过大量数据统计得出,所以这里就不妄下结论了。

横屏模式里有全屏状态,全屏状态时导航栏、工具栏和状态栏都临时隐藏了起来,给用户营造了心无旁骛的观看环境。轻击一下可以再次唤起这3个栏。各家app的栏功能不完全相同,本篇和下一篇将按照共有功能和特色功能的顺序对导航栏和工具栏进行叙述。

2.1返回按钮

4家app在横屏模式时都去掉了切换横竖屏按钮,因为点击返回就是退出横屏。除此之外,我猜测是因为全屏时的按钮实在太多,自然不会放置两个有同样功能的按钮。虽然返回按钮和切换横竖屏按钮在视觉上没有一个很好的关联度,但是页面层级关系比较容易让用户理解。有趣的是,优酷在全屏时保留了右下角的退出全屏按钮。

2.2页面标题

横屏模式所有的导航栏上都显示了页面标题,也就是当前播放的剧集名称和剧集数,但位置是在返回按钮的右侧。ios用户界面手册里提到过,要将前一层级的标题显示在返回按钮右侧(如果可以放下的话),这样返回按钮才更有意义。很显然,这些视频app都没有遵循这一准则,这也是我在第一篇里说过的,称上侧栏为导航栏不那么恰当的原因。尽管如此,现在的布局更好看,用户根据剧集数也知道返回按钮右侧的文字就是本页标题。

2.3暂停/播放按钮

暂停和播放是同一个按钮的两种切换显示状态,位置在左下角。设计理论是不赞成在一个页面内1个控件上切换2个功能的,但是数字设备上的暂停和播放却可以很好违背这种观点。原因一是数字设备可以在同一个区域显示不同的状态,表达逻辑上是不会出错的,这是物理设备做不到的(例如收音机);原因二,用户可以很轻松地辨别多媒体内容的播放和暂停状,要切换状态时只知道就按那个按钮就对了。如果放置2个按钮在界面上,用户要结合视频的状态去在两个按钮之间辨别该按哪一个(即使让一个按钮为禁用状态,另一个为可用状态,用户也还是要费脑力去辨别,拟物设计还能好点)。

搜狐视频和优酷除滑块能拖拽之外,还在滑轨上放置了剧情的关键节点,用户点击滑轨上的小亮点便能呼出一个浮出层,点击浮出层可以实现跳转,如图2.3所示。在使用体验上,搜狐的小亮点真的非常难点,也很难看清点击出来的浮层对应的是哪个小亮点;浮层与滑轨之间的距离太小,点击其它小亮点时很容易就点到了浮层;浮层的尺寸太小,不易点击。优酷的小亮点很好点击,浮层尺寸也够大,但浮层与滑轨的距离也是太小,很容易误操作。我想这两个app在后续更新中应该会优化这个功能。

2.5左右滑动手势

2.5音量调节和亮度调节

调节音量的方式有2种:一种是按手机上的音量物理按键,另一种是在播放器上使用上下方向的滑动手势。两种方式适应不同的需求,物理按键可以准确调节音量到满意的位置;滑动手势可以快速地让音量调节到最大或最小。调节亮度的方式有3种:手机屏幕适应环境光来自动调节亮度;唤起手机的控制中心调节亮度滑块;在播放器上使用上下方向的滑动手势。自动调节的方式是隐形的设计,对用户是0负担,因此大部分用户会听由屏幕亮度的自动调节;当亮度自动调节的结果满足不了用户时,肯定就要启动后两种交互方式了,控制中心的唤起会打断视频观看,而且在横屏模式下唤起的操作比较难(而且可能会误启动上下滑动手势),相比之下,滑动手势就比较好操作了。音量和亮度调节都需要上下滑动手势,为了让一个手势在一个情景里实现2种功能,在播放器右侧上下滑动来调节音量,在左侧调节亮度,已经成了通用的解决方案。很显然,这是默认用户全部为右手用户,将高频的音量调节交互区域放在右手操作的舒适区;将低频的亮度调节放在右手的偏僻区,或由左手完成。

小编很喜欢像每日开眼设计的音量调节视觉反馈控件,它显示在播放器的左侧边上,既提供了反馈又没有挡住播放器的中间位置。但很遗憾,开眼在播放器里没有提供亮度调节,上下滑动手势只能调节亮度,这种显示在播放器侧边的视觉反馈只适用于上下滑动手势拥有单一定义时。当有2种定义时,这种布局方式的问题也非常多。小编没有更好的主意,不知道各位同仁对于这个问题有什么更好的想法。或许我提出的需求是吹毛求疵,也可能这就是设计很难两全齐美的例子。

很多应用尝试在横屏模式里唤起一个类似系统控制中心但又不会打断视频的浮层,以此来解决小编的问题,会在后面的2.10节里详细阐述。

2.6下一集这是唯一一个让小编不知道该说点什么的按钮,嗯,真的很尴尬呢。统一被放在了暂停/播放按钮的右侧。当视频类型是电影时也会有这个按钮,真不知道它的下一个是什么呢。

2.7清晰度清晰度能决定观看体验的好坏,因此也是一个付费点。蓝光级别都是会员专属,腾讯视频将每个等级的分辨率数值都标注了出来,进一步刺激用户去购买会员。

2.8选集点击选集按钮会呼出一个浮层显示所有的剧集按钮,有时一屏可能放不下,因此在用户打开浮层时,应该让当前播放的剧集按钮显示在屏幕内。腾讯和搜狐视频做到了这一点,尽管实现方式不一样,搜狐视频降低了难度将剧集按钮做了分页处理。爱奇艺的这个功能有些bug,要滑动一下才会出现当前剧集按钮。芒果TV的这个功能做得也很好,只不过选集浮层比较像综艺节目,剧集按钮很大,而且是图片按钮带着长文字,虽然增加了用户选集时的滑动幅度,但也提供了更多的信息,让用户比较确定究竟要看哪一集。

2.9锁屏芒果TV、爱奇艺和搜狐视频都在播放器的左侧放置了锁屏按钮。锁屏之后,无法点击其它功能按钮,和手机锁屏一样。但是在什么情景下使用这个功能呢播放器上所有的按钮及功能设计让打断或影响视频播放的操作都是有行为成本的,产生视频中断或退出的误操作可能性比较小。除非在很拥挤很拥挤的地铁里,或者在很颠很晃的公交车上。小编还假设了一个场景,是不是有可能我在擦地的时候还想听着视频,因此要把手机放在衣服口袋里,这时也能用到锁屏吧

2.10更多功能腾讯视频、爱奇艺、搜狐视频都有更多功能的按钮,点击会呼出一个包含多个功能的浮出层,不影响视频正常播放。腾讯视频在面板里放置了音量和亮度的调节,可以弥补2.5节里说的现有的设计缺陷,很有代替手机的控制中心的味道,适合用户深度探索。但是这个更多按钮的样式太低调了,我觉得可以参考最新MacbookPro的TouchBar上对于各种多媒体调节按钮的管理方式,当然这样一来,这个面板里就不适合放其它功能比如缓存。爱奇艺的这个面板里没有音量调节,看来是不认同2.5节里提到的设计缺陷。在腾讯视频的更多功能浮层里拖拽音量滑块时,系统标准视觉反馈控件被唤起;拖拽爱奇艺的亮度滑块时,也调用了系统视觉反馈控件。这都是没有必要的二次显示,这个细节两家都没有处理好呢。

2.12弹幕除了芒果TV外,其它几家视频app都有弹幕功能,且都改良了显示方式,弹幕只会占据屏幕的一部分,或者分批显示,不会像B站那样占据整个屏幕。打开弹幕才可以输入弹幕,图2.10可以看出,输入弹幕时的键盘模式,爱奇艺和搜狐视频都处理地很好。搜狐视频在输入弹幕页面算是下了功夫,但是弹幕开启和关闭的交互做得很不好,在这里不截图显示了,大家体验一下就知道了。

THE END
1.50个设计简约的移动APPUI设计作品设计达人对于设计师来说,经常浏览一些新颖的设计作品是非常重要的,特别是入门或进阶级别的设计师更需要多看、多想、多做,以便获得更好的灵感、创意,并追求不一样、不重复的设计来提高自己的水平。 今天和大家分享50个设计简约的移动 APP UI 设计作品,所有界面都是以简洁风格为主,看起来舒服美观,案例包含注册页、数据页、商...https://www.shejidaren.com/?p=27529
2.设计师灵感来源!9个经典的APP界面设计案例耐设计云设计师通过principle可以快速地制作出具有丰富交互的产品界面设计,并且它能和sketch进行无缝链接,可以快速导入你在sketch里已经做好的图, 推荐评级: 三,9个经典的app界面设计案例 了解了app界面设计的工具,接下来给大家分享8个优秀的app设计案例.如果想要使用案例对应的模板,点击进入这个...https://www.zcool.com.cn/article/ZMTYzODQ2NA==.html
1.APP界面设计案例分析,掏空了给你,文末附模板!1.app界面设计流程 设计安卓app界面时,需要考虑的因素颇多。接下来,本文将通过分布指南简化流程,帮助你循序渐进的了解如何设计一个安卓app界面。 1.1开始 在设计新app界面之前,一些初始步骤是必不可少的,以此确保设计师或团队能够目标一致的为最终产品工作。 https://pixso.cn/designskills/the-app-interface-design/
2.设计师灵感来源!9个经典的APP界面设计案例软件界面9个经典的APP界面设计案例 据调研数据显示,现在人们平均每天使用手机的时间超过5小时,Z世代年轻人甚至超过6小时。时间就是金钱,注意力就是商家必争之地,APP数量因此呈爆炸式增长。如何从海量的APP中脱颖而出,第一时间吸引用户的眼光呢?功能需求不必说,大家其实差不了太多,更需要重视的是界面设计等软实力。一个优秀...https://blog.csdn.net/jongde1/article/details/143141692
3.灵感来了!8个优秀的APP界面设计案例推荐APP界面设计离不开设计资源。对于初级设计师而言,寻找高质量的APP界面案例和模板至关重要。今天,我们将分享8个来自即时设计资源社区的APP界面设计模板,每款模板都支持免费下载和在线编辑。这些模板在设计风格、图文排版、颜色搭配和灵感来源上都值得学习,希望能对你的APP界面设计有所帮助。 js.design/community?category...https://m.sohu.com/a/818772849_122023986/
4.设计师灵感来源!9个经典的APP界面设计案例9个经典的APP界面设计案例 据调研数据显示,现在人们平均每天使用手机的时间超过5小时,Z世代年轻人甚至超过6小时。时间就是金钱,注意力就是商家必争之地,APP数量因此呈爆炸式增长。如何从海量的APP中脱颖而出,第一时间吸引用户的眼光呢?功能需求不必说,大家其实差不了太多,更需要重视的是界面设计等软实力。一个优秀...https://www.douban.com/note/867079159/
5.App优秀UI设计案例:视觉盛宴的背后设计技巧随着移动互联网的飞速发展,越来越多的App应用软件出现在我们的生活中,在这些应用软件中,优秀的UI设计能够给用户带来更好的使用体验,增强用户对产品的忠诚度,我们将分享一些优秀的App UI设计案例,这些案例不仅在设计上独具匠心,而且在实际使用中也得到了用户的广泛好评。 https://www.wenanmiao.com/22679.html
6.app界面分析案例怎么做,app界面设计分析六个方面在当今数字时代,手机已成为人们生活中不可或缺的一部分。而应用程序(App)更是手机使用者的日常必备工具。对于开发者而言,要想设计一个人性化、易用、吸引人的App界面,需要进行详细的界面分析。本篇软文将带您走进一个App界面分析案例,解析其内涵和设计特点。 https://www.szappgs.cn/newsinfo.php?id=530
7.小红书app界面设计案例分析App资讯通过对小红书APP界面设计的案例分析,我们可以看到,小红书APP在视觉设计、布局设计、功能设计和用户体验设计等方面都做得非常出色。其简洁、明亮的视觉风格和合理实用的布局设计,让用户更容易找到所需内容,而丰富的功能和个性化推荐则增加了用户的参与度和黏性。小红书APP的成功不仅得益于其独特的社交和购物功能,更得益于其...https://www.hzjxapp.com/news/1381.html
8.知名app界面设计案例分析App开发文档知名app界面设计案例分析 在移动互联网时代,人们越来越多地使用手机和平板电脑来进行各种活动,包括社交媒体、在线购物、实时通讯等。这就意味着app界面设计的重要性越来越凸显出来。一个好的界面设计可以提高用户体验,吸引更多用户,并且有助于提高app的留存率和口碑。本文将对几个知名app界面设计作出具体分析。 http://glqxcl.com/jzzs/?1007803.html
9.设计appvi设计app8、案例分析:成功的app设计 成功的app设计案例有很多,其中一些典型的案例包括微信、支付宝和抖音等。这些app设计成功的原因在于它们满足了用户的需求,提供了便捷、快速、安全的服务,同时具备简洁、美观、一致的界面设计和良好的用户体验。这些app设计也不断进行创新和优化,不断满足用户的新需求,保持了市场竞争力。 https://www.rhtimes.com/brand/logo-design-news20856.html
10.案例解析超有设计感的喜茶GO应用,优秀应用UI界面赏析更多案例解析请点击这里查看 001.首页设计 在很多应用都追求窄轮播图的时候,喜茶之类的应用采用了大轮播图的设计,其实这主要取决于用户使用应用的场景,因为在喜茶的页面里,并没有过多需要展示的功能模块,这样的大轮播图是吸引用户下单购买某个产品的非常重要的一块,而更有质感和低调的背景色加上鲜亮的食材作为对比,...https://cloud.tencent.com/developer/article/2008902
11.实战案例!滴滴试驾商业B端App项目设计经验总结优设网大量设计案例的积累。 交互输出低保真原型图后,界面设计师需要从整体到细节仔细的分析。 整体,指哪些模块或者信息和按钮是复用的,在设计过程中就要保持他们的统一性。 细节,指每一个模块的信息都要做到足够清楚的了解,包括文字限定的字数,最好以限定内最多文字进行排版。 https://www.uisdc.com/didi-test-drive-design/
12.物联网APPUI设计:创造智能硬件领域的沉浸式体验保持一致性:在设计app界面时,应保持一致性,使用户在各个页面都能享受到相似的操作体验。这有助于增强用户的认知,提高用户的满意度。 三、物联网app ui设计的案例分析 以智能家居系统为例,阐述物联网app ui设计的应用。该app允许用户通过手机或语音控制家中的智能设备,如灯光、空调、智能门锁等。 https://www.hxsd.com/information/11915/
13.8个优秀的UI界面设计案例分享,超实用!4、电影短视频类 UI界面设计 这是一个具有科幻风格的电影短视频类网站界面设计,利用电影海报来吸引用户点击,界面整体呈深色系,包括电影名称、内容简介与海报,很经典。 5、健身运动APP UI界面设计 这是一款关于健身运动的APP 界面设计案例,内容包括针对于个人给出的健身计划,以及各个部位的健身教程视频等。能够根据自己...https://js.design/special/article/ui-interface-design-cases.html
14.海洛图库设计案例思路解析海洛图库,站酷海洛,设计案例,思路解析,UI设计,交互设计,产品设计,App设计,黑马青年,51学设计,我要学设计http://51xsj.cn/index.php?s=/index/video/index/id/411.html
15.8个优秀的界面设计案例透析它们是如何透过细节打动用户的!#03 最后要说的话 文章中的案例与思考来自于智行UED同学的日常分享。 后续我们将持续深度体验产品,挖掘更多值得分享、学习的设计案例。努力将其中的方法理论应用到智行APP后续的产品设计中。 愿我们的努力为你带来更好的体验。 智行ZXDhttps://www.uishe.cn/186692.html
16.10大互联网产品设计案例,多角度解析产品设计思路并且在排行榜详情界面提供【时长兑换无限卡】的入口,通过利益点诱导用户增加使用产品的时长,再一次激发用户使用产品的积极性。 以上10个产品分别从不同角度分析了产品设计的亮点和目的,更多产品设计分析案例资源均可从boardmix资源社区获取。好的产品设计是产品设计团队共同的智慧成果,boarmdix博思白板为产品设计团队提供...https://boardmix.cn/article/productdesigncases/
17.如何用COMSOL仿真App分析热电冷却器设计COMSOL博客热电冷却器有各种类型和尺寸,包括单级和多级设备。它们的应用范围很广,既可用于冷却箱等消费型产品,也可作为卫星的温度控制器。如果你想对热电冷却器的设计分析,并针对其在特定的应用领域进行优化,仿真 App 是实现这些目标的有效途径。这篇博客中,我们讨论了如何使用热电冷却器仿真 App。 http://cn.comsol.com/blogs/how-to-analyze-thermoelectric-cooler-designs-with-a-comsol-app
18.12209触控UI设计《触控界面UI设计》是北京市高等教育自学考试网络传媒设计专业(专科)学生必修的专业核心课。采取“实践”考核方式,它是对触控终端智能操作系统界面美观的整体设计,主要培养学生的视觉设计、色彩观察力及分析能力,了解交互设计与界面设计的基本概念、设计规范和工作流程。 https://sce.pfc.edu.cn/ksdg/2474.jhtml
19.灵感专题—2019年优秀APP界面设计作品赏析#5月51CTO博客App界面设计对于设计师而言一直是盛久不衰的话题,尤其是如今越来越多的流量转移到了移动平台,使得更多的UI设计师涌入移动端领域,甚至出现了市场饱和的言论,对于从事移动端的UI设计师来讲,充满压力的同时又面临无限机遇,唯有不断的学习才能滋生出源源不断的设计灵感,站稳脚跟。 https://blog.51cto.com/u_9540389/3231410
20.中国画元素在app视觉设计中的应用研究在这样的背景下,将中国画元素应用到手机app视觉设计,不仅能拓宽中国画元素在现代设计的应用领域,还能为手机app界面设计提供新的设计思路,实现传统与现代的结合。本文通过运用文献研究法、案例分析法、理论研究与实践研究相结合的研究方法,研究中国画元素在手机app视觉设计中的应用。中国画由线条、墨法、色彩、意境等多个...https://wap.cnki.net/lunwen-1018283103.html