在行動裝置上，用戶的體驗 (User experience) 不同，操作方式也是不一樣的。傳統 Web 操作環境，用戶使用大螢幕（最少也有 15 吋以上）配上滑鼠點擊進行瀏覽，到了行動裝置卻是小螢幕配上或許靈活的手指觸控。如果開發者使用以往 Web 開發思維與介面來設計 App，那麼在 App 上是無法獲得最佳的使用者經驗。
只是利用內嵌瀏覽器開啟 Web 頁面封裝為 App，這樣的作法將無法帶給 App 任何的用戶體驗，也是註定會失敗的產品，此外也失去了原本 App 最本位的特性。
App 與傳統 Web 操作上的差異
我們先來比較一下 Web 與 App 究竟有哪些不同？
- 主要輸入裝置：滑鼠 / 手指
Web 使用滑鼠 App 使用手指，手指不像滑鼠那麼靈敏，原本滑鼠容易點擊的按鈕設計，在 App 就變成容易出錯的設計。例如按鍵過小、點擊事件偵測、點擊範圍等等。 - 輸入邏輯：滑鼠游標 / 多點觸控
在 PC 瀏覽網頁透過單一的指標進行點擊，App 使用手指並強調多點觸控能力，可視範圍的動態縮放變得更重要。 - 可視範圍：大螢幕 / 小螢幕
為了適合行動裝置閱讀，字型大小的設計必須洽當，任何多餘的設計都會佔據不必要的版面而造成浪費。 - 資料瀏覽：滑鼠滾輪捲動 / 手指頁面滑動
在 PC 瀏覽網頁資訊我們的習慣是滾動滑鼠滾輪，然而在 App 常用手指來滑動畫面。這裡的滑動與傳統瀏覽器的滾動有些差異，滾動的感覺有點想是在推頁面，滑動而是加入的重力的設計（讓頁面可以自動滑動與減速），在 App 中這是一項很重要的用戶體驗。 - 動態佈局：固定 / 旋轉
現今的手持式裝置都擁有偵測方向（加速器）的能力，不同於傳統 PC 不會旋轉的固定螢幕，更需要適時的重新調整版面 Layout 來符合使用者閱讀環境，最近的 Responsive web design 也剛好用在 Web App 的設計上。
注重設計細節來提升使用者體驗
無論是 App 或者 Web，使用者體驗都一直是重要的，也是我們開發人員最關切的議題。以下幾點在設計時也要多注意：
- 設計適合裝置顯示的操作的介面
區分 Phone 與 Tablet 的操作介面是必要的，兩者實際上的操作環境不同，例如 Phone 多以直式操作、Tablet 多以橫式操作。 - 重視 OS 專屬的使用經驗
除了上述的幾點設計上的差異之外，要設計出一的好用的 App 還需要注意更多設計。像是特定 OS 的用戶體驗也是很重要的，例如 iOS 與 Android 在手機設計的概念上不同，iOS 只有一個 Home 鍵，然而 Android 最少有 Home, Menu, Return 三個按鍵，因此用戶體驗也不同。雖然 Web App 可以跨平台，但是搭配不同的作業系統設計不同的操作邏輯也是必要的實作細節。 - 按鍵與字型顯示大小
謹慎考慮螢幕每一個元素顯示的大小與位置，透過設計更有效的運用顯示空間。 - 支援離線執行
多利用 HTML 5 的特性實作離線功能，別讓你的 App 在沒有網路時變得一無是處。
此外更少的操作步驟、更友善的設計、更靈敏的介面、結合裝置硬體能力、加速與快取設計等等，都是開發 Web App 時可以下功夫的幾個方向。
系列文章
- Web App 行動開發 (1) - Web App 開發介紹
- Web App 行動開發 (2) - 如何設計出一個好用的 Web App？
- Web App 行動開發 (3) – Sencha Touch 開發環境建置
- Web App 行動開發 (4) – Sencha Touch 基本架構介紹
- Web App 行動開發 (5) – Sencha Touch 物件導向類別系統介紹
- Web App 行動開發 (6) – Sencha Touch 初探 Application
- Web App 行動開發 (7) – Sencha Touch Device Profile 實作教學
- Web App 行動開發 (8) – Sencha Touch Component 介紹