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

winston

by ling

首先掌握基础借用篮球界一个传奇人物的话，在你做任何事之前，你必须“首先掌握基础”。（说出这句话的是波士顿凯尔特篮球名宿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的感觉，而不是网站的感觉。Web app的交互性使得它与native app的设计惯例是天作之合。
下面这些建议有助于你设计出有着native app感觉的web app：
1.要到应用的其他部分时，使用触发各种动作的按钮，而不是导航到应用不同部分的链接。
2.在整个应用中使用工具栏和菜单访问所需要的常见功能。
3.使用对话框来提醒用户或从用户那里获得信息，而不是导航到新的页面。使用一个CS架构模型。
开发者要相信现代浏览器可以提供他们构建伟大应用所需的特性。Web apps应用利用这些特性，将数据和表现层剥离开，以减少网络开销，提供离线浏览，以及在需要修改表现层时不用修改整个应用。

Figure 2.5 –使用熟悉的设计模式来加强交互度和沉浸体验!
下面是你在设计你的web app时需要考虑的内容：
1.使用AJAX调用来传输数据，而不是依赖于请求-应答模型，因为在请求-应答模型中，需要将整个页面进行来回传输，包括所有的数据和表现层。
2.使用索引数据库（IndexedDB）让用户产生的或者使用的数据存储在本地。确保你不会遗失用户的数据，永远先将数据写在本地，再将其同步到你的服务。
如果你在设计的时候遵循了这些指南，那么你的app就会感觉更快，并且更像是一个native app。
原文链接：DESIGNING WEB APPLICATIONS
相关文章：Google Web App开发指南第一章：什么是Web Apps？