怎樣設計一個簡潔的手機網站

「良好的交互設計關注人們所想，所做以及所感」——斯蒂芬· P·安德森

安德森的這句話適用于整個交互設計領域，同樣這也是手機交互設計的真理。 讓使用者快速地找到他們想要的資訊是手機交互設計的必要條件。 最重要的一點還是使用者可以以最簡便的方式找到最重要的東西。 由於手機是一個最為私人的設備，所以一定要讓使用者對自己正在做的事有著非常好的感覺，這樣才會讓他們越來越多地光臨你的網站。

我在去年購買了N95，現在我在去上班的路上檢查和整理郵件，通過手機上YouTube看視頻，即時地檢查Twitter feed和郵件資訊，也查看Facebook好友的資訊。 主題就是：我往往在走路的時候，用手機登陸這些網站的手機版來檢查最新資訊。

在一個手機上，這些網站的電腦版就遇到麻煩了。 在買N95之前，我的諾基亞和摩托羅拉手機的螢幕更小，手機瀏覽器還是個新奇玩意。 隨著螢幕的增大以及瀏覽器變得更加先進，N95有著足夠的螢幕空間，整個網站體驗也達到合理的程度，不過所有的這些應用的網站並不是按照電腦瀏覽器設計的，就算是iPhone，雖然有著優秀的網頁縮小和放大功能， 但是與iPhone自帶的這些網站（Facebook、Twitter、Gmail）相比，完全版的網站用起來要麻煩的多。

隨著網站和Web應用變得更為先進，現在迫切需要提供針對手機等行動裝置的網站和Web引用。 一個有著很好的移動體驗的應用往往存在一種難以解釋的情感依戀。 使用手機版網站的使用者感受很好，簡版和完整版Twitter都可以通過手機瀏覽器打開，但是往往簡潔手機版更有吸引力，因為上面的每件事物都跟螢幕相符，好像就是針對使用者的手機設計的。

接下來，我介紹一些我每天都在用的幾個手機應用，以及我的一些思考。

如我之前所言，我每天都要使用Gmail，我在上班的途中檢查郵件。 我一般檢查3個郵箱，每個都設置書簽。 一般是查看資訊、存檔、刪除、報告垃圾郵件，如果需要緊急回復一條郵件，就會用到回復和發郵件功能。

手機版Gmail的主畫面上沒有過多的介面功能（如圖），主要是重要的郵件流覽和管理功能。 我可以流覽、發送、接受、刪除和管理郵件。 在最重要的部分中，資訊被優先安置在介面的頂端，兒其他如存檔、報告垃圾郵件和刪除等功能在安置在頁面的下端。 我在使用手機版Gmail時，80%的情況下不使用這些功能，只是檢查和閱讀郵件。

Gmail手機版的成功之處在于郵件優先，其他介面功能置後。

我第二個要用的就是Twitter，主要是查看我跟隨的人的最新資訊，以及更新自己的資訊。

Twitter的主頁可謂單刀直入（如圖）：狀態更新功能，緊接著是最新狀態資訊，附帶一些簡單的介面元素。

Twitter本來就是一個很簡潔的應用，就算是電腦版的功能也非常少，手機版的就更少了。 Twitter手機應用在基本系統交互功能上做的非常好，介面簡潔，有兩個最主要的功能：狀態更新和feed流覽。 與Gmail的使用方式不同點在於，我很多時候使用手機版Twitter是為了更新資訊。 因此，理所當然地，狀態更新應處於主畫面的頂端，下面是feed。 Feed的長度一般都是20條最近更新的資訊：這是一個很好的內容處理策略，在手機上，點擊去往新頁面的成本要比滾動查看的成本高得多。

Twitter的成功點在於：資訊更新功能快速簡便，還顯示朋友的資訊內容。

我每天用手機登陸Facebook是為了看看朋友、查看牆上的帖子以及發送接收Facebook郵件。

手機版Facebook優先顯示的還是一些簡單的功能和lists（功能表）。 與Twitter類似，Facebook假設大部分手機使用者主要是為了更新資訊。 然後才是3條最新更新的資訊、朋友請求和news feed items。 再往下，才顯示牆上近幾天裡朋友發佈的帖子。

我覺得Facebook在一些關鍵功能的定位和強調顯示上做的很好，一些重要性稍次的功能得到了適當的降級。

有趣的是，Facebook是為一個提供巡覽列的。 在處理眾多功能同時又要強調重要的功能時，巡覽列確實是一個有用的、整潔的處理方式。

Facebook的成功點在於：選擇了使用者在「走」的時候最需要的功能，簡潔的互動介面提供了其他的次要功能。

小結1：

上述的三個應用都有一個共同點：介面已經精簡到不能再精簡了，保留了最重要的應用功能。

這3個網站都是使用CSS，看起來都不普通，都在螢幕的頂端掛了彩色的Logo。 Gmail有效地使用了顏色等分離資訊，用帶顏色的links和背景有效地分割了資訊內容、郵件標題和介面。 Twitter則是簡單地用顏色和直線劃分資訊，同時顯示精簡資訊時間。 Facebook採用了Twitter的辦法將內容與內容、內容與介面分隔開。

、邊框

所有這3個網站還提供完整版網站連結，這是我比較喜歡的一點。 先進點的手機瀏覽器完全支援完整版網站，就算有著JAVAscript和互動行為。 有時候，手機版是遠遠不夠的，提供完整版連結是必要的，儘管會感覺多餘，但確實值得。

雖然這些都不是必須的，但是確實為使用者提供了一個很棒的使用感受。

·精簡應用，但保留最重要的功能

上述三個應用都是值得效仿的，在手機版中這三個應用都沒有提供全部功能。

Twitter手機版的一個重要的缺陷就是沒有「回復」功能，Twitter最重要的功能之一就是與線上朋友互動交流，如果你不能看到誰回復你，你就無法參與到對話中。 在我看來，「回復」功能的省略算是多餘了。 刪除與保留其實都講究平衡性。 Google提出了一大堆個人化設置，「設置」頁面在手機介面上完全沒有。 其實就是思考對於在「走」這一狀態的使用者，他最需要的最重要的會時時刻刻都用的功能是什麼，哪些是偶爾會用的次要功能。 就而言，這些次要功能，我在走得時候根本不會用。

最後要討論的是是否將網站預設設置成自動登入至手機版。 Twitter和Facebook都是設置成登錄到其電腦版（全版）網站。 不過Gmail則是預設登錄至手機版，不過提供轉至全版網站的選項。 問題其實不在於預設設置登錄到哪個版本的網站，比如我喜歡自動登入至手機版，但這也僅是我一個人的偏好。 正如上面所說的，有些情況下，使用者需要更多的介面功能，所以要有一個全班網站的連結是非常有用必要的。

確定你的服務中最重要的部分。 如果是新聞或博客等資訊，那就讓你的訪問者最快地接觸到資訊，如果是更新資訊等行為，那麼就讓他們快速地達到目的。
如果功能繁多，要盡可能地刪減。 剔除一些額外的應用，讓其集中在重要的應用。 如果一個使用者需要改變設置或者做大改動，那他們可以有選項去使用電腦版。
不要節省頁面中的資訊量。 手機的螢幕雖然少，但如果資訊內容是相關的且連續的，那麼滾屏比轉至新頁面體驗要好。
提供轉至全版網站的方式。 手機版網站不會具備全部的功能設置，雖然重新轉至全版網站的使用者成本要高，但是這個選項至少要有。

在我看來，成功的手機網站的設計秉持一個簡明的原則：讓使用者快速地得到他們想知道的，最有效率地完成他們的行為，所有設置都能讓她們滿意。

由於手機設備螢幕尺寸不一，網站要支援每一個螢幕尺寸是不切實際的，這裡我使用240X320作為目標螢幕尺寸，因為據Device Atlas Data Explorer的調查顯示，240X320在保持實用的同時， 還能保證你的網站能夠在眾多手機設備上顯示正常。 的確，240X320與桌面電腦螢幕相比真是太小了（參見下圖），幾乎是其十分之一，這也是值得注意的一點。

首先，用網站線框圖來勾勒出一個頁面所需要具備的東西。 我要設計出電子商店的3個頁面：流覽頁面、搜尋網頁面以及物品查看頁面。

第一個就是流覽頁面，這是訪問者經常點擊的頁面之一，通常由主頁連結過來，內容通常是與一個主題或類目相關的次要內容。 與桌面電腦網站一樣，在手機網站上要具有廣告標識是最劇本的，不過站的空間不要太多，在頁面頂端有一個簡單的log就能起到很好的效果。

流覽頁面有著眾多的作用，比如導航功能，設計點簡潔的導航告訴使用者所處的位置以及下一個位置是什麼。 然後是搜索框，之後是一些列單，圖片以及其他部分的連結。

主導航處於最低端。 在手機網站上要把最重要的東西擺在優先的位置，而額外的導航元素則應該處於頁面底端。 最後，還有一個流覽全版網站的選項，由於並不是每個人都必定使用手機版網站，又或者手機版網站的功能不齊全，所以這個選項還是很有用的。

然後就是搜尋結果頁面的草圖。 網路商店最常用的一個功能就是搜索，所以這個頁面必須能夠有效地説明使用者達到他們想找的頁面。 頁面頂端是一些告訴使用者現在在哪個位置的簡單資訊，然後是搜尋結果。 額外的導航資訊仍在最下面。

最終就是物品查看頁面。 使用者在這頁面主要是為了重新查看商品的資訊並把商品加入購物車。 先是物品圖片、價格以及關鍵性的「加入購物車」選項，然後是商品資訊全文，這幾個元素是最重要的，被優先處理。 搜索仍舊是相關有用的，不過被移到頁面的底端，因為它不是最重要的。

那麼現在就是進一步勾勒出這三個頁面的樣子了，更加直觀準確地展現最終的網站是什麼樣的。

流覽頁面（如上圖）：正如Twitter把資訊更新功能放在最優先的位置，我們把搜索擺在頂端，因為搜索是使用者登錄網店用的最多的功能。

搜尋網頁面（如上圖）：正如草圖所設計的，最重要的內容是搜尋結果，所以被放在最高位。 設計的主線就是告訴客戶他們搜索到什麼，有多少搜尋結果，根據需要我們對這些內容做了進一步的簡化。

上圖是物品流覽頁面，我們對頁面元素進行了整理。 Ok！ 網站框線圖設計就完成了！

原文連結：HTTP://mobiforge.com/designing/story/mobile-web-design-getting-point-part-i

源位址：HTTP://www.socialBeta.cn/......t-part-i.html