web界面设计

本书描述了6个设计原理，即直截了当、简化交互、足不出户、提供邀请、使用变换、即时反应。

　　

　　一、直截了当（alan cooper:"在哪里输出，就要允许在哪里输入"）

　　

　　1.1 行内编辑和覆盖层编辑的最佳实践

　　通过使用业内编辑，用户在修改页面显示的内容时可以观察到上下文的变化。以下是一些相关的最佳实践：

　　对单个字段使用行内编辑。

　　当编辑多个项中的一个时使用行内编辑。这样可以保持视图中的上下文。

　　尽可能保证显示和编辑模式的大小相同。这样可以避免页面抖动，同时减少两个模式间切换对用户造成的干扰。

　　尽可能让显示与编辑模式之间的变换平滑而连续。

　　在主要考虑易读性时，通过鼠标悬停邀请用户编辑。

　　不要让用户通过双击切换至编辑模式。

　　如果用户频繁编辑某个项的可能性较大（即可编辑性与易读性同等重要），或者须要编辑的项比较少，可以再被编辑项旁边放一个加方括号的“[edit]”链接。这样既可以从视觉上区分链接与显示的文本，又不至于分散用户注意力。

　　在编辑系列中的某一项时，应该在原地显示编辑链接（以便保持上下文）。

　　如果须要用户更多地关注被编辑的项，可以使用覆盖层。这样可以消除意外修改关键值的可能性。

　　不要针对多个字段创建多个覆盖层。如果想通过复杂的表单编辑一系列元素，应该使用一个覆盖层。

　　在使用覆盖层时，尽量使用最轻量级的样式，以减少显示与编辑状态切换造成的干扰。

　　如果隐式地提交编辑结果不明显，可以使用按钮。

　　在空间允许的情况下，要让用户通过按钮来保存和取消编辑。

　　只要可能就要允许用户拖动覆盖层，以便看到被遮住的内容。

　　

　　1.2表格编辑的最佳实践

　　要格外关注表格数据显示的可读性。

　　不要通过鼠标悬停启动单元格编辑。否则，不仅会让用户有进入“地雷阵”之感，更会干扰到正常的界面交互。

　　要通过鼠标单击启动编辑功能。尽管使用鼠标双击也并非完全不能接受（因为这会让人感觉像在使用Excel），但单击更方便一些。

　　注意要为编辑操作提供稍大一些的空间，例如使用下列编辑框或增大编辑单元格。

　　尽可能模仿用户已经熟悉的常规性单元格切换操作（例如使用Excel的惯例）。

　　

　　1.3群组编辑与模块配置的最佳实践

　　如果有一定数量的项须要编辑，应该使用可切换的编辑模式；否则，直接显示编辑元素会造成视觉干扰。

　　启用和禁用功能要尽可能相似（对称性交互）。进入和退出编辑模式的操作应该更像是切换。

　　在将配置作为重要功能的情况下，应该让模块支持行内编辑式的配置。

　　如果模块配置没有显示内容重要，则应该以全局方式开启/关闭模块配置。

　　

　　选择编辑模式的原则：

　　如果页面中有一个字段须要编辑，应该优先使用单字段行内编辑。

　　对于多个字段或更复杂的编辑，可以使用多字段行内编辑。

　　如果编辑时的上下文无关紧要，或者用户在编辑时应该全神贯注，则使用覆盖层编辑。

　　对于网格编辑，应该遵循表格编辑模式。

　　在处理页面中的多个项时，群组编辑是平衡视觉干扰与易发现性的有效方案。

　　如果想让用户直接配置模式，则应该使用模块配置模式。

　　

　　2.1拖放模块的最佳实践

　　如果在拖动期间清晰地展示预览效果很重要，应该使用占位符目标。

　　如果想避免页面抖动（保持布局稳定），应该使用插入条目标。

　　要使用被拖动对象的中心点来确定放置位置。

　　要使用稍微透明的被拖动对象（幻影），不要使用不透明的版本。

　　如果让用户拖动表示模块的缩略图，应该使用插入条目标。

　　

　　2.2拖放列表的最佳实践

　　只要可能，就应该实时拖动列表项并使用占位符。

　　要使用鼠标位置来确定拖动目标的位置。

　　如果目标是保证拖动速度，或者被拖动的项很大，应该考虑使用插入目标。因为呈现插入条与动态重排列表相比，更容易实现。

　　由于列表中的拖放功能不容易被发现，应该考虑提供重排列表的替代方式。

　　当用户使用替代方式重排列表时，再借机通过一次性提示，告知下次可以使用拖放。

　　

　　2.3拖放对象的最佳实践

　　如果对象间的视觉关系很复杂，要使用插入目标来表示放置位置（以便降低拖动对页面布局的干扰）。

　　对于父/子关系，突出显示父对象也可以表明放置位置。

　　只要有可能，就要在鼠标悬停时显示拖动提示，以表明可以拖动。

　　在对象被拖动3像素或鼠标按下超过0.5秒时启动拖动。

　　与光标同步直接定位被拖动的对象。偏移拖动对象会让人感觉它与拖动操作不相关。

　　鼠标悬停在可以拖动的对象上时，要通过改变光标表明可以拖动。

　　

　　2.4拖放操作的最佳实践

　　在WEB界面中使用拖放操作必须有所节制，因为该项功能不容易发现，有时甚至达不到期望的效果。

　　为完成相同的操作提供一种可替代方案。将拖放操作作为一种快捷机制。

　　不要使用拖放来设置简单的属性。应该使用更直接的方式设置对象属性。

　　不要仅仅为了实现拖放而创建人造视觉元素。拖放应该符合对象在界面中的自然表现。

　　在鼠标悬停时提供明确的邀请，以说明可以执行的操作。

　　

　　2.5拖放集合的最佳实践

　　要提供归集项目的可替代方式（例如，提供向购物车中添加商品的不同方式）。

　　在拖动开始时，突出显示有效地放置区域以提示用户可以把项目放在哪里。

　　要提供备用提示，以告诉用户也可以使用拖放归集项目。

　　

　　关于拖放的最佳实践

　　在拖动对象时尽量保持页面抖动最小化。

　　在用户按下鼠标并拖动了3像素或按住鼠标超过0.5秒时启动拖动。

　　通过拖放执行直接操作应该作为界面中更直截了当方式的替代方法。

　　应该关注拖放过程中的所有趣味瞬间。记住，必须让用户在整个过程中随时能够得到必要的信息。

　　使用邀请来提示用户可以使用拖放。

　　

　　3.1切换选择的最佳实践

　　在选择位于行中的元素时，使用切换选择。

　　为便于选择非连续的元素，要使用切换选择。

　　在列表中，除了复选框之外再突出显示行能够明确选择状态。

　　在分页显示内容时，应该只把操作应用于当前页中的选中项。

　　如果提供“选择全部”选项，则还应考虑跨越多个分页选择全部元素的方式。

　　对选中了多少个元素给出清晰地反馈。

　　只要可能，就在没有选中项的情况下禁用无法使用的操作。如果不禁用相关操作，必须添加其他界面元素说明为什么不能执行该操作。

　　

　　3.2集合选择的最佳实践

　　如果允许用户在多页中选择项，应该把（从每一页）选择的项归集到一个独立的区域。这样，即使用户在不同页面间切换，也会保持明确的选择状态。

　　在同个界面中，可以通过集合选择来混合切换选择和对象选择。

　　要注意通过集合选择归集的项目与在当前页面中选择的项或对象可能带来的二义性。

　　

　　3.3对象选择的最佳实践

　　在可选元素能够被拖动时使用对象选择。

　　在模仿桌面式交互的Web应用程序中使用对象选择。

　　支持标准的修改键扩展（Shift扩展选项；Ctrl用于非连续选项）。

　　在浏览器能力有限的情况下，应考虑将对象选择降级为切换选择。

　　

　　混合选择的最佳实践

　　使用复选框选择对象可以不必打开对象。

　　使用对象选择来选择并打开对象。

　　

　　二、简化交互

　　

　　4.1实时可见工具的最佳实践

　　如果上下文工具涉及邀请用户执行非常重要的操作，则应该保持其始终可见。

　　保持视觉干扰最少化。

　　保持可见项目最少化。

　　

　　4.2悬停即现工具的最佳实践

　　如果操作不太重要且希望突出内容的易读性（或还有其他更重要的可见工具），应该把上下文工具隐藏于鼠标悬停之后。

　　在显示上下文工具时要避免使用覆盖层。覆盖层有可能导致悬停与遮挡反模式，而且用户为执行最基本的操作还会过多使用鼠标。

　　在显示上下文工具时，要保证页面各个部分的布局不变。

　　避免任何元素出现几像素的偏移，以及页面元素的移位。这样会把用户的视线从真正应该关注的地方转移开。

　　确保显示的图标清楚且容易理解。如果可能，只使用文本标签。

　　工具覆盖层应该即刻显示。与信息覆盖层不同，用户须要使用其中的工具尽快执行操作。

　　

　　4.3开关显示工具的最佳实践

　　如果操作并不是主要目的，但又想为用户直接操作页面对象提供方便时，可以为页面或其中某个区域添加打开/关闭工具的开关。

　　要尽量保证打开和关闭编辑模式的对称性。

　　要保证显示与编辑视图的切换尽可能平滑稳定，从而为编辑提供一种“软模式”。

　　

　　4.4级联递进工具的最佳实践

　　如果不想基于鼠标悬停显示上下文工具，可以使用级联递进工具。

　　利用级联递进工具确保用户能明确地激活上下文工具。

　　在须要提供默认的常规操作和其他不常用的操作时，可以使用Mutton。

　　在可能的情况下，最好能避免使用级联。为了使用下一级菜单而执行过多鼠标操作，很容易导致用户反感。

　　尽可能把操作放在距离激活点最近的位置上。

　　

　　4.5二级菜单的最佳实践

　　可以把替代命令或快捷方式放在二级菜单中。

　　可以考虑在用户按住鼠标1秒钟时激活二级菜单，让用户不必使用右键单击。

　　应该为二级菜单应用不同于浏览器标准二级菜单的样式。

　　不要通过二级菜单显示除备用命令之外的操作。

　　不要再与传统网页相似的地方使用二级菜单。

　　可以使用二级菜单操作一组选中的对象。

　　

　　上下文工具的通用实践

　　上下文工具是方便用户操作的有效手段。把工具放在接近焦点的地方，而且让它容易被激活，可以达到简化交互的目的。

　　在不能选择元素并对它们集中处理的情况下，可以使用上下文工具。

　　在想为用户操作页面中的项提供快捷方式时，可以使用上下文工具。

　　如果想在焦点位置明确地邀请操作，可以使用上下文工具。

　　要尽量做到让操作即时生效，不要让用户多浪费一步。

　　当在通常认为不可能的地方提供操作时（悬停显示上下文工具），要尽可能运用常见技术（超链接、下拉箭头、按钮）。

　　让操作明确而直接。除了公认的图标（如（X）或垃圾桶表示删除）之外，不要使用其他意义不明显的图标。

　　通过按钮实现首要操作，通过链接实现次要操作。

　　要确保用于打开菜单或扩展信息的目标足够大。千万不要使用8像素X8像素大的目标。

　　要保证工具容易理解、容易定位，而且执行快捷。以便用户感觉既简单又容易。

　　

　　三、足不出户

　　

　　5.1对话框覆盖层的最佳实践

　　应该尽量使用对话框覆盖层，避免使用浏览器的弹出窗口。

　　如果覆盖层中包含用户不能忽略的重要信息，或者应该使用模态对话框，则可以为覆盖层应用亮盒效果。

　　避免使用不必要的对话框覆盖层（白痴对话框），以防打断用户的流程。

　　在页内交互可以满足需要的情况下，就不要使用覆盖层。

　　尽量不要使用JavaScript警告框，因为警告框在不同操作系统中的表现不一。

　　

　　5.2详情覆盖层的最佳实践

　　使用详情覆盖层显示更多的附加信息，以便减少不必要的页面变换。

　　对于悬停激活的详情覆盖层，在激活之前设置短暂时间延迟（约0.5秒）。这样可以避免页面的行为类似捕获器。

　　对于悬停激活的详情覆盖层，也提供一种简单的禁用方式（例如，鼠标移出）。

　　设计详情覆盖层时，要 保持激活和禁用操作的对称性（不要让关闭覆盖层比激活它还困难）。

　　在激活后，不要使用长时间动画或效果延迟显示详情覆盖层。如果单击对象会调用其他操作，要使用悬停。在Yahoo! News中，单击链接会打开新闻页面；而悬停则可以为用户提供快速预览。

　　在没有明确提供获取更多信息的方式时，要使用悬停。如果使用悬停激活覆盖层，则不必再添加用于激活的其他用户界面控件。

　　如果想让用户通过更明确的方式获取更多信息，可以使用单击。在使用单击时，一般要提供“更多内容”链接或类似打开详细信息的按钮。

　　如果要在覆盖层中提供其他链接，要使用单击。尽量在适当位置显示覆盖层（通过悬停来激活），并将单击其中的一个链接作为默认操作（即鼠标不用移动）。

　　

　　5.3输入覆盖层的最佳实践

　　使用输入覆盖层简化表单外观。将详细的帮助信息放在覆盖层中。

　　在使用输入覆盖层时，要保证表单字段与覆盖层中字段的唯一区别是有意为之的（例如，为覆盖层中的输入字段应用加粗的边框）。

　　在使用输入覆盖层时，要让用户单击任何地方都可以退出覆盖层。

　　

　　6.1对话框嵌入层的最佳实践

　　使用对话框嵌入层实现页面自定义。这样，既可以调整页面，又可以同时看到结果。

　　为了消除在页面中嵌入对话框的突兀感，可以使用快速的滑动动画。

　　使用对话框嵌入层来联系触发它的元素和对话框。

　　使用对话框嵌入层显示不太重要、不属于页面主流程的工具。

　　

　　6.2详情嵌入层的最佳实践

　　可以使用详情嵌入层在上下文中显示附加信息，且不会遮挡其他信息。

　　使用详情嵌入层可以避免悬停与遮挡反模式。

　　关闭嵌入层的操作要简单。

　　

　　6.3标签页的最佳实践

　　使用标签页在当前页页面中显示附加信息。

　　避免在一个页面上使用多组标签页。

　　如果确实须要在一个页面中使用多组标签页，要让它们的内容区域在视觉上有所差别。

　　把最重要的内容放在第一个标签页中。许多用户可能不会查看其他标签页。

　　通过鼠标单击来激活标签页。

　　如果其他标签页中的内容同样很重要，可以采用悬停来激活标签页——不过，这种方式必须谨慎使用，因为有可能引起用户的反感。

　　

　　7.1虚拟滚动的最佳实践

　　保证让用户随时知道自己所处的位置。无论使用工具提示条还是状态栏，总之要告诉用户他们滚动后呈现的数据范围。

　　在用户等待数据加载期间给出反馈。

　　对于既定的数据集，应该创造一个完全加载状态下的虚拟空间的假象。

　　对于搜索结果，要随着滚动持续扩展虚拟空间。

　　为了提供优雅的往返导航体验，应该在用户浏览搜索结果时保持有限的虚拟空间。

　　

　　7.2内置分页的最佳实践

　　使用内置分页来呈现自然地“分块”效果，同时还能保证切换页面时平滑流畅的体验。

　　正确处理后退按钮。要让后退按钮也对分页有效。

　　在使用内置分页时，要只更新“虚拟页面”，而不是整个页面。

　　在使用内置分页时，要考虑以渐进加载方式向虚拟空间中加载更多的内容。

　　

　　7.3传送带的最佳实践

　　传送带非常适合显示有明显视觉差异的内容。图像、cd封面、电影剧照，都非常适合。

　　如果内容排列杂乱无章，用户使用起来容易迷惑。

　　如果开始处的内容相关性高，越往后越低，则传送带也是一个不错的选择；因为它可以突出显示关系最紧密的项。

　　如果要显示的内容很多，而传送带提供的窗口又太小，那么在实际查找内容时其实并不方便。

　　由于所有内容共享有限空间，因此可以通过传送带把虚拟内容排成一行。

　　如果传送带并不是循环传送内容，或者用户须要往返浏览内容，则在两端放置箭头可能会令人厌烦。

　　把往返箭头放在一起虽然可以方便操作，但却不太容易被发现。换句话说，这种方案虽然解决了往返浏览内容的问题，但按钮却脱离了人们期望的位置。

　　要保证内容足够大，内容间的空白也要足够，以便区分。

　　要支持部分显示下一项内容。这样可以吸引用户滚动内容，即通过部分内容查看完整内容。

　　单击左箭头应该是从左向右滚动内容，单击右箭头应该是从右向左滚动内容。

　　

　　7.4虚拟摇摄的最佳实践

　　将虚拟摇摄作为滚动无穷大的2D画面的替代手段。

　　尽量在摇摄漫游过程中体现出惯性运动。

　　

　　7.5虚拟空间的最佳实践

　　针对基于时间的内容使用混合的滚动分页。

　　在移动画面时使用虚拟摇摄。

　　使用ZUI显示包含丰富细节的大量信息。

　　

　　8.1交互式单页和嵌入式部件的最佳实践

　　利用这两个模式来简化用户操作流程。

　　利用这两个模式来增加交易机会。

　　在上下文中显示预览。

　　实时显示无效选项。这样可以体现用户注意自己选择的结果。

　　尽可能以嵌入方式显示购物车。

　　把购物车视为一类界面元素，而不是额外的过程。

　　如果推荐建议与用户有关且重要，可以展示附加步骤。

　　

　　8.2静态单页最佳实践

　　如果过程比较复杂，可以使用多页流程。

　　如果想隐藏之前或之后的上下文，同时把用户注意力集中在多步中的一个任务上，可以使用多页流程。

　　如果步骤较少，而且不想让用户因页面跳转而退出，可以使用静态单页。

　　使用视觉处理技巧减少用户心理上的步骤数。

　　在多步操作中，对用户当前位置所剩步骤给出提示。

　　尽可能汇集默认选项，以简化整个流程。

　　运用参照信息、颜色提示、互动手法及简单的视觉样式达到简化步骤的效果。

　　把最简单的操作放在多步流程的前面。

　　

　　四、提供邀请

　　

　　9.1引导操作邀请的最佳实践

　　针对主要操作使用引导操作邀请。

　　针对简单的1-2-3步骤使用引导操作邀请。

　　把引导操作的区域设计得容易吸引用户注意力。但不要干扰整个页面的视觉外观。

　　可以利用空白区域来引导用户操作。

　　可以利用（看起来）未完成的区域引导用户操作。人类的天性会促使用户想要“完成”它。

　　

　　9.2漫游探索邀请的最佳实践

　　在重新设计站点或发布新站点并需要向用户介绍一系列功能时，可以使用漫游探索邀请。

　　尽可能密切漫游探索邀请与站点本身的联系。

　　要保持漫游探索邀请简明扼要，还要使其容易退出而且容易重新启动。

　　不要指望通过漫游解决界面本身存在的问题。

　　保持漫游过程简单。

　　

　　10.1悬停邀请的最佳实践

　　当操作不如内容重要，而且希望界面整洁时，使用悬停邀请。

　　在实现悬停邀请时，可以通过改变光标、改变背景和显示提示条共同配合表明所邀请的操作。

　　在悬停邀请期间，尽力为用户提供单击后产生结果的预览。

　　在交互的不同阶段，尽量点缀一些用户熟悉的元素。通过熟悉的概念引出新概念有助于用户快速理解新功能。最常见的元素是按钮、链接、下拉箭头和众所周知的图标。

　　通过距离表明邀请操作作用的目标对象。当用户鼠标悬停于某个对象上时改变光标，意味着操作将作用于鼠标下方的对象。

　　

　　10.2预期功能邀请的最佳实践

　　通过人们习以为常、司空见惯的概念引出新的、不熟悉的交互方式（例如，在上下文工具中显示一个执行操作的超链接）。

　　使用可感知的预期功能来给出邀请提示（例如，用向下的箭头表示可以打开下拉菜单，而用向上的箭头表示可以关闭菜单）。

　　把邀请安排在适当的上下文中，特别是要靠近交互的主体。

　　

　　10.3拖放邀请的最佳实践

　　在拖放期间，尽可能利用多个瞬间确保用户理解每一次细微的邀请。

　　在鼠标位于可拖动区域时，应该改变光标形状。

　　在用户拖动明确提供一个可以抓握的空间。

　　

　　五、巧用变换

　　变换的最佳实践

　　变换是与用户沟通和交流的重要手段。虽然有可能被滥用，但也有可能用得其所。

　　变化越快，表明事件越重要。

　　快速移动看起来要比快速的颜色变化更重要。

　　朝向用户移动看起来要比远离用户移动更重要。

　　非常慢的变化可以用在不干扰用户注意力的处理上。

　　移动可以表达对象的位置变换。看着对象从一个地方移动到另一个地方，用户就能记住它的去向，便于将来找到该对象。

　　正常情况下，变换应该具有反射性。如果某个对象移动并收缩到了新位置，用户应该能够再次打开该对象，同时还应该看到相反的打开变换效果。如果用户删除的对象淡出页面，那么创建的对象就应该淡入页面。这就是对称性交互（Symmetry of Interaction）原理的实际应用。

　　滥用效果的广告提醒我们，一定不要过度使用变换。

　　尽量不要只依靠变换来表达界面的变化。

　　让变换发生在用户视力的焦点区附近。这样变换就更容易被用户擦觉，也更不像广告。

　　花里胡哨的效果令人讨厌；只能干扰用户，不利于向用户传达信息。

　　

　　六、即时反应

　　

　　13.1实时建议邀请的最佳实践

　　把实时建议作为辅助提示的手段，而不是直接的搜索关键词。

　　在提供建议时，要注意给出每条建议的上下文。

　　在合理的延迟（如输入中的暂停）之后再给出建议。

　　界面应该能够帮助用户缩小目标选项，但不要过分限制用户。

　　

　　13.2实时搜索的最佳实践

　　针对自由开放式搜索使用实时搜索。

　　为返回的每个搜索结果提供适量的上下文。应该迅速返回结果。

　　为帮助用户缩小查找范围，应该显示足够多的结果，但也不能因显示太多而分散用户注意力。

　　在有条件的情况下，可以在一个界面中组合实时建议和实时搜索。

　　

　　13.3微调搜索的最佳实践

　　具有多种特征（多个侧面）的商品，适合使用微调搜索来筛选结果。

　　选用具有视觉冲击力的筛选控件。

　　谨慎使用滑动条，因为滑动条不容易控制。

　　使用动画效果来平滑每一次微调迭代。

　　通过适当的时间延迟来避免不必要的微调搜索（等到用户设置完筛选条件再触发搜索）。

　　

　　14.1实时预览的最佳实践

　　使用实时预览防止出错。

　　使用实时预览唤起用户的参与感。

　　即时给出反馈。

　　把预览放在操作的上下文中。

　　尽量让用户即时看到对象的变化。

　　使用实时预览避免页面切换。

　　在性能可以接受的情况下，基于输入字段中每个字符的输入给出实时预览。否则，在焦点离开字段时触发预览。或者，提供明确的操作邀请按钮，让用户启动预览。

　　

　　14.2渐进展现的最佳实践

　　使用渐进展现引导用户完成较长的过程。

　　只在必要时显示必需的帮助信息。

　　用户一离开输入字段就移出帮助信息。

　　在适当的时候，对将要显示什么给出提示。

　　

　　14.3进度指示的最佳实践

　　使用进度指示改善感知性能。

　　使用简单的指示器。

　　把指示器放在接近发生操作的位置。

　　如果焦点是用户输入框，则在输入框旁边显示进度指示器。

　　如果焦点是输入或操作的结果，则在结果区域上方显示进度指示器。

　　尽可能通过指示器显示实际的进度。否则，可以用循环动画代替（转轮图标、往复动画，等等）。

　　

　　14.4定时刷新的最佳实践

　　用定时刷新保持站点内容新鲜。

　　使用定时刷新表明内容的关联度。

　　刷新不能太频繁；要在易读性和关联之间寻求平衡。

　　为用户提供控制自动刷新的手段。可以显示提供也可以隐式提供；通常隐式提供最好。一般来说：可以将在相应区域发生的事件作为暂停刷新的信号。