在電視作品中，段落與段落、場景與場景之間的過渡或轉(zhuǎn)換，叫做轉(zhuǎn)場。為了使電視片內(nèi)容的條理性更強、層次的發(fā)展更清晰、在場面與場面之間的轉(zhuǎn)換中，需要一定的手法。

網(wǎng)站也是類似的，一個完整的網(wǎng)站由若干頁面組成，而每個頁面又由若干元素組成。為了使網(wǎng)站內(nèi)容的條理性更強、操作邏輯更清晰、用戶體驗更好、用戶轉(zhuǎn)化率更高，在不同元素與頁面的轉(zhuǎn)換中，也需要一定的技巧。

過渡效果

a 漸入漸出

這種方式非常常見：比如在酷狗音樂盒中關閉音樂后，聲音在幾秒鐘內(nèi)逐漸停止，而不是馬上消失；凡客首頁廣告頭圖的輪換也采取了漸入漸出的方式。

b 過程示意

用動態(tài)效果表示當前進度、處理過程或反饋結果。

· 當前進度：最常見的是進度條效果，明確表現(xiàn)出當前的進度，減少用戶等待時的焦慮。

· 操作過程及反饋結果：

 比如刪除淘寶收藏夾中的商品，該商品會在逐漸向上滑動的同時漸變消失。這個動作清楚的表示正在刪除的過程和結果，而不用再另外提示用戶刪除成功。

優(yōu)眾網(wǎng)的收藏提示，則是一段小星星的動畫。

· 視覺引導：在凡客誠品的客戶端中，把商品加入到購物車時的引導動畫，既表現(xiàn)了添加的過程及完成這一操作的反饋結果，又間接提示了購物車的位置，一舉兩得。

c 過渡動畫

 當頁面元素產(chǎn)生變化的時候，最好能有一些過渡效果。比如畫面的漸變切換、下拉列表的動態(tài)伸展、浮層的逐漸消失等等。突然的變化會給人生硬的感覺。

舉個有趣的小例子：淘寶的收藏夾，鼠標滑過時，原先的下三角會旋轉(zhuǎn)180°成為上三角。

d 360度旋轉(zhuǎn)產(chǎn)品

 用戶在網(wǎng)上購物時，希望能夠盡可能多的了解商品的外觀，360°旋轉(zhuǎn)功能更好的滿足了這個需求。其實這種方式很早就有了，但是一直沒怎么普及。

頁面跳轉(zhuǎn)

頁面跳轉(zhuǎn)（無論是原頁面刷新還是新開窗口）給用戶帶來停頓感，影響用戶體驗。

a 避免頻繁翻頁

翻頁可以適當減輕閱讀的疲勞感，增加一點點的成就感，且賦予內(nèi)容更明顯的物理位置（反復查找比較容易）。但是它畢竟在一定程度上打斷了我們的閱覽（尤其當網(wǎng)速很抱歉的時候），這可能導致用戶提前離開。因此在一些內(nèi)容關聯(lián)性不強的網(wǎng)站上，可以嘗試適當減少翻頁的次數(shù)——最簡單的方式是增加一頁的顯示數(shù)量，但要考慮用戶的承受極限（不同的產(chǎn)品情況不同，需要酌情考慮）。

比如新浪微博的頁面很長，當滾動到底部時，會立刻加載后面的內(nèi)容（快到幾乎感覺不到）。如此反復幾次，才會看到頁面底部的翻頁組件。

一些新興的電子商務網(wǎng)站甚至沒有傳統(tǒng)的翻頁組件，整個頁面一氣呵成。比如優(yōu)眾網(wǎng)，使用滾輪或上下方向鍵就可以繼續(xù)瀏覽商品。

b 避免立即跳轉(zhuǎn)

對于一個操作流程來說，每多一個頁面，就會增加用戶的流失率。而點擊鏈接就意味著一定要刷出一個新頁面嗎？看看下面這些緩兵之計吧。

標簽： 交互設計 網(wǎng)頁設計 WEB設計 

版權申明：本站文章部分自網(wǎng)絡，如有侵權，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權歸原作者所有，如需使用，請與原作者聯(lián)系。