製作手機網要進階學習甚麼(一)？

製作手機網要進階學習甚麼(一)？
翻譯自國外一篇不錯的報導文章 - 七個手機版網頁設計的原則：

01.內容要簡化：

一般的手機、平板電腦等行動裝置，不易容納下適合於個人電腦的龐大網頁資訊，因此手機行動網頁的首要重點，就是減少內容，不論是圖片、文字或是影音。
請記住一個重點：只要將最重要的資訊放入行動版網頁，就是最主要的準則，重要性較低的、讀取需要時間的內容，則可以透過超連結，連回到正常的官方網站。
行動網站必須十分的重視內容簡化這一點，一個塞滿內容的行動網站無法獲得網路客戶的青睞。

02.一欄捲動的最佳策略：

大部分的行動裝置，畫面都不如桌上電腦那麼大，尤其是閱讀文字時更需要加以放大。
即使智慧手機都具有網頁放大縮小功能，但是觀看起來較為麻煩。
因此設計行動網頁時，建議是能夠以滑動螢幕的方式閱讀網站，因為滑動網頁比起放大網頁觀看來得簡單多了。

03.導覽功能大不同：

手機網頁與跟一般的網頁不同的，在於當閱讀文章到最後時，要回到最前頭是麻煩的。
因此設計網頁的公司，除了減少捲動畫面的機會外，也會加強導覽的功能，讓網頁變得更容易於行動裝置上閱讀。
導覽設計的重點：
在首頁的部份加入搜尋的功能。
建立導覽功能鍵，其中以「回到首頁」、「回到上一頁」這兩個最為重要。
最後，「回到上一頁」的按鍵除了首頁以外，其餘的頁面都需要放置。

04.減少文字輸入部份：

手機大多沒有實體的鍵盤，或僅只有 12 鍵的電話輸入功能，因此輸入文字上會比起使用鍵盤麻煩得多。
因此，減少使用者輸入文字的機會，例如：個人的帳號、密碼、搜尋內文、使用編輯器...等，都是行動網頁要盡力避免的。
設計的重點如下：
允許行動上網使用者儲存輸入的帳號密碼資訊。
輸入的區塊盡量加以放大。
允許行動上網使用者，輸入簡易的密碼，例如 PIN 數字密碼。

05.思考多種版本的手機網頁版本：

手機的規格眾多，有的解析度為 320*240，較新的則為 800*480，而次世代的手機更有 720P 的解析度，因此行動網站如何滿足眾多的需求？
一般來說有兩種作法，一種是建立不同解析度的行動網站，由用戶於手機行動入口網頁自行選擇。
以 Facebook 的例子來說，mobile.facebook.com 是適用於大部分的智慧手機與平板電腦。
而 0.facebook.com 則是用於非智慧手機或是網路連線速度極慢的區域。
另一種做法則是透過手機的語法，例如 CSS 語法中的 Viewpoint 就能夠根據手機的解析度加以決定瀏覽畫面的寬度。

06.觸控螢幕與非觸控螢幕設計：

雖然今日觸碰型的智慧手機當道，但是仍有為數不少的傳統手機，沒有觸碰的介面，使用的是傳統的控制方向鍵做為導覽的工具。
例如：減少畫面中超連結的數量，可以讓選擇連結的時候出現一些減少一些按鈕的動作，或是加大文字以減少誤擊的問題。
此外更重要的是滑鼠的原理跟觸碰介面的原理有很大的差異，因此行動版的網頁應該避免只有電腦滑鼠才能做到的功能。
舉例來說：「下拉選單」的這一項功能，因為行動裝置沒有「滑鼠座標」的設計，所以無法觸發滑鼠移動過去才會顯示出來的選單。

07.利用手機的天生優勢：

手機有著許多傳統電腦所沒有擁有的優勢，其中最大的優勢就是「行動力」，因此手機版網頁應該要特別發揚這些特色，讓行動網頁具有一般網頁更多的優勢。
舉例來說：
行動定位：大部分的智慧裝置都有 GPS 或是定位的機制，可以讓客戶主動找到您的位置。
行動聯繫：如果客戶使用的是行動電話，可以立即發話；如果是平板電腦，亦可以使用簡訊或是 e-Mail 的方式傳遞訊息給客戶。
鄰近地點：如果您的事業有很多據點，請告訴您的客戶，在他附近有哪一些地點是便於他能夠抵達的。
近年已經成為行動條碼的 QR Code 設計，也應該納入行動網頁的設計元素在內。

資料來源：7 usability guidelines for websites on mobile devices Go 。

本報導相關文字檔案存放位置
關於本篇更多詳細報導文字檔案資料，教材會員請打開本篇 new/08/txt/ 目錄取得。

下一個教學

十個手機版網頁設計主要考慮因素

因應網路趨勢修改索取本站教材辦法，原教學會員制度已取銷，恕不再提供任何操作或學習指導，敬請見諒。
網頁運用技巧是提升製作網站效率之一，也是給有心想學習網頁製作者最好練習機會，絕對值得你永久珍藏。
如果你願意分享這篇辛苦整理出來的資料，敬請您原文轉載並註明出處，以示尊重個人智慧財產，感謝合作。
如果你願意於貴站或部落格中介紹這篇報導，歡迎使用複製網頁研習室連結語法，再次感謝你的支持與愛護。