• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 移动界面设计中,为什么下拉菜单应该是最后的选择?

移动界面设计中,为什么下拉菜单应该是最后的选择?

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含ui设计,下拉菜单,经验分享等相关知识,希望在学习及工作中可以帮助到您

@-朱宇軒?:使用下拉菜单的形式似乎已是司空见惯:它不占用太多空间的界面,它自动验证输入,所有浏览器和平台都支持它,实现下拉菜单非常的方便且容易,用户都觉得它使用起来很好。

与此同时,根据Luke Wroblewski和被多人提及的原则:“下拉菜单应该是最后的选择”的说法,那么下拉菜单却是最经常被误用的。

让我们看一看下拉菜单的局限性和令人担忧的地方:

下拉菜单控件的可用是选项不可见的,直到你点击或点击打开它。同时, 在第一眼看到列表时,列表的长度是隐藏的,即用户无法预测一个下拉菜单是包含2个还是50个元素。

从下拉列表中选择一个选项,(尤其是在移动设备上)是一个多步骤的过程:你必须点击下拉菜单打开选项列表,然后滚动和浏览项目并选择一个,然后关闭下拉。

下拉菜单可以让设计师懒惰:设计师很容易就把所有可能的选项不分任何优先级一起放到下拉列表里(这很类似于汉堡菜单的做法)。

像国家地区选择这种很长的下拉菜单,用眼睛扫描起来简直是噩梦,尤其是在键盘搜索通常是不可用的移动端。

在可见、可滚动但面积很小的屏幕上滚动去选择想要的选项是一件非常痛苦的事情。

△ ?在iOS系统上,第一眼可见的选项少的惊人。

但是好消息是这里有大量的很棒的可替代下拉菜单控件的选择,能为你在不同的情况下所用到。

考虑选项的数量

若只有两个选项(例如开/关),那么使用下拉菜单就是一个错误的选择。这里你需要用复选框(CheckBox)或者用切换开关(toggle switch)。

如果你的下拉菜单仅仅包含是/否、开/关这样的选项,那么就用开关控件来替代它。

对于个数少且互斥的选项 ,建议使用单选按钮(radio buttons)或分段控件(segmented),使所有可用的选项第一眼可见,且无需打开列表。

分段控件(Segmentedcontrols)可以一次性展示出所有的可选项。

可见选项的数量取决于屏幕宽度和选项标签的长度,但不要超过5项

当用户确切地知道他们在寻找什么时,对于大量确定的选项,考虑使用“请输入…”这样的解决方案,其中筛选选项列表在输入第一个或两个字母之后显示。

用让用户来输入文字来筛选选项的方式替代滑动下拉菜单。

对于大型和多样的列表,尝试使用现有的用户数据来排列优先级,只列出几个用户常选的选项。这种方式有一个好处就是90%的用户会立即发现自己偏好的选择项,只有10%的人选择立即“其他”然后跳到指定的下一个问题。

虽然“其他”不适一个优雅的解决方案,但是优先级排序的方式能够提高大多用户的体验

考虑预填写

下拉列表的好处之一是用户不必输入很多内容。然而,如果预期的输入不是太长并且经常被问到(例如个人信息),通常用输入的方式是比较容易的,而不是从列表中选择:

在移动设备上输入生日的年份,使用数字键盘比滑动长列表要容易的多

通常,在移动设备上输入数值会比数字下拉列表效率高。

尽管数字下拉列表是清晰的,但是输入数值依然比滑动选择要方便。

如果验证用户输入的内容很重要,输入内容用于筛选可用选项时,“请输入……”这个方法可能是有用的。

当选择美国时,输入一个字母就可以筛选出来。

当列表元素的排序顺序不清晰时,在选项列表中搜索的能力特别有用。

不清楚货币代码排列顺序的用户,能确保他们能在名称和货币代码间进行搜索。

同样的技术也应该应用于国家列表上面:使用让用户尽快开始键入并过滤结果来替代列出200多个条目的方案。

对于表示数量的谨慎的数值选择(例如乘客数量或购物车中的商品数量),步进器(stepper)允许用户点击来快速增加或减少数值。

对于刻度范围上的非谨慎数值,请考虑使用滑块。

显示最大值和最小值的范围有助于用户理解。

选择当下最近日期,使用多个选择菜单选择可能是一次非常痛苦的体验,因此我们选择使用日期选择器(date picker)。(但千万别用它输入出生日期)

设计更智能的下拉菜单

通常下拉菜单不是总要被避免使用的。当你发现选择菜单是最合适的输入控件,这很好,那就让它对用户尽可能的友好。

使用有意义的标签:当菜单打开时菜单标签或描述也应该清晰和可用。在“选择”菜单中使用一个描述性标签,告诉用户他们正在选择什么(即“选择类型”而不是“请选择”)。

按合理的方式排序条目:基于用户数据尝试将最流行的选项放在列表的顶部。甚至预先选择用户最常选的选项作为默认选项。

使用智能默认值:手机和浏览器知道用户的位置、日期等大量的信息。利用已知的数据预先为每个用户选择最有可能的选项。

减少字段的数量,让计算机做一些工作:如果用户输入邮政编码,毫无疑问计算机已经知道这个邮政编码所属的国家和城市。如果用户输入信用卡号码,计算机也毫无疑问的已经知道这是MasterCard 。

考虑使用API:使用第三方的方式注册比填写注册表要容易。PayPal支付比输入你的信用卡信息更容易。

「这个控件叫什么系列大全」

  1. 《「这个控件叫什么」系列之小红点+索引导航+分段控件》
  2. 《「这个控件叫什么」系列之加载占位图+页面指示器》
  3. 《「这个控件叫什么」系列之步进器+SWITCH》
  4. 《「这个控件叫什么」系列之TOAST》
  5. 《「这个控件叫什么」系列之PICKER/选择器/拾取器》

原文地址:medium
译文地址:zhihu

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 2013年网页设计UI最热趋势 最流行的UI设计
  • 通往优秀UI(用户界面)设计师之路的20个路标
  • 这10条认知,可能就是你和大厂UI 设计师的差距
  • 针对零基础新人,我给出这份可能是最详细的UI 自学流程总结
  • 想为iPhone X设计UI?给你这11个设计小贴士
  • 想成为互联网设计师?先来看这篇超全面的介绍!
  • 这篇超详细的教程,帮你全面掌握 APP 中的投影设计!
  • 超全UI设计规范,带你了解规范设计全流程
  • UI 设计新人如何接私单?来看高手的经验!
  • 用一篇文章,带你回顾桌面GUI 的设计发展史

相关文章

  • 2017-08-06系统之外的字体引用及过渡效果
  • 2018-08-23这篇超详细的教程,帮你全面掌握 APP 中的投影设计!
  • 2017-08-06Web 设计 实现干净代码的12条定律[图文]
  • 2018-08-23高手私藏系列!怎样的PPT 配色会让人觉得舒服?
  • 2018-08-232018 UCAN 大会官方全纪录——人工智能和新零售环境下的设计产业升级
  • 2018-08-23高手说我的图标不止好看,还有这4个作用!
  • 2017-08-06不压缩HTML的几个原因说明
  • 2017-08-06让一个网站看起来高大上且更有设计感的方法介绍
  • 2018-08-23不仅要考虑到一般情况,设计师还要为极端情况而设计
  • 2018-08-23新产品即将上线,那么预告页面要怎么设计?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 实战深度总结!如何设计和运营品牌形象?
    • 复制和粘帖是封装的大敌
    • 实用全面!教你用Sketch Libraries构建组件库/设计体系
    • 强化用户体验!3个方法有效提升用户的控制感
    • 我邀请了小米探索实验室的设计总监,和你聊聊智能音箱
    • sed简单教程
    • UI 设计师接私单后如何报价?这儿有最新的报价技巧!
    • 人人必知10个网站易用性技巧
    • 网站设计效果体验 之七种不同的色系
    • 整理了12款Javascript 表格控件(DataGrid)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有