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