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