［image credit: Basecamp mobile］

Mashable的Brian Casel ( @CasJam )是一個網(wǎng)站設(shè)計師，他觀察到網(wǎng)路行動化的趨勢越來越值得被重視，因?yàn)槭褂檬謾C(jī)上網(wǎng)的人比以前多了很多，這對網(wǎng)站設(shè)計者以及網(wǎng)頁擁有人來說意味著什么呢？

Casel告訴我們以后除了電腦版的網(wǎng)頁，也要做出一個對應(yīng)手機(jī)或移動版的網(wǎng)頁。

我們整理編譯了Casel給網(wǎng)站設(shè)計者的十個重要提醒，包括了設(shè)計過程，設(shè)計策略及實(shí)際操作，希望大家在設(shè)計及推出網(wǎng)頁的時候先認(rèn)真地研究一番手機(jī)網(wǎng)頁及電腦網(wǎng)頁的不同。

1 確立網(wǎng)站設(shè)計的內(nèi)容，方向及類型

執(zhí)行一個網(wǎng)站設(shè)計的計劃前先要確定的一些方向：

全新網(wǎng)站設(shè)計－是為某產(chǎn)品/品牌做一個新的網(wǎng)頁，包括電腦頁面及移動版頁面嗎？
重新設(shè)計網(wǎng)頁－是要從原有的舊網(wǎng)頁取材，量身訂造一個電腦頁面及移動版頁面嗎？
增設(shè)移動版頁面－是原有的電腦頁面不改變，只需要增設(shè)一個移動版頁面嗎？
以上3個不同的情況都有不同的設(shè)計策略，是網(wǎng)站設(shè)計者開始做網(wǎng)站設(shè)計前必須要厘清的。

2 確定公司/品牌所要表達(dá)的形象

很多時候，網(wǎng)站設(shè)計者/開發(fā)者需要為公司設(shè)計一個網(wǎng)頁，因此首要注意的是公司的形象及產(chǎn)品的特色，Casel舉了hyundai汽車網(wǎng)頁來做例子，但是經(jīng)我們測試hyundai并沒有響應(yīng)式的網(wǎng)站，所以我們改以toyota作為例子！

當(dāng)我們進(jìn)入TOYOTA( http://www.toyota.com/ )汽車的網(wǎng)站，立刻看到的是他們汽車的大圖，目的就是要給消費(fèi)者一個鮮明的汽車形象，讓大家知道他們的汽車外型有多吸引人:

接著我們看到行動版本的網(wǎng)頁，表達(dá)的內(nèi)容跟電腦版網(wǎng)頁一樣，汽車的形象依然清楚的呈現(xiàn)在消費(fèi)者面前，沒有太多復(fù)雜的界面，因?yàn)門OYOTA公司對網(wǎng)頁的訴求就是要用鮮明的汽車圖片抓住消費(fèi)者的目光。

3 在設(shè)計移動版版網(wǎng)頁前務(wù)必預(yù)測網(wǎng)站流量

如果是要用舊有的電腦版網(wǎng)站為藍(lán)本，重新設(shè)計移動版版的網(wǎng)頁（目前這種案例居多），建議先用Google Analytics或其他測量網(wǎng)頁流量的工具來作一些訪客背景調(diào)查，能夠掌握越多關(guān)于網(wǎng)站訪客的資料越好， 例如：大部分訪客是用什么樣的裝置或?yàn)g覽器來看網(wǎng)站的？（螢?zāi)淮笮。|控/鍵盤，網(wǎng)路速度）在了解這些數(shù)據(jù)后，在設(shè)計網(wǎng)站時就知道要加強(qiáng)那方面的設(shè)計以符合不同裝置的需求。

4 學(xué)習(xí)如何設(shè)計可自動調(diào)整版面的網(wǎng)站設(shè)計（Responsive Web Design）

承第三點(diǎn)，每一年推出的移動版之多，就算做了網(wǎng)頁訪客資料調(diào)查，也無法因應(yīng)隨時做出符合每一臺移動版/瀏覽器的頁面，根據(jù)Responsive Web Design這篇文章，與其試圖迎合每一個移動版/瀏覽器，不如讓設(shè)計自然適應(yīng)不同的裝置。善用新的資源如HTML5，CSS3，及不同的網(wǎng)路字體，做出自動調(diào)整版面的網(wǎng)站設(shè)計（Responsive Web Design）。

5 簡單，但不能簡陋

設(shè)計移動版網(wǎng)頁的黃金要素就是要簡單，移動版的畫面絕對不可能比電腦螢?zāi)淮?，處理器也不一定比電腦好，因此設(shè)計必須要簡單化。最基本要求是檔案的大小要越小越好，以及網(wǎng)頁載入的時間要越短越好。而且目前無線網(wǎng)路還沒有到非常成熟的階段，因此移動版網(wǎng)站不要做得太復(fù)雜及花俏。

移動版網(wǎng)頁的各個元素放置為止，都必須要想清楚，移動版版網(wǎng)頁比電腦版網(wǎng)頁少了3/4的空間，代表沒有空間可以浪費(fèi)，1/4的空間里，每一個元素都是重點(diǎn)。

但是簡單不代表行動版網(wǎng)頁注定要簡陋，多試著學(xué)習(xí)CSS3，可以減少圖片或Javascript的依賴，并能輕松的完成多背景、圓角、3D動畫、文字陰影、漸變及透明度等設(shè)計特色。

6 網(wǎng)頁模板建議采用單欄式設(shè)計（Single－Column Layouts）

網(wǎng)頁模板采用單欄式設(shè)計，目的是為了方便在有限的移動版畫面上閱讀并操作網(wǎng)頁， 太多欄位對于一些手指頭比較大的使用者來說很容易誤觸，并且個別欄位字體變小也不好閱讀。

如果是多欄式的模板，建議使用Responsive web design技巧，將多欄（multi-column）模板合并成單欄式設(shè)計。大家可以參考Basecamp mobile的做法。

7 善用折疊式目錄

網(wǎng)頁的資訊很多？請記得用重點(diǎn)式，或主題式的呈現(xiàn)內(nèi)容，跟第6點(diǎn)一樣，將多欄的資料隱藏在重點(diǎn)/主題的條目下，讓使用者輕松選取自己想看的資訊。另外記得用直式設(shè)計，不要讓使用者還要左右行動畫面才能看完一行字。

例子：Major League Baseball的行動版網(wǎng)頁：

8 移動版網(wǎng)頁的按鍵要明顯易按

網(wǎng)站設(shè)計者必須要清楚使用電腦時，滑鼠或touch pad可以按左鍵，右鍵，或者滑動軸，這些移動版都沒有。另外在將電腦版網(wǎng)頁移植到移動版時還有一個要點(diǎn)，就是電腦網(wǎng)頁在做選取的功能時，可以將滑鼠游標(biāo)移到按鍵上方但不一定要按下（hover），但是移動版只有點(diǎn)擊的功能，所以重新設(shè)計或移植網(wǎng)頁時必須要重新設(shè)計按鍵特性。

9 記得提供視覺反饋按鍵（interaction feedback）

在電腦網(wǎng)頁點(diǎn)擊一個按鈕時，都會看到按鈕的顏色變化，這告訴使用者他已經(jīng)成功點(diǎn)擊該按鈕，同樣的，移動版網(wǎng)頁也建議做這樣的設(shè)計，這種不起眼的小設(shè)計會影響到使用者的心情及反應(yīng)。

另外一個視覺反饋的重點(diǎn)在網(wǎng)頁載入的時候，在使用者做出點(diǎn)擊/選取的動作后，網(wǎng)頁會開始loading，這個時候建議做出一些行動圖案讓使用者知道網(wǎng)頁正在載入，避免使用者重復(fù)點(diǎn)擊按鈕，延誤載入的時間。

10 測試，測試，再測試網(wǎng)頁性能

網(wǎng)頁完成后才是考驗(yàn)的開始，作為網(wǎng)站設(shè)計者，你能夠確定你設(shè)計的網(wǎng)頁在各個裝置上都能運(yùn)作嗎？不可能（尤其是Android裝置更要注意，參考前文「漫談iOS以及Android版本分裂狀態(tài)以及對于開發(fā)者的影響」及「Andorid的版本分裂以及HTC的機(jī)海戰(zhàn)術(shù)」），因?yàn)槟悴豢赡苷娴臏y試過每一臺移動版。

所以必須要測試軟體（developer SDK）的輔助，以及一些網(wǎng)頁版的模擬器（web-based emulator），Mike Brittain的網(wǎng)站有提供一些測試網(wǎng)頁的相關(guān)資料。

文章來源：http://www.inside.com.tw/2011/03/28/10-mobile-web-design