切沃vs卡塔尼亚
手機站點和桌面站點設計的10個區別
來源:徐州億網網絡科技有限公司 發布時間:2011-06-26瀏覽

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

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

然而,移動站點的設計仍處于初步階段。Jakob Nielsen2009年移動可用性調查時指出,相比與網頁站點80%的成功率,用戶使用移動設備查看移動站點時平均成功率只有64% 形式要素的差異對用戶交互成功率的影響是巨大的,因此,在進行移動站點的設計時要充分考慮移動設備的形式要素,

隨著手機站點設計的持續增長,一些新的原則,以及一些好的設計實踐將會浮出水面。作為前進的第一步,本人通過分析一些成功的手機站點來研究兩者的不同。在我的研究中,涵蓋了航空,電子商務,社交網站,娛樂等一些較成功的站點,并得出了至少10個區別。

1. 內容優先

桌面站點可以有1024*768的分辨率,而智能機僅有320*480分辨率,如何在如此小的分辨率中,在不降低用戶體驗效果前提下進行設計是很有挑戰性的。桌面站點常常包涵更廣的內容,而移動站點僅包涵一些符合使用情境的主要功能和特征,如圖1、圖2所示Orbitz的桌面站點和移動站點。移動站點應該通過移動設備將用戶最需要的內容和特征展現給用戶。一些站點內容,信息架構和屏幕布局都是在深度理解客戶需求的前提下設計的。

 

圖 1—Orbitz桌面站點特征

 

圖 2—Orbitz移動站點特征

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

如圖三Urban Outfitters站點所示的那樣,在呈現數據結構和數據內容時,水平導航是一種廣泛采用的導航方式。用戶可以從左到右,點擊不同的站點鏈接來瀏覽。Joshua Porter在一篇名為The Challenge of Moving to Horizontal Navigation“的博客中,討論了在頁面頂端而不是頁面兩側使用水平導航的好處。至于頂端時,用戶可以更容易聚焦于頁面的內容,而在兩側時,會很容易干擾用戶視線。在我的研究中,90%的移動站點采用垂直導航的方式取代水平導航,包括如下圖所示的Urban Outfitters移動站點。

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

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

 

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

如圖5所示,超鏈接是因特網站點的主要組成部分,然而,在移動站點中,我們則很少看到超鏈接。并不是在移動站點中沒有超鏈接,而是被一些導航條,標簽和按鈕等取代了,如圖6所示。用戶使用手指來操作移動設備是產生垂直導航方式的原因之一。

在電腦上,移動鼠標,點擊超鏈接是很理想的查看信息的方式,但是在移動設備中,通過手指觸摸屏幕來打開超鏈接就不那么容易了。用戶可以很容易激活一個鏈接,進入一個新頁面,但,這并不是用戶期望的頁面,如果這樣的話,會產生非常差的體驗效果。Fitts定律告訴我們使用指點設備達到一個目標的時間與設備當前的位置和目標位置的距離,以及目標的大小有移動的關系。在一些大的手機站點中,導航條,標簽和按鈕會吸引更多的注意力。

5—Kayak 網頁鏈接

6—Kayak 手機頁,沒有鏈接

4.  Text and Graphics文本和圖形

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

7—Dell首頁,有圖形

8—Dell 移動頁,只有較少的圖形

5. 全局導航與情境導航

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

在移動站點中,移動設備有限的屏幕決定了應該減少全局導航和情境導航。然而,缺少全局導航和情境導航則會讓用戶迷失,為此,在構建移動內容時,應該盡量減少層級關系,這樣,用戶無需挖得太深就可以找到自己所需的信息,作為設計師,應該讓用戶在迷失之前找到自己的信息。

9Best Buy桌面站點中各式各樣的情境導航

10Best Buy 移動站點中,沒有情境導航

6. 頁腳

在桌面站點設計中,有兩種典型的頁腳,第一種頁腳提供了一些內容的連接,用戶可以查看主頁,或其他一些較低優先級的內容,如“人才招聘”和“站點地圖第二種腳注,則提供了用戶想看的所有內容結構,如圖11所示,在頁腳中列出一些快速入口,用戶就可以縱觀整個站點。在移動站點中,通過頁腳,用戶可以查看首頁,但盡量保持最少連接數,如圖12所示,在頁腳中,不包含全部快速鏈接。

11—Dell 桌面站點的頁腳

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

7. 面包屑

如圖13所示,在桌 面站點中,面包屑導航可以有效地標明用戶所在的位置,查看自己的導航路徑,但通常會讓用戶產生站點內容多,層級關系深的感覺。面包屑導航方式很少出現在移 動站點中,通常也是沒有必要的。有限的空間結構是原因之一,另外,這種方式使得用戶需要經過很深的途徑才能找到所需要的信息。同樣,我們應該讓用戶在有迷 失感之前獲取想要的信息。

13—Amazon移動站點的面包屑

8. 進度條

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

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

14—Amazon 站點的進度條

9. 集成手機功能

智能機是通信設備,打電話是其基本功能。盡管移動平臺的設計和內容都是有限的,但仍具有一些桌面平臺無法比擬的新機會,例如,可以使用直接撥打電話或短信的方式訂購物品,如圖15所示,將促銷短信與產品功能進行整合,用戶只需選擇一個手機號碼,然后通過這個號碼來打電話或發短信,無需輸入數字。

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

10. 本地化和個性化搜索

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

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

16Kayak中,自動監測地理位置并給出一些檢索建議

小結

基于我們的研究,我們總結了移動站點和桌面站點設計10大不同點:

  1. 桌面站點可以包含更豐富的信息,而移動站點包含一些在大部分時間,地點中使用的典型功能和特征。
  2. 桌面站點采用頂端的水平導航方式來呈現站點結構和內容,而90%的移動站點采用垂直導航的方式。
  3. 桌面站點通常使用超鏈接,移動站點極少使用超鏈接
  4. 桌面站點會根據促銷,營銷,導航目的的不同設計不同的圖形,移動站點應避免一些促銷或營銷的圖形,較少使用導航圖形。
  5. 在桌面站點中,可以使用各種各樣的導航方式,如全局導航和情境導航。移動站點采用全局導航,情境導航極少。
  6. 在桌面站點中,用戶可以通過頁腳查看站點內容,或查看一些快速鏈接。移動站點較少采用一些頁腳,更不會使用頁腳來包含一些快速鏈接。
  7. 在桌面站點中,面包屑導航可以幫助用戶找到需要的頁面,或者返回查看一些導航路徑。而在移動站點設計中,由于自身的一些平臺結構的限制,面包屑導航的方式是沒有必要的。
  8. 桌面站點通常在頁面頂端增加進度條來引導用戶完成某項進程。移動站點并不出現進度條。
  9. 移動站點可以更好地整合手機功能,如電話直接訂貨或發送促銷信息。
  10. 移動站點可以使用一些技術手段自動檢測獲取本地搜索結果。根據用戶的一些喜好提供個性化的搜索結果,對用戶來說更加重要

在一切開始前,說說您的需求

  • 江蘇省徐州市淮海西路120號穎都大廈11F

  • 咨詢電話:400-622-8891

  • QQ咨詢:603233758

  • 上海靜安區平型關路金贏108創意廣場銀座18樓

  • 咨詢電話:400-622-8891

  • QQ咨詢:603233758

  • 江蘇省南通市崇川區崇川路58號

  • 咨詢電話:400-622-8891

  • QQ咨詢:603233758

?Xuzhou billion net technology Co., Ltd. 徐州億網網絡科技有限公司 版權所有 蘇公網安備 32031102000431號 蘇ICP備12060089號
徐州網絡公司徐州網站建設徐州app開發 專家首選徐州億網!

切沃vs卡塔尼亚 大型帕尔马山地玫瑰 1月15日快船vs湖人 正中红心试玩 广东新11选5开奖助手 福彩新快3开奖 贵州11选5奖金 炸金花游戏大全 猫头鹰乐园电子游戏 ac米兰vs尤文图斯 斗破苍穹手游 怪物赛车小游戏 中国到杜塞尔多夫 凤凰彩票官网 加拿大28最快参考结果 四大金刚送彩金