7個(gè)手機(jī)版網(wǎng)頁設(shè)計(jì)的原則

手機(jī)上網(wǎng)不僅是可見的趨勢，更是以銳不可擋的數(shù)量在驚人成長，網(wǎng)頁設(shè)計(jì)者應(yīng)該開始接觸手機(jī)版網(wǎng)頁設(shè)計(jì)。

手機(jī)網(wǎng)頁設(shè)計(jì)概念，與一般個(gè)人電腦使用的概念有些不同，因此，我們在這裡簡單的歸納出一些設(shè)計(jì)的原則：

1. 簡化內(nèi)容

一般的手機(jī)、平板電腦等行動裝置，不易容納下適合於個(gè)人電腦的龐大網(wǎng)頁資訊，因此手機(jī)行動網(wǎng)頁的首要重點(diǎn)，就是減少內(nèi)容，不論是圖片、文字或是影音。

請記住一個(gè)重點(diǎn)：只要將最重要的資訊放入行動版網(wǎng)頁，就是最主要的準(zhǔn)則，重要性較低的、讀取需要時(shí)間的內(nèi)容，則可以透過超連結(jié)，連回到正常的官方網(wǎng)站。

行動網(wǎng)站必須十分的重視內(nèi)容簡化這一點(diǎn)，一個(gè)塞滿內(nèi)容的行動網(wǎng)站無法獲得網(wǎng)路客戶的青睞。

2. 一欄卷動的最佳策略

大部分的行動裝置，畫面都不如桌上電腦那麼大，尤其是閱讀文字時(shí)更需要加以放大。即使智慧手機(jī)都具有網(wǎng)頁放大縮小功能，但是觀看起來較為麻煩。

因此設(shè)計(jì)行動網(wǎng)頁時(shí)，建議是能夠以滑動螢?zāi)坏姆绞介喿x網(wǎng)站，因?yàn)榛瑒泳W(wǎng)頁比起放大網(wǎng)頁觀看來得簡單多了。

3. 導(dǎo)覽功能大不同

手機(jī)網(wǎng)頁與跟一般的網(wǎng)頁不同的，在於當(dāng)閱讀文章到最后時(shí)，要回到最前頭是麻煩的，因此設(shè)計(jì)網(wǎng)頁的企業(yè)，除了減少卷動畫面的機(jī)會外，也會加強(qiáng)導(dǎo)覽的功能，讓網(wǎng)頁變得更容易於行動裝置上閱讀。導(dǎo)覽設(shè)計(jì)的重點(diǎn)有：

*只在首頁的部份加入搜尋的功能
*建立導(dǎo)覽功能鍵，其中以「回到首頁」、「回到上一頁」這兩個(gè)最為重要
*最后，「回到上一頁」的按鍵除了首頁以外，其餘的頁面都需要放置

4. 減少文字輸入部份

手機(jī)大多沒有實(shí)體的鍵盤，或僅只有12鍵的電話輸入功能，因此輸入文字上會比起使用鍵盤麻煩得多。因此，減少使用者輸入文字的機(jī)會，例如：個(gè)人的帳號、密碼、搜尋內(nèi)文、使用編輯器...等，都是行動網(wǎng)頁要盡力避免的。設(shè)計(jì)的重點(diǎn)如下：

*允許行動上網(wǎng)使用者儲存輸入的帳號密碼資訊
*輸入的區(qū)塊盡量加以放大
*允許行動上網(wǎng)使用者，輸入簡易的密碼，例如PIN數(shù)字密碼

5. 思考多種版本的手機(jī)網(wǎng)頁版本

手機(jī)的規(guī)格眾多，有的解析度為320*240，較新的則為800*480，而次世代的手機(jī)更有720P的解析度，因此行動網(wǎng)站如何滿足眾多的需求？

一般來說有兩種作法，一種是建立不同解析度的行動網(wǎng)站，由用戶於手機(jī)行動入口網(wǎng)頁自行選擇，以Facebook的例子來說，mobile.facebook.com是適用於大部分的智慧手機(jī)與平板電腦，而0.facebook.com則是用於非智慧手機(jī)或是網(wǎng)路連線速度極慢的區(qū)域；另一種做法則是透過手機(jī)的語法，例如CSS語法中的Viewpoint就能夠根據(jù)手機(jī)的解析度加以決定瀏覽畫面的寬度。

6. 觸控螢?zāi)慌c非觸控螢?zāi)辉O(shè)計(jì)

雖然今日觸碰型的智慧手機(jī)當(dāng)?shù)?，但是仍有為?shù)不少的傳統(tǒng)手機(jī)，沒有觸碰的介面，使用的是傳統(tǒng)的控制方向鍵做為導(dǎo)覽的工具。例如：減少畫面中超連結(jié)的數(shù)量，可以讓選擇連結(jié)的時(shí)候出現(xiàn)一些減少一些按鈕的動作，或是加大文字以減少誤擊的問題。

此外更重要的是滑鼠的原理跟觸碰介面的原理有很大的差異，因此行動版的網(wǎng)頁應(yīng)該避免只有電腦滑鼠才能做到的功能，舉例來說：「下拉選單」的這一項(xiàng)功能，因?yàn)樾袆友b置沒有「滑鼠座標(biāo)」的設(shè)計(jì)，所以無法觸發(fā)滑鼠移動過去才會顯示出來的選單。

7. 利用手機(jī)的天生優(yōu)勢

手機(jī)有著許多傳統(tǒng)電腦所沒有擁有的優(yōu)勢，其中最大的優(yōu)勢就是「行動力」，因此手機(jī)版網(wǎng)頁應(yīng)該要特別發(fā)揚(yáng)這些特色，讓行動網(wǎng)頁具有一般網(wǎng)頁更多的優(yōu)勢。舉例來說：

*行動定位：大部分的智慧裝置都有GPS或是定位的機(jī)制，可以讓客戶主動找到您的位置

*行動聯(lián)繫：如果客戶使用的是行動電話，可以立即發(fā)話；如果是平板電腦，亦可以使用簡訊或是e-Mail的方式傳遞訊息給客戶

*鄰近地點(diǎn)：如果您的事業(yè)有很多據(jù)點(diǎn)，請告訴您的客戶，在他附近有哪一些地點(diǎn)是便於他能夠抵達(dá)的

近年已經(jīng)成為行動條碼的QR Code設(shè)計(jì)，也應(yīng)該納入行動網(wǎng)頁的設(shè)計(jì)元素在內(nèi)。

原文內(nèi)容 http://www.webcredible.co.uk/user-friendly-resources/web-usability/mobile-guidelines.shtml