• 網頁設計新知
    Knowledge of Design is Food of iBest.
2013/10/13  網頁設計

手機版網頁設計已經是現在式

根據財團法人台灣網路資訊中心(TWNIC)的統計,2013年初台灣行動上網的人口已近千萬人,顯示在行動上網在台灣已經成為主要的上網方式之一。

相信在捷運上或在大馬路上大家可以觀察到一個現象,不只是年輕族群,連中年階層的人們都拿著手機滑滑滑。這表示行動上網的年齡層分布極廣,從錙銖必較的學生族群到消費力旺盛的上班族群都利用手機在進行資訊的瀏覽甚至是消費。

但反觀國內手機版網頁的更新程度還來不及跟上這波龐大的行動上網潮流。大多數的網站都還沒有手機版的網頁,甚至還是用Flash來呈現動態內容。

我們所談論的手機版網頁設計有兩種製作的方式,一個是獨立版的手機網頁設計,也就是獨立網址;另一個則是所謂的適應性網頁設計,也就是同一網址在不同大小的螢幕自動排版網頁內容。

兩種方式各有優缺,以下我們大略說明:

一、獨立網址的手機版網頁設計
優點:
1. 充分優化,載入速度快 - 根據網站的內容重要性作取捨,捨去不重要的資訊,保留最重點的訊息,讓使用者可以快速的看到想要的資訊。
2. 符合使用者體驗 - 將導覽按鈕及選單設計成原生APP使用的UI形式,讓使用者用起來不會有隔閡陌生的感覺

缺點:
1. 維護較難 - 由於是獨立的網頁,變成跟主網址是不同的Html碼,所以在新增刪改網頁功能的時候,必須維護兩個地方

二、適應性網頁設計(Resposive Web Design)
適應性網頁設計(Responsive web design),又稱響應式網頁設計、自適應式網頁設計。

優點:
1. 不需要重寫 HTML - 使用同一份Html語碼,功能維護容易
2. 同時針對多種裝置調整 - 利用 CSS3 的 Media Queries 方法來實現,不論是螢幕小到不行的入門款 Smart Phone、螢幕大的 Galaxy Note、解析度超高的 iPad、輕巧的 Google Nexus 7 都可以做 Responsive Web Design 。

缺點:
1. 載入速度較慢
因為是使用同一份的網頁檔案 ,所以載入速度跟在電腦上看是一樣的。手機上做的適應性網頁只是把元素隱藏,事實上載入速度並不會變快。
2. 成本較高
在手機上的瀏覽慣性與在傳統PC上是完全不一樣的,所以要有一個好的使用體驗的話,設計師就必須多花心思,設計符合閱讀的流程,也因此會拉長設計的時間。

姑且不論網站是使用何種方式來撰寫,在手機上要讓使用者「順暢」的瀏覽才是最重要的課題。

在手機上觀看網頁主要的重點就是盡量讓一隻手就能操作,若在閱覽的過程中還要使用放大手勢,將會大大的降低使用者的閱讀體驗。

想想看一天當中可能有多少人透過手機來造訪的您的網站,又有多少人因為這些不便而離開?您是不是已經因為沒有做手機版網站設計而錯過了許多商機?尤其如果是線上購物網站,就更需要架設手機版網頁了。

設計一個優良的手機版網頁,首先著重的就是閱讀動線,需要的專業知識與技術比一般網頁更多、更雜,所要考量的因素也更多,因此您需要找尋絕對專業的行動裝置 (手機版) 網頁設計公司,多作比較。

行動裝置革命才剛剛開始沒多久,馬上行動擁有手機版網頁設計,您也可以追上這股趨勢!

適應性網頁系列延伸閱讀:
1.適應性網頁設計 Responsive web design
2.適應性網頁設計原理介紹
3.什麼樣的網站適合做適應性網頁?
4.手機版網頁設計已經是現在式

熱門標籤

Website DesignOnlineBooking SystemInternet Marketing  全方位網站設計規畫團隊  愛貝斯網路愛貝斯網路有限公司