导读:下拉菜单是UI设计,网页设计中的基本控件,也是平时各人做设计时会用到的常用组件,所以有须要对它举办全面深入的相识。本文很是全面的先容了下拉菜单的设计法例,相信读完会对下拉菜单设计有一个全新的认识,一起来进修吧。
下拉菜单在UI设计规模常常饱受品评,但这也不是没有来由的。设计得欠好,它们酿成了繁琐和Low的代名词。不外这不是这篇文章要接头的,我们将要接头的是,在须要时应该如何正确的利用它们。
同时我需要申明的是,下拉菜单有两种主要范例:一种用于导航菜单,另一种用于表单。在这篇文章中,我们只聊表单中的下拉菜单设计。
文章将会聊到如下内容:
设计全面图解
下拉菜单的范例及变革
下拉菜单气势气魄
下拉菜单状态
提示语句
何时利用下拉菜单
原生下拉菜单
可用性查抄
结语
01 设计全面图解下拉菜单的设计图解和文本输入框很靠近,只是内容多一些。(1.栏目内容 2.容器 3.下拉箭头 4.占位符或提示文本 5.转动条 6.下拉菜单 7.菜单项 8.支解线 9.选中项 10.提示)
下拉菜单设计图解
02 下拉菜单的范例及变革人们对尺度下拉菜单已经有了普遍的相识,但你仍需要在事情中寄望几个出格的范例和变革。这里包括的下拉菜单是针对表单的环境,并不是导航栏里利用的下拉菜单。
尺度下拉菜单尺度下拉菜单是针对我们所领略的“下拉”这个动词。在激活状态,当你点击貌似文本输入栏的处所时,它会打开一个菜单。
尺度下拉菜单
下拉菜单配自动提示我超喜欢这个成果。当我之一次留意到自动提示是在谷歌的搜索栏上,可我不记得之一个实现这个成果的是什么网站了。当你在一长串列表中选择需要的选项时(好比国度名),这个成果变得分外实用。
下拉菜单配自动提示
下拉菜单配自动完成和自动提示成果自动提示和自动完乐成能被放在一起并不惊奇。自动提示是在输入栏里显示选项让用户从中选择。自动完成是提前显示一个完整的单词或短语。
下拉菜单配自动完成和自动提示成果
假如你没有在文本输入栏开始打字的话,自动完成区域凡是被埋没起来。
下拉菜单配多选大大都环境下,下拉菜单是单选按钮的延伸。这里的下拉菜单配多选则是复选框的延伸:用户可以在同一个输入区域选择多个列表选项。(彩云注:前段时间正好有伴侣问我,在设计B端靠山时,是否可以这样设计,其实是可以的。)
下拉菜单配多选
假如可以的话,只管避开这种范例。我曾在一个无比冗长的种别列表上不得已利用了它。讲真,下拉菜单配自动完成和自动提示的组合才是最抱负的。
下拉菜单配分组当长型下拉菜单的设计不是出格抱负时,你可以把列表分组,这样搜索起来越发简朴。
下拉菜单配分门别类
牢靠滑动菜单固然不是严格意义上的下拉菜单,可是也可以思量把多选菜单纳入选择范畴中。和下拉菜单差异的是,牢靠滑动菜单展开后会有一个可以滑动的小窗口。
牢靠滑动菜单
它们在电脑页面上尚可利用,但在手机屏幕上就有点别扭了。到时候会成为一个“在滑动栏里的滑动菜单”
小我私家来说,我只利用过一次,也很少看到这个范例被遍及利用过。
日期选择器日期选择器的范例更好只用在布置 *** 会议和勾当日程上。当人们需要布置吃休息餐的时候,能一眼看出礼拜几的日历是更好不外的了。可同样的设计被用在填写护照截至日期时就会相当烦人。我较量方向于那种既能输入数字又能选择日期的设计 – 更好确认一下输入栏里的年代日之间加上了斜线,否则会让人很纠结。
日期选择
我的“拉恼恨法门”:商家运营店肆的最终目标是实现盈利,而这个中,营业额是权衡门店代价的一项重要指标。店肆的日常策划环境都可以通过数据举办查明,对营业额数据做好阐明事情,有助于优化整体运营节拍,为日后的运营事情提供好的参考...
如何在原型图上实现「知乎」问答卡片交互效果呢?来文中看看~ 当我们在使用别人产品时,遇到一些觉得比较好的设计或是一些交互体验上比较舒适的设计时,我们想要将其借鉴过来,但又苦于低保真原型无法将交互效果...
编辑导语:这两天,“秋天里的第一杯奶茶”这个梗莫名其妙的火了。伴侣圈也呈现了刷屏,很多人都晒出了本身入秋后喝的第一杯奶茶,而且附有一张满是狗粮的红包截图。在吃够了狗粮事后,你是否有对这个现象举办思考,...
在这个投放成本越来越高的时代,为了获取用户,让产品与企业存活下去,一种纯人工揽用户的用户增长模式开始出现并取得一定成绩。虽然这种方法不高级也没有什么技术含量,但是它确确实实能帮获取一定的用户量,帮助企...
编辑导语:如今这个互联网时代,什么都跟互联网挂钩,随之呈现的“伶俐”产物也进入公共的视野,那他与传统行业有什么纷歧样;本文作者用“伶俐交通”为例,深度阐明白“伶俐”的本质。 不知曾几许时,你是否留意...
编辑导读:做数据阐明的同学,大概许多都听过人、货、场阐明模子。可是大大都人只是知道这个模子,对其详细应用却不相识。本文作者团结实际阐明,对此举办了系统的讲授,与各人分享,但愿通过此文可以或许加深你对“...