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

發表於2011-06-02

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

很多人認為這些適合網頁設計的原則和指南也同樣適用於移動平臺。畢竟,網頁設計是從一些基礎的,基於文字的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移動站點。


20110602 – 03.PNG
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. 移動站點可以使用一些技術手段自動檢測獲取本地搜尋結果。根據使用者的一些喜好提供個性化的搜尋結果,對使用者來說更加重要

原文:uxmatters
譯文:encoJOE

相關文章