4
页内编辑：多字段行内编辑 (Backpackit)
1 邀请编辑
3 编辑
2 转换至编辑模式
4 完成
5
页内编辑：混合显示和编辑模式
图：Yahoo!360通过“Edit Blast”链接邀请编辑 图：Yahoo!360在实现“冲击波”由显示到编辑模式切换时，把视觉上的差异降到了最低
图：Yahoo!360能在编辑模式下实时显示新的“冲击波”样式
嵌入层列表 单击一篇文章会扩展显示包 含该内容的嵌入层。列表中 的其他标题仍然保留在视图 中。
图：在列表视图中，Google Reader以折叠列表形式显示所有文章——当前选择的文章除外。
原理三：足不出户 —— 交互式单页
图：Gap使用交互式单页实时显示每种颜色有货的尺码
原理三：足不出户 —— 交互式单页
太短 反馈实时给出。密码太短 了。
中等 在用户改变密码强弱时， 动态测量密码强度。
强 漫行的蓝色加上“strong” 表明密码很安全。
原理六：即时反应 —— 即时反馈
注册表单 开始时，表单中只显示简章的提 示和输入框。
检查是否可用 当在“Desired username”中输 入用户名后，会显示“Check Availability”按钮。单击可以检 查用户名。
8
利用拖放：拖放列表
图：Backpackit支持以直接拖放方式重排计划任务列表项
9
利用拖放：拖放对象
图：Cogmap支持以拖放方式动态重排组织结构图
10
拖动反馈：突出显示
图：会通过突出显示节点来表明被拖动的节点将成为哪个节点的子节点。
11
直接选择
图：Gmail让用户通过复选框选择并操作邮件
6
页内编辑：覆盖层编辑 (Yahoo!Trip Planner)
1
2
非编辑状态 3
邀请编辑 4
编辑
完成
7
注意事项
图：Yahoo!Trip Planner为旅行者调整在目的地的行程提供一个覆盖层编辑器
图：为选择每天的时间提供了更好的体验。 显然，在一个列表中选择时间（或输入时间）比打开多个下拉菜单更直接。
原理六：即时反应 —— 即时反馈
检查 正在检查用户名是否可用。
尝试另一个名字 如果用户名已经被别人注册， 按钮就会变成“Try another name”。
图：Google在创建帐户之前通过实时预览来显示密码强度
原理六：即时反应 —— 渐进展现
搜索启动 单击“Search”按钮触发第一 种进度指示，即把搜索按钮的 标签修改为“Searching…”
原理三：足不出户 —— 对话框覆盖层
图：Google Reader的较早版本中曾使用过Javascript警告框；但Windows和Macintosh的警告框表现方 式不同。 目前已经被轻量级覆盖层所取代。
原理三：足不出户 —— 详情覆盖层
图：AOL Finance在显示附加信息的同时没有妨碍导航；详细信息通过单击蓝色按钮激活。
原理三：足不出户 —— 嵌入层
自定义嵌入层 BBC主页的自定义控件直接 出现在页面的上下文中。
图：BBC主页将自定义工具放在了一个嵌入层中，一旦激活该嵌入层会向下滑出。
原理三：足不出户 —— 列表嵌入层
Google Reader的列表视图 在列表视图中，只以列表形 式显示每篇博客文章的标题。
原理三：足不出户 —— 列表嵌入层
12
原理二：简化交互
图：在Digg上单击每篇文章旁边的“Digg”按钮可以轻松地推举好文章
13
原理二：简化交互
图：在 Digg的第一版中，要推举一篇文章，需要打开新页面
14
原理二：简化交互
图：Digg现在通过“digg it”按钮可以在同一个页面中记录一次推荐
15
原理二：简化交互 实时可见工具
图：Amercian Express通过输入覆盖层引导用户填写注册信息。
退出 单击任何区域，覆盖层退出。 用户可以通过覆盖层单击被 遮挡的字段。
原理三：足不出户 —— 嵌入层
激活 点击”Customize homepage”按钮可以激活 自定义嵌入层。
原理三：足不出户 —— 嵌入层
自定义嵌入层(滑出） 嵌入层滑进视图。
原理三：足不出户 —— 输入覆盖层
输入表单 表单中的每个字段都有简单 的输入提示。此时没有其他 帮助信息。
输入覆盖层 切换进入或单击某个字段， 会在该字段周围显示一个覆 盖层。其中包含更详细的帮层
遮挡字段 覆盖层会遮挡下面的字段， 但不会遮挡左、右侧的字段。
选择数据 在第一栏中，日历显示可选日期。也可以从中选择入住和离店日期。 根据选定日期和入住的人数，会显示出可以预订的房间类型。
原理三：足不出户 —— 交互式单页
房间及付款 第二栏显示可以预订的房间。 选择房间后，右侧则会显示价格信息。 在第三栏填写信用卡及联系方式可以完成预定。 图：Broadmoor Hotel为预订房间提供了一个单页系统。
Web界面设计实例

Web界面设计
以六大 设计原理为依托，结合现代认知心理学的最新发展成果，展示流行Web应用程序的
界面设计实例。
直截了当 简化交互 足不出户 提供邀请 巧用变换 即时反应
2
原理一：直截了当
Web应用程序通常须要用户在新页面中编辑信息
在Flickr中，直接单击标题即可实现行内编辑
图：Gamil支持通过上下文工具为邮件加星标 单击一下星标就可以将邮件标记为重要。未加星的状态被处理成浅颜色和低对比度，从而 把列表的干扰降至最低。
原理二：简化交互
图：Google Reader管理订阅的页面为每个订阅都显示了很多操作，页面看起来比较拥挤
17
原理二：简化交互 悬停即现工具
图：Backpackit在鼠标悬停时显示可用的工具 提示：为了减少视觉干扰，可以将非主要操作先隐藏起来，而在需要时再显示。
原理六：即时反应
实时建议 用户输入”ajax”时，页面左手边会给出建议的关键词。
原理六：即时反应
实时搜索 此时，第一个匹配的关键词“ajax”会触发实时搜索，并在实时建议的上下文中显示搜索结果。
原理六：即时反应
切换其他搜索建议 实时建议区变成了实时搜索导航器。单击“ajax amsterdam”，右边的窗格中会显示搜索结果。 图：的LiveSearch是组合实时建议与实时搜索的尝试
转移 几秒钟后，搜索结果页显示出 来。不过，现在还没有结果。 但是，页面以三种方式给出了 进度指示：“显示结果”页面、 “动态票价”预算和进度指示 条。
原理六：即时反应 —— 渐进展现
分批显示结果 现在显示了第一组结果。票价预算 面板的动画结束。进度条也折叠为 位于结果上方的小条。
完成 显示全部结果。进度条消失。
原理六：即时反应 —— 微调搜索
左侧筛选，右侧显示结果 这是一个典型的微调搜索式布局。左侧筛选区包含复选框和滑动条。
原理六：即时反应 —— 微调搜索
实时微调 修改筛选条件，实时调整结果。 图：Kayak使用微调搜索模型为用户提供了实时调整行程的功能
原理六：即时反应 —— 即时反馈
图：Google在创建帐户之前通过实时预览来显示密码强度
原理五：巧用变换 —— 聚光灯效果
图：Backpackit通过聚光灯效果突显界面变化
修改前 选择“Edit”
修改中 原地出现编辑字段。按下 “Rename this list”按钮。
突显变化 修改后，新标题被迅速加亮。聚 光灯效果在1秒钟内淡出。。
聚光灯效果淡出 1秒钟到了，聚光灯效果淡出为 原先的白色背景。
原理二：简化交互
图：如果采用始终显示的上下文工具，Backpackit的界面会变成什么样。
原理二：简化交互
图：Yahoo!Buzz在突出显示行的同时显示了相关工具
原理三：足不出户 —— 对话框覆盖层
激活 单击“Buy”按钮启动购买 过程。
显示覆盖层 通过轻量级覆盖层显示确认 对话框。
图：Netflix使用轻量级的覆盖层来让用户确认是否要购买以前查看过的DVD；而且，这还是一个应用 了亮盒的模态覆盖层。
原理四：提供邀请 —— 静态邀请
图：Yahoo!Answer和Discover Card使用了明确的1-2-3步骤来提供引导操作邀请
原理四：提供邀请
图：文本邀请及引导操作按钮都是给出引导操作邀请的方式
原理四：提供邀请
图：Yahoo!登录区域给出了引导操作邀请，吸引用户添加登录封印：第一个方案（左） 使用褶角图像吸引用户注意；第二个方案（右）使用了带有不同背景颜色的矩形区域
3
原理一：直截了当
Cooper总结了一条简单的规则：在哪里输出，就要在哪里输入。从更一般的意义上来理解，就是 让界面能够直接响应用户的操作——直截了当。 为了说明这条规则，我们将探讨一些主要的交互模式，采用这些模式有助于界面更直接地响应用 户操作。 • 页内编辑：直接编辑内容 • 利用拖放：使用鼠标直接移动对象 • 直接选择：通过操作直接选择对象
图：Farecast利用了多种进度指示器让界面给人爽快灵敏之感。
Q&A