首先掌握基礎

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

創(chuàng)建清晰的需求描述

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

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

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

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

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

讓我們來看看一些優(yōu)秀web apps的假想的目標描述：

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

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

¨ WANDERFLY – 幫助用戶根據他們的興趣和預算發(fā)現(xiàn)新應用。

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

自成體系

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

讓用戶集中于應用

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

Figure 2.2 – 保持自我是一種優(yōu)點！

功能設計

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

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

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

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

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

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

Figure 2.3 – 保持應用體驗的特點。 隱藏起傳統(tǒng)元素！

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

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

讓完成任務變得容易

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

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

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

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

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

利用設備的能力

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

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

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

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

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

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

使用多媒體加強用戶體驗和沉浸體驗（IMMERSIVENESS）

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

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

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

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

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

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

遵循下列設計模式

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

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

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

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

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

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

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

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

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

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

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

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

本文編譯自ling，原文地址。

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

延伸閱讀：

• Google Web App開發(fā)指南第三章：案例研究（下）
• Google Web App開發(fā)指南第二章：交互設計
• Google Web App開發(fā)指南第一章：什么是Web Apps？

標簽： Web-App App �发指�

版權申明：本站文章部分自網絡，如有侵權，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權歸原作者所有，如需使用，請與原作者聯(lián)系。