UI 界面下拉菜单完全设计指南<i class="icon-fire"></i>

时间:2020-08-29 09:58:00 来源:

【摘要】 考必过小编为大家整理了关于UI 界面下拉菜单完全设计指南<i class="icon-fire"></i>的信息,希望可以帮助到大家,下面我们就一起来看下UI 界面下拉菜单完全设计指南<i class="icon-fire"></i>的具体内容吧!

UI 界面下拉菜单完全设计指南

编者按:这篇文章来自资深设计师 Jeremiah Lam,他所撰写的这篇文章将UI中的下拉菜单的一些常见的注意事项都梳理总结了出来,做 UI 设计的同学可以收藏一下 ~

当用户需要在UI界面中选择不同功能、选项、条目的时候,需要依赖诸如复选框、开关、按钮、下拉菜单等 UI 控件。这些 UI 控件有着不同的优缺点,需要根据使用场景和用户需求来灵活使用,同时,这些控件的设计也有很多注意事项。

今天这篇文章着重聊聊下拉菜单的设计注意事项,文章会加入大量的用例和最佳实践来为你进行说明。而在设计的规则和技巧上,有很多上来自于体验设计领域内最著名的 NN Group 和 Baymard Institute 的文章。

下拉菜单的基本剖析

    标签:告知用户所要选择的内容

    字段图标(可选):用来说明相应的字段特征的图标

    搜索栏目(可选):用来帮助用户轻松找到所需选项,前提条件上下拉菜单中字段超过20个

    复选框(可选):让用户可用同时选中多个选项

下拉菜单的类型

根据所需输入的内容的性质,下拉菜单的外观可能会有所变动,方便处理不同类型的信息。设计下拉菜单的时候,需要保持足够的灵活性,提高可用性,兼顾不同的输入类型,这一点很重要。

下拉菜单的状态

基于不同的交互状态,下拉菜单的 UI 界面有多个不同的状态。每个状态在视觉上都比较相似,但是在设计的时候,要让用户能够清晰地区分开来。下拉菜单通常有 默认、激活、悬停、禁用、聚焦和出错这几种状态。

下面是设计下拉菜单的时候,一些重要的设计准则和最佳实践。

1、避免下拉菜单有太多选项

下拉菜单选项多,是下拉菜单的一大特点,但是如果选项太多,可能会对体验产生负面的影响,比如选项超过15个的时候,用户极有可能会觉得不知所措。

此外,选项过多还会出现滚动浏览的问题。用户只有将光标置于下拉框当中才能正常浏览,而如果不小心光标挪到下拉框之外,则可能让整个页面滚动,这是一件非常令人讨厌的事情。

但是避免不了要怎么办呢?超长的下拉框是最常见的一种情况,当你需要填写/选择自己所在的国家和地区的时候,超长的列表简直让人崩溃。

这个时候有2种解决方案:

使用自动填写来帮助用户补完信息

将搜索功能集成在输入框当中

2、选项太少时就别采用下拉菜单

如果选项太少,但是依然使用下拉框就有点浪费了。你可以使用普通的按钮或者选择器控件来搞定这个功能,这可能比下拉菜单来的更加直观和易用,因为相比之下,下拉框还会隐藏信息。

所以,没有太多选项的时候,就尽量不要使用下拉菜单。

3、让不可用选项以灰色显示

首先要说的是,某个选项存在但是不可选(被禁用)和不提供这一选项,是两个截然不同的情况。如果直接不显示,就意味着逻辑和界面一致性失衡了。所以,最好让不可用的、被禁用的选项保留,但是以灰色显示,且不可选。

4、按照逻辑来排列选项

列举出的选项应该符合一定的规律,方便用户定位和筛选。最常见的情况,是按照字母顺序或者数字顺序来排列,这样用户有清晰的预期和搜索定位的依据。

5、如果输入更快就不要用下拉菜单

在有的情形下,输入可能是比在下拉菜单中选择来的更快的。一种比较典型的情况,是输入信用卡的有效期,输入「月份/年」这样的信息,比在两个下拉菜单中挨个选择,来的快。

尽管用户输入内容需要程序进行验证和匹配,但是从可用性的角度上来说,直接输入依然是更好的选择,因为它减少了操作和认知负担。

6、避免滥用功能和交互

当某些数据和信息是可以自动匹配的时候,就没有必要反复找用户去确认了。这种情况最典型的,就是系统可以根据信用卡号来匹配相应的卡的类型,这就不需要用户使用下拉菜单去挨个选择了。

7、尽可能减少操作数

你可以通过自定义下拉框的设计,来减少操作的数量。一个经典的案例,是选择日期的下拉菜单的设计。如果是普通的下拉菜单,你可能需要三个,但是使用自定义的下拉菜单,就会方便很多。

8、使用尽可能简明的标签文本

用户主要是通过下拉菜单中的标签文本信息来进行筛选的,因此你需要在有限的空间中,让信息尽可能清晰,用识别率更高的大小写结合的拼写方式,表达方式上清晰,直指目标。下面是3条撰写标签文本的准则:

    尽可能用动词来描述指向性明确的操作

    对于链接,请使用名词来帮助用户定位到页面

    在一行内写完标签内容,不要啰嗦

结合一定的逻辑来进行排序,然后将最常用的、最重要的选项放在顶部。当然,更具的排列方式,可以结合一些用户调研来进行细化。

结语

正确的下拉菜单,用户体验是非常棒的,它们可以帮助用户缩小筛选信息的范畴,在有限的屏幕范畴内,最大程度利用空间,提高用户的选择效率。什么时候用下拉菜单,怎么用下拉菜单,最好都弄清楚,这样才能最大程度地发挥设计的价值。

相关文章推荐

资深 UI 设计师搞定按钮和选框的14个秘诀

编者按:这篇文章来自资深设计师 Taras Bakusevych,他长期从事金融和企业类数字产品的设计,在表单和控件设计领域造诣精深。

阅读文章

资深UI设计师搞定输入框和表单的20个秘诀

编者按:这篇文章来自资深设计师 Taras Bakusevych,长期从事金融和企业类数字产品的设计,在表单设计领域造诣精深。

阅读文章

一个UI按钮的自我修养

编者按:一个合格的 UI 按钮到底需要具备什么样的素质?

阅读文章

以上就是考必过小编为大家整理的关于UI 界面下拉菜单完全设计指南<i class="icon-fire"></i>的相关信息,想了解更多考试最新资讯可以关注考必过。

"> 上一篇      "> 下一篇
技能类相关推荐 更多>>
什么是ui?最简单的理解! 插画在UI设计中火起来的原因 教你十分钟学会制作UI界面 UI设计中的新拟物风格是怎样的? UI设计中的色彩搭配,来看看! UI设计的多彩化主要体现在哪些方面? UI设计中哪些地方适合留白? 学习UI设计必懂的专业用语
技能类热点专题 更多>>
热点问答
国家公务员考试年龄限制是多少 公务员国考和省考考试内容有什么区别 函授大专学历能不能考公务员 国家公务员考试考点能自己选择吗 新闻学专业能报考2022年公务员考试吗 什么是联合培养研究生 什么是破格录取研究生 什么人不适合读研 研究生报名户口所在地填什么 研究生结业和毕业有什么区别
网站首页 网站地图 返回顶部
考必过移动版 https://m.kaobiguo.net