Google Web App开发指南

http://www.html5rocks.com/webappfieldguide/case-studies/case-study-intro/

第一章：什么是Web Apps？

很多人向我问起学习HTML5技术的权威入门资料，我总是毫不犹豫地推荐由Google推出的HTML5rocks，这个网站就像一个宝库，包含经典的教程、文章、Demo和代码。近日 Chrome小组又推出了一个很酷的Web App电子书，讲述了Chrome开发人员对Web Apps的思考和最佳实践，推荐每个关注Web Apps的开发者阅读。Web AppTrend为方便国内开发者浏览，将全文进行翻译。

注：这本书就是一个Web Apps的绝佳案例，据开发小组的人介绍， 该电子书Web App使用了很多CSS3 特性例如 box-shadow, opacity, multiple backgrounds以做出丰富的交互体验，用到了AppCache和其他URL重写技术，没有用到一行服务端代码；使用了HTML5 history API来保持应用状态。

以下为第一章内容，清楚阐述了很多人非常困惑的Web Apps概念问题。

从今天起，我们将逐步发布《Web App开发指南》，敬请期待。

人们对应用的需求是非常强烈的，它无处不在！这个综合性的指南将提供给你一些构建现代web应用所需的技术以及惯例的介绍。这一领域指南旨在帮助你在web应用中创建良好的用户体验。无论你是初次构建web应用，还是在寻找提升已有应用的方法，这一指南都能帮到你！

Web Apps的变革

HTML5让开发者能打破以往构建web应用时所受的限制

还在不久以前，web只是用来做“搜索”的；它主要的功能就是提供信息。要完成既定的任务，用户要购买并安装软件到他们的电脑桌面。了解你的web apps的关键是了解技术是如何影响了web apps的变革；现在，即使不能比桌面应用提供更多，web apps至少可以做得和桌面应用一样多了。

异步web apps已经改变了用户的交互

早期的web页面内容是静态的，现在一切都发生了根本的改变。现在，页面动态加载或改变，而不是一次性展现所有内容。

新的语言标准提供了更丰富的用户体验

在现代浏览器没有支持HTML5之前，构建web应用所需要的特性是变化的，并且常常需要使用像Flash、ActiveX这样的插件或 Java。新的开放平台标准，比如CSS3, HTML5以及JavaScript确保开发者能拥有足够的工具和性能构建比以往更漂亮的交互性更强的web应用。

Figure 1.1 – 新技术加强了我们的能力!

Web Apps的未来

你应该在你的web apps中使用可用的一切技术

Web app的批评者在web app发展之初就指出了它的一个主要的缺点——web app的用户需要联网才能完成任务。假如网络不是随时随地都有的话，用户是不能完全依赖web应用来完成他们的工作的。

Web apps的未来发展如何取决于它是否有足够的灵活性——既拥有在web上完成任务的一切优点，又能在离线的时候完成这些任务。支持离线应用现在已经是可以实现的了——HTML5提供了例如应用缓存和客户端存储（比如，本地存储，索引数据库）等性能，这样你的应用就能在没有网络联接的时候也可以工作了。

云能比桌面给用户提供更多

云提供商提供了一个平台，在这个平台上，服务器端的功能可以被托管和共享。使用托管在云端的web应用程序，用户可以和他人协作或者在自己的不同设备间进行协作，并将数据保存在安全的服务器上。这样没有沉重的开销成本，开发web应用的成本只是开发桌面应用程序成本的一小部分。

Figure 1.2 – 完全发挥你的设备潜能!

Web Apps的特性

Web apps可以和电子表格，文档编辑器一样复杂，也可以和待做事项管理器一样简单。不管它是什么，它都必须完成某些事情。

Web App重新定义了“上网”的含义；web已经成了网站和应用的混合。下面是用来区分web apps和网站的三点要素：

1.一个web应用提供了很好的用户体验，让用户能很容易地完成任务，并利用了设备本地的一些性能。

2.一个web应用提供了丰富的视觉体验，又不会分散人的注意力；它注重美学，使用和本地应用一样的设计模式，又不失易用性。

3.一个web应用非常注重用户的交互、参与和完成任务，而不是让他们仅仅浏览网页。应用程序是自包含的（self-contained），也即用户不用导航到其他站点或者应用来完成任务。

Figure 1.3 – 小一点，大一点，简单点，复杂点? 只要做点什么就好!

如何判断Web Apps

如果你对这些问题的回答都是YES的话，那么你面前的就是一个web应用了

• 它是否是自包含的，不用将我重定向到一个完全不同的应用去完成我需要做的？
• 我是否可以在使用它的时候进行交互、参与并完成一些事情？
• 它是否有丰富的用户界面，界面看起来非常美观，并且基本占满了可用的窗口？
• 它是否使用和本地应用一样的模式，比如按钮、对话框或者其他元素？
• 它是否可以离线工作？
• 它是否应用了设备的某些功能，比如GPS的定位数据和动作传感器的数据？
• 传统的网站的导航元素和链接是否被隐藏起来了？
• 这个应用设计的时候是否是参照客户端架构模型？

第二章：交互设计

首先掌握基础

借用篮球界一个传奇人物的话，在你做任何事之前，你必须“首先掌握基础”。（说出这句话的是波士顿凯尔特篮球名宿Larry Bird，他同时也是一个Web App爱好者。）所有伟大的Web Apps都必须有一个清晰的集中点。

创建清晰的需求描述

伟大的web apps让用户很容易集中注意力。人们在某段时间内只能集中于少数几件事，因此，与那些提供给用户很多选择和很多特性的web apps相比，人们更喜欢那些没有干扰能让用户轻松完成手头任务的应用。

为了确保你的应用有一个集中点，创建一个简短描述，描述一下你的应用的目的和你的目标用户群。要保证你能在三分钟内将所有这一切向一个完全不了解的人描述清楚。

1．集中于人们使用你的应用的主要场景，限制用于其他场景的资源。

2．将正交或无关的任务分割成各自独立的应用程序，这可能意味着你的网站要提供多种应用，但每一种应用都是帮助集中于完成一个单一的任务。

Figure 2.1 – 保持集中，别在其他地方用力太多！

让我们来看看一些优秀web apps的假想的目标描述：

¨ GOJEE – 手边的个性化食谱。

¨ ASTRID – 帮助个人和团队有效组织和完成日常事务的待办事项清单，并让人们享受其中。

¨ WANDERFLY – 帮助用户根据他们的兴趣和预算发现新应用。

¨ KINDLE CLOUD READER – 随时随地阅读你的Kindle图书。

自成体系

虽然web apps可能会导入其他网站或应用程序的数据，但它们几乎都是自成体系的，它们都能让用户无需导航到其他网站或应用就能够完成他们的任务。根据这个定义，搜索引擎就不是一个应用，因为它会将用户导航到到其他网站以完成他们的任务。

让用户集中于应用

当用户打开一个web app的时候，他们期待这个应用就像是一个单个应用，而不是一系列网页的集合。一个伟大的web app会将自己作为一个独立实体，和网站区分开来，而不是掩埋在网站的导航体验之下。

Figure 2.2 – 保持自我是一种优点！

功能设计

伟大的web app设计消除了不必要的组件，让用户可以集中于完成任务所需的核心组件。在设计你自己的应用的时候，牢记以下准则是非常重要的：

1.尽可能减少与功能无关的web页面。例如，位于页面左上方通常用于将用户带回主页的logo，或者是页面底端的链接，将用户带向服务条款、隐私策略、项目政策以及你的主页。

2.尽可能减少页面数量，让应用尽量集中，不必从一个页面切换到另一个页面，而是从一个视图切换到另一个视图。

3.根据应用的核心场景设计导航，去除典型的web页面导航。你的页面很可能并不需要一个home按钮，或者导航分类菜单，将用户带向站点的不同部分。

4.让基本组件一直可见，这样人们就能很容易将注意力集中在正确的地方。

5.无论用户在哪一步，都在应用中提供一个一致的设计和应用体验。例如，不管用户是在写邮件、搜索邮件还是查看信息，退出按钮、返回收件箱按钮、写新邮件按钮，都应处于不同视图的同一位置。

Figure 2.3 – 保持应用体验的特点。 隐藏起传统元素！

鼓励用户进行交互、参与、完成任务

一个web app应用鼓励用户交互、参与并完成任务，而不是消极浏览，比如购买电影票、写文档或者与朋友分享照片、视频。不像网站，web apps给用户提供了一种主人翁的感觉，他们可以和内容或其他人进行交互。

让完成任务变得容易

很多人并没有时间和精力去搞清楚该如何使用一个应用。你的web apps应该非常简单，让用户很容易获取信息，选择他们下一步该做什么。精简你的界面，使用户可以即时掌握如何使用它。

伟大的web apps是即刻可用的，或者在初次使用时只需要很少的训练或者帮助。为了让人们成功使用你的应用，你应该做到：

1.减少提供给用户的选项数量，让应用尽可能精简，用户轻松就能完成手边任务。

2.对于控制键或者信息提示保持外观和感觉上的一致，避免让用户要费一番精力才能找到或者搞懂某些功能。

3.为所有的控制键提供清晰的、易于理解的标签，让用户容易知道控制键的功能。

利用设备的能力

Web apps可以感知地理位置，提供关于设备动作的详细信息，甚至可以在硬盘上存储数据。

现代浏览器让开发者能越来越多地利用设备的功能了。例如，web apps可以感知地理位置，提供设备运动方向的运动形式的详细信息，甚至在硬盘上存储数据。将来还会有更多功能，比如对摄像机、麦克风和许多其他组件的访问。

下面是几种你可以利用设备本身功能的方式：

1.在适当的时候，提供给用户地理位置相关的信息，比如附近的饭店或其他场地等。

2.将设备的动作作为游戏的新的输入，而不是使用鼠标或者光标。用户可以通过晃动设备来移动游戏中的角色。

3.在处理大量数据时，将其存储于用户的计算机上，这样就不必在每次应用启动时传输大量数据了。

使用多媒体加强用户体验和沉浸体验（IMMERSIVENESS）

丰富的多媒体体验曾经只能在客户端应用中出现，但现在web apps也可以实现给用户提供丰富的多媒体体验了。多媒体是整体体验的一部分，例如游戏或者视频聊天应用中的多媒体，或是以一种新奇的方式提醒用户会议时间或者新消息。

使用多媒体丰富应用的一些策略包括：

1.为事件提供语义，比如新邮件通知，事件提醒。

2.永远让用户能够去屏蔽声音或者其他多媒体应用，因为对用户来说这些多媒体应用可能是一种干扰。

3.使用页面可见性API（page visibility API）来阻止多媒体在用户没有看着你的应用的时候播放。

Figure 2.4 – 多媒体让你的web app 鲜活起来！

遵循下列设计模式

使用类似于native apps的设计模式

所有的视觉外观、视觉交互以及动作界面给人的感觉应该都是web app的感觉，而不是网站的感觉。Web app的交互性使得它与native app的设计惯例是天作之合。

一些帮助你做到这些的指南：

1.要到应用的其他部分时，使用触发各种动作的按钮，而不是导航到应用不同部分的链接。

2.在整个应用中使用工具栏和菜单访问所需要的常见功能。

3.使用对话框来提醒用户或从用户那里获得信息，而不是导航到新的页面。使用一个CS架构模型。

开发者要相信现代浏览器可以提供他们构建伟大应用所需的特性。Web apps应用利用这些特性，将数据和表现层剥离开，以减少网络开销，提供离线浏览，以及在需要修改表现层时不用修改整个应用。

Figure 2.5 –使用熟悉的设计模式来加强交互度和沉浸体验！

下面是你在设计你的web app时需要考虑的内容：

1.使用AJAX调用来传输数据，而不是依赖于请求-应答模型，因为在请求-应答模型中，整个页面都需要来回传输，包括所有的数据和表现层。

2.使用索引数据库（IndexedDB）让用户产生的或者使用的数据存储在本地。确保你不会遗失用户的数据，永远先将数据写在本地，再将其同步到你的服务。

如果你在设计的时候尊崇了这些指南，那么你的app就会感觉更快，并且像是一个native app。

本文编译自ling，原文地址。

译文出处：Web App Trend，转载请注明出处链接。

Google Web App开发指南第三章：案例研究

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

在接下来的这一章节中，我们创建了对应当前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潜能的体现。

旅程计划应用（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.进行导航。使用左右箭头或者自己约定的J\K键可以向前或向后翻动图片，这样就减少了用鼠标导航时寻找光标带来的干扰。当不需要的时候，箭头是被隐藏的，这样图片就不会受到影响。

使用HTML5的《progress》 tag，可以展现相册访问者的进度。

Picture Page是应用时代没有使用背景构建（ground-up reconstruction）的一个很好的例子。它优雅，视觉效果好，备受喜爱。因此我们可以在合适的地方应用HTML5提供的特性，将现有网站和新鲜的技术结合，展现出更好更大的图片。

Google Web App开发指南第四章：构建优秀的Web Apps

构建漂亮的应用

一个web app的视觉设计不仅要看起来美，也要用起来让人觉得方便

你的应用的美学设计将直接影响人们使用应用时的易用性。一个有着丰富视觉感受的应用既能让人用起来愉快，又不会分散人的注意力。它注重美观，使用类似于native apps设计模式的同时又不失易用性。

美观的图片、颜色、字体和速度、易读性、易用性之间需要达到均衡。用户和文化背景也非常重要，因为在不同文化中，颜色、布局以及文字选择可能有不同含义。应用的视觉设计不仅要让用户感觉愉悦，也要让他们觉得使用方便。

使用开放web特性来提供漂亮的设计

人们期待看到的web apps是与客户端或者mobile apps有着同样的视觉感受，而不是和平淡的web内容一样。

 

Figure 4.1 -美不美由应用的使用者说了算！

开发者可以通过使用以下技术来创造丰富的沉浸体验：

1.具有交互性和用户相关性的实时绘图界面。

2.加强可读性的字体和排版特性。

3.增加美观的纹理、渐变和变形，又要保证不会让人分心。

4.提示应用当前进度的图像和动画。

5.高质量高分辨率的图片，无论用户如何调整浏览器窗口，这些图片都不失美观。

6.在应用中使用现实世界中也有的图像、图示和图标，增加熟悉感和现实感，让用户容易将现实生活中的经验转移到应用中去。

有用的资源：

文章

• 更有意义的字体 –来自于 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

 使用全屏

Web页面和web apps之间的一大区别就是它们如何使用可用的屏幕空间。好的web apps和客户端应用一样，会占满可用的屏幕空间。

要有一个好的视觉设计，设计者应该做到：

1. 让你的app看起来像是一个应用，而不是一个有着左右边框的网站。
2. 将可用的屏幕空间占满。因为你不能确定设备具体尺寸，那么让内容可以根据屏幕大小进行调整，支持屏幕窗口大小调整，并且在需要的时候使用滚动。
3. 避免固定宽度的布局，因为这样的布局的左右边框会让用户联想起web页面。
4. 使用Full Screen API在合适的时候提供一个全屏界面。

Figure 4.2 -采用各种方式去引导你的用户！

使用全屏的web apps包括：

• GOJEE
• NEW YORK TIMES WEB APP
• WORD²
• GITHUB ISSUES
• 60 MINUTES

 

Web apps不应使用传统的导航元素

Web apps不应以来传统的浏览器导航元素，比如后退、前进、刷新按钮的等。它们也不应该使用传统的页面内导航元素，比如左侧或者顶端的向下链接。

尽管web apps不使用这些传统的导航元素，它们可能使用地址栏以保存或共享状态，使用向前或向后按钮在不同状态间切换。用户不再使用链接在不同页面间切换，而是使用按钮来改变当前内容的状态。。

 

让使用变得简单

人们在面对复杂冗长的注册过程时往往会望而却步。如果你的应用需要用户登录，那么，这个过程需要非常简单，只需要最少的信息就可以了。如果可能的话，让用户可以通过一个已有的OpenID来注册。在可以少管理一些账户和密码的时候，用户是非常开心的。

为了减少用户被吓走的几率，让注册登录过程更为简单，可以按如下方式去做：

1．  对于不想登录或注册的用户提供应用。

2．  对于选择注册登录的用户进行一些奖励，比如附加功能或是更为完整的服务。

3．  支持通过OpenID来注册，比如Google账户，以减少用户需要记忆的用户名和密码。

4．  如果你已经有了一个登录系统，考虑将其与OpenID建立关联。

在这些方面做的很好的WEB APPS ：

• ETHERPAD - EtherPad让用户可以立刻开始使用应用，并且只在用户想要保存的时候才要去他们注册。
• PICNIK -让登陆门槛很低，用户可以不用登陆或注册就能编辑并保存照片。

Figure 4.3 – 让人们在初次尝试时就觉得简单！

有用的资源：

库 & 框架

• GOOGLE IDENTITY TOOLKIT (GITKIT) 是一个免费工具包，网站经营者可以使用它让用户通过邮件地址和密码登陆，并通过联合登陆替换密码。
• JANRAIN LOGIN HELPER 帮助网站实现基于电子邮件的注册，通过内联电子邮件验证帮助注册转换。

样例

• OPENID WIKI GALLERY – 一个使用用户已有账户的创新性的登陆注册应用。

 

提供离线功能，提升性能

开发者应该提供离线应用功能，并且通过在本地缓存应用数据来提升性能，在用户联网的时候只解析需要的数据。

要提升性能并提供离线功能，可以按如下方式去做：

1. 使用应用缓存来确保浏览器将必须的应用代码进行了缓存，比如HTML、CSS和Javascript。
2. 使用web存储来保存少量需要快速获取的信息，或者将这些信息保存在cookies中。
3. 将组织好的数据存储一个web数据库，比如IndexedDB，它能让你存储大量数据，并且能进行高效查询和遍历。

在这方面做的很好的WEB APPS：

• AMAZON KINDLE CLOUD READER – 使用 AppCache, 本地存储以及WebSQL可以在 iOS上的以及桌面版的浏览器中工作。
• SPRINGPAD - 使用 AppCache, 本地存储以及WebSQL，提供了一个不论是否在线都能使用的应用。
• THE NEW YORK TIMES WEB APP – 使用 AppCache以及WebSQL，提供了一个再iOS以及桌面浏览器上都能工作的离线应用。

Figure 4.4 – 让数据保存在手边以提升性能！

有用的资源：

文章

• HTML5ROCKS 离线功能概览
• “离线功能”之内涵及值得关注的点

库 & 框架

• MANIFESTR – 一个用于创建AppCache manifest file的书签。
• LAWNCHAIR -一个提供了轻量级的、自适应、优雅的持久性解决方案的库。

 

提供数据自动同步

Web apps让用户可以将数据保存在云中。用户应该能够确信他们的工作是安全的，他们不必去考虑他们是何时何地保存的数据，或者他们手上正在使用的是否是最新版本的数据。Web apps让用户可以集中于工作而不必担心工作是否安全。

为了提供好的体验，WEB APPS 需要:

1. 在本地保存数据并经常和云端进行同步，这样人们就不必担心网络连接或者他们离开应用以后数据会发生什么
2. 在用户第二次登陆时让用户处于他们上次离开时的状态，让他们能很快捡起上次遗留的工作，更有效率

有用的资源：

手册

• 使用HTML5离线功能工作
• 应用缓存简介
• 使用INDEXEDDB

Figure 4.5 – 使用AppCache 以及数据一致性技术来加强易用性，即使是在离线情况下!

 

通过提示让用户知道更充分的信息

客户端应用通过状态消息、进度条、对话框通知和其他方法来让用户知道更充分的信息，了解应用目前在做什么及其进度； web apps也应用做到这一点。

要让用户保持信息充分，了解应用在做什么及其进度，可以按如下方式去做：

1. 显示加载提示，这样用户就能明白有一个任务正在进行中。
2. 使用HTML提醒来提供一些用户可能想要实时知道的重要信息。
3. 使用HTML5的进度元素来显示进度。
4. 显示模态对话框（modal dialogs）来让用户提供更为具体的信息或者应用完成了需要进行的处理以后再让用户继续前进。
5. 动画动作可以模拟现实世界中的一些动作，让用户更容易理解当前过程。

在这方面做的很好的WEB APPS:

• GMAIL – 提供新邮件提醒
• ASTRID – 为即将到来的任务提供提醒
• TWEETDECK –当你所跟的tweeter有新消息时提醒你

 

允许使用拖放来上传或者下载文件

如果你的应用与处理文件相关，那么你应该让用户很容易完成相关操作。永远不应该让用户去猜测他们的文件是否已经下载下来了、文件下载到何处，也不应该让用户想要分享文件的时候感觉到困难。

在处理文件时:

1. 在文件输入类型中使用多属性或目录属性让用户可以上传多个文件或者整个文件夹。
2. 使用拖放，让用户可以从自己的计算机拖动文件到你的应用程序，反之亦然。
3. 通过使用File System APIs来在用户机器本地来存储或处理文件。

在这方面做的很好的WEB APPS:

• GMAIL – 允许你将附件拖入邮件消息中。
• GOOGLE DOCS – 允许你通过将文件拖入浏览器来上传文件。
• BOX.NET – 通过将文件拖入上载部件让上传文件很容易。
• APPMATOR – 可以通将文件拖出浏览器来下载你刚刚创建的Chrome Web Store app package file，让下载十分容易。

Figure 4.6 – 提供多文件上传。

将性能也看做是一个特性

没有什么比人们的时间更宝贵了。用户期待客户端应用加载快，响应快。Web apps同样需要达到这一指标。

要设计速度更快的应用，web apps应该：

1. 先加载应用，再加载用户数据。通过使用AppCache在本地保存你的应用代码，你可以减少启动应用时所需要的网络请求。因为应用通过缓存保存在设备上了，它就能立刻启动了。在应用需要解析任何数据的时候，都给出加载提示。
2. 遵循网站及应用的快速响应的设计原则。你的web app仍然是基于web的，所以你仍然需要遵循网站设计时的一些快速响应的设计原则