[转]《Web界面设计》原理一：直接了当

1 .1、行内编辑和覆盖层编辑的最佳实践

• 通过使用业内编辑，用户在修改页面显示的内容时可以观察到上下文的变化。以下是一些相关的最佳实践：
• 对单个字段使用行内编辑。
• 当编辑多个项中的一个时使用行内编辑。这样可以保持视图中的上下文。
• 尽可能保证显示和编辑模式的大小相同。这样可以避免页面抖动，同时减少两个模式间切换对用户造成的干扰。
• 尽可能让显示与编辑模式之间的变换平滑而连续。
• 在主要考虑易读性时，通过鼠标悬停邀请用户编辑。
• 不要让用户通过双击切换至编辑模式。
• 如果用户频繁编辑某个项的可能性较大（即可编辑性与易读性同等重要），或者须要编辑的项比较少，可以再被编辑项旁边放一个加方括号的“[edit]”链接。这样既可以从视觉上区分链接与显示的文本，又不至于分散用户注意力。
• 在编辑系列中的某一项时，应该在原地显示编辑链接（以便保持上下文）。
• 如果须要用户更多地关注被编辑的项，可以使用覆盖层。这样可以消除意外修改关键值的可能性。
• 不要针对多个字段创建多个覆盖层。如果想通过复杂的表单编辑一系列元素，应该使用一个覆盖层。
• 在使用覆盖层时，尽量使用最轻量级的样式，以减少显示与编辑状态切换造成的干扰。
• 如果隐式地提交编辑结果不明显，可以使用按钮。
• 在空间允许的情况下，要让用户通过按钮来保存和取消编辑。
• 只要可能就要允许用户拖动覆盖层，以便看到被遮住的内容。

 

1.2、表格编辑的最佳实践

• 要格外关注表格数据显示的可读性。
• 不要通过鼠标悬停启动单元格编辑。否则，不仅会让用户有进入“地雷阵”之感，更会干扰到正常的界面交互。
• 要通过鼠标单击启动编辑功能。尽管使用鼠标双击也并非完全不能接受（因为这会让人感觉像在使用Excel），但单击更方便一些。
• 注意要为编辑操作提供稍大一些的空间，例如使用下列编辑框或增大编辑单元格。
• 尽可能模仿用户已经熟悉的常规性单元格切换操作（例如使用Excel的惯例）。

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

• 如果有一定数量的项须要编辑，应该使用可切换的编辑模式；否则，直接显示编辑元素会造成视觉干扰。
• 启用和禁用功能要尽可能相似（对称性交互）。进入和退出编辑模式的操作应该更像是切换。
• 在将配置作为重要功能的情况下，应该让模块支持行内编辑式的配置。
• 如果模块配置没有显示内容重要，则应该以全局方式开启/关闭模块配置。

选择编辑模式的原则：

• 如果页面中有一个字段须要编辑，应该优先使用单字段行内编辑。
• 对于多个字段或更复杂的编辑，可以使用多字段行内编辑。
• 如果编辑时的上下文无关紧要，或者用户在编辑时应该全神贯注，则使用覆盖层编辑。
• 对于网格编辑，应该遵循表格编辑模式。
• 在处理页面中的多个项时，群组编辑是平衡视觉干扰与易发现性的有效方案。
• 如果想让用户直接配置模式，则应该使用模块配置模式。

1.4、选择编辑模式的原则

• 如果页面中有一个字段须要编辑，应该优先使用单字段行内编辑
• 对于多个字段或更复杂的编辑，可以使用多字段行内编辑
• 如果编辑时的上下文无关紧要，或者用户在编辑时全神贯注，则使用覆盖层编辑
• 对网格编辑，应该遵循表格编辑模式
• 在处理页面中的多个项时，群组编辑是平衡视觉干扰与易发现性的有效方案
• 如果想让用户直接配置模式，则应该使用模块配置模式

2.1拖放模块的最佳实践

• 如果在拖动期间清晰地展示预览效果很重要，应该使用占位符目标。
• 如果想避免页面抖动（保持布局稳定），应该使用插入条目标。
• 要使用被拖动对象的中心点来确定放置位置。
• 要使用稍微透明的被拖动对象（幻影），不要使用不透明的版本。
• 如果让用户拖动表示模块的缩略图，应该使用插入条目标。

2.2拖放列表的最佳实践

• 只要可能，就应该实时拖动列表项并使用占位符。
• 要使用鼠标位置来确定拖动目标的位置。
• 如果目标是保证拖动速度，或者被拖动的项很大，应该考虑使用插入目标。因为呈现插入条与动态重排列表相比，更容易实现。
• 由于列表中的拖放功能不容易被发现，应该考虑提供重排列表的替代方式。
• 当用户使用替代方式重排列表时，再借机通过一次性提示，告知下次可以使用拖放。

2.3拖放对象的最佳实践

• 如果对象间的视觉关系很复杂，要使用插入目标来表示放置位置（以便降低拖动对页面布局的干扰）。
• 对于父/子关系，突出显示父对象也可以表明放置位置。
• 只要有可能，就要在鼠标悬停时显示拖动提示，以表明可以拖动。
• 在对象被拖动3像素或鼠标按下超过0.5秒时启动拖动。
• 与光标同步直接定位被拖动的对象。偏移拖动对象会让人感觉它与拖动操作不相关。
• 鼠标悬停在可以拖动的对象上时，要通过改变光标表明可以拖动。

2.4拖放操作的最佳实践

• 在WEB界面中使用拖放操作必须有所节制，因为该项功能不容易发现，有时甚至达不到期望的效果。
• 为完成相同的操作提供一种可替代方案。将拖放操作作为一种快捷机制。
• 不要使用拖放来设置简单的属性。应该使用更直接的方式设置对象属性。
• 不要仅仅为了实现拖放而创建人造视觉元素。拖放应该符合对象在界面中的自然表现。
• 在鼠标悬停时提供明确的邀请，以说明可以执行的操作。

2.5拖放集合的最佳实践

• 要提供归集项目的可替代方式（例如，提供向购物车中添加商品的不同方式）。
• 在拖动开始时，突出显示有效地放置区域以提示用户可以把项目放在哪里。
• 要提供备用提示，以告诉用户也可以使用拖放归集项目。

关于拖放的最佳实践

• 在拖动对象时尽量保持页面抖动最小化。
• 在用户按下鼠标并拖动了3像素或按住鼠标超过0.5秒时启动拖动。
• 通过拖放执行直接操作应该作为界面中更直截了当方式的替代方法。
• 应该关注拖放过程中的所有趣味瞬间。记住，必须让用户在整个过程中随时能够得到必要的信息。
• 使用邀请来提示用户可以使用拖放。

3.1切换选择的最佳实践

• 在选择位于行中的元素时，使用切换选择。
• 为便于选择非连续的元素，要使用切换选择。
• 在列表中，除了复选框之外再突出显示行能够明确选择状态。
• 在分页显示内容时，应该只把操作应用于当前页中的选中项。
• 如果提供“选择全部”选项，则还应考虑跨越多个分页选择全部元素的方式。
• 对选中了多少个元素给出清晰地反馈。
• 只要可能，就在没有选中项的情况下禁用无法使用的操作。如果不禁用相关操作，必须添加其他界面元素说明为什么不能执行该操作。

3.2集合选择的最佳实践

1. 如果允许用户在多页中选择项，应该把（从每一页）选择的项归集到一个独立的区域。这样，即使用户在不同页面间切换，也会保持明确的选择状态。
2. 在同个界面中，可以通过集合选择来混合切换选择和对象选择。
3. 要注意通过集合选择归集的项目与在当前页面中选择的项或对象可能带来的二义性。

3.3对象选择的最佳实践

• 在可选元素能够被拖动时使用对象选择。
• 在模仿桌面式交互的Web应用程序中使用对象选择。
• 支持标准的修改键扩展（Shift扩展选项；Ctrl用于非连续选项）。
• 在浏览器能力有限的情况下，应考虑将对象选择降级为切换选择。

混合选择的最佳实践

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

[1] http://blog.jokry.me/2010/06/designing-web-interfaces-principle-1/