Google Web App開發指南之構建優秀的Web Apps
構建漂亮的應用
一個web app的視覺設計不僅要看起來美，也要用起來讓人覺得方便，你的應用的美學設計將直接影響人們使用應用時的易用性。一個有著豐富視覺感受的應用既能讓人用起來愉快，又不會分散人的注意力。它注重美觀，使用類似于native apps設計模式的同時又不失易用性。
美觀的圖片、顏色、字體和速度、易讀性、易用性之間需要達到均衡。用戶和文化背景也非常重要，因為在不同文化中，顏色、布局以及文字選擇可能有不同含義。應用的視覺設計不僅要讓用戶感覺愉悅，也要讓他們覺得使用方便。
使用開放web特性來提供漂亮的設計
人們期待看到的web apps是與客戶端或者mobile apps有著同樣的視覺感受，而不是和平淡的web內容一樣。
Figure 4.1 -美不美由應用的使用者說了算!
開發者可以通過使用以下技術來創造豐富的沉浸體驗：
1.具有交互性和用戶相關性的實時繪圖界面。
2.加強可讀性的字體和排版特性。
3.增加美觀的紋理、漸變和變形，又要保證不會讓人分心。
4.提示應用當前進度的圖像和動畫。
5.高質量高分辨率的圖片，無論用戶如何調整瀏覽器窗口，這些圖片都不失美觀。
6.在應用中使用現實世界中也有的圖像、圖示和圖標，增加熟悉感和現實感，讓用戶容易將現實生活中的經驗轉移到應用中去。
有用的資源：
文章
- 更有意義的字體 –來自于 Tim Brown所寫的書的一掌
- 網頁排版 – 來自于 Jason Santa Maria所寫的書的一章
- SAFARI CSS 視覺效果指南
手冊
庫& 框架
- GOOGLE WEB FONTS API -Google Web Fonts讓每個人都能很快制作web fonts，包括專業設計人員和開發人員。我們相信在制作好網站的道路上不應該有任何障礙。
- TYPEKIT -簡單、符合標準的、容易獲取的、完全合法的web字體。
- CSS3 GRADIENT GENERATOR - 展現了CSS gradients的強大力量。
- ULTIMATE CSS GRADIENT GENERATOR -來自于 ColorZilla 的一個強有力的類似于Photoshop CSS gradient 編輯器。
樣例
使用全屏
Web頁面和web apps之間的一大區別就是它們如何使用可用的屏幕空間。好的web apps和客戶端應用一樣，會占滿可用的屏幕空間。
要有一個好的視覺設計，設計者應該做到：
讓你的app看起來像是一個應用，而不是一個有著左右邊框的網站。
將可用的屏幕空間占滿。因為你不能確定設備具體尺寸，那么讓內容可以根據屏幕大小進行調整，支持屏幕窗口大小調整，并且在需要的時候使用滾動。
避免固定寬度的布局，因為這樣的布局的左右邊框會讓用戶聯想起web頁面。
使用Full Screen API在合適的時候提供一個全屏界面。
Figure 4.2 -采用各種方式去引導你的用戶!
使用全屏的web apps包括：
Web apps不應使用傳統的導航元素
Web apps不應以來傳統的瀏覽器導航元素，比如后退、前進、刷新按鈕的等。它們也不應該使用傳統的頁面內導航元素，比如左側或者頂端的向下鏈接。
盡管web apps不使用這些傳統的導航元素，它們可能使用地址欄以保存或共享狀態，使用向前或向后按鈕在不同狀態間切換。用戶不再使用鏈接在不同頁面間切換，而是使用按鈕來改變當前內容的狀態。。
讓使用變得簡單
人們在面對復雜冗長的注冊過程時往往會望而卻步。如果你的應用需要用戶登錄，那么，這個過程需要非常簡單，只需要最少的信息就可以了。如果可能的話，讓用戶可以通過一個已有的OpenID來注冊。在可以少管理一些賬戶和密碼的時候，用戶是非常開心的。
為了減少用戶被嚇走的幾率，讓注冊登錄過程更為簡單，可以按如下方式去做：
1. 對于不想登錄或注冊的用戶提供應用。
2. 對于選擇注冊登錄的用戶進行一些獎勵，比如附加功能或是更為完整的服務。
3. 支持通過OpenID來注冊，比如Google賬戶，以減少用戶需要記憶的用戶名和密碼。
4. 如果你已經有了一個登錄系統，考慮將其與OpenID建立關聯。
在這些方面做的很好的WEB APPS ：
ETHERPAD - EtherPad讓用戶可以立刻開始使用應用，并且只在用戶想要保存的時候才要去他們注冊。
PICNIK -讓登陸門檻很低，用戶可以不用登陸或注冊就能編輯并保存照片。
Figure 4.3 – 讓人們在初次嘗試時就覺得簡單!
有用的資源：
庫 & 框架
GOOGLE IDENTITY TOOLKIT (GITKIT) 是一個免費工具包，網站經營者可以使用它讓用戶通過郵件地址和密碼登陸，并通過聯合登陸替換密碼。
JANRAIN LOGIN HELPER 幫助網站實現基于電子郵件的注冊，通過內聯電子郵件驗證幫助注冊轉換。
樣例
OPENID WIKI GALLERY –– 一個使用用戶已有賬戶的創新性的登陸注冊應用。
提供離線功能，提升性能
開發者應該提供離線應用功能，并且通過在本地緩存應用數據來提升性能，在用戶聯網的時候只解析需要的數據。
要提升性能并提供離線功能，可以按如下方式去做：
◆ 使用應用緩存來確保瀏覽器將必須的應用代碼進行了緩存，比如HTML、CSS和Javascript。
◆ 使用web存儲來保存少量需要快速獲取的信息，或者將這些信息保存在cookies中。
◆ 將組織好的數據存儲一個web數據庫，比如IndexedDB，它能讓你存儲大量數據，并且能進行高效查詢和遍歷。
在這方面做的很好的WEB APPS：
AMAZON KINDLE CLOUD READER – 使用 AppCache, 本地存儲以及WebSQL可以在 iOS上的以及桌面版的瀏覽器中工作。
SPRINGPAD- 使用 AppCache, 本地存儲以及WebSQL，提供了一個不論是否在線都能使用的應用。
THE NEW YORK TIMES WEB APP – 使用 AppCache以及WebSQL，提供了一個再iOS以及桌面瀏覽器上都能工作的離線應用。
Figure 4.4 – 讓數據保存在手邊以提升性能!
有用的資源：
文章
庫 & 框架
#p#
提供數據自動同步
Web apps讓用戶可以將數據保存在云中。用戶應該能夠確信他們的工作是安全的，他們不必去考慮他們是何時何地保存的數據，或者他們手上正在使用的是否是***版本的數據。Web apps讓用戶可以集中于工作而不必擔心工作是否安全。
為了提供好的體驗，WEB APPS 需要:
在本地保存數據并經常和云端進行同步，這樣人們就不必擔心網絡連接或者他們離開應用以后數據會發生什么
在用戶第二次登陸時讓用戶處于他們上次離開時的狀態，讓他們能很快撿起上次遺留的工作，更有效率
有用的資源：
手冊
Figure 4.5 – 使用AppCache 以及數據一致性技術來加強易用性，即使是在離線情況下!
通過提示讓用戶知道更充分的信息
客戶端應用通過狀態消息、進度條、對話框通知和其他方法來讓用戶知道更充分的信息，了解應用目前在做什么及其進度; web apps也應用做到這一點。
要讓用戶保持信息充分，了解應用在做什么及其進度，可以按如下方式去做：
◆ 顯示加載提示，這樣用戶就能明白有一個任務正在進行中。
◆ 使用HTML提醒來提供一些用戶可能想要實時知道的重要信息。
◆ 使用HTML5的進度元素來顯示進度。
◆ 顯示模態對話框(modal dialogs)來讓用戶提供更為具體的信息或者應用完成了需要進行的處理以后再讓用戶繼續前進。
◆ 動畫動作可以模擬現實世界中的一些動作，讓用戶更容易理解當前過程。
在這方面做的很好的WEB APPS:
有用的資源：
文章
手冊
庫 & 框架
- BOOTSTRAP MODAL –根據傳統的模態js插件所作的簡化
- JQUERY UI - jQuery UI 提供了一套綜合性的核心交互插件、UI插件以及視覺效果
允許使用拖放來上傳或者下載文件
如果你的應用與處理文件相關，那么你應該讓用戶很容易完成相關操作。永遠不應該讓用戶去猜測他們的文件是否已經下載下來了、文件下載到何處，也不應該讓用戶想要分享文件的時候感覺到困難。
在處理文件時:
在文件輸入類型中使用多屬性或目錄屬性讓用戶可以上傳多個文件或者整個文件夾。
使用拖放，讓用戶可以從自己的計算機拖動文件到你的應用程序，反之亦然。
通過使用File System APIs來在用戶機器本地來存儲或處理文件。
在這方面做的很好的WEB APPS:
- GMAIL – 允許你將附件拖入郵件消息中。
- GOOGLE DOCS – 允許你通過將文件拖入瀏覽器來上傳文件。
- BOX.NET – 通過將文件拖入上載部件讓上傳文件很容易。
- APPMATOR – 可以通將文件拖出瀏覽器來下載你剛剛創建的Chrome Web Store app package file，讓下載十分容易。
Figure 4.6 – 提供多文件上傳。
有用的資源：
手冊
將性能也看做是一個特性
沒有什么比人們的時間更寶貴了。用戶期待客戶端應用加載快，響應快。Web apps同樣需要達到這一指標。
要設計速度更快的應用，web apps應該：
先加載應用，再加載用戶數據。通過使用AppCache在本地保存你的應用代碼，你可以減少啟動應用時所需要的網絡請求。因為應用通過緩存保存在設備上了，它就能立刻啟動了。在應用需要解析任何數據的時候，都給出加載提示。
遵循網站及應用的快速響應的設計原則。你的web app仍然是基于web的，所以你仍然需要遵循網站設計時的一些快速響應的設計原則。
原文：http://www.webapptrend.com/2012/02/1894.html
【編輯推薦】
