網(wǎng)頁設(shè)計(jì)不同元素與頁面轉(zhuǎn)換中的技巧

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

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

　　過渡效果

　　a 漸入漸出

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

　　b 過程示意

　　用動(dòng)態(tài)效果表示當(dāng)前進(jìn)度、處理過程或反饋結(jié)果。

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

　　· 操作過程及反饋結(jié)果：

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

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

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

　　c 過渡動(dòng)畫

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

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

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

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

　　頁面跳轉(zhuǎn)

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

　　a 避免頻繁翻頁

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

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

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

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

　　對(duì)于一個(gè)操作流程來說，每多一個(gè)頁面，就會(huì)增加用戶的流失率。而點(diǎn)擊鏈接就意味著一定要刷出一個(gè)新頁面嗎?看看下面這些緩兵之計(jì)吧。

　　對(duì)于關(guān)聯(lián)性較弱的鏈接：

　　· 使用浮層：當(dāng)說明內(nèi)容不多時(shí)，可以使用浮層提示來代替在新頁面中打開鏈接。

　　· 使用浮層+二次鏈接：當(dāng)說明內(nèi)容很多，但重點(diǎn)內(nèi)容不多時(shí)，可以提煉重點(diǎn)信息在浮層上，剩下的放到鏈接中。

　　比如下面這個(gè)例子，鼠標(biāo)滑過“查看收費(fèi)標(biāo)準(zhǔn)”，出現(xiàn)了一個(gè)小浮層，里面包含的信息是經(jīng)過提煉的，可以滿足一部分人的需要。點(diǎn)擊浮層中的“查看收費(fèi)標(biāo)準(zhǔn)”鏈接，才能在新窗口打開該頁面，查看更具體的相關(guān)內(nèi)容。

　　雖然有點(diǎn)出乎意料，但這樣可以盡量減少頁面的跳轉(zhuǎn)次數(shù)，使操作的連續(xù)性不被過多破壞，同時(shí)減少用戶流失。

　　· 使用錨點(diǎn)鏈接+二次鏈接： 當(dāng)說明內(nèi)容很多，其中的重點(diǎn)內(nèi)容也不少時(shí)，可以采用此法。錨點(diǎn)鏈接適用于長頁面，但這種快速的位置切換可能讓人感覺不明所以。但長頁面上又不適合增加頁面滾動(dòng)的過渡效果，容易讓人眼暈。因此可以提煉重點(diǎn)內(nèi)容在錨點(diǎn)即將跳轉(zhuǎn)的位置上以減少頁面長度，同時(shí)增加頁面滾動(dòng)的過渡效果。

　　比如支付寶的支付頁面，點(diǎn)擊右上角的“付款遇到問題”，可視區(qū)域從A逐漸過渡到B(頁面緩慢下沉)，同時(shí)B區(qū)域高亮2秒左右，再逐漸還原。若此時(shí)用戶依然沒有找到答案，可以點(diǎn)擊左下角的“更多幫助”鏈接，在新頁面中查看更多內(nèi)容。

　　這樣不僅能減少跳轉(zhuǎn)次數(shù)，更因?yàn)橛羞^渡效果，用戶就會(huì)很清楚整個(gè)頁面的布局和之前的行為過程，不會(huì)因?yàn)楫嬅婵焖偾袚Q而感到手足無措。

　　下面舉一個(gè)使用錨點(diǎn)鏈接的反例：

　　在當(dāng)當(dāng)網(wǎng)的“收貨地址薄”中點(diǎn)擊“修改按鈕”，畫面立刻變?yōu)椋?/p>

　　每次遇到這種情況都感覺很突然。其實(shí)頁面本身并沒有改變，只是可視區(qū)域往下移了一些。但是用戶看不到移動(dòng)的過程，只能看到改變的結(jié)果。

　　兩點(diǎn)問題：1. 既然這個(gè)頁面并不長，從上方移動(dòng)到下方至少應(yīng)該有一個(gè)過渡效果，不然用戶不明白到底發(fā)生了什么。2. 對(duì)于類似的操作內(nèi)容使用錨點(diǎn)鏈接是否合適?看到“修改”這個(gè)動(dòng)作，用戶可能會(huì)本能的想到彈窗，然而彈窗所能承載的信息量比較有限，且位置不好控制(一般出現(xiàn)在頁面中央，離操作觸發(fā)區(qū)域可能較遠(yuǎn))，那么有什么其他的解決方式呢?

　　讓我們看看“頁面內(nèi)展開”的方法。

　　對(duì)于關(guān)聯(lián)性較強(qiáng)的操作或鏈接：

　　· 頁面內(nèi)展開：適合于對(duì)現(xiàn)有內(nèi)容的擴(kuò)充，它能夠即時(shí)的反饋用戶的操作，帶來更自然的體驗(yàn)。 優(yōu)點(diǎn)：所能承載的信息量比彈窗大;過渡自然;在操作區(qū)域附近顯示展開的內(nèi)容，連貫性更好。缺點(diǎn)：后面的內(nèi)容會(huì)隨之下移，攪亂位置感。

　　回到剛才當(dāng)當(dāng)網(wǎng)修改地址的例子，由于關(guān)聯(lián)性很強(qiáng)，因此是否可以用頁面內(nèi)展開的方式呢?

　　· 頁面內(nèi)展開+二次鏈接：若內(nèi)容非常多，可以在展開部分的底部再增加一次鏈接。

　　· 彈出窗口：適用于內(nèi)容比較簡潔，需要用戶重點(diǎn)關(guān)注，且頁面內(nèi)元素位置需固定的情況。但彈窗往往位于頁面中央，離觸發(fā)操作區(qū)域可能會(huì)比較遠(yuǎn)。

　　當(dāng)進(jìn)入列表頁時(shí)，很多用戶習(xí)慣同時(shí)點(diǎn)擊多條鏈接，并在新窗口打開。一是因?yàn)榫W(wǎng)速可能較慢，在等待新頁面打開的同時(shí)不如回到列表頁看看其他的內(nèi)容;二是因?yàn)橛脩艨赡茉诹斜砩峡吹蕉鄺l感興趣的內(nèi)容，因此逐一在新窗口打開，避免漏掉。而優(yōu)眾網(wǎng)是這樣處理的：

　　沒有多余的新開窗口，原頁面也沒有完全改頭換面，用戶不容易迷失，操作路徑更清晰。彈窗比切換頁面速度要快，但是要考慮到彈窗承載的信息量有限，且難以控制彈出的位置。

　　· 彈出子項(xiàng)：介于頁面內(nèi)展開和彈窗之間，適用于內(nèi)容不是很多，操作不是非常重要，且頁面內(nèi)元素位置需固定的情況。比彈窗人性化(彈窗一般位于頁面中央，而彈出子項(xiàng)位于操作區(qū)域附近)，比頁面內(nèi)展開的方式更穩(wěn)定(頁面位置不會(huì)變化)，缺點(diǎn)是所能承載的內(nèi)容比較有限。

　　提示效果

　　恰到好處的提示可以讓用戶產(chǎn)生正確的心理預(yù)期，防止誤操作，也使操作過程更加流暢連貫。

　　a 鼠標(biāo)懸停提示

　　在豆瓣個(gè)人首頁上，鼠標(biāo)懸停左側(cè)欄目會(huì)出現(xiàn)圖標(biāo)，這樣我們就會(huì)知道這部分區(qū)域是可以移動(dòng)的。

　　b 操作定位

　　對(duì)于容易誤操作的界面(尤其是手機(jī)界面，手指會(huì)擋到操作區(qū)域)，需要一個(gè)定位提示。

　　當(dāng)內(nèi)容離title比較遠(yuǎn)時(shí)，也需要一個(gè)定位提示。

　　c 報(bào)錯(cuò)提示

　　報(bào)錯(cuò)提示最好位于操作區(qū)域附近，否則用戶的視線需要來回移動(dòng)，破壞了視線、操作、思維的連貫性。

　　d 從屬關(guān)系提示

　　僅僅是加一個(gè)小箭頭，也會(huì)讓不同元素之間的邏輯關(guān)系清晰很多。

　　其他

　　為了防止機(jī)器人的惡意登錄，我們不得不填寫各種奇異的驗(yàn)證碼，不僅機(jī)器辨認(rèn)不出來了，正常人也是經(jīng)常會(huì)因此而輸錯(cuò)。豆瓣則使用了英文單詞變形的方式，讓我們在輸入時(shí)的思維是連貫的，不易出錯(cuò)。

　　最后想說的是，其實(shí)還有更多沒有想到的東西，僅以此拋磚引玉，希望能帶給觀者一點(diǎn)點(diǎn)啟發(fā)。