Inspire dgt 網路技術分享_手機網頁的二三事_20110214
Upcoming SlideShare
Loading in...5
×
 

Inspire dgt 網路技術分享_手機網頁的二三事_20110214

on

  • 3,394 views

 

Statistics

Views

Total Views
3,394
Views on SlideShare
1,822
Embed Views
1,572

Actions

Likes
1
Downloads
10
Comments
0

8 Embeds 1,572

http://www.inspiredigital.com.tw 1379
http://recomx.com 120
http://61.220.44.163 55
url_unknown 11
https://www.google.com.tw 3
http://www.recomx.com 2
http://www.slideshare.net 1
http://webcache.googleusercontent.com 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • ( 僅出現相關的就好 , 減低頁面的分量及減少 scrolling)

Inspire dgt 網路技術分享_手機網頁的二三事_20110214 Inspire dgt 網路技術分享_手機網頁的二三事_20110214 Presentation Transcript

  • 手機網頁的二三事
  • Agenda
    • 行動網頁的優勢
    • 設計原則
    • 製作須知
    • 網站範例
  • Benefits of the Mobile Web
    • 允許在任意時地使用網路資源
    • Mobile 網路使用者日漸增加
    • 可利用手機現有的功能,連結網路上資源, 形成更個人化的使用者經驗。 (Ex: 電話簿、 Geo 定位、行事曆 )
  • 設計原則
    • 在設計之前:
    • Why should it be mobile?
    • What content should I make mobile?
    • 完整的 mobile 使用經驗是 ?
    • ->Know Your Audience
    • ->User-centered Design
  • 設計原則
    • 從架構來看:
    • 使用者沒有耐性循序點選階層性的連結
    • 應避免不斷 click 造成使用者流失
  • 設計原則
    • 越簡單越好:
    • 只提供有限的選擇 ( 篩選 )
    • 線性的網站結構 ( 減少選單階層 )
    • 每個頁面都至少帶有部分內容 , 或簡單的描述
    • 按照重要性或受歡迎程度排列選單
    • 簡單易懂的選單名稱
  • 設計原則
    • Layout 規劃建議:
    • 最好是垂直排列的表單 ( 考量使用習慣 )
    • 避免出現階層式的選單 (multiple level)
    • 轉換至 portrait mode
    • 避免在每頁都出現所有選單 ( 僅出現相關的就好 )
  • 實作須知
    • Page Titles ( 幫助使用者加入書簽 )
    • <title>Description of Page Content | Site Name</title>
    • XHTML MP 1.0 Doctype ( 宣告本網頁為手機版本 ) <!DOCTYPE html PUBLIC &quot;-//WAPFORUM//DTD XHTML Mobile 1.2//EN&quot; &quot;http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd&quot;>
    • 減少 scripts and embedded objects.
    • Redirects
    • Caching (IE not support) <meta http-equiv=&quot;Cache-Control&quot; content=&quot;max-age=300&quot;/>
    • Avoid Table ( 難以整理 增加檔案體積 )
    • Default Input Mode ( 當需要須入時 , 盡量嚴格限定 data type)
    • ImageSize ( 尺寸不要大於常用手機螢幕規格 )
    • Total Page Download Size ( 避免使用圖片 ->CSS)
  • 萬一上述原則都忘光 , 至少至少…
    • 手機網頁與 PC 網頁的轉址判斷
    • 注意檔頭宣告
    • 方法一:
    • <!DOCTYPE html PUBLIC &quot;-//WAPFORUM//DTD XHTML Mobile 1.2//EN&quot; &quot;http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd&quot;>
    • 方法二:
    • <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0&quot; />
  • 網站範例
    • 奇摩
    • http://m.yahoo.com  
    • AOL
    • http://m.aol.com  
    • 用平行標籤將使用者導向不同功能導向的版型
    • 個人化選單 (kijiji?)
    • 將新消息適量的展現在第一屏 ( 減少選單的階層 )
    • 設定地點可轉換各地區版本的 Yahoo
  • 網站範例
    • APPLELIFE
    • http://www.itouchtw.com/  
  • 網站範例
    • Google
    • 第一屏僅出現搜尋 BAR
    • 常用功能出現在第一屏下拉選單
    • 將所有功能 icon 化
    • 閱讀器和文件的服務 ( 使用者的黏著度 )
  • THANK YOU! Inspire digital 創異數位聯絡人 Fang Yi Chang 張芳儀 ‧ 客務總監 電話 : 02-7701-6199 # 274