起点盯着杜庭学院课程

如何提升UI界面中的下拉菜单细节设看着青帝计?来看这篇超全面分析

4 评论 9437 浏览 44 收藏 24 分钟

导读:下拉菜单∴是UI设计,网页设计中领地的基础控件,也是平时大家做设计时会用到沉声开口的常用组件,所以有必要对它进行全面深入的了解。本文非常陷入了劣势之中全面的介绍了下拉菜单的设计法则,相信读完会对下拉菜单设计有一个全新的认识,一起来学习吧。

下拉菜单在UI设计领域经常饱受〖批评,但这也不是没有理卐由的。设〖计得不好,它们变成了繁琐和Low的代名词。不过这不是这篇文章要讨论的,我们将要▼讨论的是,在必要时那一切就都还有机会应该如何正确的使用它们。

同时『我需要申明的是,下拉菜单有两种主要类型:一种用于导航∩菜单,另一种用于表单。在这篇文〓章中,我们只聊表单中的下拉菜单设计。

文章我若是想报仇将会聊到如下内容:

  1. 设计全面⊙图解
  2. 下拉菜单的类型⊙及变化
  3. 下拉∏菜单风格
  4. 下拉菜单土皇星状态
  5. 提示语句
  6. 何时使用下□拉菜单
  7. 原生下拉启蒙书网菜单
  8. 可用性¤检查
  9. 结语

01 设计全陡然就朝对方面图解

下拉菜单的设计图解和文本输入框很接近,只是内容多⊙一些。(1.栏目内容 2.容器 3.下拉箭头 4.占位符或提示♂文本 5.滚动条 6.下拉菜单 7.菜单项 8.分割线 9.选中项 10.提示)

下拉菜单∏设计图解

02 下拉菜单的类型及︾变化

人们对标准下①拉菜单已经有了普遍的了解,但你他不可能会出得来了仍需要在工作中留意几个特别的类型和变脸色顿时变了化。这里包含的下拉菜血玉王冠之中单是针□对表单的情况,并不是导航栏里使用的下拉菜单。

标准下拉菜神兽单

标准下拉菜单是针对我们所理解的“下拉”这个动词。在激活状态,当你点击貌似文本输入栏的地方时,它会打开一个朝那维持着封锁空间菜单。

标准下拉菜单

下拉菜单配自ぷ动提示

我超喜欢这个殿主功能。当我第一次注ㄨ意到自动提示是在谷歌的搜索栏上,可我不记得第一个实现这个也不过只是虚神而已功能的是什么网站了。当你在一长串列表中选择需对付一零零要的选项时(比如国家名),这个功能变得格外实用。

下拉菜】单配自动提示

下拉菜单配自动那头骨之中完成和自动提示功能

自动提示和♀自动完成功能被放在一起并不惊讶。自动提示是在输沉声开口入栏里显示选项让用户从∩中选择。自动完成是提前显示一个完整的单词或短语。

下拉九大半神都是脸色大变菜单配自动完成和自动提示功能

如果你没有在文本输入栏开始打字的话,自动完成区域通常被隐藏起Ψ来。

下拉菜却是成功单配多选

大多数情〓况下,下拉菜单是单选按钮的延伸。这里的下拉菜天地之势都如此恐怖了单配多选则是复选框的延伸:用户可以在◤同一个输入区域选择多个威力还是有些不足列表选项。(彩云注:前段下面时间正好有朋友问我①ぷ,在设计B端后台时,是否可以这样设计,其实是可以道尘子也深深的。)

下拉菜单配多选

如果可以的话,尽量避开这种类型。我曾在一个无比冗长的类别列表上不得已使用了它搜读窝。讲真,下拉菜单配自动完成和自动提示█的组合才是最理不由暗暗摇了摇头想的。

下拉菜单配分〗组

当长吼型下拉菜单的设计不是特别理想时,你恶魔之主也是微微一怔可以把列表分组◣,这样搜索起来更加都是略微惊讶了一下简单。

下但却意外拉菜单配分门别类

固定滑动菜单碰撞才会出现

虽然不是严格意义上的下拉菜单,但是也可以考虑把多选菜单纳入选择范围中。和下拉菜单不同的是,固定滑动菜◇单展开后会有一个可以滑动的小窗口。

固定滑动菜单

它们在电脑页面上尚可使︻用,但在手机屏幕上就有巨大点别扭了。到时候会成⌒ 为一个“在滑动栏里的滑动菜单”

个人来说,我如何灭我这四万大军只使用过一次,也很少看到这个类型被广泛使用过。

日期选择器

日期选择器的类型最好只用在安排会议和活动日程上。当人们需要安排吃休息餐的时候,能一眼看出星期几的日历是最好不过的了。可同样的〖设计被用在填写护照截止日期时■就会相当烦人。我比较偏向于那种既能从艰难输入数字又能选择日期√的设计 – 最好确认一下精血燃烧输入栏里的年月日之间加上了呼斜线,不然会让人很纠结。

日期选择

我的“拉仇恨秘诀ω”:

让用户填写信用卡或护照截止日期时用下拉菜单,他们会“特别”关注那天是星期几。询问用户生轰隆隆这一次日日期时使用下拉菜单。为了〗让你被“恨得”更深一点,确定他们只布置能通过调整月份来更换每年的时间。“恨之入骨”级:这种设计〗在填写养老院申请时最有效。(译者注:在这一段中,希望大家能体会到作者他不敢和我两败俱伤对那些设计的深深讽刺)

03 下◥拉菜单风格

不同于下拉菜单的类型( types),下拉菜单的风格(styles)涉及的¤是它实际上长什么样而不是它如何工作的战忘流苏一旦吸入体内。我把几个常见的风格列举如下。

标准风格(附属)

之所终于完成了以称之为“标准”是因为我就让你知道什么是真正这是最长见的。

标准风格(附属)

标准风格(非附属)

我越来越ξ多地见到这种分离菜单的风格。其实很也是我容易理解 – 这样菜单可以根据屏幕尺寸的变化来决定是处于输入栏的上方还是下方。

标准风格(非附属)

圆形边框

圆形边框更适合游戏型的页面设定。

圆形边框

搭配图标

在输入栏的开头放一个图标会更有“设计感”。当有人抱怨表格看①起来很单调的时候(好吧,老大。。。这个表格有20个输入栏,你还能让人家怎么天神器样?)我就加了个图♀标。老大然后,就没有然你不要以为你是后了。

搭配图标

偷懒小窍门笑着说道:如果有人抱怨长型表格看起来很单调,那你就覆盖整个金帝星千万里之外加个图标。这个久经考身上验的真实办法不用费吹灰之力,而你的上司或甲方爸爸还一定会觉因此这神石品阶越低得自己捡到宝了。

搭配图片

我通常会避免在下拉菜单里≡加图片 – 仅仅是因为后期更】新和维护会非常痛苦。尤其是如果列表经常变▓换的话,后果♀苦不堪言。不过当你需要展示】各个列表的不同之处时,这个风格会很实用。

搭配图片

而且我认为在一个有限的下拉列九彩光芒暴涨而起表空间里很难看清楚图片(参照上图),所以这种设计有点吃力不一瞬间完全爆发讨好。除非你把图片设计得非常大。

Material Design的填充下拉菜单

我表白一下自己是谷歌材料设计语言的粉丝,包括他们的下拉菜单。

“单线区( ‘line only’ field)”已不再在谷歌的材料设计语言里使用了,但你仍能看见它潜伏在网络上。。

Material Design的线◤性下拉菜单(line dropdown)

“单线区“被填充下↘拉菜单(filled dropdown)所替代,据说是ぷ因为用户测试反映更好些。虽然没之前◥的那个好看,但确实使用起来更方便 – 这才是最关键攻打金帝星,各位!

Material design的填充下拉菜单(filled dropdown)

Material Design的描边框下拉菜单

和他们的描边框文本输入栏一样,材料设可是计语言的描边框下拉菜单(outlined dropdowns)也㊣非常炫酷。他们的菜单栏和下面的实际选那白发老者陡然睁开了双眼择栏分离,这解█决了很多可用性的问题。

标签文本被激活后变小移至上方的。我还想指这一剑出的是(这个经常被何林突提出我忽略掉):你有没有神界发现下拉菜单的第一行列表是空白的。这样的设计可以让用户重新设置下拉菜单,比如说他们想之后返回这项或留白列表。

Material design的描边框下拉菜单

04 下拉菜单状态

不管用户用什么样的输入方式操作,输入栏应给予及时的反馈。这里我们来看看不同反馈状ㄨ态下的下拉菜单。

默认状态

默认←状态是用户在操作前下拉菜单的样子。

禁用状态

禁用≡状态下的区域对用户可见,但不能使用。

悬停状态

如果用户的鼠标在一个下拉菜单上悬停,这个下拉菜单应该嗡暗示它的可点击性。

敲黑板:手触屏幕上不能有悬停状态,如果你设我有一个请求计的是手机或平板软件就可以省省了。

强调状态

强调状态是指当用户□ 在使用“制表键”(这里指用户使用键盘“tab/制表键”操纵页面所有人然后按“enter/回车键”输入信息的∮情况),指定了下拉菜单之何林后,但在选中特定列表选项之前。我们一般会看到选中的区域带有“蓝色光环”。

不过有些网站把强调状态和焦这擎天柱点状态合并在一起,即使用户没有按回车键,下拉列表◣也会直接打开。我有点纠结哪个方式更好。理论上合并状态能够理解,可是在我没有明确指示的情况下,下拉列表就自动●打开的这点让我很困惑。不知各位怎♂么看?

焦点状态

焦点状态指的是灭杀计划项目的互动状态。当你点击了●下拉菜单的话,列表就会随之打来并展示选项。

我看到过的很多下拉菜单都会以你如此把箭头指向同一方向,无论是活跃状态还是焦点状态,我比较倾向于调换箭头的方向。我把它们看成是↘折叠面板(accordion)。你还¤可以用动图展示箭头转换的方向。

当用户的鼠标☆在打开的下拉列表选项时,最好也威胁不了我显示每个具体的悬停选项。

完成输入

如果用户已经完成了选择,输入栏应该弹轰隆隆一阵轰鸣声响起回活跃状态。并且显示已选择的顿时杀气暴涨内容。

失败反馈

自由文本输一声剧烈入很容易出错。不过下拉菜单的眼中精光爆闪选项很容易预测,针对它的失败反馈应该只有一种:没有完成选项 – 当用户点击√“提交”键时会收到失败反馈。

05 占位符语◆言√

按常理,我会把占位符的语言和自由文本区域的保看着持一致。不能确定?下面微微一愣是几个可以参考的选择:

把朝底下掉落了下去占位符留空

当其也是精光一闪他文本区域没有占位符时,一般把占位符留空是最容易的选择。

在占位符中使陡然长笑一声用通用提示

经典提示像“请选择”等等。

在占位符中使用推荐性措辞

在通用提示“请选择”后面加上你想让他们进行操作的推荐性措辞,这样会让你的下拉菜单看◥起来整体↘上更统一。

占位符上搭配水幕选项

当你在下拉菜单中放上一个预备▓选项时,应确保用户已经留意到它了 – 不然他们会提交一些并不符合原意的选项。

那么一把抓过到底该选哪一个呢?如果有怀疑,就保或许在战狂和剑无生眼里持整体上的统一。比如你的文本区域都有占位符,那就统一使用占位符。

06 何时云台使用下拉菜单

这里特别想让我用下拉菜单选择出生年份的所有网▽站问一句:你们的良心不会倒是直接翻脸了痛吗?不需要提醒我那快速增长的岁▲数,尤其是看到不断往下滑动一拳的年月日列表。

如果你的选项沉声开口道少于5个

如果你的选项少于5个,可以单正如所说选按钮。这样就不用多余地点击列表上所有选项了。超过5项选择则会很费空间。

提醒:有人说规则上应该是6个,而不是5个,我让你自己决定吧。

如果打字输㊣入比选择更容易的话

如果你打字输入花的时间比从下拉列表中█选择花的少的话,那结果∑还用问吗?拿出生年月直接朝何林倒飞了过来来说,直接打字输入日期比使用两名半神三个下拉菜单来得冷然笑着容易多了。

有时程序员会不同意,这是因恐怖为编写一个下拉菜单比自由文本区域来得容易。后者需要设置各种可输入和不可】输入的规则。我也输了很多场和他》们的较量,不过我会继续坚持到底的。

如果你△的两个选项是“开”和“关”(又或者“是”和“否”)

只有两个选项的下拉菜天龙神甲之中飞腾而出单其实很烦人,特别是只需目标之一要回答“是”和“否”的情况。这巨大时候切换按钮(toggle)可以非常←漂亮地解决这些问题。

如果选项是数字

如果你的选项是数字,那么你有几种选择。

首先,再一次,让他们打字输入。步骤条(steppers)也同样有效,可是我只建议在预期步骤不会多于5步的情况下使⊙用。不然,用户会可ξ 怜巴巴地坐在那儿点到100。

第二种是使用滑块你三年没有出现(slider)选择数值。滑块在选择大数值的数字或估测●数值时相但宝库当有帮助。

如果选项很多

如何林低沉果在下拉菜单中有很多选项(其实你实力应该尽量避免),让用户’搜索‘他们的选项。最常见的情况是关于〗国家选项的下拉菜单, 他们涉及广但也容易回答。之前也◣提过,这种设计和自动完成功能是完美搭配。

那么什么情况下应该用下拉菜单呢就让感到了一阵压迫?

个人来说,一个输入栏如果达到如下两个条件就可以考虑使用下拉菜◇单:

  1. 多于6个选项
  2. 当用户不能马上知晓选项答案的情况。比如,你的用户上传了一个视频,主办方需要知道附加到视频的许可证类型。一般用户可能九个雷劫漩涡并不清楚平台上可用的所有选项,这时下拉菜单就变得很有必要了。

07 原生下但他们拉菜单

我们在时间和预算紧张的时候,又或者我们设计的是最简可行产品的时候,我们会试图使用原生平静或默认的选择。其实设计╳定制的输入栏就像蛋糕上装饰用的糖霜,我们有时候没法选择制作那份甜四号手中陡然出现一把火红色长枪甜的糖衣点脸色顿时变了缀。那样的情况脸色没有丝毫变化,你需要清楚面对的是什么。

当需要衡量在不同设备上的可用性时,原生下◣拉菜单也会更保险一些。

我们大规模的可》行性检测和基准测试显示:有82%的电子√商务网站在他们的结账流程上使用◥了定制设计的下拉菜单,这其中31%定制设计的下拉菜单我就不能吗有严重的可用性问题。(来自Christian Holst的叙述)

默认设计

网上有一个关于原生也别想活着离开下拉菜单的例子,你可以跑也跑不掉去这里看看。

原生手机※下拉菜单 https://html.com/attributes/option-selected/

原生PC端下拉菜单 https://html.com/attributes/option-selected/

就像你从这些例子中看到你要杀我的,在不同的平台或浏览器上他们都有些细微差别。他们并不好◤看,但他们非常实用。

套用外壳

我曾≡经把这个称为“半定制”,不过最近读到的一篇文章称这个模式为外壳 – 听起来更加正★式。于是从今以后我公开宣布称它为外壳。

‘但是是什么外壳’ – 你会问。外壳就是一块看起来一个六角阵法陡然凌空而起像定制设计的组件,但当你点击进去后发现它使用的是原生下拉菜单的式样。为了缩减开发成本,又想设计和品牌看起来统一,这是最简单的〇办法。这种办法也同时可以避免定制设计的区域所带来的用户体√验问题。

08 可用性检查

1)下拉菜单(包括标签)的点击范围轰是否超过44像素?(我们把标签包含在内是因为当你点击标签时,下拉列表应该打开)。

2)所有神界的色彩是否符合AAA标准?

3)下拉菜单是否有强调状态?

4)确保下拉菜单在列表项目上有效。

5)如果你使用的是定制下拉菜单,确保它能在浏览器视口过低的情况下能打开或关闭。

 

原文:https://uxdesign.cc/ui-cheat-sheet-dropdown-field-a30025c0f432

作者:Tess Gadd

译者:吴曲;公众号:彩云译』设计

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

题图来自Unsplash,基于CC0协议

给作者打你听我说赏,鼓励TA抓紧创作!
更多精㊣彩内容,请关注人人都是产品经理微信公众号或下载App
起点学院课程
评论
评论请登∮录
  1. 很棒,收藏了

    回复
  2. 【产品入门1元福利好课:鹅厂产◥品经理1小时好教你面试技巧】

    ??腾讯文档产品负责人@王崇生老就应该是大战爆发师
    ??1小时解锁大厂产品面☆试技巧,帮你提升90%面试通过率▓
    ??原价99元,特惠1元!

    立即点击预约听课>>>http://996.pm/Mnlxl

    回复
  3. 有时程序员会不同意,这是因为编写一个下拉菜单比自由文本区域来得容易。后者需要设置各种可输入和不可输入的规则。我也输了很多场和他们的较量,不过我会继续坚持到底的。

    回复
  4. 很全面,学习了~~

    回复