一种更易用的视频播放器的UI设计

    我一直希望设计一个让我觉得更舒服的视频播放器，一款更易用的、应用于web的视频播放器。

         在我动手之前，我有必要先了解一下目前广泛应用的视频播放器。

 1 了解目前主流播放器的设计

    优酷的播放器

    这大概是目前中国应用最广泛的播放器,几乎是网页播放器的标杆，早已被大家熟知，是很经典的播放器。我不敢说优酷的播放器不好，但是我总觉得优酷画面中硕大的字体和播放器娇小的操作控件设计显得不太协调，进度条下方的时间进度信息的文字实在太小,视力有困难的同志恐怕会忽略这些时间信息，音量控制滑块看起来似乎也难以操作（虽然实际上控件的感应范围还是比较大的）。

    另外，优酷为视频内容的分享提供了多种方式，但是分享的播放器本身没有设计视频的标题、发布时间等信息，这样分享视频内容的用户必须在嵌入视频链接的画面中手动输入视频的标题信息，这样是不是不太方便。

 

    奇艺的播放器

    奇艺播放器的配色和画面风格我都很欣赏，在顶部设计了视频的标题、内容所在的分类层级信息，在画面右侧设计了一列功能菜单，包括分享、关灯、二维码、下载等，当鼠标移动到播放器右侧区域时就会出现这个菜单。相比与优酷的播放器，奇艺还增加了一个截屏的按键。另外，点击播放器顶部的“放到桌面”会 在桌面单独打开一个只有播放该内容的播放器的浏览器窗口。
在我看来奇艺播放器的问题是在播放器中堆积了太多的功能和信息，影响了观看的感受。很多功能的设置我从来都不会去用，例如右侧菜单中的“分享”功能，而在播放器下方的页面中已经设置了分享至新浪等社交平台的图标，显然有些重复。

     二维码的功能是为移动客户端设计，初衷是为了让用户可以在自己的手机中继续观看当前视频，虽然别出心裁，但是多数情况下我都不会使用它，可每次鼠标滑过播放器，都会看到这个菜单。在进度条的上方显示了更新提示的设置信息，进度条的两端还设计了袖珍的快进、快退功能，所有这些内容放在一起，让我觉得太拥挤。

 

2 播放器的基本构成元素
    我开始思考我为什么不喜欢功能强大但画面繁复的播放器的原因。我想也许是因为这样不够简洁，不够美观，有太多可以点击但并不常用的控件设置在播放器中，它们会时常因为占据了较多的播放器画面的空间，影响了观看的流畅性。类似的例子是人们欣赏只有一个button的iphone，越来越不喜欢全键盘的黑莓手机。另外，太多的内容也会分散用户的注意力，让用户难以将视线集中在播放内容中。
所以，一个播放器应该至少具备哪些功能呢。下图中我绘制的一个最简版的播放器

     因为播放器还是用来播放视频的，对于视频播放的相关功能是必须。那么对于其他的扩展功能是该放在承载播放器的页面中还是隐藏在播放器的下一级的菜单列表中呢。

 

3 只让播放器完成它应该完成的功能

    哪些功能应该放在播放器中实现，而哪些功能可以在嵌入播放器的页面中实现。我认为应该让播放器控件本身的功能尽量简单，保证用户观看视频的体验，只有最常用的或必须的功能才应该放在播放器中，只让播放器完成它应该完成的功能。分享、下载、评分甚至关灯的功能都可以放在承载播放器的画面中实现，因为我不会在观看视频的同时频繁的使用这些功能。

 

4 一个优秀的播放器 TED

    我很喜欢的一个视频网站是TED，其中TED的播放器设计就很简洁，我特别喜欢这里的一个字幕语言选择的功能。TED播放器将视频的字幕信息独立管理，用户可以在观看视频的同时方便的切换字幕的语言，对于像TED这样一个访问者遍布多个国家的网站来说是非常实用的。

    在TED中我还见过另一个非常好的功能，演讲内容较长的视频在播放时会在进度条上出现一个演讲内容的概要目录信息,这样用户就可以方便的跳转到指定的内容部分观看。

    在奇艺的播放器中我也看到了类似的功能，但是我更喜欢TED播放器的纯文字形式，与TED严谨的风格跟搭配。

 

5设计我的播放器

     我设计了这样一个播放器，只保留我认为必要的功能控件，并吸取了上述播放器中的优秀的设计。下图中第一张是内容被分享后的播放器的样式，后面两张是播放器在显示和隐藏相关内容列表的样式。

 

 

     播放器画面顶部包括了视频的标题、发布者、发布时间信息，这样即使分享视频的用户没有编写任何文字，观看该视频的人都会知道该视频的信息。播放器只保留了最常用的功能：播放/暂停、下一段按键，设置按键、音量控制、最大化。播放器中的文字和控件的大小适中。

     如果为视屏内容设计了概要目录信息，那么当鼠标移动到界面中进度条上方区域时，会按各部分时长的区段显示视频内容的概要信息，方便用户定位到指定内容的部分观看。

     另外，考虑到一系列的视频可能会作为一个专辑来播放，例如电视连续剧，这样在播放器右侧设计了一个视频的列表，该列表显示了正在播放的视频以及相关的其他视频。点击播放器界面右下角的收起箭头，视频列表会叠起隐藏起来，这样播放器会获得更大的空间以及更友好的播放体验。