昆明UI培训
达内昆明五一路

18487146383

热门课程

如何设计选择菜单?

  • 时间:2016-11-18
  • 发布:昆明UI培训
  • 来源:产品壹佰

好的设计无非就是让最合适的交互方式出现在了最合适的地方。这篇文章,达内昆明UI培训带你学习如何更好地设计选择菜单。

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

填写的流程越长,用户就越难填写完整。尤其是在小屏幕的设备上用大拇指进行输入,那感觉简直糟透了,而有些元素有可能让填写体验更糟——比如选择菜单。

选择菜单和选项数量

在一些界面设计中,有的选择菜单只有2个选项,有的却有20多个。这两种情况其实都是错误运用了选择菜单的反面案例。

错误一:选项过多

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

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

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

错误二:选项太少

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

选择菜单和标签

所有的输入表格都需要有标签,用来提示用户他们应该怎样选择输入内容。选择菜单也是如此,你应该给予用户一些有用的提示,而不只是简单地标注一个“无选项”或者“请选择”。

提示标签应该快速直接地告诉用户他们应该选择“什么”,并且暗示用户他将要在“哪些”选项里面进行挑选。

选择菜单和默认选项

其实如果你并不能确定大部分(大概90%吧)用户会选择哪一个选项,你就不应该使用默认选项,尤其当这个信息是必填的时候。这里的原因是,如果你提供了默认填写的选项,你也很有可能提供了并非是用户真实需要的选项,而用户也很有可能因为浏览得太快而根本没注意到有些信息已被默认填写了。

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

选择菜单和移动设备

Josh Brewer曾经提出:移动设备放大了所有的可用性问题。

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

移动设备的屏幕空间很有限,这就意味着你只有很小的区域能用以展示信息的上下文。即便这些信息可以上下滑动查阅,也意味着用户在移动设备上浏览和定位选项会比在电脑浏览器上需要更多时间。

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

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

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

难点二:如何合理利用屏幕空间

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

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

记住一点在设计选择菜单时的共同原则——你必须尽量简化不必要的输入操作。在某些情况下,多个选择菜单甚至能被浓缩成一个输入控件,从而精简交互流程,并大大降低用户在理解选择操作时的认知负担。

上一篇:如何设计一个完美的框架?
下一篇:你知道图标设计的三个基本属性吗?

如何在UI设计中更好地运用颜色?

2017年1月网页流行设计趋势

UX设计中颜色微调的五个技巧

如何根据字体重心来设计字体?

选择城市和中心
贵州省

广西省

海南省

扫一扫

了解更多干货