Google Web App開發指南第四章：構建優秀的Web Apps

Building Beautiful Applications The aesthetics of your application will directly affect how easily people are able to accomplish their goals with your application. A web application provides rich visual experiences that will delight the eye without distracting the mind; it puts a premium on aesthetics and uses similar design paradigms as native applications without sacrificing usability. Visually appealing images, color, and fonts are balanced against the needs for speed, scannable text, and ease of use. Audience and cultural context also matter as colors, layout or word choices may have different cultural meanings. Your application's visual design should please your users and improve usability for them. 構建漂亮的應用 一個Web App的視覺設計不僅要看起來美，也要用起來讓人覺得方便 你的應用的美學設計將直接影響人們使用應用時的易用性。一個有著豐富視覺感受的應用既能讓人用起來愉快，又不會分散人的注意力。它注重美觀，使用類似於native Apps設計模式的同時又不失易用性。 美觀的圖片、顏色、字型和速度、易讀性、易用性之間需要達到均衡。使用者和文化背景也非常重要，因為在不同文化中，顏色、佈局以及文字選擇可能有不同含義。應用的視覺設計不僅要讓使用者感覺愉悅，也要讓他們覺得使用方便。 Leverage the open web features to provide beautiful designs People expect to see web applications that are on par with the visual design of client or mobile applications instead of the sometimes uninspiring web content they’re used to. 使用開放Web特性來提供漂亮的設計 人們期待看到的Web Apps是與客戶端或者mobile Apps有著同樣的視覺感受，而不是和平淡的Web內容一樣。 DEVELOPERS CAN CREATE RICH IMMERSIVE EXPERIENCES BY USING: 1.Real time drawing surfaces that are interactive and relevant to users. 2.Fonts and other typographic features that enhance the readability of content. 3.Textures, gradients, and shapes that increase the visual appeal of your application without distracting from the content. 4.Graphics and images with animations to help users understand what is going on and inform them that the application is working. 5.High quality and high resolution images that will look good no matter how users size their browser window. 6.Real world graphics, illustrations and icons to provide a level of familiarity and realism. If people understand how to use those materials in the real world, they should be easily able to translate those experiences to the web application. 開發者可以通過使用以下技術來創造豐富的沉浸體驗： 1.具有互動性和使用者相關性的實時繪圖介面。 2.加強可讀性的字型和排版特性。 3.增加美觀的紋理、漸變和變形，又要保證不會讓人分心。 4.提示應用當前進度的影像和動畫。 5.高質量高解析度的圖片，無論使用者如何調整瀏覽器視窗，這些圖片都不失美觀。 6.在應用中使用現實世界中也有的影像、圖示和圖示，增加熟悉感和現實感，讓使用者容易將現實生活中的經驗轉移到應用中去。 RESOURCES TO HELP YOU Articles MORE MEANINGFUL TYPOGRAPHY - from A List Apart by Tim Brown ON WEB TYPOGRAPHY - from A List Apart by Jason Santa Maria SAFARI CSS VISUAL EFFECTS GUIDE Tutorials QUICK GUIDE TO IMPLEMENT WEBFONTS VIA @FONT-FACE AN INTRODUCTION TO CSS3 KEYFRAME ANIMATIONS Libraries & Frameworks GOOGLE WEB FONTS API - Google Web Fonts makes web fonts quick and easy to use for everyone, including professional designers and developers. We believe that there should not be any barriers to making great websites. TYPEKIT - Simple, bulletproof, standards compliant, accessible, and totally legal fonts for the web. CSS3 GRADIENT GENERATOR - The CSS3 Gradient Generator is a showcase for the power of CSS gradients. ULTIMATE CSS GRADIENT GENERATOR - a powerful Photoshop-like CSS gradient editor from ColorZilla. Examples CSS3 PATTERNS GALLERY 有用的資源： 文章 更有意義的字型 –來自於 Tim Brown所寫的書的一掌 網頁排版 – 來自於 Jason Santa Maria所寫的書的一章 SAFARI CSS 視覺效果指南 手冊 通過FONT-FACE快速實現WEBFONTS指南 CSS3 關鍵幀動畫簡介 庫& 框架 GOOGLE WEB FONTS API -Google Web Fonts讓每個人都能很快製作Web fonts，包括專業設計人員和開發人員。我們相信在製作好網站的道路上不應該有任何障礙。 TYPEKIT -簡單、符合標準的、容易獲取的、完全合法的Web字型。 CSS3 GRADIENT GENERATOR - 展現了CSS gradients的強大力量。 ULTIMATE CSS GRADIENT GENERATOR -來自於 ColorZilla 的一個強有力的類似於Photoshop CSS gradient 編輯器。 樣例 CSS3 PATTERNS GALLERY Use the whole screen One big distinction between web pages and web applications is the way that they use the screen real estate available to them. Like client applications, great web applications use all of the space available to them. When creating a great visual design, designers should: 1.Build your app to look like an application,, instead of a website with margins on the left and right. 2.Create a visual design that uses all of the space available to it. Because you can’t count on a specific size, size the content based on screensize, support window resizing and apply scrolling when needed. 3.Avoid fixed width layouts that have margins on the left or right side of the application which may remind users too much of web pages. 4.Use the Full Screen API that is available in many modern browsers to provide a full screen interface when appropriate 使用全屏 Web頁面和Web Apps之間的一大區別就是它們如何使用可用的螢幕空間。好的Web Apps和客戶端應用一樣，會佔滿可用的螢幕空間。 要有一個好的視覺設計，設計者應該做到： 1.讓你的App看起來像是一個應用，而不是一個有著左右邊框的網站。 2.將可用的螢幕空間佔滿。因為你不能確定裝置具體尺寸，那麼讓內容可以根據螢幕大小進行調整，支援螢幕視窗大小調整，並且在需要的時候使用滾動。 3.避免固定寬度的佈局，因為這樣的佈局的左右邊框會讓使用者聯想起Web頁面。 4.使用Full Screen API在合適的時候提供一個全屏介面。 WEB APPS THAT USE THE WHOLE SCREEN INCLUDE: GOJEE NEW YORK TIMES WEB APP WORD2 GITHUB ISSUES 60 MINUTES = GOJEE NEW YORK TIMES WEB APP WORD2 GITHUB ISSUES 60 MINUTES Web applications don’t use traditional navigational elements Web applications work without having to depend on browser navigation elements like the back button or forward buttons, reload, etcetera. They also work without the traditional in-page navigational elements like links down the left side or along the top. While web applications don’t use these traditional navigational elements, they may use the address bar to save or share state and the back or forward buttons enable to user to go back and forward through that state. Instead of using links to move the user between different pages, buttons are used to change the state of the existing content. Web Apps不應使用傳統的導航元素 Web Apps不應以來傳統的瀏覽器導航元素，比如後退、前進、重新整理按鈕的等。它們也不應該使用傳統的頁面內導航元素，比如左側或者頂端的向下連結。 儘管Web Apps不使用這些傳統的導航元素，它們可能使用位址列以儲存或共享狀態，使用向前或向後按鈕在不同狀態間切換。使用者不再使用連結在不同頁面間切換，而是使用按鈕來改變當前內容的狀態。 Make it easy to try & use People are quickly turned off by complex or lengthy sign-up processes. If your application requires people to log in, it should be an easy process that requests only the minimal information to get started. If possible, make it easier for people to sign up by leveraging an existing OpenID provider. Users will appreciate having fewer accounts and passwords. To help decrease the bounce rate, and make the sign up and sign in process easy: 1.Provide an experience for people who choose to not log in or create an account. 2.Reward users who choose to create an account and sign in with additional features and more integrated services. 3.Provide support for signing in via an OpenID provider such as a Google account, thereby reducing the number of usernames and passwords people need to remember. 4.If you already have a login system consider correlating the OpenID provider to the user account in your system. 讓使用變得簡單 人們在面對複雜冗長的註冊過程時往往會望而卻步。如果你的應用需要使用者登入，那麼，這個過程需要非常簡單，只需要最少的資訊就可以了。如果可能的話，讓使用者可以通過一個已有的OpenID來註冊。在可以少管理一些賬戶和密碼的時候，使用者是非常開心的。 為了減少使用者被嚇走的機率，讓註冊登入過程更為簡單，可以按如下方式去做： 1．  對於不想登入或註冊的使用者提供應用。 2．  對於選擇註冊登入的使用者進行一些獎勵，比如附加功能或是更為完整的服務。 3．  支援通過OpenID來註冊，比如Google賬戶，以減少使用者需要記憶的使用者名稱和密碼。 4．  如果你已經有了一個登入系統，考慮將其與OpenID建立關聯。 WEB APPS THAT DO THIS WELL TODAY INCLUDE: ETHERPAD - EtherPad allows users to start using the app immediately, and requires users to sign in only when they want to save. PICNIK - Keeps the barrier to entry low and allows users to edit and save their photos without ever having to log in or create an account. 在這些方面做的很好的WEB APPS ： ETHERPAD - EtherPad讓使用者可以立刻開始使用應用，並且只在使用者想要儲存的時候才要去他們註冊。 PICNIK -讓登陸門檻很低，使用者可以不用登陸或註冊就能編輯並儲存照片。 RESOURCES TO HELP YOU Libraries & Frameworks GOOGLE IDENTITY TOOLKIT (GITKIT) is a free toolkit for website operators who currently allow users to login with their email address and password, and would like to replace that password with federated login. JANRAIN LOGIN HELPER helps websites that enable email based sign-ups to increase conversions at registration by performing inline email verification. Examples OPENID WIKI GALLERY - a gallery of innovative sign-in and registration experiences that leverage user managed identity. 有用的資源： 庫 & 框架 GOOGLE IDENTITY TOOLKIT (GITKIT) 是一個免費工具包，網站經營者可以使用它讓使用者通過郵件地址和密碼登陸，並通過聯合登陸替換密碼。 JANRAIN LOGIN HELPER 幫助網站實現基於電子郵件的註冊，通過內聯電子郵件驗證幫助註冊轉換。 樣例 OPENID WIKI GALLERY – 一個使用使用者已有賬戶的創新性的登陸註冊應用。 Provide an offline experience and improve performance Developers can provide offline experiences and greatly increase the performance of their applications by caching data locally and only retrieving what’s necessary when they are connected. TO HELP IMPROVE PERFORMANCE AND PROVIDE AN OFFLINE EXPERIENCE: 1.Use Application Cache to ensure that the browser caches any necessary application code like HTML, CSS and JavaScript. 2.Leverage Web Storage to store small amounts of data that you’ll need quickly or might otherwise put in cookies. 3.Put structured data into a web database like IndexedDB which allows you to store significant amounts of data that is efficient to query and iterate across. 要提升效能並提供離線功能，可以按如下方式去做： 1.使用應用快取來確保瀏覽器將必須的應用程式碼進行了快取，比如HTML、CSS和Javascript。 2.使用Web儲存來儲存少量需要快速獲取的資訊，或者將這些資訊儲存在cookies中。 3.將組織好的資料儲存一個Web資料庫，比如IndexedDB，它能讓你儲存大量資料，並且能進行高效查詢和遍歷。 WEB APPS THAT DO THIS WELL TODAY INCLUDE: AMAZON KINDLE CLOUD READER - uses AppCache, local storage and WebSQL to provide an experience that works on iOS and desktop browsers. SPRINGPAD - uses AppCache, local storage and WebSQL to provide an experience that works both online and offline. THE NEW YORK TIMES WEB APP - uses AppCache and WebSQL to provide an offline experience that works on iOS and desktop browsers. 在這方面做的很好的WEB APPS： AMAZON KINDLE CLOUD READER – 使用 AppCache, 本地儲存以及WebSQL可以在 iOS上的以及桌面版的瀏覽器中工作。 SPRINGPAD - 使用 AppCache, 本地儲存以及WebSQL，提供了一個不論是否線上都能使用的應用。 THE NEW YORK TIMES WEB APP – 使用 AppCache以及WebSQL，提供了一個再iOS以及桌面瀏覽器上都能工作的離線應用。 RESOURCES TO HELP YOU Articles HTML5ROCKS OFFLINE OVERVIEW "OFFLINE": WHAT DOES IT MEAN AND WHY SHOULD I CARE? Libraries & Frameworks MANIFESTR - a bookmarklet for creating an AppCache manifest file. LAWNCHAIR - a library that provides a lightweight, adaptive, simple and elegant persistence solution. 有用的資源： 文章 HTML5ROCKS 離線功能概覽 “離線功能”之內涵及值得關注的點 庫 & 框架 MANIFESTR – 一個用於建立AppCache manifest file的書籤。 LAWNCHAIR -一個提供了輕量級的、自適應、優雅的永續性解決方案的庫。 Provide automatic data persistence Web applications allow users to keep their data in the cloud. Users should feel confident that their work is safe. They should not have to think about where or when they saved their data, or if they have the latest version at hand. Web applications enable users to concentrate on their work without worrying about whether or not their work is safe. 提供資料自動同步 Web Apps讓使用者可以將資料儲存在雲中。使用者應該能夠確信他們的工作是安全的，他們不必去考慮他們是何時何地儲存的資料，或者他們手上正在使用的是否是最新版本的資料。Web Apps讓使用者可以集中於工作而不必擔心工作是否安全。 TO PROVIDE A GREAT EXPERIENCE, WEB APPLICATIONS SHOULD: 1.Save data locally and sync to the cloud as often as possible because people shouldn’t have to worry about their network connection or what happens to their data if they leave the application. 2.Start in the same place that the user was when they left the application and enable them to pick up and be productive in the same place as when they left the application. 為了提供好的體驗，WEB APPS 需要: 在本地儲存資料並經常和雲端進行同步，這樣人們就不必擔心網路連線或者他們離開應用以後資料會發生什麼 在使用者第二次登陸時讓使用者處於他們上次離開時的狀態，讓他們能很快撿起上次遺留的工作，更有效率。 RESOURCES TO HELP YOU Tutorials WORKING OFF THE GRID WITH HTML5 OFFLINE AN INTRODUCTION TO APPLICATION CACHE USING INDEXEDDB 有用的資源： 手冊 使用HTML5離線功能工作 應用快取簡介 使用INDEXEDDB Keep the user informed with notifications A client application keeps a user informed about what it’s doing through status messages, progress bars, notification dialogs, and other methods; web applications should be no different. 通過提示讓使用者知道更充分的資訊 客戶端應用通過狀態訊息、進度條、對話方塊通知和其他方法來讓使用者知道更充分的資訊，瞭解應用目前在做什麼及其進度； Web Apps也應用做到這一點。 KEEP PEOPLE INFORMED ABOUT WHAT’S GOING ON IN WEB APPLICATIONS BY: 1.Show loading indicators so people understand that a task is in progress. 2.Use HTML Notifications to provide toast like notifications for important information that people might want to know about in real time. 3.Use the HTML5 progress element to show either determinate or indeterminate progress. 4.Show modal dialogs to prevent users from moving on until they either provide specific information or the application completes any processing it needs to complete. 5.Animate actions that might have a real world analogue to help relate the progress to something people understand. 1.要讓使用者保持資訊充分，瞭解應用在做什麼及其進度，可以按如下方式去做： 2.顯示載入提示，這樣使用者就能明白有一個任務正在進行中。 3.使用HTML提醒來提供一些使用者可能想要實時知道的重要資訊。 4.使用HTML5的進度元素來顯示進度。 5.顯示模態對話方塊（modal dialogs）來讓使用者提供更為具體的資訊或者應用完成了需要進行的處理以後再讓使用者繼續前進。 動畫動作可以模擬現實世界中的一些動作，讓使用者更容易理解當前過程。 WEB APPS THAT DO THIS WELL TODAY INCLUDE: GMAIL - provides new mail notifications ASTRID - provides reminders of your upcoming tasks TWEETDECK - tells you when there are new tweets that you’re following 在這方面做的很好的WEB APPS: GMAIL – 提供新郵件提醒 ASTRID – 為即將到來的任務提供提醒 TWEETDECK –當你所跟的tweeter有新訊息時提醒你 RESOURCES TO HELP YOU Article THE CHROMIUM PROJECT - DESKTOP NOTIFICATIONS MODAL WINDOWS IN MODERN WEB DESIGN MODAL AND MODELESS BOXES IN WEB DESIGN Tutorials USING THE NOTIFICATIONS API Libraries & Frameworks BOOTSTRAP MODAL - a super slim take on the traditional modal js plugin. JQUERY UI - jQuery UI provides a comprehensive set of core interaction plugins, UI widgets and svisual effects. 有用的資源： 文章 CHROMIUM的專案 – 桌面提醒 現代Web設計中的模態對話方塊 WEB 設計中的Modal以及Modelessboxes 手冊 使用NOTIFICATIONS API 庫 & 框架 BOOTSTRAP MODAL –根據傳統的模態js外掛所作的簡化 JQUERY UI - jQuery UI 提供了一套綜合性的核心互動外掛、UI外掛以及視覺效果 Allow drag and drop to upload or download files If your application deals with files, you should make the experience for people trivial and easy to deal with; they should never be left wondering if they just downloaded a file, or where it went, nor should they struggle to share files with your application. 允許使用拖放來上傳或者下載檔案 如果你的應用與處理檔案相關，那麼你應該讓使用者很容易完成相關操作。永遠不應該讓使用者去猜測他們的檔案是否已經下載下來了、檔案下載到何處，也不應該讓使用者想要分享檔案的時候感覺到困難。 WHEN HANDLING FILES: 1.Allow users to upload multiple files or entire directories by using the multiple or directory attribute in the file input type. 2.Use drag and drop to let users drag files from their computer to your application or vice versa. 3.Store and manipulate files locally on the user’s computer by using the File System APIs. 在處理檔案時: 1.在檔案輸入型別中使用多屬性或目錄屬性讓使用者可以上傳多個檔案或者整個資料夾。 2.使用拖放，讓使用者可以從自己的計算機拖動檔案到你的應用程式，反之亦然。 3.通過使用File System APIs來在使用者機器本地來儲存或處理檔案. WEB APPS THAT DO THIS WELL TODAY INCLUDE: GMAIL - allows you to drag attachments directly into the email message. GOOGLE DOCS - allows you to upload new documents to the app by dragging them into the browser. BOX.NET - makes it easy to upload new files by dragging them into an upload widget. APPMATOR - makes it easy to download the Chrome Web Store app package file you just created by dragging it out of the browser. 在這方面做的很好的WEB APPS: GMAIL – 允許你將附件拖入郵件訊息中。 GOOGLE DOCS – 允許你通過將檔案拖入瀏覽器來上傳檔案。 BOX.NET – 通過將檔案拖入上載部件讓上傳檔案很容易。 APPMATOR – 可以通將檔案拖出瀏覽器來下載你剛剛建立的Chrome Web Store App package file，讓下載十分容易。 RESOURCES TO HELP YOU Tutorials NATIVE HTML5 DRAG & DROP TUTORIAL READING LOCAL FILES IN JAVASCRIPT EXPLORING THE FILE SYSTEM APIS 有用的資源： 手冊 NATIVE HTML5 DRAG & DROP TUTORIAL 在Javascript中讀取本地檔案 使用FILE SYSTEM APIS Treat performance like a feature Nothing is more valuable than people’s time. People expect client applications to start fast, and be immediately responsive to their use. Web applications should be no different. Web applications should start fast and always be responsive to their users. 將效能也看做是一個特性 沒有什麼比人們的時間更寶貴了。使用者期待客戶端應用載入快，響應快。Web Apps同樣需要達到這一指標。 WHEN DESIGNING AROUND FAST, WEB APPLICATIONS SHOULD: 1.Load your application first, then load the user's data. By caching your application code locally with AppCache, you reduce the number of network requests needed to start your application. Because the application is cached locally on the device, your application can start immediately. Use loading indicators as you retrieve any data needed to enable your application. 2.Follow best practices for building fast web sites and applications. Your web application is still based on the web and you should continue to leverage those best practices. 要設計速度更快的應用，Web Apps應該： 1.先載入應用，再載入使用者資料。通過使用AppCache在本地儲存你的應用程式碼，你可以減少啟動應用時所需要的網路請求。因為應用通過快取儲存在裝置上了，它就能立刻啟動了。在應用需要解析任何資料的時候，都給出載入提示。 2.遵循網站及應用的快速響應的設計原則。你的Web App仍然是基於Web的，所以你仍然需要遵循網站設計時的一些快速響應的設計原則. RESOURCES TO HELP YOU Articles HOW BROWSERS WORK: BEHIND THE SCENES OF MODERN BROWSERS STEVE SOUDERS 14 RULES FOR FASTER-LOADING WEB SITES BEST PRACTICES FOR A FASTER WEB APP WITH HTML5 Tutorials IMPROVING THE PERFORMANCE OF YOUR HTML5 APP MEASURING PAGE LOAD SPEED WITH NAVIGATION TIMING IMPROVING HTML5 CANVAS PERFORMANCE Books HIGH PERFORMANCE WEB SITES BY STEVE SOUDERS EVEN FASTER WEB SITES: PERFORMANCE BEST PRACTICES FOR WEB DEVELOPERS 有用的資源： 文章 瀏覽器是如何工作的：現代瀏覽器的背後 STEVE SOUDERS 推崇的快速載入網站的14 條規則 使用HTML5構建快速響應網站應遵循的慣例 手冊 提升你的HTML5 APP的效能 通過導航計時測量頁面載入速度 效能 書 STEVE SOUDERS 寫的高效能WEB SITES 更快的WEB SITES:Web開發者應該遵循的慣例 原文連結：BUILDING GREAT WEB APPLICATIONS