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

3,420 views

Published on

Published in: Technology, News & Politics
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,420
On SlideShare
0
From Embeds
0
Number of Embeds
1,575
Actions
Shares
0
Downloads
15
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • ( 僅出現相關的就好 , 減低頁面的分量及減少 scrolling)
  • Inspire dgt 網路技術分享_手機網頁的二三事_20110214

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

    ×