手機版網站 Design MobileWebsite 
未來趨勢
隨著科技越來越進步，目前這個世界上統計有超過2.4億人口手持行動電話，約有30%的人口使用網路在瀏
覽，過去除了 Windows Mobile 或是 Symbian 系統之外，現在的環境又多了 Apple 主推的 iPhone 以及 G
oogle 的 Android 平台，未來以 smart phone 作為上網平台的人口照趨勢來看只會成長，所以如果一個提
供服務的網站能夠有自己的行動（手機）版本，對於使用者來說是相當方便的，當然前提之下是要夠好用
。據預測，在未來行動網頁將被證實為一種必然性，絕對不會只是曇花一現而已。
MOBILE網頁設計的理念
網路行動化的趨勢越來越值得被重視，因為使用手機上網的人比以前多了很多，這對網頁設計者以及網頁擁
有人來說意味著甚麼呢？告訴我們以後除了電腦版的網頁，也要做出一個相對應手機或行動裝置的網頁。
但話說回來，供手機瀏覽的網頁可不只是「把版面縮小就好」那麼簡單，所以才會出現有些網站會無法正常
顯示，因為這些網頁是設計給電腦上觀看，如果網頁開發者沒有考慮到手機的裝置特性以及人們的閱讀習慣
，就無法設計出手機上方便閱讀的網頁。
然而，當一個以消費者為導向的網站經營夠久時，使用者（或是搜尋引擎）所記得的大多是首頁的網址，所
以當使用者用行動裝置連上網站首頁時，網站最好能偵測使用者目前是用行動裝置上網而直接導引到行動版
本，這樣使用者不用特別記住行動版本的特殊網址也能夠享受到行動版的服務，這也就是本公司想要做的，
『讓環境去適應使用者的存在』 像是車內的自動調節內外的溫度、將窗戶霧化以保護隱私等。網站設計不
應該是平面出版的電子化，存在於固定的版面、文字大小、圖文配置；設計應該要自然的適應不同的裝置，
自動調整版面的 flow，甚至是互動 UI（user interface)的大小等等。
設計出適合MOBILE的網頁
手機上網的速度，即便到了3.5G，也無法跟家用一般的電腦網路相比，再加上
手機就是為了要讓使用者攜帶方便，在外觀上大小設計有了限制，當然行動版的
網站內容也就沒辦法像普通版網頁一樣將全部的內容都呈現上去，相對的也就無
法提供一樣多的資訊，所以在製作行動版網頁前，就要考量什麼才是「行動裝置
上網的使用者」會想要獲得的。
但是說的也奇怪，為什麼大家會那麼依賴行動上網呢?頻果電腦總裁史帝夫‧賈伯
斯說過，『世界上每一個人每一天一定會有幾分鐘的時間不知道要做甚麼』…這個
思想成功的打進人們的心，所以我們順著現在正走在尖端的趨勢，也就是說會用
手機上網的人大多是在戶外，有可能是在坐捷運或高鐵，也有可能是在等車或等
人，或者是去旅遊查詢路線或資訊...等等，如果說使用者會想到或者透過搜尋引
擎(google、yahoo)連線到您的網站，也就代表您的網站有可能提供了「打發時間
的內容或遊戲」或是「方便生活資訊」等內容，所以要呈現給行動網頁的內容必
須要明確，不須要讓使用者花太多封包數據費用、傳輸時間還在開啟網站，這會
造成使用者的不耐煩，就與其轉到別的網站去了，畢竟行動網路跟家用網路的速
度是無法相比的。
簡單來說，行動版的網頁理論上必須是普通版網頁的濃縮精簡版本，就以現在市
面上手機螢幕的寬度大約以不翻轉而言規格為240px, 320px, 640px，只不過現在
一般的網頁，都是以寬版的版型下去做設計的，因為這樣比較符合目前主流的寬
螢幕設計，只是手機剛好相反過來，大多的手機設計幾乎都是直立式的，所以許
多人在操作上習慣都是上下捲動的，這也表示著手機版的網頁必須往單欄（one-
column）的版面去做配置。
本公司順著目前使用者的方便性以及潮流開發行動網頁會依循以下幾點做設計：
一.確定網頁設計的內容、方向、類型
是否依循原先的網頁下去做設計，或者是設計一個全新的行動版網頁...等等，這都是事先必須溝通瞭解的，畢竟一般網頁與行動網頁的支援性是不同，在設計上也是不同的，需考量到內容的呈現與開發的簡易度。
二.確定公司/品牌所要表達的形象以及效果
每間公司一定都有它獨特的形象以及專業品牌，所以一進入網站時，就必須一目了然的直接將公司的形象用最好的效果呈現出來吸引使用者，不管是查詢資料也或者是消費，都可以大大增加使用者的瀏覽興趣，這樣就成功的達到抓住使用者的目光。
三.會先針對網站的流量做測試
目前延續原先的電腦網頁做為樣本的客戶居多，所以我們都會用一些網站測試流量的工具，來瞭解瀏覽網站的訪客群大致上是用何種裝置來瀏覽，速度如何、網站最吸引訪客的地方在哪裡，等等...資訊，依循每個不一樣的網站，設計出符合它的行動網站，可以使瀏覽者更貼切。
四.依不同款式手機自動調整版面設計
隨著科技日新月異，調查了市面上許許多多的行動裝置，想要依照不一樣的行動裝置瀏覽器都做出符合它們可以瀏覽的頁面，實在是太費工夫，也不符合投資報酬率，畢竟手機的汰換率實在太高了，所以不如讓設計自然適應不同的裝置，這也就是『讓環境去適應使用者的存在』，目前有許許多多新的資源，例如HTML5，CSS3..等，都可以做出自動調整版面的網頁設計。
五.用最簡單的方式呈現客戶想要給使用者的資訊
1.標記乾淨、簡約：
程式碼標記盡可能的乾淨、簡約，可配合不同操統瀏覽器迅速開啟網頁，移動到你想要的位置。
2.雙重版本選擇：
不一定手機版網頁皆適合所有使用者，所以我們會設計可供使用者切換手機板或者
網頁版的按鈕。
功能說明:
1. 清單可看到最新消息、關於我們、近期作品、聯絡我們、公司地址
2. 點選最上面”最新消息”可以連結至最新消息內頁。
3.點選最新消息分頁，中間可以看到新聞列表。
4.再點選新聞列表的新聞標題，可觀看完整新聞內容
3.精簡圖片：
圖片在一個網站上雖然是不可或缺的，但對網頁開啟的速度影響也很大，所以精簡圖片，或者消除圖片
上一些不必要動畫，是很重要的。
4.不使用彈跳視窗或開啟新視窗：
盡量不使用彈跳視窗或者開啟新視窗，因為有些平台，會干擾原先的瀏覽，所以我們盡量不使用此功能，如果說有非不得已，也會務必提醒使用者會出現的情況。
5.單一方向的滾動：
垂直或水平的移動，必須限制一個方向，才不會當使用觸碰螢幕時，滾動方向錯誤，造成用戶的不方便，所以只讓它單一方向滾動，可以消除使用上潛在的麻煩。
6.提供後退和鏈結按鈕：
在使用行動上網時，一般都只會一頁接著一頁下去瀏覽，但如果突然想回到上一頁時，一下子會突然不知
該如何是好，迷失方向，所以後退和鏈結按鈕也就變得相對重要了，必須要有引導用戶回到主頁或者上一
頁的功能，才可以確保用戶不會就這麼離開了。
7.內容盡量精簡：
行動裝置的螢幕，絕不可能會比一般電腦的螢幕大，處理器也不一定會比電腦好，所以設計最重要的就是
精簡，但是精簡不代表什麼都一點點而已，這樣就太簡陋囉!而且現在的行動網路速度還沒有到很成熟的階
段，因此整個網站的製作不要太過於複雜及華麗即可。簡單來說就是，讓網頁開啟的時間越短越好，內容
盡量以用戶需求為主即可。
8.使用單獨的手機主題：
每個畫面的主題要明確要夠明顯，盡量不要有太多小標題同時出現，會使得畫面過於複雜，所以明確的主
題是我們必須要設計的。
由以上的範例我們不難看出手機版網站能呈現清晰生動的圖片，網頁框架與配置得宜、文字內容上趨於精簡，這使得消費者在閱讀網頁時是更加便利且得心應手。
六.採用單攔式設計
滑鼠箭頭與手指畢竟大小有別，為了方便在有限的行動裝置上閱讀操作網頁，避免觸碰聯結時，誤觸到其它欄位，所以盡量採用單欄式設計。
七.按鍵的設計明顯易按、視覺動作效果
需用到觸擊的地方，必須要明顯而且易按，按鍵特性的設計也是很重要的一環，當使用者按下聯結時，也必須要像一般電腦一樣，需要有顏色的區別來告訴用戶，您已經點擊囉!，而在等待開啟網頁出現loading這個畫面時，會設計出一些行動圖案讓使用者知道網頁正在載入，可以避免用戶重複開啟網頁。
