關(guān)于手機網(wǎng)站設(shè)計，需要了解兩大部分。***，目前3個主流的手機網(wǎng)站應用，探討這些應用是如何恰到好處地解決移動Web應用的難題。第二，一個小型電子商務(wù)網(wǎng)站的設(shè)計。著名Web應用程序和應用軟件圖片交互心理學的設(shè)計專家斯蒂芬·P·安德森曾說過“良好的交互設(shè)計關(guān)注人們所想，所做以及所感！”

[[17157]] 
斯蒂芬安德森是一位通過對用戶行為的理念設(shè)計的思想***

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

移動Web應用的難題

我在去年購買了N95，現(xiàn)在我在去上班的路上檢查和整理郵件，通過手機上YouTube看視頻，實時地檢查Twitter feed和郵件信息，也查看Facebook好友的信息。主題就是：我往往在走路的時候，用手機登陸這些網(wǎng)站的手機版來檢查***信息。

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

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

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

Case 1: GMail

GMail

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

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

Gmail手機版的成功之處在于郵件優(yōu)先，其他界面功能置后。

Case 2: Twitter

Twitter

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

Twitter的主頁可謂單刀直入（如圖）：狀態(tài)更新功能，緊接著是***狀態(tài)信息，附帶一些簡單的界面元素。

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

Twitter的成功點在于：信息更新功能快速簡便，還顯示朋友的信息內(nèi)容。

Case 3: Facebook

Facebook

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

手機版Facebook優(yōu)先顯示的還是一些簡單的功能和lists（菜單）。與Twitter類似，F(xiàn)acebook假設(shè)大部分手機用戶主要是為了更新信息。然后才是3條***更新的信息、朋友請求和news feed items。再往下，才顯示墻上近幾天里朋友發(fā)布的帖子。

我覺得Facebook在一些關(guān)鍵功能的定位和強調(diào)顯示上做的很好，一些重要性稍次的功能得到了適當?shù)慕导墶?/p>

有趣的是，F(xiàn)acebook是為一個提供導航欄的。在處理眾多功能同時又要強調(diào)重要的功能時，導航欄確實是一個有用的、整潔的處理方式。

Facebook的成功點在于：選擇了用戶在“走”的時候最需要的功能，簡潔的互動界面提供了其他的次要功能。

小結(jié)

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

這3個網(wǎng)站都是使用CSS，看起來都不普通，都在屏幕的頂端掛了彩色的Logo。Gmail有效地使用了顏色等分離信息，用帶顏色的links和背景有效地分割了信息內(nèi)容、郵件標題和界面。Twitter則是簡單地用顏色和直線劃分信息，同時顯示精簡信息時間。Facebook采用了Twitter的辦法將內(nèi)容與內(nèi)容、內(nèi)容與界面分隔開。

邊框

所有這3個網(wǎng)站還提供完整版網(wǎng)站鏈接，這是我比較喜歡的一點。先進點的手機瀏覽器完全支持完整版網(wǎng)站，就算有著Javascript和互動行為。有時候，手機版是遠遠不夠的，提供完整版鏈接是必要的，盡管會感覺多余，但確實值得。

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

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

精簡應用

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

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

***要討論的是是否將網(wǎng)站默認設(shè)置成自動登錄至手機版。Twitter和Facebook都是設(shè)置成登錄到其電腦版（全版）網(wǎng)站。不過Gmail則是默認登錄至手機版，不過提供轉(zhuǎn)至全版網(wǎng)站的選項。問題其實不在于默認設(shè)置登錄到哪個版本的網(wǎng)站，比如我喜歡自動登錄至手機版，但這也僅是我一個人的偏好。正如上面所說的，有些情況下，用戶需要更多的界面功能，所以要有一個全班網(wǎng)站的鏈接是非常有用必要的。

總結(jié)1

確定你的服務(wù)中最重要的部分。如果是新聞或博客等信息，那就讓你的訪問者最快地接觸到信息，如果是更新信息等行為，那么就讓他們快速地達到目的.

如果功能繁多，要盡可能地刪減。剔除一些額外的應用，讓其集中在重要的應用。如果一個用戶需要改變設(shè)置或者做大改動，那他們可以有選項去使用電腦版。

不要節(jié)省頁面中的信息量。手機的屏幕雖然少，但如果信息內(nèi)容是相關(guān)的且連續(xù)的，那么滾屏比轉(zhuǎn)至新頁面體驗要好。

提供轉(zhuǎn)至全版網(wǎng)站的方式。手機版網(wǎng)站不會具備全部的功能設(shè)置，雖然重新轉(zhuǎn)至全版網(wǎng)站的用戶成本要高，但是這個選項至少要有。

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

#p#

小型電子商務(wù)網(wǎng)站的設(shè)計

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

手機桌面的尺寸

Step 1: Sketches（草圖）

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

Sketches

***個就是瀏覽頁面，這是訪問者經(jīng)常點擊的頁面之一，通常由主頁鏈接過來，內(nèi)容通常是與一個主題或類目相關(guān)的次要內(nèi)容。與桌面電腦網(wǎng)站一樣，在手機網(wǎng)站上要具有廣告標識是最劇本的，不過站的空間不要太多，在頁面頂端有一個簡單的log就能起到很好的效果。

瀏覽頁面有著眾多的作用，比如導航功能，設(shè)計點簡潔的導航告訴用戶所處的位置以及下一個位置是什么。然后是搜索框，之后是一些列單，圖片以及其他部分的鏈接。

Sketches

主導航處于***端。在手機網(wǎng)站上要把最重要的東西擺在優(yōu)先的位置，而額外的導航元素則應該處于頁面底端。***，還有一個瀏覽全版網(wǎng)站的選項，由于并不是每個人都必定使用手機版網(wǎng)站，又或者手機版網(wǎng)站的功能不齊全，所以這個選項還是很有用的。

Sketches

然后就是搜索結(jié)果頁面的草圖。網(wǎng)絡(luò)商店最常用的一個功能就是搜索，所以這個頁面必須能夠有效地幫助用戶達到他們想找的頁面。頁面頂端是一些告訴用戶現(xiàn)在在哪個位置的簡單信息，然后是搜索結(jié)果。額外的導航信息仍在最下面。

最終就是物品查看頁面。用戶在這頁面主要是為了重新查看商品的信息并把商品加入購物車。先是物品圖片、價格以及關(guān)鍵性的“加入購物車”選項，然后是商品信息全文，這幾個元素是最重要的，被優(yōu)先處理。搜索仍舊是相關(guān)有用的，不過被移到頁面的底端，因為它不是最重要的。

Step 2: Wireframes（網(wǎng)站線框圖）

那么現(xiàn)在就是進一步勾勒出這三個頁面的樣子了，更加直觀準確地展現(xiàn)最終的網(wǎng)站是什么樣的。

瀏覽頁面

瀏覽頁面（如上圖）：正如Twitter把信息更新功能放在***先的位置，我們把搜索擺在頂端，因為搜索是用戶登錄網(wǎng)店用的最多的功能。

搜索頁面

搜索頁面（如上圖）：正如草圖所設(shè)計的，最重要的內(nèi)容是搜索結(jié)果，所以被放在***位。設(shè)計的主線就是告訴客戶他們搜索到什么，有多少搜索結(jié)果，根據(jù)需要我們對這些內(nèi)容做了進一步的簡化。

物品瀏覽頁面

上圖是物品瀏覽頁面，我們對頁面元素進行了整理。Ok！網(wǎng)站框線圖設(shè)計就完成了！

Step 3: Basic HTML

手機網(wǎng)站搭建的好處之一就是不需要學習一些新的技術(shù)，因為整個設(shè)計原則就是簡潔明了。另外就是，市場上許多新的手機設(shè)備完全支持CSS，這樣使得網(wǎng)站不僅更加友好，而且也能達到美觀舒適的目的。

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

在手機網(wǎng)站搭建中遇到的***個問題就是Document Type Declaration，，另外mobiforge.com上的Comparison of XHTML Mobile Profile and XHTML Basic的表格也對主要的手機markup DTDs之間的區(qū)別做了很好的說明。我選擇了version1.2，所以我的頁面首部就是這樣的:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

另外我還是用了Firefox插件HTML Validator，可以檢查你的HTML代碼。還有一點，你也許需要看看Ruadhan關(guān)于mobile DOCTYPE的幾點說明。Validation is Your Friend這篇文章也有一些有用的信息。

有一點需要謹記的是：手機上沒有很多的橫向空間給你發(fā)揮，一個橫向布局的手機網(wǎng)站并不實用，因為手機屏幕尺寸不一，所以優(yōu)先選擇的是fluid design。

在構(gòu)建頁面的時候，我用了h1，h2，h3等來強調(diào)一些重要的元素。

瀏覽頁面的HTML代碼：

<div id="products"> 
<h3><a href="view.html">The Secret</a></h3> 
<span>by <a href="#">Dwayne Johnson</a></span> 
<span>&euro;8.99</span> 
<hr/> 
<h3><a href="view.html">For whom the bell tolls</a></h3> 
<span>by <a href="#">Kirk Chandlund</a></span> 
<span>&euro;12.00</span>...  
 

無CSS的瀏覽頁面在手機上的顯示效果：

無CSS的瀏覽頁面

搜索頁面HTML代碼：

<h1>BookStore Online</h1> 
<hr/> 
<p id="results-summary">Search for "Red Arrow" (11 results)</p> 
<hr/> 
<div id="results"> 
<h3><a href="view.html">Red arrow at nightfall</a></h3> 
<span>by <a href="#">Michael Johnson</a></span> 
<span>&euro;8.99</span> 
<hr/>...  
 

無CSS搜索頁面在手機上的顯示效果：

無CSS搜索頁面

物品查看頁面的HTML代碼：

<div id="main"> 
<h2>The Long Tail</h2> 
<p>by <a href="#">Chris Anderson</a></p> 
<div> 
<img src="/files/images/long_tail.jpg" width="60" height="85" alt="The Long Tail"></img> 
</div> 
<div> 
<p id="price">&euro;16.99 <span id="stock">In stock</span></p> 
<p><a href="#">Buy now</a></p> 
</div> 
<div id="details"> 
 

無CSS物品查看頁面在手機上的顯示效果：

無CSS物品查看頁面

當然，僅HTML格式的網(wǎng)站是遠遠不夠的，下面就是添加CSS了，讓網(wǎng)站生動起來！

Step 4: CSS

CSS和javascript能讓手機網(wǎng)站煥然一新。例如諾基亞N95的CSS-compliant Webkit based browser，些許的CSS就然瀏覽器煥發(fā)光彩。

如果你一直沒有調(diào)查過手機瀏覽器，你也可以在不必改變html代碼的情況下使用CSS media=“handheld”，例如：

<link href="/stylesheets/main.css" media="handheld" rel="stylesheet" type="text/css" /> 
 

雖然未必所有瀏覽器支持CSS，但是如果遇到支持CSS stylesheet的手機設(shè)備，可以顯示其效果。

CSS主要是為了從視覺上明顯隔開頁面上的不同元素，讓內(nèi)容更適合于屏幕展現(xiàn)。當然如果你有設(shè)計天分，你也可以巧妙地使用CSS來加強網(wǎng)站的視覺效果，使其符合品牌意義，如果能這樣做，你的網(wǎng)站自然會脫穎而出。

下面四張圖就是嵌入CSS之后的網(wǎng)站效果，通過顏色等對網(wǎng)頁元素在視覺上進行分離，而且所有頁面都遵守一個風格，網(wǎng)站的外觀和視覺感受都比較統(tǒng)一。

Step 5: Javascript

我的觀點是可以使用Javascript來打扮手機網(wǎng)站，但必須極度謹慎，因為好多手機并不支持java。使用Java的一個優(yōu)點就是避免在EDGE和3G網(wǎng)絡(luò)環(huán)境下的page refresh，從而改善你的手機網(wǎng)站的用戶體驗。

再次強調(diào)要謹慎使用java，如果頁面loadtime超過10K將會降低用戶體驗，雖然要給用戶帶來***的用戶體驗，但是前提是你的明確知道用戶支持這些技術(shù)，如果不知道，***假設(shè)不支持的情況。

下面是物品查看頁面的java代碼：

window.onload = function(){ //load this when the page loads  
//set up swap variables  
var summary = document.getElementById('summary')  
var long_summary = summary.innerHTML + ' <a href="#">...less</a>'  
var short_summary = summary.innerHTML.substr(0,100) + '...' + ' <a href="#">full details...</a>'  
var body = document.getElementById('view-page')  
//do the swap  
swap_full_summary = function(){  
if(summary.innerHTML == long_summary)  
{  
summary.innerHTML = short_summary 
}  
else  
{  
summary.innerHTML = long_summary 
}  
}  
summary.innerHTML = short_summary 
}  
 

***一步就是通過Ready.mobi來試運行網(wǎng)站，這樣可以讓你直觀了解自己的網(wǎng)站，看看有什么疏漏。

And finally: ship it!大功告成！

***想說的就是手機網(wǎng)站的設(shè)計并不是想象中那么困難，只需要設(shè)計使用一些簡單的技術(shù)，遵守簡明的原則，學習Google、Facebook和Twitter的一些成功經(jīng)驗。***給點建議：

先用草圖勾勒網(wǎng)站，注意最重要元素的布局  
代碼清晰簡單，這樣才能在手機得到很好的顯示  
明智且負責任地使用javascript  
使用HTML validators和Ready.mobi確保代碼和網(wǎng)站無誤  

【編輯推薦】

1. 移動產(chǎn)品設(shè)計的信息架構(gòu)
2. Android應用平臺 主導移動互聯(lián)網(wǎng)市場
3. 發(fā)展移動互聯(lián)網(wǎng)推動傳統(tǒng)產(chǎn)業(yè)革新