很多人認(rèn)為這些適合網(wǎng)頁(yè)設(shè)計(jì)的原則和指南也同樣適用于移動(dòng)平臺(tái)。畢竟,網(wǎng)頁(yè)設(shè)計(jì)是從一些基礎(chǔ)的,基于文本的HTML出發(fā),才發(fā)展成為今天的WEB標(biāo)準(zhǔn)的。因此,我們也可以想象依靠這些原則,手機(jī)站點(diǎn)的設(shè)計(jì)也會(huì)和網(wǎng)頁(yè)站點(diǎn)的設(shè)計(jì)一樣,獲得巨大的成功。
然而,移動(dòng)站點(diǎn)的設(shè)計(jì)仍處于初步階段。Jakob Nielsen在2009年移動(dòng)可用性調(diào)查時(shí)指出,相比與網(wǎng)頁(yè)站點(diǎn)80%的成功率,用戶使用移動(dòng)設(shè)備查看移動(dòng)站點(diǎn)時(shí)平均成功率只有64%, 形式要素的差異對(duì)用戶交互成功率的影響是巨大的,因此,在進(jìn)行移動(dòng)站點(diǎn)的設(shè)計(jì)時(shí)要充分考慮移動(dòng)設(shè)備的形式要素,
隨著手機(jī)站點(diǎn)設(shè)計(jì)的持續(xù)增長(zhǎng),一些新的原則,以及一些好的設(shè)計(jì)實(shí)踐將會(huì)浮出水面。作為前進(jìn)的第一步,本人通過(guò)分析一些成功的手機(jī)站點(diǎn)來(lái)研究?jī)烧叩牟煌?。在我的研究中,涵蓋了航空,電子商務(wù),社交網(wǎng)站,娛樂(lè)等一些較成功的站點(diǎn),并得出了至少10個(gè)區(qū)別。
1. 內(nèi)容優(yōu)先
桌面站點(diǎn)可以有1024*768的分辨率,而智能機(jī)僅有320*480分辨率,如何在如此小的分辨率中,在不降低用戶體驗(yàn)效果前提下進(jìn)行設(shè)計(jì)是很有挑戰(zhàn)性的。桌面站點(diǎn)常常包涵更廣的內(nèi)容,而移動(dòng)站點(diǎn)僅包涵一些符合使用情境的主要功能和特征,如圖1、圖2所示Orbitz的桌面站點(diǎn)和移動(dòng)站點(diǎn)。移動(dòng)站點(diǎn)應(yīng)該通過(guò)移動(dòng)設(shè)備將用戶最需要的內(nèi)容和特征展現(xiàn)給用戶。一些站點(diǎn)內(nèi)容,信息架構(gòu)和屏幕布局都是在深度理解客戶需求的前提下設(shè)計(jì)的。
圖 1—Orbitz桌面站點(diǎn)特征
圖 2—Orbitz移動(dòng)站點(diǎn)特征
2. 垂直瀏覽取代水平瀏覽
如圖三Urban Outfitters站點(diǎn)所示的那樣,在呈現(xiàn)數(shù)據(jù)結(jié)構(gòu)和數(shù)據(jù)內(nèi)容時(shí),水平導(dǎo)航是一種廣泛采用的導(dǎo)航方式。用戶可以從左到右,點(diǎn)擊不同的站點(diǎn)鏈接來(lái)瀏覽。Joshua Porter在一篇名為“The Challenge of Moving to Horizontal Navigation“的博客中,討論了在頁(yè)面頂端而不是頁(yè)面兩側(cè)使用水平導(dǎo)航的好處。至于頂端時(shí),用戶可以更容易聚焦于頁(yè)面的內(nèi)容,而在兩側(cè)時(shí),會(huì)很容易干擾用戶視線。在我的研究中,90%的移動(dòng)站點(diǎn)采用垂直導(dǎo)航的方式取代水平導(dǎo)航,包括如下圖所示的Urban Outfitters移動(dòng)站點(diǎn)。
圖 3—Urban Outfitters桌面站點(diǎn)中的水平導(dǎo)航
圖 4—Urban Outfitters移動(dòng)站點(diǎn)的垂直導(dǎo)航
3. 導(dǎo)航條,標(biāo)簽和超文本
如圖5所示,超鏈接是因特網(wǎng)站點(diǎn)的主要組成部分,然而,在移動(dòng)站點(diǎn)中,我們則很少看到超鏈接。并不是在移動(dòng)站點(diǎn)中沒有超鏈接,而是被一些導(dǎo)航條,標(biāo)簽和按鈕等取代了,如圖6所示。用戶使用手指來(lái)操作移動(dòng)設(shè)備是產(chǎn)生垂直導(dǎo)航方式的原因之一。
在電腦上,移動(dòng)鼠標(biāo),點(diǎn)擊超鏈接是很理想的查看信息的方式,但是在移動(dòng)設(shè)備中,通過(guò)手指觸摸屏幕來(lái)打開超鏈接就不那么容易了。用戶可以很容易激活一個(gè)鏈接,進(jìn)入一個(gè)新頁(yè)面,但,這并不是用戶期望的頁(yè)面,如果這樣的話,會(huì)產(chǎn)生非常差的體驗(yàn)效果。Fitts定律告訴我們使用指點(diǎn)設(shè)備達(dá)到一個(gè)目標(biāo)的時(shí)間與設(shè)備當(dāng)前的位置和目標(biāo)位置的距離,以及目標(biāo)的大小有移動(dòng)的關(guān)系。在一些大的手機(jī)站點(diǎn)中,導(dǎo)航條,標(biāo)簽和按鈕會(huì)吸引更多的注意力。
圖 5—Kayak 網(wǎng)頁(yè)鏈接
圖 6—Kayak 手機(jī)頁(yè),沒有鏈接
4. Text and Graphics文本和圖形
在網(wǎng)頁(yè)中,我們經(jīng)常會(huì)看到一些促銷,營(yíng)銷或者導(dǎo)航的圖形信息。如圖7所示的dell站點(diǎn),設(shè)計(jì)者經(jīng)常需要設(shè)計(jì)一些促銷或營(yíng)銷的圖形,如圖8所示、公司LOGO始終保持著導(dǎo)航的目標(biāo),通過(guò)它,用戶可以進(jìn)入主頁(yè)。而在移動(dòng)站點(diǎn)設(shè)計(jì)中,應(yīng)該減少這些圖形,原因有二:其一,一些移動(dòng)設(shè)備并不支持和傳統(tǒng)網(wǎng)頁(yè)站點(diǎn)一樣顯示方式;其二,移動(dòng)屏幕較小,顯示內(nèi)容有限,除此之外,過(guò)多的顯示內(nèi)容會(huì)降低移動(dòng)設(shè)計(jì)的運(yùn)行速度。
圖 7—Dell首頁(yè),有圖形
圖 8—Dell 移動(dòng)頁(yè),只有較少的圖形