你不曾见过的移动端下拉列表更换方案

以下内容由Mockplus团队翻译清算，仅供进修交换，Mockplus是更快更简朴的原型计划器材。

在表单中行使下拉列表好像不是什么很费劲的工作，它们在用户界面上占用的空间不大，可自动验证输入，支持全部的赏识器和各平台。并且实现起来简朴利便，用户对其也足够相识。

同时，按照Luke Wroblewski和其他一些人的说法，下拉菜单(或选择)是最常被误用的表格模式之一，“应该是UI的最终界面”。

让我们看看其一些范围性和用户的忧虑：

• 在下拉列表中，可用选项一样平常不行见，除非你点击或按键才气打开它。另外，列表的长度是被潜匿了的，也就是说，用户无法猜测下拉菜单内里到底包括了几多个元素。

• 从下拉列表中选择一个选项(出格是在移动装备上)是个多步调的进程：您必需点击下拉菜单打开选项列表，然后转动并赏识项目来选择一个，然后封锁下拉列表。

• 下拉菜单也许会使计划职员变得懒惰：只需将全部也许的选项添加到下拉列表中而不必要分列其优先次序是是极其简朴的(趁便说一下，与汉堡包菜单很是的相同)

• 较长的下拉列表，好比国度或地域选择器对付用户来讲的确就是恶梦，出格是在一些无法行使键盘搜刮的装备上。

• 在某些列表可见和可转动地区很小的移动装备屏幕上转动选择也许会很疾苦：

在iOS上，可视选项的数目乍一看也许会出奇地少。

但好动静是，在很多环境下，有许多更换性输入控件可以更好地辅佐你完成事变。

思量选项的数目

对付一个二择其一(开或关)的选项，下拉菜单是个很是不明智的选择。而你必要用的是一个复选框和开关怀换控件。

假如你的下拉列表只包括是或否，开或关的选项，只需用一个简朴的开关控件。

对付少数互斥选项，提议行使单选按钮或分段控件，以便全部选项一次可见，而无需打开列表。

分段控件可一次表现所选项和更换选项

可见选项的数目取决于屏幕宽度和选项标签的长度，但提议行使不高出5个项目

对付大量指定明晰的选项，当用户很是确定他们正在探求的内容时，请思量“开始输入... ”办理方案，个中在输入第一个或两个字母之后选项列表会筛选出用户所需的选项。

不消转动列表，让用户开始输入而只表现已过滤的选项

对付大型和多样化的列表，请实行行使现有的用户数据来优先选择该选项，只需列出少数最风行的选项给用户。这样一来，有90%的用户会当即找到本身的兴趣，只有10%必需选择“ 其他”，然后在下一个题目中具体相识。

固然“其他”不是一个美满的办理方案，但这样的优先性也许会改进大大都用户的用户体验

思量预期的输入

下拉列表的上风之一就是用户不必输入太多。可是，假如预期的输入不是太长可能不会被频仍扣问的话(譬喻小我私人数据)，则输入起来更轻易一些，而不是从列表中选择它：

行使数字键盘在转动装备上输入出生年份比转动赏识长列表更轻易

凡是，在数字键盘上输入数字值凡是更有用。

尽量数字下拉列表的排序次序是很清晰的，但比起转动选择，输入数值更简朴些。

假如验证用户的输入很是重要，那么行使输入字段来筛选可用选项时，“输入...”要领也许很有效。

列出美国的选项时，只需输入一个字母可以很好地筛选出来。

当元素的排序次序不清晰时，在选项列表中举办搜刮的要领出格有效。

钱币的排序次序用户也许不清晰，因此请确保他们可以搜刮名称和钱币代码。

同样的要领也应该应用于国度列表：而不是列出200多个项目。应应承用户输入尽也许快的筛选出功效。

对付暗示数目的离散值(譬喻搭客数目或购物车中的物品数目)，步进器应承用户通过一次点击或按键来快速增进或镌汰数目。

对付位于刻度上的值或非离散值，请思量行使滑块。

表现最小值和最大值的数值范畴可有助于领略上下文。

选择一个由多个选择菜单构成的日期也许是一个疾苦的体验，以是选择就近的日期，需行使日期选择器。(但不要用它来输入出生日期!)

思量计划更智能的下拉列表

不消说，不该该老是停止下拉菜单的行使。您会发明一个选择菜单是最吻合的输入控件的环境，这很好。试着让它尽也许的对用户友爱。

• 行使故意义的标签：纵然列表打开，菜单标签的描写也应该是清晰有用。在选择菜单中，行使描写性标签，汇报用户他们正在选择什么(即“ 选择范例 ”而不是“ 请选择 ”)。

• 以明智的方法排序项目：按照用户数据，将最受接待的选择放在列表的火线。可能，乃至以默认的方法预先选择最风行的。
• 行使智能默认值：手机和赏识器知道用户的定位，日期和很多其他信息。行使该数据为每个用户预先选择最也许的选项。
• 镌汰字段数目，让计较机举办运算：假如用户输入邮政编码，电脑也许自动匹配出了都市和国度 - 不必要问。假如用户输入名誉卡号码，则计较机也许已经知道它是万事达卡，无需其他扣问。
• 思量行使API：行使 Facebook Connect按钮注册比填写注册表更轻易。行使Paypal付款比输入您的名誉卡数据更利便。

假如您想相识更多关于下拉列表的信息， 请查察GoldenKrishna和Eric Campbell的杰出SXSW主旨演讲

原文地点：https://medium.com/@kollinz/dropdown-alternatives-for-better-mobile-forms-53e40d641b53

（编辑：厦门网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!