手機站點和桌麵站點設計的10個區別

來源：徐州億網網絡科技有限公司 時間：2011-06-26 作者：

桌麵網站的一些設計原則是大家廣泛認可，並積極付諸實踐的。例如：係統狀態保持可見，避免錯誤信息，在錯誤發生時，應該提供一些具體的指南幫助用戶解決這些問題等。

很多人認為這些適合網頁設計的原則和指南也同樣適用於移動平台。畢竟，網頁設計是從一些基礎的
，基於文本的HTML出發
，才發展成為今天的WEB標準的。因此，我們也可以想象依靠這些原則，手機站點的設計也會和網頁站點的設計一樣，獲得巨大的成功。

然而


，移動站點的設計仍處於初步階段。Jakob Nielsen在2009年移動可用性調查時指出，相比與網頁站點80%的成功率，用戶使用移動設備查看移動站點時平均成功率隻有64%

， 形式要素的差異對用戶交互成功率的影響是巨大的
，因此，在進行移動站點的設計時要充分考慮移動設備的形式要素，

隨sui著zhe手shou機ji站zhan點dian設she計ji的de持chi續xu增zeng長chang，一yi些xie新xin的de原yuan則ze
，以yi及ji一yi些xie好hao的de設she計ji實shi踐jian將jiang會hui浮fu出chu水shui麵mian。作zuo為wei前qian進jin的de第di一yi步bu，本ben人ren通tong過guo分fen析xi一yi些xie成cheng功gong的de手shou機ji站zhan點dian來lai研yan究jiu兩liang者zhe的de不bu同tong。在zai我wo的de研yan究jiu中zhong，涵han蓋gai了le航hang空kong，電dian子zi商shang務wu，社she交jiao網wang站zhan，娛yu樂le等deng一yi些xie較jiao成cheng功gong的de站zhan點dian
，並bing得de出chu了le至zhi少shao10個區別。

1. 內容優先

桌麵站點可以有1024*768的分辨率，而智能機僅有320*480分fen辨bian率lv
，如ru何he在zai如ru此ci小xiao的de分fen辨bian率lv中zhong，在zai不bu降jiang低di用yong戶hu體ti驗yan效xiao果guo前qian提ti下xia進jin行xing設she計ji是shi很hen有you挑tiao戰zhan性xing的de。桌zhuo麵mian站zhan點dian常chang常chang包bao涵han更geng廣guang的de內nei容rong，而er移yi動dong站zhan點dian僅jin包bao涵han一yi些xie符fu合he使shi用yong情qing境jing的de主zhu要yao功gong能neng和he特te征zheng，如ru圖tu1
、圖2所示Orbitzdezhuomianzhandianheyidongzhandian。yidongzhandianyinggaitongguoyidongshebeijiangyonghuzuixuyaodeneironghetezhengzhanxiangeiyonghu。yixiezhandianneirong，xinxijiagouhepingmubujudoushizaishendulijiekehuxuqiudeqiantixiashejide。

 

圖 1—Orbitz桌麵站點特征

 

圖 2—Orbitz移動站點特征

2. 垂直瀏覽取代水平瀏覽

如圖三Urban Outfitters站(zhan)點(dian)所(suo)示(shi)的(de)那(na)樣(yang)，在(zai)呈(cheng)現(xian)數(shu)據(ju)結(jie)構(gou)和(he)數(shu)據(ju)內(nei)容(rong)時(shi)，水(shui)平(ping)導(dao)航(hang)是(shi)一(yi)種(zhong)廣(guang)泛(fan)采(cai)用(yong)的(de)導(dao)航(hang)方(fang)式(shi)。用(yong)戶(hu)可(ke)以(yi)從(cong)左(zuo)到(dao)右(you)
，點(dian)擊(ji)不(bu)同(tong)的(de)站(zhan)點(dian)鏈(lian)接(jie)來(lai)瀏(liu)覽(lan)。Joshua Porter在一篇名為“The Challenge of Moving to Horizontal Navigation“的(de)博(bo)客(ke)中(zhong)
，討(tao)論(lun)了(le)在(zai)頁(ye)麵(mian)頂(ding)端(duan)而(er)不(bu)是(shi)頁(ye)麵(mian)兩(liang)側(ce)使(shi)用(yong)水(shui)平(ping)導(dao)航(hang)的(de)好(hao)處(chu)。至(zhi)於(yu)頂(ding)端(duan)時(shi)
，用(yong)戶(hu)可(ke)以(yi)更(geng)容(rong)易(yi)聚(ju)焦(jiao)於(yu)頁(ye)麵(mian)的(de)內(nei)容(rong)，而(er)在(zai)兩(liang)側(ce)時(shi)，會(hui)很(hen)容(rong)易(yi)幹(gan)擾(rao)用(yong)戶(hu)視(shi)線(xian)。在(zai)我(wo)的(de)研(yan)究(jiu)中(zhong)
，90%的移動站點采用垂直導航的方式取代水平導航，包括如下圖所示的Urban Outfitters移動站點。

圖 3—Urban Outfitters桌麵站點中的水平導航

圖 4—Urban Outfitters移動站點的垂直導航

 

3. 導航條
，標簽和超文本

如圖5所suo示shi，超chao鏈lian接jie是shi因yin特te網wang站zhan點dian的de主zhu要yao組zu成cheng部bu分fen，然ran而er，在zai移yi動dong站zhan點dian中zhong，我wo們men則ze很hen少shao看kan到dao超chao鏈lian接jie。並bing不bu是shi在zai移yi動dong站zhan點dian中zhong沒mei有you超chao鏈lian接jie，而er是shi被bei一yi些xie導dao航hang條tiao，標biao簽qian和he按an鈕niu等deng取qu代dai了le，如ru圖tu6所示。用戶使用手指來操作移動設備是產生垂直導航方式的原因之一。

zaidiannaoshang，yidongshubiao
，dianjichaolianjieshihenlixiangdezhakanxinxidefangshi，danshizaiyidongshebeizhong，tongguoshouzhichumopingmulaidakaichaolianjiejiubunamerongyile。yonghukeyihenrongyijihuoyigelianjie，jinruyigexinyemian，dan
，zhebingbushiyonghuqiwangdeyemian，ruguozheyangdehua，huichanshengfeichangchadetiyanxiaoguo。Fitts定ding律lv告gao訴su我wo們men使shi用yong指zhi點dian設she備bei達da到dao一yi個ge目mu標biao的de時shi間jian與yu設she備bei當dang前qian的de位wei置zhi和he目mu標biao位wei置zhi的de距ju離li，以yi及ji目mu標biao的de大da小xiao有you移yi動dong的de關guan係xi。在zai一yi些xie大da的de手shou機ji站zhan點dian中zhong
，導dao航hang條tiao
，標biao簽qian和he按an鈕niu會hui吸xi引yin更geng多duo的de注zhu意yi力li。

圖 5—Kayak 網頁鏈接

圖 6—Kayak 手機頁

，沒有鏈接

4.  Text and Graphics文本和圖形

在網頁中，我們經常會看到一些促銷，營銷或者導航的圖形信息。如圖7所示的dell站點，設計者經常需要設計一些促銷或營銷的圖形，如圖8所示、公司LOGO始終保持著導航的目標，通過它，用戶可以進入主頁。而在移動站點設計中
，應該減少這些圖形，原因有二：其一，一些移動設備並不支持和傳統網頁站點一樣顯示方式；其二
，移動屏幕較小，顯示內容有限，除此之外
，過多的顯示內容會降低移動設計的運行速度。

圖 7—Dell首頁，有圖形

圖 8—Dell 移動頁，隻有較少的圖形

5. 全局導航與情境導航

桌麵站點提出使用多種導航方式
，如圖9 Best Buy 站點。一些全局性的導航可以保持站點的一致性
，而其他一些情境導航會隨著用戶使用站點的不同而不同。在移動站點中，全局導航是最常見的導航方式，如圖10 Best buy的移動站點就是非常典型的例子。

在zai移yi動dong站zhan點dian中zhong
，移yi動dong設she備bei有you限xian的de屏ping幕mu決jue定ding了le應ying該gai減jian少shao全quan局ju導dao航hang和he情qing境jing導dao航hang。然ran而er
，缺que少shao全quan局ju導dao航hang和he情qing境jing導dao航hang則ze會hui讓rang用yong戶hu迷mi失shi
，為wei此ci，在zai構gou建jian移yi動dong內nei容rong時shi，應ying該gai盡jin量liang減jian少shao層ceng級ji關guan係xi，這zhe樣yang
，用yong戶hu無wu需xu挖wa得de太tai深shen就jiu可ke以yi找zhao到dao自zi己ji所suo需xu的de信xin息xi
，作zuo為wei設she計ji師shi，應ying該gai讓rang用yong戶hu在zai迷mi失shi之zhi前qian找zhao到dao自zi己ji的de信xin息xi。

圖 9—在Best Buy桌麵站點中各式各樣的情境導航

圖 10—在Best Buy 移動站點中
，沒有情境導航

6. 頁腳

在桌麵站點設計中，有兩種典型的頁腳，第一種頁腳提供了一些內容的連接，用戶可以查看主頁，或其他一些較低優先級的內容

，如“人才招聘”和“站點地圖”。第二種腳注，則提供了用戶想看的所有內容結構，如圖11suoshi，zaiyejiaozhongliechuyixiekuaisurukou
，yonghujiukeyizongguanzhenggezhandian。zaiyidongzhandianzhong
，tongguoyejiao，yonghukeyizhakanshouye，danjinliangbaochizuishaolianjieshu，rutu12所示
，在頁腳中，不包含全部快速鏈接。

圖 11—Dell 桌麵站點的頁腳

圖 12—Dell 移動站點，較少的頁腳

7. 麵包屑

如圖13所示
，在桌 麵mian站zhan點dian中zhong，麵mian包bao屑xie導dao航hang可ke以yi有you效xiao地di標biao明ming用yong戶hu所suo在zai的de位wei置zhi
，查zha看kan自zi己ji的de導dao航hang路lu徑jing
，但dan通tong常chang會hui讓rang用yong戶hu產chan生sheng站zhan點dian內nei容rong多duo，層ceng級ji關guan係xi深shen的de感gan覺jiao。麵mian包bao屑xie導dao航hang方fang式shi很hen少shao出chu現xian在zai移yi 動dong站zhan點dian中zhong
，通tong常chang也ye是shi沒mei有you必bi要yao的de。有you限xian的de空kong間jian結jie構gou是shi原yuan因yin之zhi一yi，另ling外wai
，這zhe種zhong方fang式shi使shi得de用yong戶hu需xu要yao經jing過guo很hen深shen的de途tu徑jing才cai能neng找zhao到dao所suo需xu要yao的de信xin息xi。同tong樣yang，我wo們men應ying該gai讓rang用yong戶hu在zai有you迷mi 失感之前獲取想要的信息。

圖 13—Amazon移動站點的麵包屑

8. 進度條

在桌麵站點中，如果用戶需要通過多種步驟才能完成某一過程，如購買過程或者填寫較長注冊表過程，如表14所示， 在頁麵的頂端經常會給出一個進度條
，指導用戶完成這個過程，這種進度條在移動站點中還沒有出現。

采用一些替代的方法，讓用戶無需進度條，就可以表明當前所在的位置。如，不使用一些暗含用戶操作“下一步”或“繼續”的按鈕，使用明確的標簽按鈕
，告知用戶的下一個步驟，如“前往收銀台”“指定送貨及付款”。這樣
，用戶不僅知道當前的過程，還期待下一步的信息。

圖 14—Amazon 站點的進度條

9. 集成手機功能

智zhi能neng機ji是shi通tong信xin設she備bei，打da電dian話hua是shi其qi基ji本ben功gong能neng。盡jin管guan移yi動dong平ping台tai的de設she計ji和he內nei容rong都dou是shi有you限xian的de
，但dan仍reng具ju有you一yi些xie桌zhuo麵mian平ping台tai無wu法fa比bi擬ni的de新xin機ji會hui
，例li如ru
，可ke以yi使shi用yong直zhi接jie撥bo打da電dian話hua或huo短duan信xin的de方fang式shi訂ding購gou物wu品pin
，如ru圖tu15所示
，將促銷短信與產品功能進行整合，用戶隻需選擇一個手機號碼，然後通過這個號碼來打電話或發短信
，無需輸入數字。

圖 15— Best Buy 移動站點，電話購物

10. 本地化和個性化搜索

基於地理位置的服務是移動站點獨一無二的優勢。僅在5年前，地理位置服務才和消費市場結合起來
，現在，在一些移動程序和網頁站點中，地理位置服務作為增值服務的一部分而廣泛使用。

很多移動設備可以自動檢測用戶的地點，並給出一些本地化的檢索結果。如圖16
，Best Buy本地商店搜索功能，Yelp的餐廳搜索
，Kayak的班機搜索
，通過了解用戶的交易地點以及一些臨時服務，商家就可以有針對性地推廣自己的產品或服務。

圖 16—在Kayak中，自動監測地理位置並給出一些檢索建議

小結

基於我們的研究
，我們總結了移動站點和桌麵站點設計10大不同點：

1. 桌麵站點可以包含更豐富的信息
   ，而移動站點包含一些在大部分時間，地點中使用的典型功能和特征。
2. 桌麵站點采用頂端的水平導航方式來呈現站點結構和內容，而90%的移動站點采用垂直導航的方式。
3. 桌麵站點通常使用超鏈接，移動站點極少使用超鏈接
4. 桌麵站點會根據促銷
   ，營銷，導航目的的不同設計不同的圖形
   ，移動站點應避免一些促銷或營銷的圖形
   ，較少使用導航圖形。
5. 在桌麵站點中，可以使用各種各樣的導航方式，如全局導航和情境導航。移動站點采用全局導航，情境導航極少。
6. 在zai桌zhuo麵mian站zhan點dian中zhong
   ，用yong戶hu可ke以yi通tong過guo頁ye腳jiao查zha看kan站zhan點dian內nei容rong，或huo查zha看kan一yi些xie快kuai速su鏈lian接jie。移yi動dong站zhan點dian較jiao少shao采cai用yong一yi些xie頁ye腳jiao，更geng不bu會hui使shi用yong頁ye腳jiao來lai包bao含han一yi些xie快kuai速su鏈lian接jie。
7. 在zai桌zhuo麵mian站zhan點dian中zhong，麵mian包bao屑xie導dao航hang可ke以yi幫bang助zhu用yong戶hu找zhao到dao需xu要yao的de頁ye麵mian，或huo者zhe返fan回hui查zha看kan一yi些xie導dao航hang路lu徑jing。而er在zai移yi動dong站zhan點dian設she計ji中zhong，由you於yu自zi身shen的de一yi些xie平ping台tai結jie構gou的de限xian製zhi，麵mian包bao屑xie導dao航hang的de方fang式shi是shi沒mei有you必bi要yao的de。
8. 桌麵站點通常在頁麵頂端增加進度條來引導用戶完成某項進程。移動站點並不出現進度條。
9. 移動站點可以更好地整合手機功能，如電話直接訂貨或發送促銷信息。
10. 移動站點可以使用一些技術手段自動檢測獲取本地搜索結果。根據用戶的一些喜好提供個性化的搜索結果
    ，對用戶來說更加重要

• 上一篇: 每個苦逼的設計師背後都有一群指點江山的神
• 下一篇: 2011互聯網大會23日在京舉行 微博帶您對話CEO