手機版網頁設計有兩種製作的方式,一個是獨立版的手機網頁設計,也就是獨立網址;
另一個則是所謂的適應性網頁設計,也就是同一網址在不同大小的螢幕自動排版網頁內容。
以下是觀看國內外文章的總整理概論~~




設計手機版網站的重點:

1.確定你的客戶瀏覽手機網站的目的
以USER的角度思考,當使用電腦跟手機的地點、目的不同時,我們也要賦予電腦版網站跟手機版網站不同的功能。




2.重新思考瀏覽動線

  1. 從網友要看的重點中,就能重新思考並安排整個網站的瀏覽動線。
  2. 審慎安排每個重點的位置,如電話、地圖、產品資訊,可以縮短網友尋找資料的時間。 > 可參考:想要提高網頁轉換率?


3.簡化 簡單 但絕不能簡陋
手機、平板這些行動裝置的螢幕比電腦小,處理效能也不一定比電腦好,因此設計必須要簡單,
儘可能縮小網站檔案,才能縮短網頁載入的時間,即使在3G環境下也能順利瀏覽。


4.加強手機導覽功能

  1. 手機閱讀文章時要從最後回到頂端還挺麻煩的,因此讓單元列與分類清楚好找,可以加強導覽功能、減少捲動畫面的頻率。
  2. 另外「回到首頁」、「回到上一頁」的導覽功能鍵也很重要,必須清晰、易點選。




5.以觸控螢幕為出發點

  1. 手機上的按鍵、超連結若沒有1個食指尖大(約44px),將會是一場永遠都點不到的悲劇。
  2. 因為手機只能點擊,沒有hover的特效,像下拉選單、滑鼠移過去變色等效果都需捨棄。 > 可參考:44px的說明

6.視覺回饋是細節 也是重點

  1. 讓網友在點選時可以看到按鈕的顏色變化,可以讓網友知道他已經點擊成功,能避免網友重複點擊。
  2. 載入網頁時呈現loading畫面,讓網友知道網頁正在載入,也能避免網友重複點選、延遲載入的時間。

7.善用手機原生功能
機版網站可以一鍵撥號、可以一鍵開啟地圖,透過手機原生功能可以加快交易速度。


製作的方式:



1.獨立網址的手機版網頁設計
優點:

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

缺點:

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

2.響應式網頁 (RWD)
優點:

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

缺點:

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

原理介紹:
主要核心技術是css3 media query,就是讓不同解析度去套用不同的css設定
(看起來很簡單,但會真的實作起來要注意的雜事很多)


適合的族群:

  1. 以網站的目標族群來考量

    除了以下要素:

    具有流程面 ex:購物行為(線上購物車)

    資訊量很大 ex:報紙、雜記等網站

  2. 以網頁設計排版角度來考量

結構複雜不宜
如按鈕、分類等可以超連結的元件很多,或是喜歡電腦版有許多花邊元件的網站業主,建議做手機版網頁設計

結構單純,可區塊化
以靜態圖文資訊為主要內容,資訊單純,且資訊結構以區塊化呈現。喜歡這種簡潔排版的網站業主,適合做自適應網頁設計


製作需:
Media Query 引用方式 ( 兩種方式 )

  1. CSS 檔案中,用 @media 來判斷使用者螢幕寬度,選擇載入哪一段 CSS。(範例)

  2. HTML 的 載入的地方,用 media 屬性判斷使用者裝置寬度,選擇載入哪一個 CSS 檔案。

    ex: link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css"

Viewport設定

meta name="viewport" content="width=device-width; initial-scale=1.0"

如果網頁的標頭沒有做這組設定的話,手機會以高解析度來呈現畫面,這就讓字變得很小。(就是手機看PC網站)



參考:
http://www.hongkiat.com/blog/mobile-web-design/
http://www.ibest.com.tw/service/mobile_element.php

關於作者

  • 羅拉拉 / 前端工程師
  • 我的理念是:不是只要好看,還要好用,不只要好用,還要好維護。
  • Blog
  • facebook

關於作者

  • Luki / 前端工程師
  • 冷靜思考,沉著應對。
  • Blog
  • facebook

關於作者

cythilya

  • Cythilya / 前端工程師
  • SEO & Social Media
  • Blog
  • Facebook
Author:Grace
Author:Ryan
Author:Winston
Author:Ader