在電視作品中,段落與段落、場景與場景之間的過渡或轉換,叫做轉場。為了使電視片內容的條理性更強、層次的發展更清晰、在場面與場面之間的轉換中,需要一定的手法。
網站也是類似的,一個完整的網站由若干頁面組成,而每個頁面又由若干元素組成。為了使網站內容的條理性更強、操作邏輯更清晰、用戶體驗更好、用戶轉化率更高,在不同元素與頁面的轉換中,也需要一定的技巧。
過渡效果
a 漸入漸出
這種方式非常常見:比如在酷狗音樂盒中關閉音樂後,聲音在幾秒鐘內逐漸停止,而不是馬上消失;凡客首頁廣告頭圖的輪換也采取了漸入漸出的方式。
b 過程示意
用動態效果表示當前進度、處理過程或反饋結果。
· 當前進度:最常見的是進度條效果,明確表現出當前的進度,減少用戶等待時的焦慮。
· 操作過程及反饋結果:
比如刪除淘寶收藏夾中的商品,該商品會在逐漸向上滑動的同時漸變消失。這個動作清楚的表示正在刪除的過程和結果,而不用再另外提示用戶刪除成功。
優眾網的收藏提示,則是一段小星星的動畫。
· 視覺引導:在凡客誠品的客戶端中,把商品加入到購物車時的引導動畫,既表現了添加的過程及完成這一操作的反饋結果,又間接提示了購物車的位置,一舉兩得。
c 過渡動畫
當頁面元素產生變化的時候,最好能有一些過渡效果。比如畫面的漸變切換、下拉列表的動態伸展、浮層的逐漸消失等等。突然的變化會給人生硬的感覺。舉個有趣的小例子:淘寶的收藏夾,鼠標滑過時,原先的下三角會旋轉180°成為上三角
d 360度旋轉產品
用戶在網上購物時,希望能夠盡可能多的了解商品的外觀,360°旋轉功能更好的滿足了這個需求。其實這種方式很早就有了,但是一直沒怎麼普及。
頁面跳轉
頁面跳轉(無論是原頁面刷新還是新開窗口)給用戶帶來停頓感,影響用戶體驗。
a 避免頻繁翻頁
翻頁可以適當減輕閱讀的疲勞感,增加一點點的成就感,且賦予內容更明顯的物理位置(反復查找比較容易)。但是它畢竟在一定程度上打斷了我們的閱覽(尤其當網速很抱歉的時候),這可能導致用戶提前離開。因此在一些內容關聯性不強的網站上,可以嘗試適當減少翻頁的次數——最簡單的方式是增加一頁的顯示數量,但要考慮用戶的承受極限(不同的產品情況不同,需要酌情考慮)。
比如新浪微博的頁面很長,當滾動到底部時,會立刻加載後面的內容(快到幾乎感覺不到)。如此反復幾次,才會看到頁面底部的翻頁組件。
一些新興的電子商務網站甚至沒有傳統的翻頁組件,整個頁面一氣呵成。比如優眾網,使用滾輪或上下方向鍵就可以繼續浏覽商品。
b 避免立即跳轉
對於一個操作流程來說,每多一個頁面,就會增加用戶的流失率。而點擊鏈接就意味著一定要刷出一個新頁面嗎?看看下面這些緩兵之計吧。
對於關聯性較弱的鏈接:
· 使用浮層:當說明內容不多時,可以使用浮層提示來代替在新頁面中打開鏈接。
b 操作定位
對於容易誤操作的界面(尤其是手機界面,手指會擋到操作區域),需要一個定位提示。
當內容離title比較遠時,也需要一個定位提示。
c 報錯提示
報錯提示最好位於操作區域附近,否則用戶的視線需要來回移動,破壞了視線、操作、思維的連貫性。