yabo1

守望者

<@彩云译设计:everybody好,我是彩云。下拉菜单是UI设计,网page设浦械幕】丶琒o is it平时everybody做设计被嵊玫降某S米榧杂斜匾运腥嫔钊氲牧私狻本文very全面的introduce了下拉菜单的设计法则,believe读完会对下拉菜单设计有一个全新的know,黄鹄囱鞍伞

下拉菜单stayUI设计领域经常饱受批评,但this也不是没有reason的。设计得不好,它们变成了繁琐和Low的代名词。howeverthis不是this篇文章要讨论的,Wetake要讨论的是,stay必要时应该how 正确的使用它们。
同时我需要申明的是,下拉菜单有两种main类型:一种用于导航菜单,另一种用于表单。staythis篇文章中,We只聊表单中的下拉菜单设计。
文章take会聊到如下谌荩
  1. 设计全面图解
  2. 下拉菜单的类型及变化
  3. 下拉菜单style
  4. 下拉菜单状态
  5. 提示语句
  6. 问笔褂孟吕说
  7. 原生下拉菜单
  8. 可用性检查

 

1. 设计全面图解

下拉菜单的设计图解和文本输入框很接近,只是谌荻嘁恍(1.栏目谌 2.容器 3.下拉箭头 4.占位符或提示文本 5.滚动条 6.下拉菜单 7.菜单项 8.指钕 9.选中项 10.提示)
下拉菜单设计图解

2.下拉菜单的类型及变化

人们对标准下拉菜单已经有了普遍的了解,但你仍需要stay工作中留意几个特别的类型捅浠his里包含的下拉菜单是in the light of表单的情况,并不是导航栏里使用的下拉菜单。

2.1.标准下拉菜单

标准下拉菜单是in the light ofWe所理解的“下拉”this个动词。stay激活状态,当你点击貌似文本输入栏的地方时,它会打开一个菜单。
标准下拉菜单

2.2.下拉菜单配自动提示

蝡age琹ikethis个功能。当我第一次注意到自动提示是stay谷歌的search索栏上,可我不记得第一个实现this个功能的是what网站了。当你stay一长串列表中choice需要难∠钍(比如country名),this个功能变得格外实用。
下拉菜单配自动提示

2.3.下拉菜单配自动完成和自动提示功能

自动提示和自动完成功能被放stay黄鸩⒉痪取自动提示是stay输入栏里display选项让user从中choice。自动完成是提前display一个完整的单词或短语。
下拉菜单配自动完成和自动提示功能
if你没有stay文本输入栏start打字的话,自动完成region通常被隐藏起来。

2.4.下拉菜单配多选

大多数情况下,下拉菜单是单选按钮难由臁his里的下拉菜单配多选则是复选框难由欤簎sersurestay同一个输入regionchoice多个列表选项。(彩云注:前段time正好有friend问我,stay设计B端后台时,是否surethis样设计,actually是sure的。)
下拉菜单配多选
ifsure的话,尽量避开thistype型。我曾stay一个无比冗长的类别列表上不得已使用了它。讲真,下拉菜单配自动完成和自动提示的组合才是最理想的。

2.5.下拉菜单配分组

当长型下拉菜单的设计不是特别理想时,你sure把列表分组,this样search索起来More简单。
下拉菜单配分门别类

2.6.固定滑动菜单

虽然不是严格意义上的下拉菜单,however也sure考虑把多选菜单纳入choice范围中。和下拉菜单不同的是,固定滑动菜单展开后会有一个sure滑动男〈翱凇
固定滑动菜单
它们stay电脑page面上尚可使用,但stay手机屏幕上就有点别扭了。到时候会成为一个“stay滑动栏里的滑动菜单”
personal此担我只使用过一次,也很少看到this个类型被广泛使用过。

2.7.日期choice器

日期choice器的类型最好只用stay安排会议和活动日程上。当人们需要安排eat休息餐的时候,能一眼看出星期几的日历是最好however的了。可同样的设计被用stay填写护照end日期时就会相当烦人。我比较偏向于那种既能输入数字又能choice日期的设计 – 最好确认一下输入栏里的年月日之间由狭诵毕撸蝗换让人很纠结。
日期choice

2.8.我的“拉仇恨秘诀”:

让user填写信用卡或护照end日期时孟吕说ィ瑃hey会“特别”关注那天是星期几。询问user生日日期时使孟吕说ァN让你被“恨得”更深一点,确定they只能通过调整路堇锤幻磕甑膖ime。“恨之入骨”级:this种设计stay填写养老院申请时最有效。(译者注:staythis一段中,hopeeverybody能体会到author对those 设计的深深讽刺)

3.下拉菜单style

不同于下拉菜单的类型( types),下拉菜单的style(styles)涉及的是它实际上长what样而不是它how 工作的。我把几个常见的style列举如下。

3.1.标准style(附属)

之所以称之为“标准”是becausethis是最常见的。
标准style(附属)

3.2.标准style(非附属)

我越来越多地见到this种分离菜单的style。actually很easily理解 – this样菜单sure根据屏幕尺寸的变化来决定是处于输入栏的上方still路健
标准style(非附属)

3.3.圆形边框

圆形边框更适合game型的page面设定。
圆形边框

3.4.搭配图标

stay输入栏的开头放一个图标会更有“设计感”。当有人抱怨表格看起来很单调的时候(ok,老大。。。this个表格有20个输入栏,你还能让人家Yes? 样?)我就加了个图标。老大then,就没有then了。
搭配图标
偷懒小窍门:if有人抱怨长捅砀看起来很单调,那你就加个图标。this个久经考验的真实办法不用费吹灰之力,而你的上司或甲方dad 还一定会觉得own捡奖α恕

3.5.搭配picture

我通常会避免stay下拉菜单里加picture – 仅仅是because后期to update和维护会very痛苦。尤其是if列表经常变换的话,后果苦不堪言。however当你需要展示各个列表的不同之处时,this个style会很实用。
搭配picture
and我thinkstay一个有限的下拉列表空间里很难看清楚picture(参照上图),所以this种设计有点eat力不讨好。除非你把picture设计得very大。

3.6.Material Design的填充下拉菜单

我表白一下own是谷歌材料设计语言的粉丝,包括they的下拉菜单。
“单线区( ‘line only’ field)”已不再stay谷歌的材料设计语岳锸褂昧,但你仍能看见它潜伏staynetwork上。

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

“单线区“被填充下拉菜单(filled dropdown)所替代,allegedly是becauseusertest反映更好些。虽然没之前的那个好看,但确实使用起来更奖 – this才是最关键,各位!
Material design的填充下拉菜单(filled dropdown)

3.8.Material Design的描边框下拉菜单

和they的描边框文本输入栏一样,材料设计语言的描边框下拉菜单(outlined dropdowns)也very炫酷。they的菜单栏和下面的实际choice栏分离,this解决了很多可用性的problem。
标签文本被激活后变小浦辽戏降摹我还想指出的是(this个经常被我忽略掉):你有没有find 下拉菜单的第一行列表强瞻椎摹his样的设计sure让user重新设孟吕说ィ热缢祎hey想之后返回this项或留白列表。
Material design的描边框下拉菜单

4. 下拉菜单状态

不管user用what样的输入方式操作,输入栏应给予及时的反馈。this里We来看看不同反馈状态下的下拉菜单。

4.1.默认状态

默认状态是userstay操作前下拉菜单难印

4.2.禁用状态

禁用状态下的region对user可见,但不能使用。

4.3.悬停状态

ifuser的鼠标stay一个下拉菜单上悬停,this个下拉菜单应该暗示它的可点击性。
敲黑板:手触屏幕上不能有悬停状态,if闵杓频氖手机或平板Software就sure省省了。

4.4.强调状态

强调状态是指当userstay使用“制表键”(this里指user使用键盘“tab/制表键”操纵page面then按“enter/回车键”输入信息的情况),指定了下拉菜单之后,但stay选中特定列表选项之前。Wecommonly会看到选中的region带有“蓝色光环”。
however有些网站把强调状态和焦点状态合并stay黄穑词箄ser没有按回车键,下拉列表也会直接打开。我有点纠结哪个方式更好。理论上合并状态能够理解,可是stay我没有to make clear指示的情况下,下拉列表就自动打开的this点让我很困惑。不知各位Yes? 看?

4.5.焦点状态

焦点状态指的是项康幕ザ刺5蹦点击了下拉菜单的话,列表就会随之打来并展示选项。
我看到过的很多下拉菜单都会把箭头指向同一方向,无论是活跃状态still焦点状态,我比较倾向于调换箭头的方向。我把它强闯墒钦鄣姘(accordion)。你还sure用动图展示箭头转换的方向。
当user的鼠标stay打开的下拉列表选项时,最好display每个specific 男Q∠睢

4.6.完成输入

ifuser已经完成了choice,输入栏应该弹回活跃状态。alsodisplay已choice的谌荨

4.7.失败反馈

free文本输入很easily出错。however下拉菜单难∠詈躤asily预测,in the light of它的失败反馈应该只有一郑好挥完成选项 – 当user点击“提交”键被收到失败反馈。

5. 占位符语言

按常理,我会把占位符的语言和free文本region的保持一致。不能确定?下面是几个sure参考的choice:

5.1.把占位符留空

当其他文本region没有占位符时,commonly把占位符留空是最easily的choice。

5.2.stay占位符中使用通用提示

classic提示像“请choice”等等。

5.3.stay占位符中使用推荐性措辞

stay通用提示“请choice”后面由夏阆让they进行操作的推荐性措辞,this样会让你的下拉菜单看起来整体上更统一。

5.4.占位符上搭配选项

当你stay下拉菜单中放上一个预备选项时,应确保user已经留意到它了 – 不然they会提交一些并不符合原意难∠睢
那么到底该选哪一个呢?if有怀疑,捅3终迳系耐骋弧1热缒愕奈谋緍egion都有占位符,那就统一使用占位符。

6.问笔褂孟吕说

this里特别想让我孟吕说hoice出生年份的All网站问一句:You guys的良心不会痛吗?不需要提醒我那fast速增长的岁数,尤其强吹讲欢贤禄哪暝氯樟斜怼

6.1.if你难∠钌儆5个

if你难∠钌儆5个,sure单选按钮。this样就不用多余地点击列表上All选项了。超过5项choice则会很费空间。
提醒:有人说rule上应该是6个,而不是5个,我让你own决定吧。

6.2.if打字输入比choice更easily的话

if你打字输入花的time比从下拉列表中choice花的少的话,那结果还梦事穑磕贸錾暝吕此担苯哟蜃质淙肴掌诒仁褂萌鱿吕说ダ吹胑asily多了。
有时程序被岵同意,this是because编写一个下拉菜单比free文本region来得easily。后者需要设置various可输入和不可输入的rule。我也输了很多场和they的较量,however我会continue坚持到底的。

6.3.if你的两个选项是“开”和“关”(又或者“是”和“否”)

只有两个选项的下拉菜单actually很烦人,特别是只需要answer“是”和“否”的情况。this时候切换按钮(toggle)surevery漂亮地解决this些problem。

6.4.if选项是数字

if你难∠钍鞘郑敲茨阌屑钢謈hoice。
紫龋僖淮危让they打字输入。步骤条(steppers)也同样有效,可是我只建议stay预期步骤不会多于5步的情况下使用。不然,user会可怜巴巴地坐staythere点到100。
第二种是使用滑块(slider)choice数值。滑块staychoice大数值的数字或估测数值时相当有帮助。

6.5.if选项很多

ifstay下拉菜单中有很多选项(actually你应该尽量避免),让user’search索‘they难∠睢W畛<那榭鍪关于country选项的下拉菜单, they涉及广但也easilyanswer。之前也提过,this种设计和自动完成功能是完美搭配。

6.6.那么what情况下应该孟吕说ツ兀

personal此担桓鍪淙肜竔f达到如下两个条件就sure考虑使孟吕说ィ
  1. 多于6个选项
  2. 当user不能马上知晓选项答案的情况。比如,你的user上传了一个video,主办方需要know 附加到video男砜芍だ嘈汀ommonlyuserprobably并不清楚平台上可用的All选睿瑃his时下拉菜单捅涞煤苡斜匾恕

 

7. 原生下拉菜单

Westaytime和预算nervous的时候,又或者We设计的是最简可行product的时候,We会试图使用原生或默认的choice。actually设计定制的输入栏就像蛋糕上装饰用的糖霜,We有时候没法choice制作那份甜甜的糖衣点缀。那样的情况,你需要清楚面对的是what。
当需要衡量stay不同设备上的可用性时,原生下拉菜单也会更保险一些。
We大规模的可行性检测和基准testdisplay:有82%的电由务网站staythey的结账流程上使用了定制设计的下拉菜单,thisamong31%定制设计的下拉菜单有serious的可用性problem。(来自Christian Holst男鹗觯

7.1.默认设计

网上有一个关于原生下拉菜单的例子,你sure去this里看看。
原生手机下拉菜单 https://html.com/attributes/option-selected/
原生PC端下拉菜单 https://html.com/attributes/option-selected/
就像你从this些例子中看到的,stay不同的平台或浏览器上they都有些细微差别。they并不好看,但theyvery实用。

7.2.套用外壳

我曾经把this个称为“半定制”,however最近读到的一篇文章称this个模式为外壳 – 听起来More正式。于是从今以后我公开宣布称它为外壳。
‘however是what外壳’ – 你会问。外壳就是一块看起来像定制设计的组件,但当你点击进去后find 它使用的是原生下拉菜单的式样。为了缩减开发成本,又想设计和brand看起来统一,this是最简单的办法。this种办法也同时sure避免定制设计的region所带来的user体验problem。

8.可用性检查

1)下拉菜单(包括标签)的点击范围是否超过44像素?(We把标签包含stay内是because当你点击标签时,下拉列表应该打开)
2)All的色彩是否符合AAA标准?
3)下拉菜单是否有强调状态?
4)确保下拉菜单stay列表项目上有效。
5)if你使用的是定制下拉菜单,确保它能stay浏览器视口过低的情况下能打开或关闭。

 

原文地址:
译文地址:(official account)
author:Tess Gadd
译者:吴曲

转载请注明:yabo1 » how 提升UI界面中的下拉菜单细节设计

登录收藏
 
你probablylike的:
设计思考——how 设计空状态界面设计思考——how 设计空状态界面
设计沉思录 | 流量魔法师笔记之流量分发设计设计沉思录 | 流量魔法师笔记之流量分发设计
苹果的设计牛stay哪儿苹果的设计牛stay哪儿
App bars: bottom 底部应用栏App bars: bottom 底部应用栏
原创 | 一文彻底看懂UI设计适配与落地(上)原创 | 一文彻底看懂UI设计适配与落地(上)
开发文字错位,UI需要know 的解决办法开发文字错位,UI需要know 的解决办法
UI界面设计基础知识UI界面设计基础知识
保姆级UI界面版式设计实用小技巧,你知多少?保姆级UI界面版式设计实用小技巧,你知多少?
移动端表单表格设计移动端表单表格设计
设计万花筒|进击的盈利模式之member体系设计万花筒|进击的盈利模式之member体系