web app設計:Web app的互動性設計

來源:互聯網
上載者:User

文章描述:Google Web App開發指南第二章:互動設計.

首先掌握基礎

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

相關閱讀:Web Apps的絕佳案例: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,原文地址。



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。