DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 移動站點設計:移動站點和桌面站點設計10大不同點
移動站點設計:移動站點和桌面站點設計10大不同點
編輯:關於網頁技巧     

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

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

然而,移動站點的設計仍處於初步階段。Jakob Nielsen在2009年移動可用性調查時指出,相比與網頁站點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的移動站點就是非常典型的例子。

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

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

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

6. 頁腳

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

11—Dell 桌面站點的頁腳

 

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

7. 面包屑

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

13—Amazon移動站點的面包屑

8. 進度條

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

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

14—Amazon 站點的進度條

9. 集成手機功能

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

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

10. 本地化和個性化搜索

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

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

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

小結

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

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

翻譯:encoJOE

原文:http://www.uxmatters.com/mt/archives/2011/03/10-ways-mobile-sites-are-different-from-desktop-web-sites.php#top

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved