桌面網(wǎng)站的一些設(shè)計(jì)原則是大家廣泛認(rèn)可，并積極付諸實(shí)踐的。例如：系統(tǒng)狀態(tài)保持可見(jiàn)，避免錯(cuò)誤信息，在錯(cuò)誤發(fā)生時(shí)，應(yīng)該提供一些具體的指南幫助用戶(hù)解決這些問(wèn)題等。
很多人認(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%的成功率，用戶(hù)使用移動(dòng)設(shè)備查看移動(dòng)站點(diǎn)時(shí)平均成功率只有64%， 形式要素的差異對(duì)用戶(hù)交互成功率的影響是巨大的，因此，在進(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分辨率，如何在如此小的分辨率中，在不降低用戶(hù)體驗(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è)備將用戶(hù)最需要的內(nèi)容和特征展現(xiàn)給用戶(hù)。一些站點(diǎn)內(nèi)容，信息架構(gòu)和屏幕布局都是在深度理解客戶(hù)需求的前提下設(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)航方式。用戶(hù)可以從左到右，點(diǎn)擊不同的站點(diǎn)鏈接來(lái)瀏覽。Joshua Porter在一篇名為“The Challenge of Moving to Horizontal Navigation“的博客中，討論了在頁(yè)面頂端而不是頁(yè)面兩側(cè)使用水平導(dǎo)航的好處。至于頂端時(shí)，用戶(hù)可以更容易聚焦于頁(yè)面的內(nèi)容，而在兩側(cè)時(shí)，會(huì)很容易干擾用戶(hù)視線(xiàn)。在我的研究中，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)中沒(méi)有超鏈接，而是被一些導(dǎo)航條，標(biāo)簽和按鈕等取代了，如圖6所示。用戶(hù)使用手指來(lái)操作移動(dòng)設(shè)備是產(chǎn)生垂直導(dǎo)航方式的原因之一。
在電腦上，移動(dòng)鼠標(biāo)，點(diǎn)擊超鏈接是很理想的查看信息的方式，但是在移動(dòng)設(shè)備中，通過(guò)手指觸摸屏幕來(lái)打開(kāi)超鏈接就不那么容易了。用戶(hù)可以很容易激活一個(gè)鏈接，進(jìn)入一個(gè)新頁(yè)面，但，這并不是用戶(hù)期望的頁(yè)面，如果這樣的話(huà)，會(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è)，沒(méi)有鏈接
4. Text and Graphics文本和圖形
在網(wǎng)頁(yè)中，我們經(jīng)常會(huì)看到一些促銷(xiāo)，營(yíng)銷(xiāo)或者導(dǎo)航的圖形信息。如圖7所示的dell站點(diǎn)，設(shè)計(jì)者經(jīng)常需要設(shè)計(jì)一些促銷(xiāo)或營(yíng)銷(xiāo)的圖形，如圖8所示、公司LOGO始終保持著導(dǎo)航的目標(biāo)，通過(guò)它，用戶(hù)可以進(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è)，只有較少的圖形
5. 全局導(dǎo)航與情境導(dǎo)航
桌面站點(diǎn)提出使用多種導(dǎo)航方式，如圖9 Best Buy 站點(diǎn)。一些全局性的導(dǎo)航可以保持站點(diǎn)的一致性，而其他一些情境導(dǎo)航會(huì)隨著用戶(hù)使用站點(diǎn)的不同而不同。在移動(dòng)站點(diǎn)中，全局導(dǎo)航是最常見(jiàn)的導(dǎo)航方式，如圖10 Best buy的移動(dòng)站點(diǎn)就是非常典型的例子。
在移動(dòng)站點(diǎn)中，移動(dòng)設(shè)備有限的屏幕決定了應(yīng)該減少全局導(dǎo)航和情境導(dǎo)航。然而，缺少全局導(dǎo)航和情境導(dǎo)航則會(huì)讓用戶(hù)迷失，為此，在構(gòu)建移動(dòng)內(nèi)容時(shí)，應(yīng)該盡量減少層級(jí)關(guān)系，這樣，用戶(hù)無(wú)需挖得太深就可以找到自己所需的信息，作為設(shè)計(jì)師，應(yīng)該讓用戶(hù)在迷失之前找到自己的信息。
圖 9—在Best Buy桌面站點(diǎn)中各式各樣的情境導(dǎo)航
圖 10—在Best Buy 移動(dòng)站點(diǎn)中，沒(méi)有情境導(dǎo)航
6. 頁(yè)腳
在桌面站點(diǎn)設(shè)計(jì)中，有兩種典型的頁(yè)腳，第一種頁(yè)腳提供了一些內(nèi)容的連接，用戶(hù)可以查看主頁(yè)，或其他一些較低優(yōu)先級(jí)的內(nèi)容，如“人才招聘”和“站點(diǎn)地圖”。第二種腳注，則提供了用戶(hù)想看的所有內(nèi)容結(jié)構(gòu)，如圖11所示，在頁(yè)腳中列出一些快速入口，用戶(hù)就可以縱觀整個(gè)站點(diǎn)。在移動(dòng)站點(diǎn)中，通過(guò)頁(yè)腳，用戶(hù)可以查看首頁(yè)，但盡量保持最少連接數(shù)，如圖12所示，在頁(yè)腳中，不包含全部快速鏈接。
圖 11—Dell 桌面站點(diǎn)的頁(yè)腳
圖 12—Dell 移動(dòng)站點(diǎn)，較少的頁(yè)腳
7. 面包屑
如圖13所示，在桌 面站點(diǎn)中，面包屑導(dǎo)航可以有效地標(biāo)明用戶(hù)所在的位置，查看自己的導(dǎo)航路徑，但通常會(huì)讓用戶(hù)產(chǎn)生站點(diǎn)內(nèi)容多，層級(jí)關(guān)系深的感覺(jué)。面包屑導(dǎo)航方式很少出現(xiàn)在移 動(dòng)站點(diǎn)中，通常也是沒(méi)有必要的。有限的空間結(jié)構(gòu)是原因之一，另外，這種方式使得用戶(hù)需要經(jīng)過(guò)很深的途徑才能找到所需要的信息。同樣，我們應(yīng)該讓用戶(hù)在有迷 失感之前獲取想要的信息。
圖 13—Amazon移動(dòng)站點(diǎn)的面包屑
8. 進(jìn)度條
在桌面站點(diǎn)中，如果用戶(hù)需要通過(guò)多種步驟才能完成某一過(guò)程，如購(gòu)買(mǎi)過(guò)程或者填寫(xiě)較長(zhǎng)注冊(cè)表過(guò)程，如表14所示， 在頁(yè)面的頂端經(jīng)常會(huì)給出一個(gè)進(jìn)度條，指導(dǎo)用戶(hù)完成這個(gè)過(guò)程，這種進(jìn)度條在移動(dòng)站點(diǎn)中還沒(méi)有出現(xiàn)。
采用一些替代的方法，讓用戶(hù)無(wú)需進(jìn)度條，就可以表明當(dāng)前所在的位置。如，不使用一些暗含用戶(hù)操作“下一步”或“繼續(xù)”的按鈕，使用明確的標(biāo)簽按鈕，告知用戶(hù)的下一個(gè)步驟，如“前往收銀臺(tái)”“指定送貨及付款”。這樣，用戶(hù)不僅知道當(dāng)前的過(guò)程，還期待下一步的信息。
圖 14—Amazon 站點(diǎn)的進(jìn)度條
9. 集成手機(jī)功能
智能機(jī)是通信設(shè)備，打電話(huà)是其基本功能。盡管移動(dòng)平臺(tái)的設(shè)計(jì)和內(nèi)容都是有限的，但仍具有一些桌面平臺(tái)無(wú)法比擬的新機(jī)會(huì)，例如，可以使用直接撥打電話(huà)或短信的方式訂購(gòu)物品，如圖15所示，將促銷(xiāo)短信與產(chǎn)品功能進(jìn)行整合，用戶(hù)只需選擇一個(gè)手機(jī)號(hào)碼，然后通過(guò)這個(gè)號(hào)碼來(lái)打電話(huà)或發(fā)短信，無(wú)需輸入數(shù)字。
圖 15— Best Buy 移動(dòng)站點(diǎn)，電話(huà)購(gòu)物
10. 本地化和個(gè)性化搜索
基于地理位置的服務(wù)是移動(dòng)站點(diǎn)獨(dú)一無(wú)二的優(yōu)勢(shì)。僅在5年前，地理位置服務(wù)才和消費(fèi)市場(chǎng)結(jié)合起來(lái)，現(xiàn)在，在一些移動(dòng)程序和網(wǎng)頁(yè)站點(diǎn)中，地理位置服務(wù)作為增值服務(wù)的一部分而廣泛使用。
很多移動(dòng)設(shè)備可以自動(dòng)檢測(cè)用戶(hù)的地點(diǎn)，并給出一些本地化的檢索結(jié)果。如圖16，Best Buy本地商店搜索功能，Yelp的餐廳搜索，Kayak的班機(jī)搜索，通過(guò)了解用戶(hù)的交易地點(diǎn)以及一些臨時(shí)服務(wù)，商家就可以有針對(duì)性地推廣自己的產(chǎn)品或服務(wù)。
圖 16—在Kayak中，自動(dòng)監(jiān)測(cè)地理位置并給出一些檢索建議
小結(jié)
基于我們的研究，我們總結(jié)了移動(dòng)站點(diǎn)和桌面站點(diǎn)設(shè)計(jì)10大不同點(diǎn)：
翻譯：encoJOE
原文：http://www.uxmatters.com/mt/archives/2011/03/10-ways-mobile-sites-are-different-from-desktop-web-sites.php#top
來(lái)源：http://mdchina.org/?p=467
聯(lián)系客服
