《瞬间之美》读后随笔二

承接上文: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个字。

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

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 10,257评论 4 57
  • part1:指引用户 ch1 令人心动的第一印象 首先讨论用户第一次访问某个站点的头30秒钟内将会发生的事情。 ·...
    orli阅读 1,128评论 0 4
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 167,497评论 24 707
  • 早上看到新闻,庄奴先生去世了,享年94岁。 看到新闻的时候,眼睛里忍不住的泪意,虽然我知道,这个年龄离开,已经算是...
    大俗小雅阅读 517评论 3 6
  • 2017年4月12日星期三下午4:28,还处在实习上班的时间,刚看完MFC解析教程,一头雾水,所以敲下这篇文章。 ...
    雨子蕉阅读 135评论 1 2