heavenchou - 周日, 2011/12/04 - 14:21
11/29 去聽了「HTML5．網路新勢力」在高雄場的研討會
主要的收獲有二點：
- 網站要升級至 HTML5 的方法及注意事項。
- 網站針對行動裝置的設計方法及注意事項。
相關的簡報檔可以在這裡下載 : http://bit.ly/w3CtZF
先前寫過一篇是網站要升級至 HTML5 的心得，該場是黃保翕 ( Will 保哥 ) 所主講的。
底下則是網站針對行動裝置設計的心得整理，該場是黃忠成先生所主講的。
1. 雖然平版（這裡指 iPad）也是小螢幕，但其大小也可以視為小筆電了，所以這篇主要還是針對一般智慧手機所提出的觀點。
2. 智慧手機的使用者愈來愈多，這是網站設計者不可忽略的用戶層。【後記】：前幾天預購 iPhone 4S 就將中華電信、台哥大及遠傳的網站都塞爆，其趨勢可見一般。
3. 手機的瀏覽器雖然有努力去適應一般的網站，不過在實際使用上依然需要不斷地放大縮小，這些都是蠻不方便的。若能針對手機畫面來另外設計網站，相信使用者是會感到貼心的。
4. 使用以下的 meta 標記會讓瀏覽器自動將網頁縮放至裝置的大小，免得瀏覽器的畫面縮到太小而看不清楚。iPhone, Android, Windows Phone 7 都接受此用法。
<meta name="viewport" content="width=device-width" />
5. 設計手機網頁有個要特別注意的事項，就是最好能做到單指也能操作。
6. 由於畫面的限制，最好設計成單欄的模式 (Single Column Layout)。
7. 為了使用者選取文字更方便，若文字在表格中，可以直接在 <td> 使用 mousedown 事件，讓使用者點選整個方格都有作用。
8. 善用 jQuery Mobile (http://jquerymobile.com)，jQuery Mobile 是專為行動裝置所設計的一組 CSS + JavaScript Library。
9. 這裡有很多介紹 : http://jquerymobile.com/test，底下的說明也和此有關。
10. 大部份的手機瀏覽器都沒有最上方的視窗標題列，所以可以在畫面上方設計適當的標題列 (Header bars)。某些手機瀏覽器可能不會有「回上一頁」的按鍵，也可以在標題列加入「回上一頁」的功能，讓使用者有一致的操作經驗。
11. 除了標題列 (Header bars)，jQuery Mobile 也有提供 Navbar (導覽列) 及 footer bars，都可以放置指定功能的按鈕。
12. jQuery Mobile 提供 Multi Page 的功能，可以在 HTML 中放入許多 Page，第一次只顯示第一個 Page，再透過連結，可切換至其它 Page，切換 Page 時還可以選擇許多動態的過場效果。
13. Page 注意事項：jQuery Mobile 預設使用 Ajax 來讀取頁面，所以常用的 ready() 函式並不適用，要改成 pageInit()。還有，當 page 以 Ajax 載入時，在 head 區域的 Scripting 都會失效，所以要使用的 Scripting 要放在 page 的頭或尾皆可。
14. jQuery Mobile 提供五種 Theme，可套用在許多元件中。也有按鈕及各種現成的小圖示，讓使用者很快就搭配出美觀的畫面。
15. 可以輕鬆做出多組的 Collapsible Contrl 效果，也就是起初只列出標題，點選後會下拉展開相關文字。
16. jQuery Mobile 還提供許多種現成的元件，如 Text Inputs , Search Inputs , Slider , Toggle Switch , Radio Button , Check Box , Select Menu , Dialog ... 等。
17. 以上各功能的詳細說明請參考 jQuery Mobile 官方網頁，相信善用這些工具，就可以輕鬆做出美觀大方的 Mobile 網頁。
重要度:
文章分類:
- 瀏覽次數：16672
發表新回應