一种更易用的视频播放器的UI设计
我一直希望设计一个让我觉得更舒服的视频播放器，一款更易用的、应用于web的视频播放器。
在我动手之前，我有必要先了解一下目前广泛应用的视频播放器。
1 了解目前主流播放器的设计
优酷的播放器
这大概是目前中国应用最广泛的播放器,几乎是网页播放器的标杆，早已被大家熟知，是很经典的播放器。我不敢说优酷的播放器不好，但是我总觉得优酷画面中硕大的字体和播放器娇小的操作控件设计显得不太协调，进度条下方的时间进度信息的文字实在太小,视力有困难的同志恐怕会忽略这些时间信息，音量控制滑块看起来似乎也难以操作（虽然实际上控件的感应范围还是比较大的）。
另外，优酷为视频内容的分享提供了多种方式，但是分享的播放器本身没有设计视频的标题、发布时间等信息，这样分享视频内容的用户必须在嵌入视频链接的画面中手动输入视频的标题信息，这样是不是不太方便。
奇艺的播放器
奇艺播放器的配色和画面风格我都很欣赏，在顶部设计了视频的标题、内容所在的分类层级信息，在画面右侧设计了一列功能菜单，包括分享、关灯、二维码、下载等，当鼠标移动到播放器右侧区域时就会出现这个菜单。相比与优酷的播放器，奇艺还增加了一个截屏的按键。另外，点击播放器顶部的“放到桌面”会 在桌面单独打开一个只有播放该内容的播放器的浏览器窗口。
在我看来奇艺播放器的问题是在播放器中堆积了太多的功能和信息，影响了观看的感受。很多功能的设置我从来都不会去用，例如右侧菜单中的“分享”功能，而在播放器下方的页面中已经设置了分享至新浪等社交平台的图标，显然有些重复。
二维码的功能是为移动客户端设计，初衷是为了让用户可以在自己的手机中继续观看当前视频，虽然别出心裁，但是多数情况下我都不会使用它，可每次鼠标滑过播放器，都会看到这个菜单。在进度条的上方显示了更新提示的设置信息，进度条的两端还设计了袖珍的快进、快退功能，所有这些内容放在一起，让我觉得太拥挤。
2 播放器的基本构成元素
我开始思考我为什么不喜欢功能强大但画面繁复的播放器的原因。我想也许是因为这样不够简洁，不够美观，有太多可以点击但并不常用的控件设置在播放器中，它们会时常因为占据了较多的播放器画面的空间，影响了观看的流畅性。类似的例子是人们欣赏只有一个button的iphone，越来越不喜欢全键盘的黑莓手机。另外，太多的内容也会分散用户的注意力，让用户难以将视线集中在播放内容中。
所以，一个播放器应该至少具备哪些功能呢。下图中我绘制的一个最简版的播放器
因为播放器还是用来播放视频的，对于视频播放的相关功能是必须。那么对于其他的扩展功能是该放在承载播放器的页面中还是隐藏在播放器的下一级的菜单列表中呢。
3 只让播放器完成它应该完成的功能
哪些功能应该放在播放器中实现，而哪些功能可以在嵌入播放器的页面中实现。我认为应该让播放器控件本身的功能尽量简单，保证用户观看视频的体验，只有最常用的或必须的功能才应该放在播放器中，只让播放器完成它应该完成的功能。分享、下载、评分甚至关灯的功能都可以放在承载播放器的画面中实现，因为我不会在观看视频的同时频繁的使用这些功能。
4 一个优秀的播放器 TED
我很喜欢的一个视频网站是TED，其中TED的播放器设计就很简洁，我特别喜欢这里的一个字幕语言选择的功能。TED播放器将视频的字幕信息独立管理，用户可以在观看视频的同时方便的切换字幕的语言，对于像TED这样一个访问者遍布多个国家的网站来说是非常实用的。
在TED中我还见过另一个非常好的功能，演讲内容较长的视频在播放时会在进度条上出现一个演讲内容的概要目录信息,这样用户就可以方便的跳转到指定的内容部分观看。
在奇艺的播放器中我也看到了类似的功能，但是我更喜欢TED播放器的纯文字形式，与TED严谨的风格跟搭配。
5设计我的播放器
我设计了这样一个播放器，只保留我认为必要的功能控件，并吸取了上述播放器中的优秀的设计。下图中第一张是内容被分享后的播放器的样式，后面两张是播放器在显示和隐藏相关内容列表的样式。
播放器画面顶部包括了视频的标题、发布者、发布时间信息，这样即使分享视频的用户没有编写任何文字，观看该视频的人都会知道该视频的信息。播放器只保留了最常用的功能：播放/暂停、下一段按键，设置按键、音量控制、最大化。播放器中的文字和控件的大小适中。
如果为视屏内容设计了概要目录信息，那么当鼠标移动到界面中进度条上方区域时，会按各部分时长的区段显示视频内容的概要信息，方便用户定位到指定内容的部分观看。
另外，考虑到一系列的视频可能会作为一个专辑来播放，例如电视连续剧，这样在播放器右侧设计了一个视频的列表，该列表显示了正在播放的视频以及相关的其他视频。点击播放器界面右下角的收起箭头，视频列表会叠起隐藏起来，这样播放器会获得更大的空间以及更友好的播放体验。
一种更易用的视频播放器的UI设计相关推荐
- Java可视化编程，基于布局管理器的UI设计
在<事件驱动模型>讲述了如何将用户与功能实现代码联系到一起.怎么样便于用户理解和符合用户的使用习惯? 本篇还是就此问题作分析,站在用户角度上分析UI各组件倒底该如何设计呈现. 优秀的UI会 ...
- 易用的视频播放器 Movist Pro for Mac
文章来源于:风云社区 Movist Pro for Mac 2.2 [上[风云社区],搜索软件名字,即可查看下载] Movist是一款易于使用且功能强大的电影播放器.您可以为每个视频编解码器选择Q ...
- 视频播放器的界面设计并实现播放器
类MediaController extends FrameLayout: 属性: TransportController mController:播放的接口 Context mContext;上下 ...
- 2014.03.04-2014.03.07调研比较流行的手机视频播放器UI
调研至少10种不同的流行手机视频播放器的UI,主要包括视频播放功能,浏览功能,订购功能,账户管理功能,付费功能,浏览历史记录,爱好,账单记录等 今天5:15-6:30 选择好哪10种视频播放软件 ...
- 视频播放器+android,Android视频播放器
Video Player for Android,最简单易用的视频播放器. Video Player for Android是目前市场上最简单易用的视频播放器.它的智能检测自适应算法使得它更加方便快捷 ...
- android视频播放器报告,android视频播放器实训报告.doc
实训报告书 实训名称: Android视频播放器 系 (部): 专业班级: 学生姓名: 学 号: 指导教师: 完成日期: 实训课题Android视频播放器实训人姓名 同组人员实训日期 实训成绩指导教师 ...
- Android课程设计之视频播放器
CSDN下载:https://download.csdn.net/download/eseszb/10463442 移动互联网开发 课程设计报告 学生姓名:学 号: 专业:计算机科学与技术 班级: ...
- 【视频播放器】在macOS上使用IINA
1.推荐 对象:对播放器不希望太折腾,同时希望能获得较好画质的用户 长期以来,相比 macOS 以及各种 Linux 发行版,Windows 平台上的各种视频播放工具在兼容性和播放效果上都占有显著优势 ...
- 基于vlc-Qt的视频播放器（支持添加视频列表、单曲循环等）
基于libvlc和Qt实现了一个视频播放器,可实现列表循环播放,单曲播放等,效果好于Qt自带的视频播放库.网上已有诸多基于vlc库的视频播放器,但设计列表播放的资源较少,基于vlc实现列表播放主要利用 ...
最新文章
- Effective C++ 50条款
- 微信公众号开发本地环境开发_如何在5分钟内使HTTPS在本地开发环境上工作
- 【分布式计算】MapReduce的替代者-Parameter Server
- PAT1006 换个格式输出整数
- cf369 B Chris and Magic Square
- c语言编程从键盘上输入两个整数m和n,C语言习题 求键盘输入的两个正整数的最大公约数和最小公倍数...
- 日期的包装 java,Java基础之Java常用类--Object类，字符串相关类，包装类，日期相关类，数字相关类...
- 免费而优秀的图表JS插件、js图表、html图表--百度的Echart、Highcharts、阿里的G2、Chart.js
- java求三角形的面积_java编程中求三角形面积怎么写？
- MYSQL函数group_concat的使用
- Efficient Deep Embedded Subspace Clustering
- 数电逻辑门方框中各符号所含意义(全)
- 问题 H: A+B 输入输出练习VIII
- cesium添加填充_cesium实现注记功能
- 浙江宁波天童禅寺重阳节前夕慰问鄞州区东吴福利院
- 如何在R中画出高效美观的相关性分析图
- MIPI、DSI、CSI、D-PHY的简要介绍
- 超简单 不进PE 不用U盘 自己重装电脑系统步骤
- C语言实现TCP网络通信
- 使用切图工具经常遇到的问题