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

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

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

然而，移動站點的設計仍處于初步階段。Jakob Nielsen在2009年移動可用性調查時指出，相比與網頁站點80%的成功率，使用者使用移動裝置檢視移動站點時平均成功率隻有64%， 形式要素的差 異對使用者互動成功率的影響是巨大的，是以，在進行移動站點的設計時要充分考慮移動裝置的形式要素，

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

1. 内容優先

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

圖 1—Orbitz桌面站點特征

圖 2—Orbitz移動站點特征

2. 垂直浏覽取代水準浏覽

圖 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大不同點：

桌面站點可以包含更豐富的資訊，而移動站點包含一些在大部分時間，地點中使用的典型功能和特征。

桌面站點采用頂端的水準導航方式來呈現站點結構和内容，而90%的移動站點采用垂直導航的方式。

桌面站點通常使用超連結，移動站點極少使用超連結

桌面站點會根據促銷，營銷，導航目的的不同設計不同的圖形，移動站點應避免一些促銷或營銷的圖形，較少使用導航圖形。

在桌面站點中，可以使用各種各樣的導航方式，如全局導航和情境導航。移動站點采用全局導航，情境導航極少。

在桌面站點中，使用者可以通過頁腳檢視站點内容，或檢視一些快速連結。移動站點較少采用一些頁腳，更不會使用頁腳來包含一些快速連結。

在桌面站點中，面包屑導航可以幫助使用者找到需要的頁面，或者傳回檢視一些導航路徑。而在移動站點設計中，由于自身的一些平台結構的限制，面包屑導航的方式是沒有必要的。

桌面站點通常在頁面頂端增加進度條來引導使用者完成某項程序。移動站點并不出現進度條。

移動站點可以更好地整合手機功能，如電話直接訂貨或發送促銷資訊。

移動站點可以使用一些技術手段自動檢測擷取本地搜尋結果。根據使用者的一些喜好提供個性化的搜尋結果，對使用者來說更加重要

原文位址：http://www.iptu.net/index.php/archives/3059.iptu

<a href="http://www.vancl.com/?source=kbh1983&amp;sourcesuninfo=ad-3090-1-52-0-1" target="_blank"></a>