首先掌握基礎(chǔ)

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

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

偉大的web apps讓用戶很容易集中注意力。人們?cè)谀扯螘r(shí)間內(nèi)只能集中于少數(shù)幾件事，因此，與那些提供給用戶很多選擇和很多特性的web apps相比，人們更喜歡那些沒有干擾能讓用戶輕松完成手頭任務(wù)的應(yīng)用。

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

1．集中于人們使用你的應(yīng)用的主要場(chǎng)景，限制用于其他場(chǎng)景的資源。

2．將正交或無關(guān)的任務(wù)分割成各自獨(dú)立的應(yīng)用程序，這可能意味著你的網(wǎng)站要提供多種應(yīng)用，但每一種應(yīng)用都是幫助集中于完成一個(gè)單一的任務(wù)。

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

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

¨ GOJEE – 手邊的個(gè)性化食譜。

¨ ASTRID – 幫助個(gè)人和團(tuán)隊(duì)有效組織和完成日常事務(wù)的待辦事項(xiàng)清單，并讓人們享受其中。

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

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

自成體系

雖然web apps可能會(huì)導(dǎo)入其他網(wǎng)站或應(yīng)用程序的數(shù)據(jù)，但它們幾乎都是自成體系的，它們都能讓用戶無需導(dǎo)航到其他網(wǎng)站或應(yīng)用就能夠完成他們的任務(wù)。根據(jù)這個(gè)定義，搜索引擎就不是一個(gè)應(yīng)用，因?yàn)樗鼤?huì)將用戶導(dǎo)航到到其他網(wǎng)站以完成他們的任務(wù)。

讓用戶集中于應(yīng)用

當(dāng)用戶打開一個(gè)web app的時(shí)候，他們期待這個(gè)應(yīng)用就像是一個(gè)單個(gè)應(yīng)用，而不是一系列網(wǎng)頁的集合。一個(gè)偉大的web app會(huì)將自己作為一個(gè)獨(dú)立實(shí)體，和網(wǎng)站區(qū)分開來，而不是掩埋在網(wǎng)站的導(dǎo)航體驗(yàn)之下。

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

功能設(shè)計(jì)

偉大的web app設(shè)計(jì)消除了不必要的組件，讓用戶可以集中于完成任務(wù)所需的核心組件。在設(shè)計(jì)你自己的應(yīng)用的時(shí)候，牢記以下準(zhǔn)則是非常重要的：

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

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

3.根據(jù)應(yīng)用的核心場(chǎng)景設(shè)計(jì)導(dǎo)航，去除典型的web頁面導(dǎo)航。你的頁面很可能并不需要一個(gè)home按鈕，或者導(dǎo)航分類菜單，將用戶帶向站點(diǎn)的不同部分。

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

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

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

鼓勵(lì)用戶進(jìn)行交互、參與、完成任務(wù)

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

讓完成任務(wù)變得容易

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

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

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

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

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

利用設(shè)備的能力

Web apps可以感知地理位置，提供關(guān)于設(shè)備動(dòng)作的詳細(xì)信息，甚至可以在硬盤上存儲(chǔ)數(shù)據(jù)。

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

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

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

2.將設(shè)備的動(dòng)作作為游戲的新的輸入，而不是使用鼠標(biāo)或者光標(biāo)。用戶可以通過晃動(dòng)設(shè)備來移動(dòng)游戲中的角色。

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

使用多媒體加強(qiáng)用戶體驗(yàn)和沉浸體驗(yàn)（IMMERSIVENESS）

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

使用多媒體豐富應(yīng)用的一些策略包括：

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

2.永遠(yuǎn)讓用戶能夠去屏蔽聲音或者其他多媒體應(yīng)用，因?yàn)閷?duì)用戶來說這些多媒體應(yīng)用可能是一種干擾。

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

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

遵循下列設(shè)計(jì)模式

使用類似于native apps的設(shè)計(jì)模式

所有的視覺外觀、視覺交互以及動(dòng)作界面給人的感覺應(yīng)該都是web app的感覺，而不是網(wǎng)站的感覺。Web app的交互性使得它與native app的設(shè)計(jì)慣例是天作之合。

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

1.要到應(yīng)用的其他部分時(shí)，使用觸發(fā)各種動(dòng)作的按鈕，而不是導(dǎo)航到應(yīng)用不同部分的鏈接。

2.在整個(gè)應(yīng)用中使用工具欄和菜單訪問所需要的常見功能。

3.使用對(duì)話框來提醒用戶或從用戶那里獲得信息，而不是導(dǎo)航到新的頁面。使用一個(gè)CS架構(gòu)模型。

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

Figure 2.5 –使用熟悉的設(shè)計(jì)模式來加強(qiáng)交互度和沉浸體驗(yàn)！

下面是你在設(shè)計(jì)你的web app時(shí)需要考慮的內(nèi)容：

1.使用AJAX調(diào)用來傳輸數(shù)據(jù)，而不是依賴于請(qǐng)求-應(yīng)答模型，因?yàn)樵谡?qǐng)求-應(yīng)答模型中，整個(gè)頁面都需要來回傳輸，包括所有的數(shù)據(jù)和表現(xiàn)層。

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

如果你在設(shè)計(jì)的時(shí)候尊崇了這些指南，那么你的app就會(huì)感覺更快，并且像是一個(gè)native app。

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

譯文出處：Web App Trend，轉(zhuǎn)載請(qǐng)注明出處鏈接。

延伸閱讀：

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

標(biāo)簽： Web-App App �发指�

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