如何设计选择菜单.pdfVIP

如何设计选择菜单 好的设计无非就是让最合适的交互方式出现在了最合适的地方，就比如当你让用户做出填写 选择的同时，也提供了恰当的操作界面，而记住， 恰当“ ”的方式并非固定不变，有时是选框 ，有时是自动填写的输入框，有时是下拉列表，总是根据具体情况而定。 在界面设计中正确地利用选框、下拉列表或菜单，可以带来不少很棒的效果，比如： 图1 ：典型的下拉选择菜单 我们都知道，用户不喜欢直接在表格里输入信息。 填写的流程越长，用户就越难填写完整。尤其是在小屏幕的设备上用大拇指进行输入，那感觉简直 糟透了，而有些元素有可能让填写体验更糟 —— 比如选择菜单。 选择菜单和选项数量 在一些界面设计中，有的选择菜单只有 2 个选项，有的却有 20 多个。这两种情况其实都是错误运用 了选择菜单的反面案例。 错误一：选项过多 当一个选择菜单的可选项超过 15个，用户浏览起来就非常困难，也很难定位到自己要的选项。 过长的下拉选项列表非常可怕，它们不仅需要长时间的滚动浏览，而且无法一次显示全部的选项， 这让用户不得不花费很长时间去寻找，从而让体验变得很差。 图2 ：选择国家的选择列表 一个典型的例子就是 选择所在国家“ ”的列表 ( 图2) ，它拥有超过 100 个选项，用户根本无法对整个列 表有一个快速了解，也很难在短时间内找到所需选项。 我自己就经常找不到 美国“ ”在哪！通常 美国“ ”作为一个较为热门的选项，会被放在列表的前部。可是 如果有些列表是按照字母排序，那么像 “阿富汗 ”等国家会被放在列表前部 (英文以 A 开头 ) ，而相 应的 美国“ ”和 阿联酋“ ”则会一起被放到列表的尾部 (英文均以 U开头 ) ——所以作为用户的我，常常在 寻找选项之前，还得先想想这个选择菜单的排列逻辑是什么。 当用户明确知道他们需要找到哪个选项的时候，可以考虑用具有自动填写功能的输入框，而非选择 菜单。 还是以 选择所在国家“ ”为例，从编程的角度来说，你可以尝试自动定位用户所在地，或者实时根据 用户输入的第一个单词来自动给出最接近的猜测选项 ( 图3) 。 图3 ：输入 “United自动匹配可能选项” 快速小结：当选项超过 15个，别用选择菜单，考虑一下使用能让用户直接输入或可自动填写的输 入框。 错误二：选项太少 如果选项少于 7个，你却仍旧使用下拉选择列表的话，那么你就隐藏了其实可以直接全部显示的 信息，换句话说，用户需要进行额外的点击才能看到全部的选项。 图4 ：只有 2 个选项的下拉列表 在这种选项较少的情况下，使用单选框会更好 ( 图5) 。这样用户能够立即看到有几个可选项，也能快 速知道这些选项分别是什么，而不是需要再点击一次才能看到选项信息。 图5 ：只有 2个选项时，直接显示全部选项 快速小结：如果选项少于 7个，那么直接用单选框吧。 选择菜单和标签 所有的输入表格都需要有标签，用来提示用户他们应该怎样选择输入内容。选择菜单也是如此，你 应该给予用户一些有用的提示，而不只是简单地标注一个 无选项“ ”或者 请选择“ ”。 提示标签应该快速直接地告诉用户他们应该选择 ”什么 ，并且暗示用户他将要在“ 哪些“ ”选项里面进行 挑选 ( 图6) 。 图6 图6 在选框内和选框外都显示提示信息，明确告知用户如何进行下一步，例如下拉箭头暗示用户 “点 击查看全部选项 ”，上方提示句则告知用户为何要选择所在国家。 选择菜单和默认选项 其实如果你并不能确定大部分 (大概 90% 吧) 用户会选择哪一个选项，你就不应该使用默认选