承接上文：http://www.itdecent.cn/p/795488e556c5

八、視頻播放器

1、原文內(nèi)容

視頻播放器，即便在非視頻類的網(wǎng)站中也隨處可見(jiàn)，先看原書(shū)中對(duì)視頻播放器的優(yōu)化過(guò)程：

視頻播放器的優(yōu)化

一個(gè)視頻播放器包括以下幾個(gè)元素：暫停播放、音量控制、快進(jìn)快退、視頻時(shí)間、播放時(shí)間、視頻標(biāo)題、全屏操作。書(shū)中介紹到，好的視頻播放器應(yīng)該是這樣的：各類按鍵應(yīng)盡量的大，方便用戶點(diǎn)擊、顯示出視頻總時(shí)間和目前播放的時(shí)間、根據(jù)視頻內(nèi)容將視頻劃分為幾個(gè)章節(jié)，方便用戶了解視頻的整體架構(gòu)、視頻加載過(guò)程中，默認(rèn)為視頻暫停，以方式視頻加載完后自動(dòng)播放、暫停的時(shí)候視頻中間應(yīng)該有個(gè)大的播放按鈕，方便用戶點(diǎn)擊播放，點(diǎn)擊屏幕中任何一個(gè)區(qū)域都能播放視頻，而不是彈出廣告。

2、讀后感

好吧，我們看看目前主流的視頻播放器。

先看看優(yōu)酷，我們可以看到，它有幾個(gè)優(yōu)點(diǎn)：首先，自動(dòng)為你跳過(guò)了片頭，做的很貼心對(duì)吧！其次，視頻中每個(gè)片段都有提示，類似于視頻導(dǎo)航，如下圖所示。最后，在時(shí)間提示和劇集展示上做的都不錯(cuò)。同時(shí)，它也有缺點(diǎn)：沒(méi)有快進(jìn)快退功能，用戶只能去來(lái)回拖動(dòng)。其次，視頻加載完畢后會(huì)自動(dòng)播放，這會(huì)讓用戶在加載的同時(shí)不能干其它事情，除非加載的時(shí)候點(diǎn)下暫停按鈕，最后，字體和按鈕還是比較小，不容易點(diǎn)擊到。另外，暫停過(guò)程中，頁(yè)面中間會(huì)有廣告，播放按鈕在左下角，可能是出于商業(yè)的考慮，但是用戶體驗(yàn)真的很不好。

我們?cè)賮?lái)看看被優(yōu)酷合并的土豆播放器。注意到了嗎？問(wèn)題很多，按鍵很小，沒(méi)有篇章提示、暫停后連播放提示都沒(méi)有，優(yōu)酷好歹在左下角有個(gè)播放按鈕，還有，我不知道有多少人會(huì)去點(diǎn)那個(gè)“下一個(gè)”按鈕，當(dāng)你不知道下一個(gè)視頻是什么的時(shí)候，你去點(diǎn)的幾率有多大，它真的有必要存在嗎？

另外，優(yōu)酷和土豆默認(rèn)的視頻格式都是高清，實(shí)際上這個(gè)可以根據(jù)用戶的網(wǎng)速個(gè)性展示，如果用戶網(wǎng)速不給力，可以自動(dòng)采用標(biāo)清的。

九、表單設(shè)計(jì)

1、表單布局

表單設(shè)計(jì)在注冊(cè)頁(yè)面尤為常見(jiàn)，一般的注冊(cè)頁(yè)面會(huì)要求用戶填寫(xiě)用戶名、郵箱、密碼、生日、地區(qū)等信息，這些信息會(huì)按照標(biāo)簽和文本框的形式展示出來(lái)，我們先看看書(shū)本中的表單優(yōu)化過(guò)程。

注意到變化了吧！一開(kāi)始是兩列布局，標(biāo)簽居左對(duì)齊，試想下，用戶瀏覽完標(biāo)簽后再在對(duì)應(yīng)的文本框中填寫(xiě)相關(guān)信息，如果是左對(duì)齊，會(huì)不自覺(jué)的降低用戶瀏覽的速度，所以先把左對(duì)齊改成右對(duì)齊。修改完成后，我們?cè)賮?lái)看看用戶的瀏覽曲線，左右下左右，視線不停的在頁(yè)面中以Z型移動(dòng)，如果兩列改成一列，用戶的瀏覽速度會(huì)不會(huì)變快呢？答案是肯定的，所以我們有了第三個(gè)版本。

第三個(gè)版本中，按鈕采用了左對(duì)齊，這也是出于對(duì)整個(gè)頁(yè)面美觀的考慮。另外，現(xiàn)在的OK和取消是平級(jí)的，為了鼓勵(lì)用戶進(jìn)行注冊(cè)，我們把取消按鈕改成了文字，如下圖所示：

在上面例子中，為什么OK按鈕放在左邊，取消放在右邊，除了用戶的操作習(xí)慣外，還考慮到了如果用戶采用的是tab操作，其焦點(diǎn)肯定會(huì)定格在第一個(gè)按鈕，我們的目的是鼓勵(lì)用戶完成注冊(cè)，所以O(shè)K按鈕放在第一個(gè)是肯定的。

2、Wizard向?qū)?/p>

我們先來(lái)看看Wizard向?qū)У难葑冞^(guò)程，一般情況下，用戶注冊(cè)過(guò)程中會(huì)需要填寫(xiě)很多資料，這些資料在一個(gè)頁(yè)面中將不能全部展示，只能分頁(yè)展示，這個(gè)時(shí)候問(wèn)題就來(lái)了。

看下圖，注冊(cè)的第一步，填寫(xiě)完相關(guān)的信息后點(diǎn)擊下一步，到第二步填寫(xiě)相關(guān)信息。發(fā)現(xiàn)了吧，用戶并不知道一共有幾步才能完成注冊(cè)，并且不知道現(xiàn)在自己在第一步，所以我們需要優(yōu)化。

針對(duì)上方的不足，我們優(yōu)化為下方注冊(cè)頁(yè)面：

多了目前的位置和一共有多少頁(yè)，并且展示出目前用戶進(jìn)行的操作，是不是好多了。是好多了，用戶知道了自己目前進(jìn)行的操作，但是他不知道接下來(lái)會(huì)發(fā)生的事情，會(huì)有種不安的心理，為了防止這種事情出現(xiàn)，我們?cè)賮?lái)一次優(yōu)化。

如上圖所示，我們告訴用戶一共多少步，每步是什么，用戶目前在第幾步，清晰多了吧！目前很多站點(diǎn)都是采用的這個(gè)形式。實(shí)際上我們可以再想想，雖然用戶知道了第三步的內(nèi)容，但并不知道第三步有多少自己要填寫(xiě)的信息，為了讓用戶清晰的了解到，我們又有了下面的最終版本。

將橫向展示改為豎向展示，這樣用戶就會(huì)了解到，每步中的內(nèi)容也就那么多了，心里就會(huì)有了準(zhǔn)備，然后就愉快的完成了注冊(cè)。

3、及時(shí)校驗(yàn)

好吧！現(xiàn)在注冊(cè)流程的架構(gòu)已經(jīng)搭建好，無(wú)論是單列的表單設(shè)計(jì)還是Wizard向?qū)В寄軓拇蟮姆矫娣奖阌脩?。那么現(xiàn)在就開(kāi)始涉及到了每個(gè)文本框的設(shè)計(jì)了。前面我們有提到，標(biāo)簽的提醒功能，現(xiàn)在我們聊聊注冊(cè)過(guò)程中的及時(shí)校驗(yàn)。

我們現(xiàn)在開(kāi)始設(shè)計(jì)一個(gè)簡(jiǎn)單的注冊(cè)表單：

當(dāng)用戶名的文本域獲得焦點(diǎn)時(shí)，我們有相關(guān)提示，如下圖：同理見(jiàn)注冊(cè)郵箱和密碼區(qū)域。

現(xiàn)在用戶輸入用戶名，這里有兩種情況，如果用戶輸入錯(cuò)誤了，會(huì)有相關(guān)提示，如果用戶輸入對(duì)了，也會(huì)有提升，很多站點(diǎn)這個(gè)都沒(méi)有做到。

輸入錯(cuò)誤和輸入正確的交互

這里需要注意下，錯(cuò)誤提示只有在相關(guān)文本域失去焦點(diǎn)，也就是確定用戶完成操作后才會(huì)出現(xiàn)。如果用戶跳過(guò)注冊(cè)郵箱后直接填寫(xiě)密碼，然后點(diǎn)擊確定后，會(huì)發(fā)生什么事情，我們有兩種解決方案，第一種是在相關(guān)文本區(qū)直接提示用戶先要完成此項(xiàng)，第二種則是預(yù)防措施，如下圖所示：

4、字符限制

很不明顯的一個(gè)交互，你注意過(guò)沒(méi)呢？一個(gè)文本框，用戶在輸入文字過(guò)程中會(huì)發(fā)生很多奇妙的事情。就拿注冊(cè)過(guò)程中讓用戶填寫(xiě)一段自我簡(jiǎn)介，如下圖：

根據(jù)要求，我們需要讓用戶輸入10個(gè)到100個(gè)字，如下圖：

好吧，這個(gè)時(shí)候用戶開(kāi)始輸入文字，當(dāng)輸入了不知道多少個(gè)字的時(shí)候，突然會(huì)有個(gè)情況，用戶輸入不進(jìn)去了，為什么呢，因?yàn)橄拗?00個(gè)字嘛！但是用戶不清楚，他會(huì)一直的輸入輸入，直到離開(kāi)。所以，我們要調(diào)整下，讓用戶知道他已經(jīng)輸入了多少個(gè)字。

這個(gè)時(shí)候，用戶就知道自己已經(jīng)輸入了多少字，在快到100個(gè)字的時(shí)候，他會(huì)注意到，然后就會(huì)調(diào)整自己輸入的文字。另外，當(dāng)用戶沒(méi)有填寫(xiě)文字或者少于10個(gè)字的時(shí)候點(diǎn)擊確定，怎么交互呢？

點(diǎn)擊確定時(shí)，會(huì)有提示他必須輸入多于10個(gè)的文字，當(dāng)文本框再次獲得焦點(diǎn)時(shí)，這個(gè)區(qū)域又變成了數(shù)字提示。這里我們看看新浪微博的微博發(fā)布框：

用戶沒(méi)有輸入文字時(shí)，發(fā)布按鈕是點(diǎn)擊不了的，當(dāng)輸入文字的時(shí)候，注意上方140的變化。它會(huì)顯示用戶還可以輸入多少個(gè)字。同時(shí)發(fā)布按鈕可點(diǎn)。

而當(dāng)用戶輸入超過(guò)140個(gè)字的時(shí)候呢？用戶還是可以繼續(xù)輸入的，但是發(fā)布按鈕變成不可點(diǎn)狀態(tài)，同時(shí)提示已經(jīng)超過(guò)了N個(gè)字。

好吧！還有幾個(gè)重要的完美瞬間，我們下次再來(lái)！