Google Web App開發指南第三章：案例研究

No field guide is complete without providing a collection of examples to help in identification of best practices and to show how features are implemented. Throughout the next chapter, we've created a series of sample applications that address many of the common scenarios seen in modern web applications. Each application provides detailed commentary about the design decisions, the way features should be implemented and technology used. 如果缺少專案案例部分，那麼很難說這是個完整的開發指南。因為只有通過一系列的案例實踐，才可以幫助人們形成最佳實踐，瞭解那些開發特性是如何體現在具體產品中的。 在接下來的這一章節中，我們建立了對應當前Web Apps常見場景的4個樣例應用，而且對每個應用的設計決策，以及功能特殊背後技術元素的使用方法都新增了具體點評。 Using the case studies These web applications were designed to provide you with ideas on how to approach application design for some of the more common scenarios that today's web apps. With the exception of the Khan Academy, each case study is for a fictitious company. As you look at each case study, hover over the different HTML5 logos below the images for descriptions about how those technologies are used in the application. You can also click on images to see a larger, more detailed version. The Case Studies 1. Shipshot: A Package Tracking App to track the status of packages and online purchases made by the user. 2. Wayfindit: A Trip Planner App to help the user keep track of trip reservations, travel plans and bookings. 3. The Khan Academy: An Online Learning Tool with over 2800 videos, covering everything from arithmetic to physics, helping students learn what they want. 4. Picture Page: A Photography Blog a beautiful way to view photography that puts the photo at the center of the experience. 專案樣例分析 值得說明的是，除了Khan Academy外，其他三個Web Apps並不是真正的商業應用，而是用於技術研究才建立的。這些樣例應用分別是： 1. Shipshot: 一個包裹跟蹤應用，用來跟蹤線上消費使用者的包裹狀態 2. Wayfindit:一個旅程規劃應用，用來幫助使用者跟蹤旅程租定、行程計劃及提供預訂等服務。 3. The Khan Academy:一個線上學習工具，有超過2800部視訊，課程覆蓋從數學到物理等不一而足，便於學生隨時隨地學習。 4. Picture Page:一個以視覺體驗為核心訴求的攝影主題分享應用，使用者可以享受到圖片的美好體驗。 Shipshot Package Tracking Online commerce shows no sign of slowing down. And as it grows, so too does the number of people tracking their packages online. Of all the functionality offered on a shipping company's website, package tracking is, by any estimate, the most important to the greatest number of shoppers. And with precious few exceptions across the web today, that functionality is lacking in usability, responsiveness, and overall quality, making for a poor experience. Enter HTML5 and with it a new approach to web applications. The features of HTML5 have a lot to offer in the package tracking department — let's take a look at a rethinking of a Package Tracker. Shipshot包裹跟蹤應用 隨著電子商務的迅猛增長，人們更加需要線上跟蹤包裹狀態。無論從哪個角度來看，對於大多數使用者來說，快遞公司網站上提供的所有功能中，包裹跟蹤最為重要。但是做得好的公司卻鳳毛麟角，大多數網站上的這個功能非常難用、響應緩慢，整體質量很差，造成了很糟糕的使用者體驗。 現在HTML5技術日益成熟了，而且新一代Web Apps開發方法隨之興起。對於線上包裹跟蹤這一領域，HTML5標準中有很多特性可以利用使其獲得更好的使用者體驗——現在就讓我們重新思考線上包裹跟蹤的產品實現。 A Tracker Apart Our Tracker app stands alone from the rest of the Shipshot website. A visitor to this app is primarily interested in tracking packages, so the interface is free of the visual and functional distractions of site navigation, promotions, store locator utilities — nothing that isn't about package tracking shows up here. The result is an app that feels fast and is intuitive. It's also bookmarkable, so the Tracker is just a click or a tap away, looking and feeling like a standalone service. For those who need to buy shipping labels or locate a store, however, the Shipshot logo persists in the upper left hand corner — our visitor can always click there and access the rest of the Shipshot website. Taking advantage of HTML5's ability to adjust the presentation according to the viewport, our Tracker app is responsively designed — mobile visitors see an interface that's as big and bright and easy to navigate as the one laptop users work with. 一個獨立的包裹跟蹤模組 包裹跟蹤應用應獨立於Shipshot網站的其他部分。使用者訪問這一模組的目的是明確的，所以在設計互動介面時，無論從視覺還是功能上，如站點導航、商品促銷、商店地圖（store locator utilities）等任何和包裹跟蹤不相關的元素都不應該保留。這樣，應用就會讓人感到輕量而又直觀。它同樣可以被書籤收藏，只需要輕輕一點選就可以使用這個跟蹤功能，給人感覺就是一個獨立的服務。 對於其他需要託運或尋找商店的使用者，我們在左上角shipshot Logo處——使用者可點選這裡訪問Shipshot網站的其他服務。 根據Viewpont的大小，應用可利用HTML5技術調整展示大小。該跟蹤應用還採用了響應式設計——移動終端上的使用者可獲得同桌面使用者同等清爽明快的使用者體驗。 Getting to the Packages Getting to You The first thing we ask for is a tracking number. The textbox for it is front and center, big and unmistakable. The field uses an HTML5 placeholder attribute for instructional text and local storage for the list of recently tracked packages below it, each labeled not just by some inscrutable number, but with the sender and any title the visitor might have previously assigned to it. 確保使用者找到自己的包裹 首先我們需要的是訂單號。用於輸入訂單號的文字框一定要居於正中最顯眼的位置，文字框設計要寬大避免輸入失誤。文字輸入區可使用HTML5的“placeholder”屬性，也可以用“Local Storage”特性儲存最新查詢的包裹訂單號並顯示在文字框下方。而且，除了難記的訂單號外，也可通過查詢傳送人以及任何使用者在貨物上的標記尋找到貨 物。 The Tracking Screen Where's the package? When will it arrive? Is it on time? These are the three most important pieces of information about a package on its way, and our Tracker app displays them all immediately. An HTML5 progress bar spanning the entire display gives an immediate visual cue as to the package's progress. Typical color signals provide further visual reinforcement — green for on time packages, red for delayed ones. A specific estimate is offered, and an interactive map and a list of checkpoints fill out the display to show just where the package has been. The map is enhanced with HTML5 canvas elements, drawing points and lines and animating as new information comes in or is selected by the visitor. Icons to indicate the type of transportation and whether the estimate was met for each checkpoint give an overview of the package's trick that is both easy to understand and rich with information. 跟蹤頁面 我的包裹現在哪裡？什麼時候可以送達？會不會有耽擱？這是關於路上包裹最重要的三個資訊。而在我們的應用中，所有的資訊都會實時顯示，置於介面頂部的HTML5進度條顯示著包裹在整條物流線路上的完成度。具有象徵色彩的標記提供更進一步資訊——綠色代表將準時送達的，而紅色則表示有延遲。 除了特定的資訊標記，主要介面被一個互動地圖所佔據，結合上面一系列物流節點，你可以很清楚定位貨物的位置。 Selecting a destination in the route rundown zooms into the map to provide more details about individual checkpoints and estimated arrival times. Here again the canvas element provides for cross-platform, high-performance graphics. A click away, under the 'Recently Tracked' tab atop the interface, we present a list of recently tracked packages. This compact view provides the same important visual cues as the tracking detail page, but for several packages at once. HTML5's local storage makes referencing this information instant and login-free, a convenience in any situation. 這個地圖主要使用了HTML5 canvas元素，使用者可在上面繪製點線以及動畫。還可以用圖示表示運輸的方式以及是否到底物流節點，這樣使用者對貨物運輸進度就有了整體把握，整個互動介面不僅易於理解而且資訊豐富。 選擇路線圖上的某段終點，放大地圖可以發現關於特定物流檢查點的更詳細資訊，這樣你就可以預估到達時間。這裡主要採用Canvas元素實現跨平臺高效能的圖形效果。 “新近跟蹤”（Resently Tracked）提供了最近查詢過得包裹資訊清單，這個緊湊的頁面同詳細跟蹤頁面一樣重要的資訊，但如果你一次要查詢多個包裹，需要注意，背後是HTML5″Local Storgy”特性提供了快速查詢和免登入效果以及更多的便利。 The Tracking Screen Again, but Smaller Using HTML5's viewport awareness and responsive web design, minimal tweaks to the interface allow the same information to be presented on a smaller screen without losing an ounce of usability. The progress bar, the list of destinations, the map — all present and accounted for, now stacked atop one another for easier comprehension on a mobile screen. Package tracking is the sort of thing people do repetitively — anxious to receive that book or that new coat — and they shouldn't be forced to jump through hoops every time they need updated information. No more guessing at estimates or copying and pasting a tracking number from an email receipt that becomes harder to find as it becomes more and more buried each day. Our Tracker app is easy to access, remembers what you're expecting, and operates quickly — it delivers on the promise of HTML5, embodying the full potential of a web app today. 更小的跟蹤介面 使用HTML5對於螢幕大小的敏感以及自適應的Web設計，只在介面上做了最少的調整就能在更小的螢幕上展現相同資訊而絲毫不失易用性。進度條、目的地清單、地圖——全部展現出來，互相疊加，以便在移動裝置螢幕上更容易被看到。 包裹跟蹤無疑可歸為是人們的高頻次事件，誰沒有焦急等待郵寄中的好書或衣服的經歷呢？從此使用者將不再需要麻煩地更新資訊，不需要猜測到達日期、從郵件中複製黏貼一長串訂單號碼（而且隨著日期增長你資訊也埋在底下），當你擁有這款Web App，就可以輕易獲取到包裹資訊，而且操作非常便捷。這一切都有賴於HTML5技術，也是當前Web App潛能的體現。 Wayfindit: Trip Planner App More than most, Wayfindit’s app must embody convenience. Travel is complicated, and whether for business or pleasure, a smooth trip is one free of unexpected stress from doorstop to destination and back again. Wayfindit's app should stay out of our busy traveler’s way but provide the information they need as quickly and as accurately as possible when asked. That means a minimal, intuitive, and responsive interface with relevant, contextually important information front and center — a goal accomplished with help from the HTML5 features for location awareness and offline storage. 旅程計劃應用（Wayfindit: Trip Planner App） 在大多數情況下，Wayfindit的應用必須有很好的易用性。旅行是一件很複雜的事情，不管是商業旅行還是休假旅行，一個順利的旅程要求從家門到目的都沒有意外之憂。Wayfindit的應用要能給旅行者提供所需資訊，並且要快而準確。這意味著它需要一個最小的、直觀的、響應式介面，能在前端提供有關內容的重要資訊——HTML5的地理感知和離線儲存特性實現。 A Perfect Pocket Guide From your pocket or your bag, an intinerary — immediately. With local storage, location awareness, and just checking the time of day, the Wayfindit Trip Planner app presents a schedule of your day, recommendations if you've got time left over, notification if you're near a particularly picturesque spot, and a smart map and directions. The Wayfindit Trip Planner app takes advantage of HTML5 features to provide travelers with a convenient, always-ready, intelligent companion while they travel. It's responsive — visually, performance-wise, and aware of our traveler's needs and context. It's the kind of tool that makes a great vacation even better and is a joy to use. 一個完美的袖珍指南 它就裝在你的口袋裡或者包裡，即時提供資訊。它擁有本地儲存和地理感知功能，只需要檢查下當天時間，Wayfindit Trip Planner App就能顯示出你的日程表，並在你有時間剩餘時給出建議，在你靠近一個美麗景點時給出提醒，以及一個智慧地圖和方位指示。 Wayfindit Trip Planner App利用HTML5的特性給人們提供了一個方便的、隨時隨地提供服務的、智慧的旅程伴侶。它具有很好的互動能力——視覺上清晰，效能優異，能明白旅行者的需求和所處環境。它能讓假期更為愉快，使用起來也讓人倍覺樂趣。 Welcome to the Neighborhood Has our traveler just landed? Based on their location and the last time the app was able to connect to the internet, it seems like it. The app immediately offers a taxi, nearby restaurants or activities, or directions to the hotel (and just how far away it is). And all of the information arrives in milliseconds — the app is smartly designed from the inside out and its assets have been compressed to ensure it feels speedy. 到達服務 飛機剛剛降落？基於旅客的位置和最後一次訪問網際網路時的資訊，Wayfindit Trip Planner App就能立即提供一輛計程車，以及附近的餐廳或活動資訊，或到酒店的路徑（以及酒店距離此處的距離）。所有這些資訊的到達都以以毫秒為單位——這個應用由內而外都設計精巧，各部分功能都儘量壓縮，以確保它給人感覺迅速。 Room Service Our traveler has driven their rental car to the hotel. The app knows this and can offer to remember the parking space number for later, and does the same minutes later at the checkin counter. All of this information is locally stored — it'll be immediately available whether or not there's internet connectivity. 住房服務 旅行者這時候駕著租來的車駛向了旅館。應用瞭解這一點，並會在隨後提供停車位數目。所有這些資訊都是儲存在本地的——不管是否有網路連線，這些資訊都是即刻可用的。 Wide Range of Options The Wayfindit Trip Planner App is ‘responsively’ designed with HTML5 and CSS3 media queries. On a larger screen, like a laptop or tablet, it can offer more information. In addition to important tasks like hotel check-ins and rental car pick-ups, peripheral information like restaurant and activity recommendations can be presented. (The same information is available to phones as well, as the down-scrolling traveler will discover.) Recommendations for restaurants and activities are made based on the traveler's location and the time of day. 多種選擇 Wayfindit Trip Planner App採用了HTML5和CSS的響應式設計。在一個較大的螢幕上，比如筆記本或平板電腦，它能提供更多資訊。除了酒店入住和計程車租賃資訊，還會提供一些周邊資訊，例如酒店和活動推薦。（在手機上也能看到相同資訊，但是需要向下滾動頁面。） 酒店和活動推薦是基於旅行者的地點和當日時間。 Feeling Hungry Planning a trip to a restaurant? Wayfindit's Trip Planner knows how to get there — on foot, in a cab, or using public transport (if it knows there's no rental car, that is). If our traveler is on the go and using the app on their phone, the app can make the right phone call with just a tap.

Ever location-aware, the app can offer up interesting places nearby with visual cues, using its locally stored database of visited places to make smart recommendations. 飯店服務 想要知道去飯店怎麼走？Wayfindit的Trip Planner知道怎麼到那兒——步行、叫車或者使用公共交通（如果它知道那兒沒有可租用的車，就採用公共交通）。如果旅行者正在使用這個應用，他只需要一次點選就能呼叫正確的電話號碼找到交通工具。 由於這個應用是可感知地理位置的，它能提供周邊的景點資訊，這些資訊儲存於本地資料庫，Wayfindit Trip Planner App能根據資料庫資訊作出智慧推薦。 Nightcap Recap A day's end recount is a good way for our traveler to remember the good times and build strong memories. It's also a great way to improve their recommendations tomorrow! Some shiny new HTML5 form controls make it easy to rate the day's activities and move on. 總結功能 一日結束後的回顧總結能讓旅行者留下更深刻的旅行記憶，這同時也能提升Wayfindit Trip Planner App的明日推薦。Wayfindit Trip Planner App提供了一些漂亮的HTML5表單，讓使用者可以很方便地為當天活動作出評級。 Khan Academy The Khan Academy website offers a wealth of educational opportunities in the form of thousands of video classes. They are well-taught, always available, and completely free. The site also features a 'knowledge map' and statistics, guiding you through a series of lessons and tracking your progress visually. It's a superb and bountiful resource for students worldwide, in school or out, studious or curious. It deserves the best presentation technology the web has to offer, so we've taken Khan Academy and brought it into the app era with HTML5. Khan學院（Khan Academy） Khan Academy以視訊課堂的形式提供了豐富的教育資源，這些資源富於教育性，容易獲取，並且完全免費。Khan Academy還提供了一個“知識地圖”和一些統計資料，引導你學習課程，並且記錄你的進度。這對世界各地的學生而言都是非常好的資源，無論是在校內還是校外，無論是出於教學目的還是僅僅出於興趣。它值得使用Web上最好的展現技術，所以我們將Khan Academy作為一個例子，將其引入HTML5的時代。 Focus on the Blackboard Khan Academy's video content is the focal point of its website, and our redesign puts it front and center, free of distractions. The video fills the screen, with ancillary information disappearing when it isn't needed, making for an immersive experience. And when the navigation does appear, it's minimal — we offer only what students need to continue learning uninhibited. Comments and Q&A sections are minimized until expanded, and their content isn't fetched until it's asked for, saving on load time. And keyboard shortcuts make navigating even easie. The interface itself is responsive to the device accessing it, too. Mobile users see the same content in a layout optimized for their device using HTML5's meta viewport tag and CSS3's media query capabilities.

A progress bar (using HTML5's element, of course) provides immediate visual feedback on a student's place in a given course or section. The use of local storage makes checking on this progress a breeze -- there's no need to log in to store or record data, and future visits enjoy a performance boost. 點集中在教學內容 Khan Academy的視訊內容是其網站的焦點，我們做了重新設計，使視訊處於前端，免於干擾。視訊佔滿螢幕，輔助資訊在不需要的時候都消失了，以提供沉浸體驗。當導航出現的時候，它也是最小化的——一切都是為了學生更好地學習。評論和提問部分都是最小化的，並且除非使用者需要，評論和提問部分的內容是不會載入的，以節約載入時間。鍵盤上的一些快捷鍵讓導航更為容易。 介面本身遵循響應式設計的思想，通過使用HTML5的meta viewport tag和CSS的媒體查詢功能，移動裝置使用者在他們的裝置上可以看到相同內容，但這些內容都是以最適於他們裝置的佈局呈現。 一個進度條（使用HTML5的元素）為學生的學習進度提供了一個直觀的視覺反饋。本地儲存的使用使得查詢學習進度十分方便——無需登入儲存或者記錄資料，未來，這一應用還將大幅度提升其效能。 A Tree of Learning Under the 'Learn' tab, we enter a content drilldown that makes navigating the thousands of lessons and practice exercises on Khan Academy easy by breaking it up into categories and subcategories. Here, too, progress bars offer a visual indication of the student's advancement through each category. Once beyond the category and subcategory, a list of lessons is shown, with groups of videos in a single lesson being visually indicated by a stack. In a notable difference from the existing organization of the Khan Academy website, video lessons and practices are grouped as sections so that related content is accessible in a single place. The Khan Academy web app takes advantage of HTML5 features to provide students with a well-designed and always-on resource for learning, practicing, and tracking what they've accomplished. It can be tricky to encourage study, but Khan Academy removes as many barriers as it can. It's speedy, responsive, and offers intuitive navigation of an enormous cache of material, all without distraction. 學習樹 在“學習”標籤下，有一個內容明細，Khan Academy的上千學習課程和聯絡都分成目錄和子目錄，易於檢索。在這裡也有一個進度條，提示學生各個標籤下課程的學習進度。 在目錄和子目錄之外，會提供一個課程清單，一門課程中的一組視訊是通過棧來指明的。和Khan Academy網站的已有組織不同，Khan Academy的HTML5應用中的視訊課程和內容是以相關度進行分組的，這樣相關內容都可以在一個地方就可以訪問到。 Khan Academy Web App使用了HTML5為學生提供了一個設計精良、永遠線上的資源，他們可以學習、練習、跟蹤所學內容。鼓勵學生去學習可能是比較困難的，但是Khan Academy儘可能多地去除了障礙。它速度快，可以互動，並且提供了大量有著直觀導航的學習資源，所有資源都可以無干擾使用。 Picture Page The Picture Page gives it's users a new and different way to see what's happening in the world around them. If a picture is worth 1000 words, then The Picture Page is provides users with more emotion and detail than could be provided in most publications. Simply a long series of large pictures with small, simple, unobtrusive captions, the site was powerful because it let the content be the focus — the images tell the story. No popups, no difficult-to-navigate slideshows, no tiny thumbnails. Our HTML5 Picture Page app carries forward the innovation many of the current photo news sites into a new world of web application development. 美圖(Picture Page) Picture Page給了人們以一種全新的方式去看發生在世界上的事情。如果說一幅圖相當於1000個詞，那麼Picture Page比世界上大多數出版物提供的都多，情感和細節都得以展現。Picture Page上只是一系列圖片，附帶有很小的、簡單的不顯眼的標題，這個站點的強大之處正在這裡——它讓圖片作為焦點，讓圖片去講述它們自己的故事。沒有彈框，沒有難以導航的幻燈片，沒有微縮圖。這個HTML5 Picture Page App給現有的很多圖片新聞網站提供了一個創新的方式，將它們帶入了一個全新的Web App世界。 If it Ain't Broke, Don't Fix It The Picture Page described the site perfectly — those large images are the key to its effectiveness and its success. Our HTML5 re-imagining of The Picture Page makes its Pictures even Bigger. Using CSS3's background-size property to auto-scale photos, a fullscreen layout makes the photos even more the focus — no container website chrome to get in the way.

Responsive design downgrades the site gracefully for mobile users; CSS3 media queries present a full-screen photo experience without sacrificing performance. Detecting swipes and taps as though it were a native mobile app, The Picture Page feels incredibly natural on every device. 順其自然 Picture Page這個應用名字本身就很好地描述了它——大的圖片是它成功的關鍵。Picture Page的HTML5的re-imagining功能讓圖片可以以更大方式展現。通過使用CSS的background-size性質來自動縮放照片，照片可以佔滿全屏，成為焦點。 響應式設計使得移動裝置使用者能看到大小合適的小版圖片；CSS3的媒體查詢語句使得圖片可以全屏展現而又不影響效能。它還能夠像native mobile App一樣檢測揮動和觸屏動作。Picture Page在任何裝置上感覺都十分自然。 Power Users Rejoice Javascript enables us to offer keyboard shortcuts for navigating The Picture Page. Using the left and right arrow keys or the emergent convention of the J and K keys to move forward and backward through the photos makes browsing easy and reduces the distraction of finding the mouse while taking in the imagery. Arrows are hidden when not in use, so as not to obscure the current image. Using the HTML5 tag, we can semantically demonstrate the visitor's progression through the photo album. The Picture Page is a perfect example of the kind of site that doesn't need a ground-up reconstruction for the app era. As-is, it's an elegant, visually stunning, and beloved website, so we apply the available enhancements offered by HTML5 where appropriate, leveraging the site's existing affordances with up-to-date techniques and technologies to present a Picture that's even better and Bigger. 把使用者體驗放在第一位 Javascript讓使用者可以通過鍵盤快捷鍵對Picture Page.進行導航。使用左右箭頭或者自己約定的J\K鍵可以向前或向後翻動圖片，這樣就減少了用滑鼠導航時尋找游標帶來的干擾。當不需要的時候，箭頭是被隱藏的，這樣圖片就不會受到影響。 使用HTML5的 tag，可以展現相簿訪問者的進度。 Picture Page是應用時代沒有使用背景構建（ground-up reconstruction）的一個很好的例子。它優雅，視覺效果好，備受喜愛。因此我們可以在合適的地方應用HTML5提供的特性，將現有網站和新鮮的技術結合，展現出更好更大的圖片。