承接上文：http://www.lxweimin.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個字。

好吧！還有幾個重要的完美瞬間，我們下次再來！