移动端下拉表单的更好选择

在表单中使用下拉菜单看起来并不重要:它们在用户界面上占用的空间不大,它们自动验证输入,所有浏览器和平台都可以支持它们,它们实现起来容易且方便,用户知道它们的好。


在表单中使用下拉菜单看起来并不重要:它们在用户界面上占用的空间不大,它们自动验证输入,所有浏览器和平台都可以支持它们,它们实现起来容易且方便,用户知道它们的好。

移动端下拉表单的更好选择

在表单中使用下拉菜单看起来并不重要:它们在用户界面上占用的空间不大,它们自动验证输入,所有浏览器和平台都可以支持它们,它们实现起来容易且方便,用户知道它们的好。

同时,根据Luke Wroblewski 和一些人的说法,下拉菜单(或选择)是最常被误用的表格模式之一,“应该是最后的UI”。

我们来看看一些限制和担忧:

  • 在下拉列表中,只有点击或按键才能打开它,可用选项是不可见。此外,表单的长度一见即可隐藏,即用户无法预测下拉菜单是否包含2或50个元素。
  • 从下拉列表中选择一个选项(特别是移动设备)是一个多步骤的过程:你必须点击下拉菜单打开选项列表,然后滚动并扫描以选择一个项目,然后关闭下拉列表。
  • 下拉菜单会让设计师变懒:将所有可能的选项添加到下拉列表中是没有任何优先级的(这与汉堡包菜单类似)是非常简单的。
  • 更长的下拉列表,例如国家/地区选择器可能是一个恶梦扫描,尤其是在通常无法进行键盘搜索的手机上。
  • 在一些移动屏幕的可见和可滚动的列表区域是很小的,滚动选项会使人不愉快:

移动端下拉表单的更好选择

在iOS上,可见的选项数量是乍一看是惊人的低

在许多情况下,有很多替代输入控件可以为你更好地工作。

考虑选项的数量

对于二进制(开/关)的决定,下拉菜单是一个非常糟糕的选择。你需要的是复选框或切换开关。

移动端下拉表单的更好选择

如果你的下拉列表仅包含“是/否”或“开/关”选项,请改用简单的开关

对于少数互斥选项,建议使用单选按钮或分段控件,以便无需打开列表,所有可用的选项都可以看到。

移动端下拉表单的更好选择

分段控件同时显示所选项和替代选项

移动端下拉表单的更好选择

可视选项的数量取决于屏幕宽度和选项标签的长度,不建议使用超过5个项目

对于大量指明的选项,当用户知道他们正在寻找什么时,考虑“开始输入…”解决方案,其中过滤选项列表显示在第一个或两个字母之后。

移动端下拉表单的更好选择

不用滚动列表,让用户开始输入,且仅显示已过滤的选项

对于大型和多样化的列表,尝试使用现有的用户数据来优先该选项,并将用户首选的最流行的选择列出。这样一来,有90%的用户会立即找到自己的偏好,只有10%必须选择“其他”,然后在下一个问题中指明。

移动端下拉表单的更好选择

虽然“其他”不是一个优雅的解决方案,但这样的优先级可能会改善大多数用户的用户体验

考虑预期的输入

下拉列表的优点之一是用户不用过多多输入。但如果预期的输入不是太长,并且经常被询问(例如个人数据),则通常更容易键入,而不是从列表中选择它:

移动端下拉表单的更好选择

使用数字键盘在滚动设备上输入诞生年份比滚动浏览长列表更容易

总之,在移动设备的数字键盘上输入数字值通常会更有效。

移动端下拉表单的更好选择

尽管数字下拉列表的排序顺序是清晰的,但它可能比滚动更容易键入

如果验证用户输入是非常重要,“开始输入…”方法对使用输入字段来过滤掉可用的选项是很有用的。

移动端下拉表单的更好选择

当举出USA的状态时,只输入一个字母可以很好的筛选出来

当元素的排序顺序不清晰时,在选项列表中的搜索能力是非常有帮助。

移动端下拉表单的更好选择

货币的排序顺序或许对用户不清晰,所以确保他们的搜索名称和货币代码

同样的技术应该适用于美好的的国家列表:而不是列出200多个项目,让用户开始输入并尽快过滤结果。

移动端下拉表单的更好选择

对于表示数量(如乘客人数或购物车中的物品数量)的预估值,步进器允许用户通过一次点击或按键即可快速增加或减少数量。

移动端下拉表单的更好选择

对于位于数字范围内的的非预估值和预估值,考虑使用滑块。

移动端下拉表单的更好选择

显示最小值和最大值的数值范围有助于理解上下文

选择多个选择菜单的日期可能是一个不堪的体验,所以进入就近的日期,总是使用日期选择器。(但不要用它来输入出生日期!)

移动端下拉表单的更好选择

考虑设计更智能的下拉列表

下拉菜单不应该总被避免。你会发现当选择菜单是最合适的输入控件时,只需要使其尽可能的用户友好。

  • 使用有意义的标签:即使列表打开,菜单标签的描述也应该是清晰可见的。在选择菜单中,使用描述性标签,告诉用户他们正在选择什么(即“选择类型”而不是“请选择”)。
  • 以合理的方式分配物品:基于用户数据,尝试将最受欢迎的选择放在列表的顶部。或者,甚至以默认的方式预先选择最流行的。
  • 使用智能默认值:手机和浏览器知道用户的位置,日期和许多其他信息。使用该数据为每个用户预先选择最可能的选项。
  • 减少字段数让计算机进行工作:如果用户输入邮政编码,则计算机就知道城市和州——不需任何要求。如果用户输入信用卡卡号,则计算机就知道它是万事达卡——不需任何要求。
  • 考虑使用API:使用Facebook 的Connect按钮注册比填写注册表更容易。使用Paypal付款比输入你的信用卡数据更容易。

 

原文作者:Zoltan Kollin

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

译者:SKYUI

本文由 @SKYUI 翻译发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/21394/

(0)
CatherineCatherine
上一篇 2017-04-28 09:03
下一篇 2017-04-28 10:43

相关推荐

  • 用两个例子来谈谈:工具对设计师真的有那么重要吗?

    工具固然重要,但我们不应该被它牵制。“因为刚入行,所以不知道怎么去做好这个岗位,只能先从工具入手,然后看看公司的产品,再去用 Axure 绘制一遍。 ”

    2017-05-06
  • 重要交互设计原则

    不管是开发者还是交互设计师,每一位从业者都想要创造让自己自豪的产品。为了改善结果,两方人员一直在重新思考整个开发流程,要求有更好的工具、更好的指南、更高的权限。交互设计的强大力量不容置疑。它能让用户在工作、娱乐和交流之际,获得难忘、有效、简单,以及有益的体验。设计原则:1. 用户界面应该基于用户心理模型,而不是实现模型。2. 目标导向的交互设计反映了用户的心理模型。3.交互设计不是凭空猜测。4.不要让用户感觉自己愚笨。5. 界面设计的关...

    2018-03-01
  • 50个国外设计机构网站设计欣赏

    Web设计灵感总是帮助我们走在新趋势, 设计结构、颜色和总体设计过程。有很多灵感的网站列出的主题就是我想要这一个是不同的。所以在这个今天的帖子我收集了50个国外设计机构网站设计欣赏,为你找设计的灵感。

    2017-06-03
  • 功能确定之后,如何做好产品的交互设计?

    功能和数据都确定下之后,接下来我们就要把功能数据给设计出来,也就是决定它们长啥样,怎么操作的。如果说前面的分析研究、需求定义、功能数据确定是“做正确的事”,现在开始我们就要“正确地做事”,方向抓准了,我…

    2017-08-03
  • 关于2017年的设计趋势,国外已经有了这13个预言

    在未来,当对微小细节的关注渗入用户体验设计的每一寸土壤;当对像素级完美的追求成为设计的基本要求;当将简单便捷的设计理念融入用户的日常生活,那么我们就能够帮助用户体验全新的生活。“庆祝成功自然无可厚非,但学习并反思失败更加重要。” ——比尔·盖茨“他们是种异常必要的无谓存在,他们因为需要被呵护而带给人恰到好处的慰藉。”“差劲的设计团队提供用户要求的UX。伟大的设计团队提供用户需要的UX。”“对于一个优秀的UX设计师来说,他/她最大的责任就是使用户在使用产品 的时候能产生信任感。”“一件好产品就如一部伟大的电影。”“我们逐渐发现这些智能小助手(AI)之间的合作能力可能并没有想象中那么强大。”“Material Design将会目睹它所倚仗的‘笔’与‘纸’之间的枪战——它会发现它的立身之本在面对未来强大多元的互联网时不堪一击。”——Chase Buckley(独立UX设计师)“与真实的纸不同的是,我们的数字材料可以随意伸缩与变形。纸质材料有物理表面与边界。是那些缝隙与阴影告诉你这一切,赋予了你能触碰到的东西意义。”

    2017-05-18
  • 为什么蓝色会成为UI设计中最常用的色彩?

    蓝色依然是一种安全的色彩,当你的产品或者网站契合蓝色的气质的时候,不妨选择它,但是始终记住一点:选择适合自己的产品的色彩,才是正确的选择。

    2017-06-08
  • 有哪些常见的移动端UX设计误区需要规避?

    我们手机里面装满了各种各样的APP。安装这些应用,我们的初衷是让我们的生活更加便捷。但是当这些应用无法满足用户的需求的时候,用户自然而然会离开,并寻求更好的解决方案。一个成功的应用包含有诸多元素,而其中的用户体验设计 则起到了决定性的作用。在残酷的竞争中,用户体验 往往是决定成败的核心。

    2017-05-22
  • 我们如何创造先进的经验生态系统?

    "物联网是有趣的因为它迫使我们重新思考我们有与对象的交互范例 — —,东西是不同的关于智能对象与 '哑巴' 一个与我们接触"Thomas Wendt 写在他最近的 UX 杂志文章,"互联网的东西。"和手上的工作

    2015-01-03
  • 为什么扁平化设计辣么火?它会过时么?

    很多时候,设计本身最核心的东西一直都没变,即更好的解决问题,风格什么的都是为解决问题而服务的

    2017-05-09
  • 对于传统交互设计思维的一些反思

    在传统的交互设计流程中,比较看重从设计目标建立到最终方案推导过程的逻辑性、终端用户体验与用户心理认知模型的匹配性等,相关的 UCD 设计方法很多。可是,被我们奉为圭臬的那些经典交互设计流程与方法,真的足够好吗?

    2017-05-03