有效的交互策略——菜单选择、表格填充和对话框
有效的交互策略——菜单选择、表格填充和对话框
有效的交互策略——菜单选择、表格填充和对话框
菜单选择、表格填充等动作对于我们来说再简单不过了，我们每天上网的过程中，都不断的进行着菜单选择，注册登录的时候也同样离不开表格填充。以前我对于这些一点儿也不敏感，习以为常，仔细研究才发现其中的奥妙。于是写了本文，总结一下，如有不当之处，请大家指正。
一、菜单选择
滚动菜单可能是我们见的最多的一种。它其中包含的项可能多达数千个，如果这时还要用户一项一项的选择，明显就是不良的交互策略。此时，快捷键就尤其重要。比如，当用户输入字母“M”，直接滚动到“M”开头的第一个单词处，这样，就方便了用户查找。
另一种是鱼眼菜单，它同时在屏幕上显示全部的项，但只以全尺寸显示光标附近的项，项离光标越远，字体越小。比较有名的就是Apple Mac OS X。这样的菜单风格相对其他菜单速度明显快，但是却不适用项数过多的菜单。
当项由数值范围构成时，滑块风格可用于选择值。用户可以滑动滑块来选择相应的数值。我接触比较多的滑块选择方式就是应用在各种p图软件中。调色度、曝光度的时候，用手指直接滑动滑块，每个数值对应的效果直接反映在图片上，可以让用户直接看到效果，并且便于在各选项之间进行快速比较。
二维菜单可以让用户更好的概览各个选项，减少所需的动作数，并且允许快速选择。比如，用日历来选择航班的出发日期，淘宝上根据分类选择自己要找的商品等等。
随着项数的增长，树形结构菜单也是很好的选择，但是，它的设计原则是宽而浅，每个菜单的广度控制在4~8，深度不超过3~4级。否则窄而深的树形菜单会给用户一种厌烦的感觉。
菜单种类介绍这么多。那么菜单内容怎么组织呢？
首先要对项进行分类。分类尽可能覆盖所有项，并且确保各项之间不重叠，使用熟悉的术语使各项之间彼此截然不同。
其次，对各项进行排序。比较常用的排序方式像按字母顺序、时间顺序、数值次序、最常用项优先等等。比如微软office软件中字体的排序方式，利用字母排序和最常用项优先相结合， 将最流行的字体放在顶部，其余字体按字母顺序排列。
二、表格填充
我之前进行的项目中，包含表格的设计。所以我在这里总结一下我的经验。首先，给表格起一个容易理解的标题，避免计算机术语。不然会让用户不理解。关于表格布局，我之前经验不足，将各个项采用左对齐的方式，但是问题出现了，之后的输入域没办法垂直对齐，视觉感受不好。但经过学习《用户界面设计》之后，我对此有了新的认识。将项采用右对齐的形式，可以使输入域垂直对齐，这种布局可以让用户更加关注输入域。
对必选域进行明显标注，以免产生缺少必要信息的情况。
域的说明信息及填写方式一定要明确的告诉用户。避免用户填错信息。
当用户填完一项信息时，对信息的及时反馈和保存是至关重要的。及时反馈可以让用户知道自己填写信息的正确与否，及时保存可以使用户在填写出现错误之后不必重新填写正确的信息。避免重复操作。对此，有些网站采用自动保存或者提供用户保存按钮。对于这两种方案，我更倾向于前者，毕竟用户大多时候都想偷个懒嘛。
三、对话框
对话框通常在屏幕的某部分上面弹出，所以存在遮挡住某部分信息的危险。因此，对话框应该出现在相关屏幕项的附近，而不是上面。这一点，在我的项目中也有体现。对话框应该足够独特，用户可以容易的将它与背景区分开，但是在视觉上又不会有破坏性。此时，快捷键对加快对话框的响应速度是必不可少的。通常有两种处理方式：（1）用Escape（退出）键来取消和关闭对话框，使用Enter（回车）加以选择。（2）对话框并不是总是要求用户回答或关闭的，例如，很多“查找”框在完成搜索之后还是打开的。此类允许用户继续他们的工作，并在以后再次返回对话框。所以应具体问题具体分析。
在对话框的设计上，我的想法是，（1）将对话框的背景与网页背景区分。如：网页背景颜色属于深色系，对话框背景颜色可选则较浅的颜色，并且设置相应的透明度，来柔和视觉上的冲击。（2）对话框在打开和关闭的过程，尽量遵循淡入淡出的原则。其实不仅是对话框，其他弹出框的设计原则都可以是这样。因为它们属于网页整体的一部分，既要让它融于整体，又要让它特性独立。
我关于菜单选择、表格填充和对话框的设计策略就总结到这，欢迎大家与我交流。我还是个新手，希望吸取前辈的经验。
最后，谢谢阅读。
Danee
