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

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


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

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

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

同时,根据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

相关推荐

  • ✪ 新书 |《交互设计那些事儿》——关于交互设计,你需要知道都在这里!

    一部窥探交互设计师成长之路的实用指南!传授高效、靠谱的交互设计学习方法!IAMUE网站创始人倾力之作!

    2016-06-06
  • 团队设计沉淀:做好 Style Guide 不容易

    说起 Style Guide (即设计规范),大部分人的第一反应就是 Material Design 和 iOS Human Interface Guidelines,我自己就是靠读这两份文档逐渐入门设计领域,国内外的设计师、开发者们自然也是对它们了然于胸。来大公司实习之后,接到的第一个任 务就是维护、优化团队的设计规范网站,同时最近也经常和饿了么、随手记等互联网公司的设计师或产品经理探讨如何沉淀团队的设计。

    2017-06-04
  • 在Sketch中做游戏?盘点那些你不知道的奇葩Sketch插件

    静电说:我想你一定是看了这个标题进来的,对,今天静电就要来给大家介绍几款看起来很奇葩的Sketch插件,甚至有些插件可以直接生成游戏!诶哟厉害了我的哥哥!来看看吧。Latex Sketch PluginLatex这款插件可以生成像下边的带有上标的公式,也许这个适合数学老师来用。当然如果各位小伙伴有做这方面设计的话,也许可以给你不少惊喜。嗯,这个插件已经被爱因斯坦点赞。下载地址:http://www.sketchchina.com/rea...

    2018-03-02
  • 一个精美的手机的原型怎么产生的第一集

    阿西录了下视屏尝试下最直接的方式 ,你看着我怎么做原型设计的。最简单方式往往最有效。 这段是:安卓手机,Axure手机框组件的视屏教程-1 在线播放! 第一集: 第一集下载地址:点我点我 第二集下载地址:点我点我

    交互设计 2014-09-05
  • 怎样挣钱?用户体验是一个值得关注的话题

    近年来,“快闪”成了营销届的新玩法,不少大品牌纷纷开起了快闪店。何为“快闪店”Pop-upshop在一个固定地点,临时搭建起来的零售商店,存在时间长短不一,几天或者几周,有的几个月,也称Pop-up shop。坐标:成都远洋太古里品牌:欧舒丹时间:2018年3月2日—8日欧舒丹粉樱咖啡快闪店的出现,正值樱花季。这场满载法式浪漫的活动,呈现出唯美场景,现场随处可见,络绎不绝的打卡人群,这场营销又让欧舒丹火了一把。坐标:香港皇后大道品牌:C...

    2018-03-30
  • 实例分享|在界面排版中,需要注意的七大原则(上)

    前面的视觉体系和大家简单提到过传统平面排版的四大原则:亲密性、对比、重复、对齐。那界面排版有什么原则呢?今天菜心就来用实例分享一下界面排版中需要注意哪些原则。一、亲密原则
    二、对比原则
    三、平衡原则
    四、相似原则
    五、简洁原则
    六、封闭原则
    七、情感原则

    2017-05-08
  • 阿里设计师的思考总结:用户体验设计的进阶修炼之路

    从方法、标准、协同、软技能和创新五个方面说说我对用户体验设计进阶修炼的思考与实践。

    2017-05-17
  • 用超多案例,帮你避免交互设计中的「刻板印象 」

    一直在看奇葩说,听到很多次的一个词叫“刻板印象 ”。而人之所以有“刻板印象 ”,是因为有categorical thinking(类别型思维),它往往使我们产生对事物的固有看法和理解,是在看到某些特定人、事、物时第一时间想到的,这些就形成了“刻板印象 ”。毋庸置疑,使用“刻板印象”(经验)能无形中提升工作效率;减少沟通和开发测试成本;也不会太多的打破用户习惯。然而,它也会带来负面影响,让我们对真实世界失去客观判断。

    2017-06-21
  • 带给你视觉 2015 Web 设计色彩流行趋势

    前几天分享的2015年春夏流行色人气很高,今天直接放干货,@AnyForWeb_UDC 的同学根据2015年的色彩大致趋势走向,结合相关的设计经验,作出了以下网页配色 预测分析,来看看有哪些亮点吧。

    2014-12-28
  • iOS和Android规范解析——搜索

    各位亲爱的读者小伙伴们,前面一系列文章为大家介绍了各种弹出物的用法,从今天起,我们开始介绍其它的非弹出类控件。此篇要说的是搜索。

    2017-04-29