傳統 Web 遇上 Web App
在行動裝置上，用戶的體驗 (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 介紹