产品需求如何设计选择菜单.docx

产品需求如何设计选择菜单.docx

《产品需求如何设计选择菜单.docx》由会员分享，可在线阅读，更多相关《产品需求如何设计选择菜单.docx（9页珍藏版）》请在冰点文库上搜索。

产品需求如何设计选择菜单

如何设计选择菜单

好的设计无非就是让最合适的交互方式在了最合适的地方，就比如当你让用户填写选择的同时，也提供了恰当的操作界面，而记住，“恰当”的方式并非单独不变，有时是选框，有时是自动填写的输入框，有时是下拉列表，总是根据具体情况而定。

在界面设计中正确地利用选框、下拉列表或菜单，可以带来不少棒极了的效果，比如：

图1：

典型的下拉偏好菜单

我们都知道，用户不喜欢直接在表格里底下输入信息。

填写的流程越长，用户就越难填写完整。

尤其是在小屏幕的设备上用大拇指进行输入，那感觉简直糟透了，而有些元素情趣有可能让填写品味更糟——比如选择菜单。

在一些界面设计中会，有的选择菜单只有2个选项，有的却有20多个。

这两种情况情况其实都是错误运用了可以选择菜单的反面案例。

错误一：

选项过多

当一个选择菜单的选取可选项超过15个，用户浏览上去就非常困难，也很难定位到自己要的选项。

过长的下拉选项列表非常可怕，它们不仅需要长时间的滚动浏览，而且无法一次分析表明全部的测试表明选项，这让用户不得不花费很长时间去寻找，从而让体验变得复杂很差。

图2：

选择国家的选择列表

一个典型的实例就是“选择所在国家”的列表（图2），它拥有超过100个选项，根本无法对整个列表有一个快速了解，也很难在短时间内找到所需选项。

我自己就经常找不到“美国”在哪！

通常“美国”作为一个较为热门的可选，须要被放在列表的前部。

可是如果有些列表是按照符号排序，那么像“阿富汗”等国家会被放在列表前部（英文以A开头），而相应的“美国”和“阿联酋”则会一起被放到列表的车顶（英文均以U开头）——所以作为用户的我，常常在寻找选项之前，还得先想想这个选取菜单的排列逻辑是什么。

当用户明确明白知道他们需要找到哪个选项的时候，可以考虑用具有自动填写功能的输入框，而非选择菜单。

还是以“选择所在国家”为例，从计算机程序的角度来说，你可以尝试自动定位用户西南角，加载或者实时根据用户输入的第一个单词来自动给出最接近的猜测选项（图3）。

图3：

输入“United”自动匹配可能可选

快速小结：

当选项超过15个，别用选择菜单，考虑一下使用能让用户直接输入或可自动填写的输入框。

错误二：

选项太少

如果选项少于7个，你却仍旧使用下拉选择列表的话，那么你就隐藏了其实可以直接全部显示的信息，换句话说，用户可能需要进行额外的点击才能看到全部的选项。

图4：

只有2个选项的下拉列表

在这个选项较少的情况下，使用单选框会更好（图5）。

这样用户能够立即看到有几个可选项，也能快速知道这些选项分别是什么，而不是需要再点击一次才能看得出来选项信息。

图5：

只有2个选项时，直接显示剩余选项

快速小结：

如果选项少于7个，那么直接用单选框吧。

所有要的输入表格都需要有标签，用来提示用户他们应该怎样选择输入内容。

选择菜单也是如此，你应该给予用户一些有用预览的提示，而不只是简单地标注一个“无选项”或者“请选择”。

提示标签应该快速随意地告诉用户他们应该选择”什么“，并且暗示用户他库季在“哪些”选项里面进行挑选（图6）。

图6

图6在选框内和选框外都显示提示信息，明确提出告知用户如何进行下一步，例如下拉箭头预示用户“点击查看尽数选项”，上方提示句则告知客户端为何要选择所在国家。

其实如果你并不能确定大部分（大概90%吧）用户会选择哪一个选项，你就不应该选用默认选项，尤其当这个信息是必填的时候。

这里的原因是，可选如果你提供了默认填写的选项，你也很有可能提供了并非是普通用户真实需要的可选选项，而用户也很有可能因为浏览得太快而根本没注意到有些信息已被默认填写了。

因此在大部分的情况下，更安全的办法是警示用户遗漏了某个问题的填写，而不是为他们提供一个有可能是错误的选项。

JoshBrewer曾经提出：

移动设备放大了所有的可用性问题。

使用以下手法拉方式展开的选择菜单，在电脑浏览器上可能还算不上是个糟糕的选择，但在移动设备上，却可能产生很多问题，甚至选择菜单本身的情景也无法呈现。

移动设备的屏幕空间很有限，这就意味着你只有很小的区域能用以展示信息的上下文。

即便这些原始数据可以上下滑动查阅，需要意味着用户在移动设备上上传和定位选项会比在电脑浏览器上也更多时间。

总是下拉列表总是会带来有些问题，而尽管移动设备上已有不少简单合适的控件，设计师却常常在选择菜单的设计上缺乏恰当的，一个比较糟糕的例子就是让所有的选择菜单都以下拉列表的方式展开（图7左）。

图7左：

整个输入过程都是下拉选择菜单，过于冗长和平淡

图7右：

针对每一个问题和可选项提供了对应的输入方式

难点一：

填完一个表格可能需要很多步

在移动设备常常完成一系列选择菜单的输入上是一个多步骤的流程，并且可能让用户花费除非过多的精力。

以图8为例，完成这样一个填写流程需要步操作，包括多次的点击、上下滑动查看以及最终确认并点击选项。

图8

难点二：

如何合理利用屏幕空间

选择大屏幕菜单很难有效地利用屏幕空间，比如iOS9中系统自带的显示列表样式只占用50%的屏幕空间，这也就导致用户只能在这50%的空间之中进行查看和操作。

图9：

一半的画面空间通常只能显示7行选项

解决方法

假设各组选项来自任一上下文情景，且不能考虑各组选项彼此的联系，你可以考虑下面的控件来替代下拉列表：

1、利用一组单选键按钮或隔开式选项来显示类型相似但又彼此独立的选项（例如选择地区，图10）

图10，RadioGroup

2、数字步进器，可以被用在只能递增/递减其供应量的选项上，以便让用户能便捷地微调数值（例如偏好乘客数量，图11）

图11，Stepper

3、状态切换器，可用于快速转换两种相反状态（图12）

图12，Switcher

4、滑动控制器，可以流畅地控制数值，并且告知可选覆盖面积（图13）

图13，Slider

当你需要设计一个比较复杂的下拉选择表格时，先针对性地看看每一个问题和其包含选项的特性，并考虑哪一种交互形式更某种适用。

记住一点在设计选择菜单之时共同原则——你必须尽量简化不必要的输入操作。

在某些情况下，多个选择菜单甚至能被浓缩成一个输入控件，从而精简交互操作流程，并大大降低用户在理解选择操作时的认知负担。

选择菜单常常常常会暴露设计上的诸多问题，比如缺乏必要性的填写引导、在不必要的时候暗藏选项、只提供选择却不允许提供用户修改等。

但这些并不意味着你应该在界面设计中避免使用它们，选择菜单之所以容易产生诸多问题，反而是因为设计师并没有在合适的情况下以合适的方法加以运用。

到底是什么让设计有好有坏？

好的设计无非就是让最合适的交互方式出现在了最合适的地方，就比如当你让用户做出填写选择的同时，也提供了武断的操作界面，而记住，“恰当”的方式并非固定不变，有时是选框，有时是自动填写的输入框，有时是下拉列表，总是根据具体情况而定。

译者：

小包