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 有新消息时提醒你

有用的资源：

文章

• CHROMIUM的项目 – 桌面提醒
• 现代Web设计中的模态对话框
•  WEB 设计中的Modal以及Modelessboxes

手册

• 使用NOTIFICATIONS API

库 & 框架

• BOOTSTRAP MODAL  – 根据传统的模态js 插件所作的简化
• JQUERY UI  - jQuery UI 提供了一套综合性的核心交互插件、UI 插件以及视觉效果

 

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

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

在处理文件时:

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

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

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

Figure 4.6 – 提供多文件上传。

有用的资源：

手册

• NATIVE HTML5 DRAG & DROP TUTORIAL
• 在Javascript中读取本地文件
• 使用FILE SYSTEM APIS

 

将性能也看做是一个特性

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

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

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

有用的资源：

文章

• 浏览器是如何工作的：现代浏览器的背后
• STEVE SOUDERS 推崇的快速加载网站的14 条规则
• 使用HTML5构建快速响应网站应遵循的惯例

手册

• 提升你的HTML5 APP的性能
• 通过导航计时测量页面加载速度
• 性能

书

• STEVE SOUDERS 写的高性能WEB SITES
  
• 更快的WEB SITES:Web开发者应该遵循的惯例

原文链接：BUILDING GREAT WEB APPLICATIONS

相关文章：

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

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

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

Google Web App开发指南第三章：项目样例 （下）

 

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

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

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