原文連結：DESIGNING WEB APPLICATIONS，翻譯：webapptrend
首先掌握基礎
借用籃球界一個傳奇人物的話，在你做任何事之前，你必須“首先掌握基礎”。（說出這句話的是波士頓凱爾特籃球名宿Larry Bird，他同時也是一個Web應用愛好者。）所有卓越的Web應用都必須有一個清晰的集中點。
建立清晰的需求描述
卓越的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的感覺，而不是網站的感覺。Web app的互動性使得它與native app的設計慣例是天作之合。
下面這些建議有助於你設計出有著native app感覺的web app：
1. 要到應用的其他部分時，使用觸發各種動作的按鈕，而不是導航到應用不同部分的連結。
2. 在整個應用中使用工具欄和選單訪問所需要的常見功能。
3. 使用對話方塊來提醒使用者或從使用者那裡獲得資訊，而不是導航到新的頁面。使用一個CS架構模型。
開發者要相信現代瀏覽器可以提供他們構建卓越應用所需的特性。Web apps應用利用這些特性，將資料和表現層剝離開，以減少網路開銷，提供離線瀏覽，以及在需要修改表現層時不用修改整個應用。
Figure 2.5 –使用熟悉的設計模式來加強互動度和沉浸體驗!
下面是你在設計你的web app時需要考慮的內容：
1. 使用AJAX呼叫來傳輸資料，而不是依賴於請求-應答模型，因為在請求-應答模型中，需要將整個頁面進行來回傳輸，包括所有的資料和表現層。
2. 使用索引資料庫（IndexedDB）讓使用者產生的或者使用的資料儲存在本地。確保你不會遺失使用者的資料，永遠先將資料寫在本地，再將其同步到你的服務。
如果你在設計的時候遵循了這些指南，那麼你的app就會感覺更快，並且更像是一個native app。