Google Web App开发指南案例研究.docx

泽思网络 上海APP开发商 Google Web App开发指南案例研究旅程计划应用（Wayfindit： Trip Planner App）在大多数情况下，Wayfindit的应用必须有很好的易用性。旅行是一件很复杂的事情，不管是商业旅行还是休假旅行，一个顺利的旅程要求从家门到目的都没有意外之忧。Wayfindit的应用要能给旅行者提供所需信息，并且要快而准确。这意味着它需要一个最小的、直观的、响应式界面，能在前端提供有关内容的重要信息HTML5的地理感知和离线存储特性实现。一个完美的袖珍指南它就装在你的口袋里或者包里，即时提供信息。它拥有本地存储和地理感知功能，只需要检查下当天时间，Wayfindit Trip Planner app就能显示出你的日程表，并在你有时间剩余时给出建议，在你靠近一个美丽景点时给出提醒，以及一个智能地图和方位指示。Wayfindit Trip Planner app利用HTML5的特性给人们提供了一个方便的、随时随地提供服务的、智能的旅程伴侣。它具有很好的交互能力视觉上清晰，性能优异，能明白旅行者的需求和所处环境。它能让假期更为愉快，使用起来也让人倍觉乐趣。到达服务飞机刚刚降落？基于旅客的位置和最后一次访问互联网时的信息，Wayfindit Trip Planner app就能立即提供一辆出租车，以及附近的餐厅或活动信息，或到酒店的路径（以及酒店距离此处的距离）。所有这些信息的到达都以以毫秒为单位这个应用由内而外都设计精巧，各部分功能都尽量压缩，以确保它给人感觉迅速。住房服务旅行者这时候驾着租来的车驶向了旅馆。应用了解这一点，并会在随后提供停车位数目。所有这些信息都是存储在本地的不管是否有网络连接，这些信息都是即刻可用的。多种选择Wayfindit Trip Planner App采用了HTML5和CSS的响应式设计。在一个较大的屏幕上，比如笔记本或平板电脑，它能提供更多信息。除了酒店入住和出租车租赁信息，还会提供一些周边信息，例如酒店和活动推荐。（在手机上也能看到相同信息，但是需要向下滚动页面。）酒店和活动推荐是基于旅行者的地点和当日时间。饭店服务想要知道去饭店怎么走？Wayfindit的Trip Planner知道怎么到那儿步行、打车或者使用公共交通（如果它知道那儿没有可租用的车，就采用公共交通）。如果旅行者正在使用这个应用，他只需要一次点击就能呼叫正确的电话号码找到交通工具。由于这个应用是可感知地理位置的，它能提供周边的景点信息，这些信息存储于本地数据库，Wayfindit Trip Planner App能根据数据库信息作出智能推荐。总结功能一日结束后的回顾总结能让旅行者留下更深刻的旅行记忆，这同时也能提升Wayfindit Trip Planner App的明日推荐。Wayfindit Trip Planner App提供了一些漂亮的HTML5表单，让用户可以很方便地为当天活动作出评级。Khan学院（Khan Academy）Khan Academy以视频课堂的形式提供了丰富的教育资源，这些资源富于教育性，容易获取，并且完全免费。Khan Academy还提供了一个“知识地图”和一些统计数据，引导你学习课程，并且记录你的进度。这对世界各地的学生而言都是非常好的资源，无论是在校内还是校外，无论是出于教学目的还是仅仅出于兴趣。它值得使用web上最好的展现技术，所以我们将Khan Academy作为一个例子，将其引入HTML5的时代。焦点集中在教学内容Khan Academy的视频内容是其网站的焦点，我们做了重新设计，使视频处于前端，免于干扰。视频占满屏幕，辅助信息在不需要的时候都消失了，以提供沉浸体验。当导航出现的时候，它也是最小化的一切都是为了学生更好地学习。评论和提问部分都是最小化的，并且除非用户需要，评论和提问部分的内容是不会加载的，以节约加载时间。键盘上的一些快捷键让导航更为容易。界面本身遵循响应式设计的思想，通过使用HTML5的meta viewport tag和CSS的媒体查询功能，移动设备用户在他们的设备上可以看到相同内容，但这些内容都是以最适于他们设备的布局呈现。一个进度条（使用HTML5的progress元素）为学生的学习进度提供了一个直观的视觉反馈。本地存储的使用使得查询学习进度十分方便无需登录存储或者记录数据，未来，这一应用还将大幅度提升其性能。学习树在“学习”标签下，有一个内容明细，Khan Academy的上千学习课程和联系都分成目录和子目录，易于检索。在这里也有一个进度条，提示学生各个标签下课程的学习进度。在目录和子目录之外，会提供一个课程清单，一门课程中的一组视频是通过栈来指明的。和Khan Academy网站的已有组织不同，Khan Academy的HTML5应用中的视频课程和内容是以相关度进行分组的，这样相关内容都可以在一个地方就可以访问到。Khan Academy web app使用了HTML5为学生提供了一个设计精良、永远在线的资源，他们可以学习、练习、跟踪所学内容。鼓励学生去学习可能是比较困难的，但是Khan Academy尽可能多地去除了障碍。它速度快，可以交互，并且提供了大量有着直观导航的学习资源，所有资源都可以无干扰使用。美图（Picture Page）Picture Page给了人们以一种全新的方式去看发生在世界上的事情。如果说一幅图相当于1000个词，那么Picture Page比世界上大多数出版物提供的都多，情感和细节都得以展现。Picture Page上只是一系列图片，附带有很小的、简单的不显眼的标题，这个站点的强大之处正在这里它让图片作为焦点，让图片去讲述它们自己的故事。没有弹框，没有难以导航的幻灯片，没有微缩图。这个HTML5 Picture Page app给现有的很多图片新闻网站提供了一个创新的方式，将它们带入了一个全新的web app世界。顺其自然Picture Page这个应用名字本身就很好地描述了它大的图片是它成功的关键。Picture Page的HTML5的re-imagining功能让图片可以以更大方式展现。通过使用CSS的background-size性质来自动缩放照片，照片可以占满全屏，成为焦点。响应式设计使得移动设备用户能看到大小合适的小版图片；CSS3的媒体查询语句使得图片可以全屏展现而又不影响性能。它还能够像native mobile app一样检测挥动和触屏动作。Picture Page在任何设备上感觉都十分自然。把用户体验放在第一位Javascript让用户可以通过键盘快捷键对Picture Page.进行导航。使用左右箭头或者自己约定的JK键可以向前或向后翻动图片，这样就减少了用鼠标导航时寻找光标带来的干扰。当不需要的时候，箭头是被隐藏的，这样图片就不会受到影响。使用HTML5的