Web界面设计 by nnooss.docx

web界面设计本书描述了6个设计原理，即直截了当、简化交互、足不出户、提供邀请、使用变换、即时反应。一、直截了当（alancooper:在哪里输出，就要允许在哪里输入）1.1行内编辑和覆盖层编辑的最佳实践通过使用业内编辑，用户在修改页面显示的内容时可以观察到上下文的变化。以下是一些相关的最佳实践：对单个字段使用行内编辑。当编辑多个项中的一个时使用行内编辑。这样可以保持视图中的上下文。尽可能保证显示和编辑模式的大小相同。这样可以避免页面抖动，同时减少两个模式间切换对用户造成的干扰。尽可能让显示与编辑模式之间的变换平滑而连续。在主要考虑易读性时，通过鼠标悬停邀请用户编辑。不要让用户通过双击切换至编辑模式。如果用户频繁编辑某个项的可能性较大（即可编辑性与易读性同等重要），或者须要编辑的项比较少，可以再被编辑项旁边放一个加方括号的“[edit]”链接。这样既可以从视觉上区分链接与显示的文本，又不至于分散用户注意力。在编辑系列中的某一项时，应该在原地显示编辑链接（以便保持上下文）。如果须要用户更多地关注被编辑的项，可以使用覆盖层。这样可以消除意外修改关键值的可能性。不要针对多个字段创建多个覆盖层。如果想通过复杂的表单编辑一系列元素，应该使用一个覆盖层。在使用覆盖层时，尽量使用最轻量级的样式，以减少显示与编辑状态切换造成的干扰。如果隐式地提交编辑结果不明显，可以使用按钮。在空间允许的情况下，要让用户通过按钮来保存和取消编辑。只要可能就要允许用户拖动覆盖层，以便看到被遮住的内容。1.2表格编辑的最佳实践要格外关注表格数据显示的可读性。不要通过鼠标悬停启动单元格编辑。否则，不仅会让用户有进入“地雷阵”之感，更会干扰到正常的界面交互。要通过鼠标单击启动编辑功能。尽管使用鼠标双击也并非完全不能接受（因为这会让人感觉像在使用Excel），但单击更方便一些。注意要为编辑操作提供稍大一些的空间，例如使用下列编辑框或增大编辑单元格。尽可能模仿用户已经熟悉的常规性单元格切换操作（例如使用Excel的惯例）。1.3群组编辑与模块配置的最佳实践如果有一定数量的项须要编辑，应该使用可切换的编辑模式；否则，直接显示编辑元素会造成视觉干扰。启用和禁用功能要尽可能相似（对称性交互）。进入和退出编辑模式的操作应该更像是切换。在将配置作为重要功能的情况下，应该让模块支持行内编辑式的配置。如果模块配置没有显示内容重要，则应该以全局方式开启/关闭模块配置。选择编辑模式的原则：如果页面中有一个字段须要编辑，应该优先使用单字段行内编辑。对于多个字段或更复杂的编辑，可以使用多字段行内编辑。如果编辑时的上下文无关紧要，或者用户在编辑时应该全神贯注，则使用覆盖层编辑。对于网格编辑，应该遵循表格编辑模式。在处理页面中的多个项时，群组编辑是平衡视觉干扰与易发现性的有效方案。如果想让用户直接配置模式，则应该使用模块配置模式。2.1拖放模块的最佳实践如果在拖动期间清晰地展示预览效果很重要，应该使用占位符目标。如果想避免页面抖动（保持布局稳定），应该使用插入条目标。要使用被拖动对象的中心点来确定放置位置。要使用稍微透明的被拖动对象（幻影），不要使用不透明的版本。如果让用户拖动表示模块的缩略图，应该使用插入条目标。2.2拖放列表的最佳实践只要可能，就应该实时拖动列表项并使用占位符。要使用鼠标位置来确定拖动目标的位置。如果目标是保证拖动速度，或者被拖动的项很大，应该考虑使用插入目标。因为呈现插入条与动态重排列表相比，更容易实现。由于列表中的拖放功能不容易被发现，应该考虑提供重排列表的替代方式。当用户使用替代方式重排列表时，再借机通过一次性提示，告知下次可以使用拖放。2.3拖放对象的最佳实践如果对象间的视觉关系很复杂，要使用插入目标来表示放置位置（以便降低拖动对页面布局的干扰）。对于父/子关系，突出显示父对象也可以表明放置位置。只要有可能，就要在鼠标悬停时显示拖动提示，以表明可以拖动。在对象被拖动3像素或鼠标按下超过0.5秒时启动拖动。与光标同步直接定位被拖动的对象。偏移拖动对象会让人感觉它与拖动操作不相关。鼠标悬停在可以拖动的对象上时，要通过改变光标表明可以拖动。2.4拖放操作的最佳实践在WEB界面中使用拖放操作必须有所节制，因为该项功能不容易发现，有时甚至达不到期望的效果。为完成相同的操作提供一种可替代方案。将拖放操作作为一种快捷机制。不要使用拖放来设置简单的属性。应该使用更直接的方式设置对象属性。不要仅仅为了实现拖放而创建人造视觉元素。拖放应该符合对象在界面中的自然表现。在鼠标悬停时提供明确的邀请，以说明可以执行的操作。2.5拖放集合的最佳实践要提供归集项目的可替代方式（例如，提供向购物车中添加商品的不同方式）。在拖动开始时，突出显示有效地放置区域以提示用户可以把项目放在哪里。要提供备用提示，以