Google Web App開發(fā)指南：交互設(shè)計
首先掌握基礎(chǔ)
借用籃球界一個傳奇人物的話，在你做任何事之前，你必須“首先掌握基礎(chǔ)”。(說出這句話的是波士頓凱爾特籃球名宿Larry Bird，他同時也是一個Web App愛好者。)所有偉大的Web Apps都必須有一個清晰的集中點。
創(chuàng)建清晰的需求描述
偉大的web apps讓用戶很容易集中注意力。人們在某段時間內(nèi)只能集中于少數(shù)幾件事，因此，與那些提供給用戶很多選擇和很多特性的web apps相比，人們更喜歡那些沒有干擾能讓用戶輕松完成手頭任務(wù)的應(yīng)用。
為了確保你的應(yīng)用有一個集中點，創(chuàng)建一個簡短描述，描述一下你的應(yīng)用的目的和你的目標(biāo)用戶群。要保證你能在三分鐘內(nèi)將所有這一切向一個完全不了解的人描述清楚。
1.集中于人們使用你的應(yīng)用的主要場景，限制用于其他場景的資源。
2.將正交或無關(guān)的任務(wù)分割成各自獨立的應(yīng)用程序，這可能意味著你的網(wǎng)站要提供多種應(yīng)用，但每一種應(yīng)用都是幫助集中于完成一個單一的任務(wù)。
Figure 2.1 – 保持集中，別在其他地方用力太多!
讓我們來看看一些優(yōu)秀web apps的假想的目標(biāo)描述：
¨ GOJEE – 手邊的個性化食譜。
¨ ASTRID – 幫助個人和團隊有效組織和完成日常事務(wù)的待辦事項清單，并讓人們享受其中。
¨ WANDERFLY – 幫助用戶根據(jù)他們的興趣和預(yù)算發(fā)現(xiàn)新應(yīng)用。
¨ KINDLE CLOUD READER – 隨時隨地閱讀你的Kindle圖書。
自成體系
雖然web apps可能會導(dǎo)入其他網(wǎng)站或應(yīng)用程序的數(shù)據(jù)，但它們幾乎都是自成體系的，它們都能讓用戶無需導(dǎo)航到其他網(wǎng)站或應(yīng)用就能夠完成他們的任務(wù)。根據(jù)這個定義，搜索引擎就不是一個應(yīng)用，因為它會將用戶導(dǎo)航到到其他網(wǎng)站以完成他們的任務(wù)。
讓用戶集中于應(yīng)用
當(dāng)用戶打開一個web app的時候，他們期待這個應(yīng)用就像是一個單個應(yīng)用，而不是一系列網(wǎng)頁的集合。一個偉大的web app會將自己作為一個獨立實體，和網(wǎng)站區(qū)分開來，而不是掩埋在網(wǎng)站的導(dǎo)航體驗之下。
Figure 2.2 – 保持自我是一種優(yōu)點!
功能設(shè)計
偉大的web app設(shè)計消除了不必要的組件，讓用戶可以集中于完成任務(wù)所需的核心組件。在設(shè)計你自己的應(yīng)用的時候，牢記以下準(zhǔn)則是非常重要的：
1.盡可能減少與功能無關(guān)的web頁面。例如，位于頁面左上方通常用于將用戶帶回主頁的logo，或者是頁面底端的鏈接，將用戶帶向服務(wù)條款、隱私策略、項目政策以及你的主頁。
2.盡可能減少頁面數(shù)量，讓應(yīng)用盡量集中，不必從一個頁面切換到另一個頁面，而是從一個視圖切換到另一個視圖。
3.根據(jù)應(yīng)用的核心場景設(shè)計導(dǎo)航，去除典型的web頁面導(dǎo)航。你的頁面很可能并不需要一個home按鈕，或者導(dǎo)航分類菜單，將用戶帶向站點的不同部分。
4.讓基本組件一直可見，這樣人們就能很容易將注意力集中在正確的地方。
5.無論用戶在哪一步，都在應(yīng)用中提供一個一致的設(shè)計和應(yīng)用體驗。例如，不管用戶是在寫郵件、搜索郵件還是查看信息，退出按鈕、返回收件箱按鈕、寫新郵件按鈕，都應(yīng)處于不同視圖的同一位置。
Figure 2.3 – 保持應(yīng)用體驗的特點。 隱藏起傳統(tǒng)元素!
鼓勵用戶進行交互、參與、完成任務(wù)
一個web app應(yīng)用鼓勵用戶交互、參與并完成任務(wù)，而不是消極瀏覽，比如購買電影票、寫文檔或者與朋友分享照片、視頻。不像網(wǎng)站，web apps給用戶提供了一種主人翁的感覺，他們可以和內(nèi)容或其他人進行交互。
讓完成任務(wù)變得容易
很多人并沒有時間和精力去搞清楚該如何使用一個應(yīng)用。你的web apps應(yīng)該非常簡單，讓用戶很容易獲取信息，選擇他們下一步該做什么。精簡你的界面，使用戶可以即時掌握如何使用它。
偉大的web apps是即刻可用的，或者在初次使用時只需要很少的訓(xùn)練或者幫助。為了讓人們成功使用你的應(yīng)用，你應(yīng)該做到：
1.減少提供給用戶的選項數(shù)量，讓應(yīng)用盡可能精簡，用戶輕松就能完成手邊任務(wù)。
2.對于控制鍵或者信息提示保持外觀和感覺上的一致，避免讓用戶要費一番精力才能找到或者搞懂某些功能。
3.為所有的控制鍵提供清晰的、易于理解的標(biāo)簽，讓用戶容易知道控制鍵的功能。
利用設(shè)備的能力
Web apps可以感知地理位置，提供關(guān)于設(shè)備動作的詳細信息，甚至可以在硬盤上存儲數(shù)據(jù)。
現(xiàn)代瀏覽器讓開發(fā)者能越來越多地利用設(shè)備的功能了。例如，web apps可以感知地理位置，提供設(shè)備運動方向的運動形式的詳細信息，甚至在硬盤上存儲數(shù)據(jù)。將來還會有更多功能，比如對攝像機、麥克風(fēng)和許多其他組件的訪問。
下面是幾種你可以利用設(shè)備本身功能的方式：
1.在適當(dāng)?shù)臅r候，提供給用戶地理位置相關(guān)的信息，比如附近的飯店或其他場地等。
2.將設(shè)備的動作作為游戲的新的輸入，而不是使用鼠標(biāo)或者光標(biāo)。用戶可以通過晃動設(shè)備來移動游戲中的角色。
3.在處理大量數(shù)據(jù)時，將其存儲于用戶的計算機上，這樣就不必在每次應(yīng)用啟動時傳輸大量數(shù)據(jù)了。
使用多媒體加強用戶體驗和沉浸體驗(IMMERSIVENESS)
豐富的多媒體體驗曾經(jīng)只能在客戶端應(yīng)用中出現(xiàn)，但現(xiàn)在web apps也可以實現(xiàn)給用戶提供豐富的多媒體體驗了。多媒體是整體體驗的一部分，例如游戲或者視頻聊天應(yīng)用中的多媒體，或是以一種新奇的方式提醒用戶會議時間或者新消息。
使用多媒體豐富應(yīng)用的一些策略包括：
1.為事件提供語義，比如新郵件通知，事件提醒。
2.永遠讓用戶能夠去屏蔽聲音或者其他多媒體應(yīng)用，因為對用戶來說這些多媒體應(yīng)用可能是一種干擾。
3.使用頁面可見性API(page visibility API)來阻止多媒體在用戶沒有看著你的應(yīng)用的時候播放。
Figure 2.4 – 多媒體讓你的web app 鮮活起來!
遵循下列設(shè)計模式
使用類似于native apps的設(shè)計模式
所有的視覺外觀、視覺交互以及動作界面給人的感覺應(yīng)該都是web app的感覺，而不是網(wǎng)站的感覺。Web app的交互性使得它與native app的設(shè)計慣例是天作之合。
一些幫助你做到這些的指南：
1.要到應(yīng)用的其他部分時，使用觸發(fā)各種動作的按鈕，而不是導(dǎo)航到應(yīng)用不同部分的鏈接。
2.在整個應(yīng)用中使用工具欄和菜單訪問所需要的常見功能。
3.使用對話框來提醒用戶或從用戶那里獲得信息，而不是導(dǎo)航到新的頁面。使用一個CS架構(gòu)模型。
開發(fā)者要相信現(xiàn)代瀏覽器可以提供他們構(gòu)建偉大應(yīng)用所需的特性。Web apps應(yīng)用利用這些特性，將數(shù)據(jù)和表現(xiàn)層剝離開，以減少網(wǎng)絡(luò)開銷，提供離線瀏覽，以及在需要修改表現(xiàn)層時不用修改整個應(yīng)用。
Figure 2.5 –使用熟悉的設(shè)計模式來加強交互度和沉浸體驗!
下面是你在設(shè)計你的web app時需要考慮的內(nèi)容：
1.使用AJAX調(diào)用來傳輸數(shù)據(jù)，而不是依賴于請求-應(yīng)答模型，因為在請求-應(yīng)答模型中，整個頁面都需要來回傳輸，包括所有的數(shù)據(jù)和表現(xiàn)層。
2.使用索引數(shù)據(jù)庫(IndexedDB)讓用戶產(chǎn)生的或者使用的數(shù)據(jù)存儲在本地。確保你不會遺失用戶的數(shù)據(jù)，永遠先將數(shù)據(jù)寫在本地，再將其同步到你的服務(wù)。
如果你在設(shè)計的時候尊崇了這些指南，那么你的app就會感覺更快，并且像是一個native app。
系列：Google Web App開發(fā)指南：什么是Web Apps？
原文：http://www.html5rocks.com/webappfieldguide/case-studies/shipshot-4/
譯文出自：Web App Trend
【編輯推薦】
