Google Web Apps开发指南之项目样例（上）

如果缺少项目案例部分，那么很难说这是个完整的开发指南。因为只有通过一系列的案例实践，才可以帮助人们形成最佳实践，了解那些开发特性是如何体现在具体产品中的。

在接下来的这一章节中，我们创建了对应当前web apps常见场景的4个样例应用，而且对每个应用的设计决策，以及功能特殊背后技术元素的使用方法都添加了具体点评。

项目样例分析

值得说明的是，除了Khan Academy外，其他三个Web Apps并不是真正的商业应用，而是用于技术研究才创建的。这些样例应用分别是：

1. Shipshot: 一个包裹跟踪应用，用来跟踪在线消费用户的包裹状态

2. Wayfindit:一个旅程规划应用，用来帮助用户跟踪旅程租定、行程计划及提供预订等服务。

3. The Khan Academy:一个在线学习工具，有超过2800部视频，课程覆盖从数学到物理等不一而足，便于学生随时随地学习。

4. Picture Page:一个以视觉体验为核心诉求的摄影主题分享应用，用户可以享受到图片的美好体验。

Shipshot包裹跟踪应用

随着电子商务的迅猛增长，人们更加需要在线跟踪包裹状态。无论从哪个角度来看，对于大多数用户来说，快递公司网站上提供的所有功能中，包裹跟踪最为重要。但是做得好的公司却凤毛麟角，大多数网站上的这个功能非常难用、响应缓慢，整体质量很差，造成了很糟糕的用户体验。

现在HTML5技术日益成熟了，而且新一代Web apps开发方法随之兴起。对于在线包裹跟踪这一领域，HTML5标准中有很多特性可以利用使其获得更好的用户体验——现在就让我们重新思考在线包裹跟踪的产品实现。

一个独立的包裹跟踪模块

包 裹跟踪应用应独立于Shipshot网站的其他部分。用户访问这一模块的目的是明确的，所以在设计交互界面时，无论从视觉还是功能上，如站点导航、商品促 销、商店地图（store locator utilities）等任何和包裹跟踪不相关的元素都不应该保留。这样，应用就会让人感到轻量而又直观。它同样可以被书签收藏，只需要轻轻一点击就可以使 用这个跟踪功能，给人感觉就是一个独立的服务。

对于其他需要托运或寻找商店的用户，我们在左上角shipshot Logo处——用户可点击这里访问Shipshot网站的其他服务。

根据Viewpont的大小，应用可利用HTML5技术调整展示大小。该跟踪应用还采用了响应式设计——移动终端上的用户可获得同桌面用户同等清爽明快的用户体验。

确保用户找到自己的包裹

首 先我们需要的是订单号。用于输入订单号的文本框一定要居于正中最显眼的位置，文本框设计要宽大避免输入失误。文本输入区可使用HTML5的 “placeholder”属性，也可以用“Local Storage”特性保存最新查询的包裹订单号并显示在文本框下方。而且，除了难记的订单号外，也可通过查询发送人以及任何用户在货物上的标记寻找到货 物。

跟踪页面

我 的包裹现在哪里？什么时候可以送达？会不会有耽搁？这是关于路上包裹最重要的三个信息。而在我们的应用中，所有的信息都会实时显示，置于界面顶部的 HTML5进度条显示着包裹在整条物流线路上的完成度。具有象征色彩的标记提供更进一步信息——绿色代表将准时送达的，而红色则表示有延迟。

除了特定的信息标记，主要界面被一个交互地图所占据，结合上面一系列物流节点，你可以很清楚定位货物的位置。

这个地图主要使用了HTML5 canvas元素，用户可在上面绘制点线以及动画。还可以用图标表示运输的方式以及是否到底物流节点，这样用户对货物运输进度就有了整体把握，整个交互界面不仅易于理解而且信息丰富。。

选择路线图上的某段终点，放大地图可以发现关于特定物流检查点的更详细信息，这样你就可以预估到达时间。这里主要采用Canvas元素实现跨平台高性能的图形效果。

“新近跟踪”（Resently Tracked）提供了最近查询过得包裹信息清单，这个紧凑的页面同详细跟踪页面一样重要的信息，但如果你一次要查询多个包裹，需要注意，背后是HTML5"Local Storgy"特性提供了快速查询和免登录效果以及更多的便利。

更小的跟踪界面

使用HTML5对于屏幕大小的敏感以及自适应的web设计，只在界面上做了最少的调整就能在更小的屏幕上展现相同信息而丝毫不失易用性。进度条、目的地清单、地图——全部展现出来，互相叠加，以便在移动设备屏幕上更容易被看到。

包 裹跟踪无疑可归为是人们的高频次事件，谁没有焦急等待邮寄中的好书或衣服的经历呢？从此用户将不再需要麻烦地更新信息，不需要猜测到达日期、从邮件中复制 黏贴一长串订单号码（而且随着日期增长你信息也埋在底下），当你拥有这款Web App，就可以轻易获取到包裹信息，而且操作非常便捷。这一切都有赖于HTML5技术，也是当前Web App潜能的体现。

（未完待续）

原文链接：Case study of Web Apps in the wild

相关文章：Google Web App开发指南第一章：什么是Web Apps？

Google Web App开发指南第二章：交互设计

 

译文来源：http://www.webapptrend.com/

 WebAppTrend是一个独立的技术博客，关注Web App前瞻和实践，以及智能浏览器发展 

请大家在关注ITeye的同时，关注我们的新浪微博@WebAppTrend  http://weibo.com/webapptrend，Q Q群见官方博客右侧。