|
手機(jī)端WAP頁(yè)，由于手機(jī)硬件上沒有內(nèi)建功能（個(gè)別瀏覽器除外，qq瀏覽器支持快捷鍵返回頂部），焦點(diǎn)跳轉(zhuǎn)的體驗(yàn)非常艱辛，門戶等產(chǎn)品單頁(yè)的大信息量導(dǎo)致頁(yè)面過長(zhǎng)。所以“返回頂部”的設(shè)計(jì)有其必要性。然而，將其放在哪里，怎么用都需要斟酌再三。很多WAP網(wǎng)站做了相關(guān)嘗試，例如手機(jī)騰訊網(wǎng)舊版WAP2.0，手機(jī)新浪網(wǎng)炫彩版等。
前一版手機(jī)騰訊網(wǎng)WAP2.0版頁(yè)面，在標(biāo)題欄左端有模塊間快速跳轉(zhuǎn)的控件，頁(yè)面最下面的標(biāo)題左端則是跳轉(zhuǎn)到頂部的控件。跳轉(zhuǎn)按鈕帶來(lái)的不良體驗(yàn)是，控件表現(xiàn)傳達(dá)不出預(yù)期，點(diǎn)擊率較低。五向鍵定位困難，尤其在鼠標(biāo)形或軌跡球焦點(diǎn)切換方式下；跳轉(zhuǎn)后，由于沒有動(dòng)畫轉(zhuǎn)場(chǎng)，初次體驗(yàn)?zāi)K跳轉(zhuǎn)的用戶會(huì)對(duì)跳轉(zhuǎn)失去方位感（但回頂部可以明確認(rèn)知）。
手機(jī)新浪網(wǎng)的“↑TOP”穿插在頁(yè)面上中下部，分布較隨機(jī)。視覺上，生硬嵌入了幾行跳轉(zhuǎn)鏈接，破壞界面的整體性，容易影響閱讀的順暢體驗(yàn)。
手機(jī)QQ空間 WAP2.0頁(yè)底的回頂部，設(shè)計(jì)的很到位。左邊的小圖標(biāo)和文字處理在同一個(gè)panel里，焦點(diǎn)切換時(shí)只會(huì)得到一次焦點(diǎn)。
仔細(xì)分析一下瀏覽行為模式和使用情境，什么原因驅(qū)動(dòng)用戶希望快捷地返回頂部。一般可推測(cè)出兩種情形：當(dāng)網(wǎng)頁(yè)頂部有導(dǎo)航欄時(shí)，用戶會(huì)希望瀏覽完整頁(yè)面內(nèi)容后，借由導(dǎo)航去往別的頻道；另一種情形是頁(yè)面頂部會(huì)有動(dòng)態(tài)更新，需要用戶關(guān)注（比如，手機(jī)QQ微博）。所以手機(jī)新浪網(wǎng)各頻道頁(yè)的設(shè)計(jì)，底部都會(huì)復(fù)現(xiàn)頭部的導(dǎo)航，“↑TOP”的存在就顯累贅了。
手機(jī)騰訊網(wǎng)WAP2.0交互設(shè)計(jì)中，規(guī)范了“返回頂部”的使用場(chǎng)合——僅在頻道頁(yè)的底部foot之上出現(xiàn)“返回頂部”�；谝粋�(gè)假設(shè)，用戶返回頂部利用頁(yè)面頭部的導(dǎo)航切入其他頻道。觸屏版的手機(jī)騰訊網(wǎng)，因?yàn)橛|屏設(shè)備滾屏操作的壓力很小，會(huì)謹(jǐn)慎用之。
返回頂部后，焦點(diǎn)應(yīng)該到哪里
返回頂部后，焦點(diǎn)位置應(yīng)該落在哪里？手機(jī)新浪網(wǎng)的處理方式是，跳轉(zhuǎn)到頁(yè)面第一個(gè)鏈接。手機(jī)騰訊網(wǎng)的處理方式是回到頁(yè)面瀏覽的初始狀態(tài)，即按兩次向下鍵，頁(yè)面才出現(xiàn)焦點(diǎn)。這個(gè)細(xì)節(jié)，個(gè)人認(rèn)為手機(jī)新浪網(wǎng)的設(shè)計(jì)更到位。
轉(zhuǎn)載：http://wsd.tencent.com/2010/08/wap2-minutia-design.html
本文鏈接：http://m.95time.cn/design/doc/2010/7880.asp 
出處：騰訊wsd
責(zé)任編輯：bluehearts
上一頁(yè) WAP2.0網(wǎng)頁(yè)設(shè)計(jì)中的交互細(xì)節(jié) [2] 下一頁(yè)
|
第 1 頁(yè) 
第 3 頁(yè) WAP2.0網(wǎng)頁(yè)設(shè)計(jì)中的交互細(xì)節(jié) [3]
