Google Web App開發指南第二章：交互設計

　　首先掌握基礎

　　借用籃球界一個傳奇人物的話，在你做任何事之前，你必須“首先掌握基礎”。(說出這句話的是波士頓凱爾特籃球名宿Larry Bird，他同時也是一個Web App愛好者。)所有偉大的Web Apps都必須有一個清晰的集中點。

　　創建清晰的需求描述

　　偉大的web apps讓用戶很容易集中注意力。人們在某段時間內只能集中於少數幾件事，因此，與那些提供給用戶很多選擇和很多特性的web apps相比，人們更喜歡那些沒有干擾能讓用戶輕松完成手頭任務的應用。

　　為了確保你的應用有一個集中點，創建一個簡短描述，描述一下你的應用的目的和你的目標用戶群。要保證你能在三分鐘內將所有這一切向一個完全不了解的人描述清楚。

　　1.集中於人們使用你的應用的主要場景，限制用於其他場景的資源。

　　2.將正交或無關的任務分割成各自獨立的應用程序，這可能意味著你的網站要提供多種應用，但每一種應用都是幫助集中於完成一個單一的任務。

　　Figure 2.1 – 保持集中，別在其他地方用力太多!

　　讓我們來看看一些優秀web apps的假想的目標描述：

　　¨ GOJEE – 手邊的個性化食譜。

　　¨ ASTRID – 幫助個人和團隊有效組織和完成日常事務的待辦事項清單，並讓人們享受其中。

　　¨ WANDERFLY – 幫助用戶根據他們的興趣和預算發現新應用。

　　¨ KINDLE CLOUD READER – 隨時隨地閱讀你的Kindle圖書。

　　自成體系

　　雖然web apps可能會導入其他網站或應用程序的數據，但它們幾乎都是自成體系的，它們都能讓用戶無需導航到其他網站或應用就能夠完成他們的任務。根據這個定義，搜索引擎就不是一個應用，因為它會將用戶導航到到其他網站以完成他們的任務。

　　讓用戶集中於應用

　　當用戶打開一個web app的時候，他們期待這個應用就像是一個單個應用，而不是一系列網頁的集合。一個偉大的web app會將自己作為一個獨立實體，和網站區分開來，而不是掩埋在網站的導航體驗之下。

　　Figure 2.2 – 保持自我是一種優點!

　　功能設計

　　偉大的web app設計消除了不必要的組件，讓用戶可以集中於完成任務所需的核心組件。在設計你自己的應用的時候，牢記以下准則是非常重要的：

　　1.盡可能減少與功能無關的web頁面。例如，位於頁面左上方通常用於將用戶帶回主頁的logo，或者是頁面底端的鏈接，將用戶帶向服務條款、隱私策略、項目政策以及你的主頁。

　　2.盡可能減少頁面數量，讓應用盡量集中，不必從一個頁面切換到另一個頁面，而是從一個視圖切換到另一個視圖。

　　3.根據應用的核心場景設計導航，去除典型的web頁面導航。你的頁面很可能並不需要一個home按鈕，或者導航分類菜單，將用戶帶向站點的不同部分。

　　4.讓基本組件一直可見，這樣人們就能很容易將注意力集中在正確的地方。

　　5.無論用戶在哪一步，都在應用中提供一個一致的設計和應用體驗。例如，不管用戶是在寫郵件、搜索郵件還是查看信息，退出按鈕、返回收件箱按鈕、寫新郵件按鈕，都應處於不同視圖的同一位置。

　　Figure 2.3 – 保持應用體驗的特點。 隱藏起傳統元素!

　　鼓勵用戶進行交互、參與、完成任務

　　一個web app應用鼓勵用戶交互、參與並完成任務，而不是消極浏覽，比如購買電影票、寫文檔或者與朋友分享照片、視頻。不像網站，web apps給用戶提供了一種主人翁的感覺，他們可以和內容或其他人進行交互。

　　讓完成任務變得容易

　　很多人並沒有時間和精力去搞清楚該如何使用一個應用。你的web apps應該非常簡單，讓用戶很容易獲取信息，選擇他們下一步該做什麼。精簡你的界面，使用戶可以即時掌握如何使用它。

　　偉大的web apps是即刻可用的，或者在初次使用時只需要很少的訓練或者幫助。為了讓人們成功使用你的應用，你應該做到：

　　1.減少提供給用戶的選項數量，讓應用盡可能精簡，用戶輕松就能完成手邊任務。

　　2.對於控制鍵或者信息提示保持外觀和感覺上的一致，避免讓用戶要費一番精力才能找到或者搞懂某些功能。

　　3.為所有的控制鍵提供清晰的、易於理解的標簽，讓用戶容易知道控制鍵的功能。

　　利用設備的能力

　　Web apps可以感知地理位置，提供關於設備動作的詳細信息，甚至可以在硬盤上存儲數據。

　　現代浏覽器讓開發者能越來越多地利用設備的功能了。例如，web apps可以感知地理位置，提供設備運動方向的運動形式的詳細信息，甚至在硬盤上存儲數據。將來還會有更多功能，比如對攝像機、麥克風和許多其他組件的訪問。

　　下面是幾種你可以利用設備本身功能的方式：

　　1.在適當的時候，提供給用戶地理位置相關的信息，比如附近的飯店或其他場地等。

　　2.將設備的動作作為游戲的新的輸入，而不是使用鼠標或者光標。用戶可以通過晃動設備來移動游戲中的角色。

　　3.在處理大量數據時，將其存儲於用戶的計算機上，這樣就不必在每次應用啟動時傳輸大量數據了。

　　使用多媒體加強用戶體驗和沉浸體驗(IMMERSIVENESS)

　　豐富的多媒體體驗曾經只能在客戶端應用中出現，但現在web apps也可以實現給用戶提供豐富的多媒體體驗了。多媒體是整體體驗的一部分，例如游戲或者視頻聊天應用中的多媒體，或是以一種新奇的方式提醒用戶會議時間或者新消息。

　　使用多媒體豐富應用的一些策略包括：

　　1.為事件提供語義，比如新郵件通知，事件提醒。

　　2.永遠讓用戶能夠去屏蔽聲音或者其他多媒體應用，因為對用戶來說這些多媒體應用可能是一種干擾。

　　3.使用頁面可見性API(page visibility API)來阻止多媒體在用戶沒有看著你的應用的時候播放。

　　Figure 2.4 – 多媒體讓你的web app 鮮活起來!

　　遵循下列設計模式

　　使用類似於native apps的設計模式

　　所有的視覺外觀、視覺交互以及動作界面給人的感覺應該都是web app的感覺，而不是網站的感覺。Web app的交互性使得它與native app的設計慣例是天作之合。

　　一些幫助你做到這些的指南：

　　1.要到應用的其他部分時，使用觸發各種動作的按鈕，而不是導航到應用不同部分的鏈接。

　　2.在整個應用中使用工具欄和菜單訪問所需要的常見功能。

　　3.使用對話框來提醒用戶或從用戶那裡獲得信息，而不是導航到新的頁面。使用一個CS架構模型。

　　開發者要相信現代浏覽器可以提供他們構建偉大應用所需的特性。Web apps應用利用這些特性，將數據和表現層剝離開，以減少網絡開銷，提供離線浏覽，以及在需要修改表現層時不用修改整個應用。

　　Figure 2.5 –使用熟悉的設計模式來加強交互度和沉浸體驗!

　　下面是你在設計你的web app時需要考慮的內容：

　　1.使用AJAX調用來傳輸數據，而不是依賴於請求-應答模型，因為在請求-應答模型中，整個頁面都需要來回傳輸，包括所有的數據和表現層。

　　2.使用索引數據庫(IndexedDB)讓用戶產生的或者使用的數據存儲在本地。確保你不會遺失用戶的數據，永遠先將數據寫在本地，再將其同步到你的服務。

　　如果你在設計的時候尊崇了這些指南，那麼你的app就會感覺更快，並且像是一個native app。

　　本文編譯自ling，原文地址

　　譯文出處：Web App Trend，轉載請注明出處鏈接。