從Web端直接移植為WAP2.0形式,突出的矛盾是信息架構(gòu)不適應(yīng)小屏幕設(shè)備,垂直頁(yè)面的冗長(zhǎng)和WAP2.0表現(xiàn)形式的限制。
提升小屏幕瀏覽的體驗(yàn),在設(shè)計(jì)中應(yīng)包含以下幾個(gè)核心任務(wù):
- 控制信息的維度
- 信息布局,更好利用首屏的有限資源
- 采用合理的導(dǎo)航、有明確的方位感知
- 盡可能減少瀏覽時(shí)的按鍵做功
- 界面可視化
控制信息維度
WAP網(wǎng)頁(yè)可支持的頁(yè)面信息維度較小!兑苿(dòng)設(shè)備交互設(shè)計(jì)》中介紹1維、1.5維、2維的信息呈現(xiàn)方式[1]。將其歸納為1維垂直平鋪和1.5維的頁(yè)面折疊,2維的縮略索引等相結(jié)合來(lái)處理頁(yè)面降維。
例如:手機(jī)騰訊網(wǎng)新聞?wù)捻?yè),除去導(dǎo)航部分,主要垂直平鋪了新聞?wù)膬?nèi)容、分享轉(zhuǎn)載、相關(guān)新聞推薦、相關(guān)搜索、網(wǎng)友熱評(píng)、熱點(diǎn)新聞、精彩推薦等內(nèi)容模塊。減少頁(yè)面長(zhǎng)度,就需要折疊模塊信息。除新聞?wù)膬?nèi)容以外的外延閱讀模塊只摘選展現(xiàn)3或5條,用戶需要通過(guò)“查看更多”或點(diǎn)擊模塊標(biāo)題進(jìn)行詳細(xì)的擴(kuò)展閱讀。
再如:手機(jī)QQ空間的好友動(dòng)態(tài)的日志設(shè)計(jì),僅展示各條日志展示3行正文內(nèi)容,其余內(nèi)容折疊起來(lái)。引導(dǎo)用戶進(jìn)入深一維度瀏覽。
信息布局
首屏的首頁(yè)對(duì)于全站的戰(zhàn)略意義重大。它是用戶總覽全站的內(nèi)容最重要途徑,同時(shí)可以建立直觀印象,樹立品牌形象。《Don’t make me think》非常強(qiáng)調(diào)網(wǎng)站的首頁(yè)尤其是頁(yè)面頭部要清晰地呈現(xiàn)出這個(gè)網(wǎng)站是干什么的,用戶可以做什么。同時(shí)首屏的資源在小屏幕設(shè)備上尤為稀缺,所以往往是全站交互設(shè)計(jì)的重中之重。
小屏幕設(shè)備的首頁(yè)有它特殊規(guī)則。QVGA的豎屏模式下,以13號(hào)字體顯示,一屏僅有13行左右。橫屏模式下就展示更少了。所以在可選擇的前提下(例如Nokia E71橫屏機(jī)型,無(wú)法豎屏閱讀)用戶很少會(huì)喜歡用橫屏模式閱讀長(zhǎng)頁(yè)面。首屏默認(rèn)最上方會(huì)是全站的logo和全站的導(dǎo)航。
- 手機(jī)新浪網(wǎng)首頁(yè)截屏
手機(jī)新浪網(wǎng)首頁(yè)頭部導(dǎo)航的設(shè)計(jì)是采用背景圖實(shí)現(xiàn)的。UCWeb瀏覽器不支持背景圖片展示,直接導(dǎo)致左右結(jié)構(gòu)的導(dǎo)航變形,視覺(jué)效果損失。
- 手機(jī)搜狐網(wǎng)首頁(yè)截屏
手機(jī)搜狐網(wǎng)的logo實(shí)現(xiàn)方式是前景圖,所以在瀏覽器(不禁止圖片瀏覽的情況下)中能夠展示logo,但是首頁(yè)頭部的機(jī)型適配問(wèn)題依然較為嚴(yán)峻。
手機(jī)騰訊網(wǎng)WAP2.0改版,首頁(yè)首屏的設(shè)計(jì)
分析:手機(jī)騰訊網(wǎng)WAP2.0首頁(yè)的首屏在不同瀏覽器上的適配效果得到了較好的控制。導(dǎo)航做了減法,由WAP 1.0階段的3行精簡(jiǎn)到2行,只留出重要的產(chǎn)品入口,其他頻道入口分散到首屏以下以及新聞中心。對(duì)手機(jī)騰訊網(wǎng)首頁(yè)的信息布局做了一次改良。
采用合理的導(dǎo)航
桌面上常見(jiàn)的導(dǎo)航方式主要有頁(yè)面頭部的多行全局導(dǎo)航鏈接、面包屑、菜單、工具欄等。凡具備告訴用戶在哪里,方便用戶去往其他地方的標(biāo)識(shí)都算導(dǎo)航。它一般都易于識(shí)別,處于頁(yè)面顯赫位置;形式和位置也相對(duì)固定,持久;相近作用的導(dǎo)航在頁(yè)面中具有排他性,即功能相近的導(dǎo)航應(yīng)根據(jù)頁(yè)面需要做判斷和取舍,詳見(jiàn)下文“書城”案例。
在WAP頁(yè)面中,視域相當(dāng)狹窄,信息維度很小。承載同樣多的信息,WAP的頁(yè)面長(zhǎng)度會(huì)比Web頁(yè)面顯著增加。很多WAP產(chǎn)品頁(yè)面頭部和頁(yè)面底部采用導(dǎo)航復(fù)現(xiàn)的設(shè)計(jì)。比如手機(jī)新浪網(wǎng)的設(shè)計(jì)將多行導(dǎo)航鏈接布置在頁(yè)頭和頁(yè)尾。開(kāi)心001以及人人WAP2.0的設(shè)計(jì)是在頁(yè)頭和頁(yè)尾復(fù)現(xiàn)頁(yè)卡式導(dǎo)航。
手機(jī)騰訊網(wǎng)WAP2.0的導(dǎo)航設(shè)計(jì),首要解決的問(wèn)題是如何讓用戶快速了解網(wǎng)頁(yè)的全局內(nèi)容及功能。在手機(jī)騰訊網(wǎng)內(nèi)每個(gè)頻道首頁(yè)的頭部位置有用于總覽的多行導(dǎo)航鏈接,讓用戶對(duì)頻道內(nèi)容有基本認(rèn)知。頻道首頁(yè)的尾部則采用“返回頂部”引導(dǎo)用戶回到頭部利用多行導(dǎo)航鏈接進(jìn)入其他模塊。而各頻道二級(jí)頁(yè)面在頁(yè)頭和頁(yè)尾則復(fù)用面包屑導(dǎo)航。
手機(jī)騰訊網(wǎng)書城WAP2.0改版前的導(dǎo)航問(wèn)題
書城-分類-子類別頁(yè)面的導(dǎo)航頁(yè)卡和面包屑并用,功能有重合之嫌。面包屑中的前面兩項(xiàng),在頂部的頁(yè)卡式導(dǎo)航里都可以鏈入。
修改后,分類tab置灰,表示為當(dāng)前選中項(xiàng),提示方位。原面包屑位置改為欄目標(biāo)題,就簡(jiǎn)單清晰很多。
減少瀏覽時(shí)的按鍵做功
瀏覽頁(yè)面要盡可能地減少用戶滾屏操作。垂直的長(zhǎng)頁(yè)面越往下,信息曝光率越小,操作難度越大。因此,要將信息的重要性分級(jí),并以流的思維審視每個(gè)頁(yè)面首要的操作任務(wù);將重要操作或信息放置在靠近頂部的位置。另外,要充分考慮頁(yè)面中圖形元素對(duì)于焦點(diǎn)跳轉(zhuǎn)頻度的影響(在后面的交互細(xì)節(jié)章節(jié)中詳細(xì)介紹)。
以手機(jī)騰訊網(wǎng)WAP2.0 下載頻道為例。如下面交互設(shè)計(jì)稿所示:軟件介紹頁(yè)頭部改版后,新增了下載包鏈接。這滿足了一些需求:用戶在進(jìn)入軟件介紹頁(yè)之前,就已經(jīng)確定需要下載該軟件,并且機(jī)型適配也已明確。此時(shí),用戶就不需要跨越兩屏的距離才能點(diǎn)到下載包了。
界面可視化
可視化是WAP2.0較WAP1.0的一個(gè)重要改進(jìn)。WAP1.0頁(yè)面不能控制文字的樣式及顏色,僅可見(jiàn)鏈接和非鏈接的區(qū)別;支持少量的圖片;以及簡(jiǎn)單的排版樣式。瀏覽WAP1.0頁(yè)面,用戶需要花更多的注意力通過(guò)純文字內(nèi)容來(lái)分辨其功能,判斷自己該怎么操作。而加入了視覺(jué)化的控件、功能分區(qū),能幫助用戶更好地理解功能,引導(dǎo)用戶的注意力。以下重點(diǎn)分析下手機(jī)QQ空間 WAP2.0新改版設(shè)計(jì):
另外,設(shè)計(jì)中還要注意利用WAP2.0的圖形化界面表現(xiàn);同時(shí)考量所使用的圖形元素對(duì)用戶是不是有意義。
頻道的色彩管理也是全站整合的重要設(shè)計(jì)要素。很多子頻道都希望自己的頻道色有特殊化處理,比如游戲、音樂(lè)頻道能使用更加年輕活潑的色調(diào),而財(cái)經(jīng)、軍事頻道則希望能使用突出其內(nèi)涵的色彩。但這會(huì)對(duì)手機(jī)騰訊網(wǎng)全站瀏覽的體驗(yàn)帶來(lái)品牌形象混亂,視覺(jué)沖擊過(guò)大等問(wèn)題。因此進(jìn)過(guò)多方權(quán)衡后,實(shí)現(xiàn)了全站基本統(tǒng)一的藍(lán)色基調(diào)。
參考資料:
[1] 《移動(dòng)設(shè)備交互設(shè)計(jì)》,作者M(jìn)att Jones,Gary Marsden(2008.2)
(本文出自Tencent WSD Blog,轉(zhuǎn)載時(shí)請(qǐng)注明出處)