承接上文：http://www.jianshu.com/p/795488e556c5

八、视频播放器

1、原文内容

视频播放器，即便在非视频类的网站中也随处可见，先看原书中对视频播放器的优化过程：

视频播放器的优化

一个视频播放器包括以下几个元素：暂停播放、音量控制、快进快退、视频时间、播放时间、视频标题、全屏操作。书中介绍到，好的视频播放器应该是这样的：各类按键应尽量的大，方便用户点击、显示出视频总时间和目前播放的时间、根据视频内容将视频划分为几个章节，方便用户了解视频的整体架构、视频加载过程中，默认为视频暂停，以方式视频加载完后自动播放、暂停的时候视频中间应该有个大的播放按钮，方便用户点击播放，点击屏幕中任何一个区域都能播放视频，而不是弹出广告。

2、读后感

好吧，我们看看目前主流的视频播放器。

先看看优酷，我们可以看到，它有几个优点：首先，自动为你跳过了片头，做的很贴心对吧！其次，视频中每个片段都有提示，类似于视频导航，如下图所示。最后，在时间提示和剧集展示上做的都不错。同时，它也有缺点：没有快进快退功能，用户只能去来回拖动。其次，视频加载完毕后会自动播放，这会让用户在加载的同时不能干其它事情，除非加载的时候点下暂停按钮，最后，字体和按钮还是比较小，不容易点击到。另外，暂停过程中，页面中间会有广告，播放按钮在左下角，可能是出于商业的考虑，但是用户体验真的很不好。

我们再来看看被优酷合并的土豆播放器。注意到了吗？问题很多，按键很小，没有篇章提示、暂停后连播放提示都没有，优酷好歹在左下角有个播放按钮，还有，我不知道有多少人会去点那个“下一个”按钮，当你不知道下一个视频是什么的时候，你去点的几率有多大，它真的有必要存在吗？

另外，优酷和土豆默认的视频格式都是高清，实际上这个可以根据用户的网速个性展示，如果用户网速不给力，可以自动采用标清的。

九、表单设计

1、表单布局

表单设计在注册页面尤为常见，一般的注册页面会要求用户填写用户名、邮箱、密码、生日、地区等信息，这些信息会按照标签和文本框的形式展示出来，我们先看看书本中的表单优化过程。

注意到变化了吧！一开始是两列布局，标签居左对齐，试想下，用户浏览完标签后再在对应的文本框中填写相关信息，如果是左对齐，会不自觉的降低用户浏览的速度，所以先把左对齐改成右对齐。修改完成后，我们再来看看用户的浏览曲线，左右下左右，视线不停的在页面中以Z型移动，如果两列改成一列，用户的浏览速度会不会变快呢？答案是肯定的，所以我们有了第三个版本。

第三个版本中，按钮采用了左对齐，这也是出于对整个页面美观的考虑。另外，现在的OK和取消是平级的，为了鼓励用户进行注册，我们把取消按钮改成了文字，如下图所示：

在上面例子中，为什么OK按钮放在左边，取消放在右边，除了用户的操作习惯外，还考虑到了如果用户采用的是tab操作，其焦点肯定会定格在第一个按钮，我们的目的是鼓励用户完成注册，所以OK按钮放在第一个是肯定的。

2、Wizard向导

我们先来看看Wizard向导的演变过程，一般情况下，用户注册过程中会需要填写很多资料，这些资料在一个页面中将不能全部展示，只能分页展示，这个时候问题就来了。

看下图，注册的第一步，填写完相关的信息后点击下一步，到第二步填写相关信息。发现了吧，用户并不知道一共有几步才能完成注册，并且不知道现在自己在第一步，所以我们需要优化。

针对上方的不足，我们优化为下方注册页面：

多了目前的位置和一共有多少页，并且展示出目前用户进行的操作，是不是好多了。是好多了，用户知道了自己目前进行的操作，但是他不知道接下来会发生的事情，会有种不安的心理，为了防止这种事情出现，我们再来一次优化。

如上图所示，我们告诉用户一共多少步，每步是什么，用户目前在第几步，清晰多了吧！目前很多站点都是采用的这个形式。实际上我们可以再想想，虽然用户知道了第三步的内容，但并不知道第三步有多少自己要填写的信息，为了让用户清晰的了解到，我们又有了下面的最终版本。

将横向展示改为竖向展示，这样用户就会了解到，每步中的内容也就那么多了，心里就会有了准备，然后就愉快的完成了注册。

3、及时校验

好吧！现在注册流程的架构已经搭建好，无论是单列的表单设计还是Wizard向导，都能从大的方面方便用户。那么现在就开始涉及到了每个文本框的设计了。前面我们有提到，标签的提醒功能，现在我们聊聊注册过程中的及时校验。

我们现在开始设计一个简单的注册表单：

当用户名的文本域获得焦点时，我们有相关提示，如下图：同理见注册邮箱和密码区域。

现在用户输入用户名，这里有两种情况，如果用户输入错误了，会有相关提示，如果用户输入对了，也会有提升，很多站点这个都没有做到。

输入错误和输入正确的交互

这里需要注意下，错误提示只有在相关文本域失去焦点，也就是确定用户完成操作后才会出现。如果用户跳过注册邮箱后直接填写密码，然后点击确定后，会发生什么事情，我们有两种解决方案，第一种是在相关文本区直接提示用户先要完成此项，第二种则是预防措施，如下图所示：

4、字符限制

很不明显的一个交互，你注意过没呢？一个文本框，用户在输入文字过程中会发生很多奇妙的事情。就拿注册过程中让用户填写一段自我简介，如下图：

根据要求，我们需要让用户输入10个到100个字，如下图：

好吧，这个时候用户开始输入文字，当输入了不知道多少个字的时候，突然会有个情况，用户输入不进去了，为什么呢，因为限制100个字嘛！但是用户不清楚，他会一直的输入输入，直到离开。所以，我们要调整下，让用户知道他已经输入了多少个字。

这个时候，用户就知道自己已经输入了多少字，在快到100个字的时候，他会注意到，然后就会调整自己输入的文字。另外，当用户没有填写文字或者少于10个字的时候点击确定，怎么交互呢？

点击确定时，会有提示他必须输入多于10个的文字，当文本框再次获得焦点时，这个区域又变成了数字提示。这里我们看看新浪微博的微博发布框：

用户没有输入文字时，发布按钮是点击不了的，当输入文字的时候，注意上方140的变化。它会显示用户还可以输入多少个字。同时发布按钮可点。

而当用户输入超过140个字的时候呢？用户还是可以继续输入的，但是发布按钮变成不可点状态，同时提示已经超过了N个字。

好吧！还有几个重要的完美瞬间，我们下次再来！