企业形象网站建设解决方案   |   集团公司网站建设解决方案   |    协会门户网站建设解决方案
您所在位置:首页 > 建站知识

网站设计

Website development

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

发布时间:2017-07-20 09:14:59

TAGS:体验设计

移动下拉菜单.jpggax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

使用下拉菜单的形式似乎已是司空见惯:它不占用太多空间的界面,它自动验证输入,所有浏览器和平台都支持它,实现下拉菜单非常的方便且容易,客户都觉得它使用起来很好。
gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

与此同时,根据Luke Wroblewski和被多人提及的原则:“下拉菜单应该是后的选择”的说法,那么下拉菜单却是经常被误用的。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

让我们看一看下拉菜单的局限性和令人担忧的地方:gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

下拉菜单控件的可用是选项不可见的,直到你点击或点击打开它。同时, 在第一眼看到列表时,列表的长度是隐藏的,即客户无法预测一个下拉菜单是包含2个还是50个元素。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

从下拉列表中选择一个选项,(尤其是在移动设备上)是一个多步骤的过程:你必须点击下拉菜单打开选项列表,然后滚动和浏览项目并选择一个,然后关闭下拉。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

下拉菜单可以让设计师懒惰:设计师很容易就把所有或许的选项不分任何优先级一起放到下拉列表里(这很类似于汉堡菜单的做法)。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

像国家地区选择这种很长的下拉菜单,用眼睛扫描起来简直是噩梦,尤其是在键盘搜索通常是不可用的移动端。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

在可见、可滚动但面积很小的屏幕上滚动去选择想要的选项是一件非常痛苦的事情。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△  在iOS系统上,第一眼可见的选项少的惊人。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

但是好消息是这里有大量的很棒的可替代下拉菜单控件的选择,能为你在不同的情况下所用到。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

考虑选项的数量gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

若只有两个选项(例如开/关),那么使用下拉菜单就是一个错误的选择。这里你必需用复选框(CheckBox)或者用切换开关(toggle switch)。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

假如你的下拉菜单仅仅包含是/否、开/关这样的选项,那么就用开关控件来替代它。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

对于个数少且互斥的选项 ,提示使用单选按钮(radio buttons)或分段控件(segmented),使所有可用的选项第一眼可见,且无需打开列表。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

分段控件(Segmentedcontrols)可以一次性展示出所有的可选项。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

可见选项的数量取决于屏幕宽度和选项标签的长度,但不要超过5项gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

当客户确切地知晓他们在寻找什么时,对于大量确定的选项,考虑使用“请输入…”这样的解决方案,其中筛选选项列表在输入第一个或两个字母之后显示。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

用让客户来输入文字来筛选选项的方式替代滑动下拉菜单。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

对于大型和多样的列表,尝试使用现有的客户数据来排列优先级,只列出几个客户常选的选项。这种方式有一个好处就是90%的客户会立即发现自己偏好的选择项,只有10%的人选择立即“其他”然后跳到指定的下一个难题。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

虽然“其他”不适一个优雅的解决方案,但是优先级排序的方式能够提高大多客户的体验gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

考虑预填写gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

下拉列表的好处之一是客户不必输入很多内容。然而,假如预期的输入不是太长并且经常被问到(例如个人信息),通常用输入的方式是比较容易的,而不是从列表中选择:gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

uisdc-iphone-20170719-7.gifgax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

在移动设备上输入生日的年份,使用数字键盘比滑动长列表要容易的多gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

通常,在移动设备上输入数值会比数字下拉列表效率高。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

尽管数字下拉列表是清晰的,但是输入数值依然比滑动选择要方便。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

假如验证客户输入的内容很重要,输入内容用于筛选可用选项时,“请输入……”这个办法或许是有用的。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

当选择美国时,输入一个字母就可以筛选出来。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

当列表元素的排序顺序不清晰时,在选项列表中搜索的能力特别有用。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

不清楚货币代码排列顺序的客户,能确保他们能在名称和货币代码间进行搜索。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

同样的技术也应该应用于国家列表上面:使用让客户尽快开始键入并过滤结果来替代列出200多个条目的方案。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

对于表示数量的谨慎的数值选择(例如乘客数量或购物车中的商品数量),步进器(stepper)允许客户点击来快速增加或减少数值。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

对于刻度范围上的非谨慎数值,请考虑使用滑块。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

显示大值和小值的范围有助于客户理解。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

选择当下近日期,使用多个选择菜单选择或许是一次非常痛苦的体验,因此我们选择使用日期选择器(date picker)。(但千万别用它输入出生日期)gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

设计更智能的下拉菜单gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

通常下拉菜单不是总要被避免使用的。当你发现选择菜单是合适的输入控件,这很好,那就让它对客户尽或许的友好。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

使用有意义的标签:当菜单打开时菜单标签或描述也应该清晰和可用。在“选择”菜单中使用一个描述性标签,告诉客户他们正在选择什么(即“选择类型”而不是“请选择”)。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

按合理的方式排序条目:基于客户数据尝试将流行的选项放在列表的顶部。甚至预先选择客户常选的选项作为默认选项。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

使用智能默认值:手机和浏览器知晓客户的位置、日期等大量的信息。利用已知的数据预先为每个客户选择有或许的选项。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

减少字段的数量,让计算机做一些工作:假如客户输入邮政编码,毫无疑问计算机已经知晓这个邮政编码所属的国家和城市。假如客户输入信用卡号码,计算机也毫无疑问的已经知晓这是MasterCard 。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

考虑使用API:使用第三方的方式注册比填写注册表要容易。PayPal支付比输入你的信用卡信息更容易。gax上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

原创不易,未经授权,严禁转载

原文地址:/i,72,7238,0.html

客户评价

更多+
  • 感谢特马资料qq群,系统提前完成,在整个项目周期内,特马资料qq群对待我们并不像是对待客户,更像是朋友一样,每一次,都能以专业的角度向我们提出更合理、更有效的解决方案,并快速、细致地完成我们的每一个需求,再次感谢以至诚之心做事的特马资料qq群团队。

    潘涛

  • 我是东方龙马集团,在云智家做了2个企业官网,服务态度超级好。假如想做网站,选择他家一定不后悔。性价比高,服务态度好。值得你的信赖!

    谭娇

  • 技术好,设计精良,操作便利,很专业!配套的服务和后续的服务都很好,网站封面堪称精品,运行方便,后台操作的简单。技术还会耐心教我,很好的特马资料qq群(上海)科技有限公司,建站很不错的。

    陈曦

  • 不错,价格比较合适,要点是响应速度蛮快,有什么难题都会马上给你解决,公司很满意,因为他们全是针对每个项目建了相应的讨论组,有难题可以再里面提出,人员分工到位,解决难题很及时。

    张经理

联系方式

工作时间:10:00-19:00
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

服务领域

  • 网站定制开发
  • PC网站设计
  • 域名邮箱
  • 网站维护
  • 网站二次开发
  • 响应式网站设计
  • 虚拟主机
  • 网站优化
  • 网站设计开发
  • 创意设计
  • 云主机
  • 项目合作

合作伙伴

All Rights Reserved.©2010-2016 特马QQ群|资料网站京公网安备 110105019435 京ICP备123124426号
本网站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。法律顾问:上海市辉瑞律师事务所。
嘿,我来帮您!