UI设计教程:分享有关下拉菜单的使用方法

虽然下拉菜单在UI设计领域中经常饱受争议(没办法,因为下拉菜单设计得不好,会让整个网站和APP的操作变得繁琐),但不可否认,下拉菜单的确是UI设计中最基础的控件之一。

那麽,UI设计什麽时候需要用到下拉菜单?通常情况下,如果输入栏符合以下两个条件,都可以考虑使用下拉菜单:

▶ 多於6个选项;

▶ 用户不能马上知道选项单项的情况。

既然知道了「什麽时候需要用到下拉菜单」,接下来南宁网页集团将详细介绍有关下拉菜单的各类属性。

● 下拉菜单的类型

虽然人们对下拉菜单都有普遍的了解,但在进行UI设计时,各位仍需要特别留意几个常见的下拉菜单类型:

1.标准下拉菜单:点击类似文本输入栏时,会出现对应的列表菜单。

UI设计教程:分享有关下拉菜单的使用方法

UI设计教程

2.下拉菜单配自动提示:当用户在一长串列表中选择需要的选项时,只需要输入首字母(文字)便会出现相关选项。

UI设计教程:分享有关下拉菜单的使用方法

UI设计教程

* 部分下拉菜单配自动提示还具备自动完成功能,即用户在输入栏里输入字母(文字)时,输入栏会显示完成的选项。

UI设计教程:分享有关下拉菜单的使用方法

UI设计教程

3.下拉菜单配多选:类似复选框的延伸,用户可在同一输入区域内选择多个列表选项。

UI设计教程:分享有关下拉菜单的使用方法

UI设计教程

4.下拉菜单配分组:将选项按照类别分组显示,方便用户搜索和选择。

UI设计教程:分享有关下拉菜单的使用方法

UI设计教程

5.导航下拉菜单:用於实现多级导航菜单的展示。

UI设计教程:分享有关下拉菜单的使用方法

UI设计教程

● 下拉菜单的风格

不同於下拉菜单的类型(Type),下拉菜单的风格(Style)涉及的是它的样子,而不是功能,下面南宁网页集团将几款常见的下拉菜单风格简单地说说。

1.标准风格:这是最常见的下拉菜单风格(下图)。

UI设计教程:分享有关下拉菜单的使用方法

UI设计教程

* 标准下拉菜单风格还会出现(如下图)的分离菜单风格,这类风格会根据屏幕尺寸变化决定输入栏的位置。

UI设计教程:分享有关下拉菜单的使用方法

UI设计教程

2.圆形边框风格:这类下拉菜单风格更适合游戏型页面设定。

UI设计教程:分享有关下拉菜单的使用方法

UI设计教程

3.搭配图标或图片风格:如果觉得下拉菜单看起来比较单调,可以在下拉菜单添加图标或图片,让整个更有设计感,但需要注意图标或图片的清晰度,如果列表太小无法看清,就不要强行添加。

UI设计教程:分享有关下拉菜单的使用方法

UI设计教程

另外,这种下拉菜单在後期更新和维护时也会比较痛苦,尤其是列表经常变换时,不过若需要展示各列表的不同之处时,这种风格还是挺实用的。

UI设计教程:分享有关下拉菜单的使用方法

UI设计教程

4.Material Design下拉菜单风格:这种风格的下拉菜单风格实在太棒,让整个UI设计显得更乾净、更简约,还解决了很多可用性的问题。

UI设计教程:分享有关下拉菜单的使用方法

UI设计教程

● 下拉菜单的状态

要想提高UI设计的交互性,关键要给用户提供友好的操作体验,因此不管用户用什麽方式操作,下拉菜单都应给予及时的反馈。这里,我们来看看不同反馈状态下的下拉菜单是如何的:

1.默认状态:用户在操作前的下拉菜单样子。

UI设计教程:分享有关下拉菜单的使用方法

UI设计教程

2.禁用状态:用户能看到该菜单内容,但不能使用。

UI设计教程:分享有关下拉菜单的使用方法

UI设计教程

3.悬停状态:光标在菜单悬停时,下拉菜单会向用户暗示它的可点击性。(该状态只适用PC端的UI设计。)

UI设计教程:分享有关下拉菜单的使用方法

UI设计教程

4.强调状态:用在使用「制表键」制定了下拉菜单後,但在选中特定列表选项之前。

UI设计教程:分享有关下拉菜单的使用方法

UI设计教程

5.焦点状态:当用户点击下拉菜单後,列表会随之打开展示选项,且当用户的光标悬停在下拉菜单的选项时,该选项会变得与众不同。

UI设计教程:分享有关下拉菜单的使用方法

UI设计教程

6.完成输入:用户点击选项,输入栏弹回活跃状态并显示已选择的选项内容。

UI设计教程:分享有关下拉菜单的使用方法

UI设计教程

7.失败反馈:用户没有完成正确的选项,并点击「提交」键後,用户会收到「提交失败」的反馈信息。

UI设计教程:分享有关下拉菜单的使用方法

UI设计教程

下拉菜单是UI设计中令人又爱又恨的控件之一,虽然它不占地方、不需要输入验证、技术门槛、用户认知度高等,却又非常容易被错误使用。因此,在设计下拉菜单需要注意细节、使用场景、设计技巧等,才能将下拉菜单的优点发光发热。

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/42508.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
Inspirr的头像Inspirr订阅用户
上一篇 2022年6月25日 01:27
下一篇 2022年6月25日 01:27

相关推荐

  • B 端图表如何设计?这篇5000字的总结超全面。

    无论是数据展示设计还是工作汇报中,都离不开图表的运用。相较于繁琐的数据内容,用户可以更好更快了解大小、位置、颜色、形状等视觉信息。可视化过后的数据可以加深人们对数据的理解和记忆。 本章主要讲一些关于制…

    2023年3月2日 SEO操作
    00
  • 分享浅析:人工智能如何改变网页设计。

    为您的企业创建完美的网页设计并不容易,但AI(人工智能)技术日渐成熟并应用于多个领域,使得网页设计更加智能化,为我们带来了更多的便捷。1.网页设计简史网页设计已经走过了漫长的道路。回到过去,设计师唯一看到…

    2023年6月16日
    04
  • 如何选择优秀的网站域名

    网站名称和域名的选择好坏可能会直接影响到後期的网站优化和用户体验等等,所以选择域名一定得慎重。优秀的域名是网站不可或缺的部分。如何选择优秀的网站域名? 域名一旦确定就代表我们在网络上的身份被确定,在以…

    2022年6月17日
    0129
  • 如何使用好空白状态的介面

    1、 鼓励用户进行操作 空白状态介面的首要目的之一是,能够说明使用者在介面进行操作。在空状态的介面当中引导使用者交互,要直观性。 2、 提供个性化的内容 个性化的内容和元素本就是为了让你的介面和使用者需求最…

    2022年6月25日
    0108
  • 经验分享自己如何制作网站网页设计图片,如何介绍自己的网页设计。

    制作网站网页设计图片是一个涉及到多个步骤的过程,包括设计、编码和发布,以下是一些基本的步骤: 1. 确定目标:你需要明确你的网站的目标,这将帮助你确定你的设计应该包含哪些元素,以及如何布局这些元素。 2. …

    2024年6月28日
    00
  • 输入体验如何保证友好?

    拒绝固定形式 适用固定的输入形式,最突出的问题是受制於脚本校验的限制。这不是用户输入的错误,移动端的界面设计要支持输入框灵活的内容。 使用默认值与自动完成 能够根据用户输入的历史记录去提供预设的默认值和…

    2022年6月25日
    0115
  • 网站设计公司哪家好?效率很重要

    虽然很多的公司里面都是有自己的网站的,但是他们在网站维护的时候,都不是自己的员工来完成的,毕竟不是什麽公司都是和网路有关系的,很多的公司里面的员工对於网路实际上也不是非常的清楚的,所以对於这种类型的…

    2022年6月14日
    0145
  • 网页设计趋势:预测2020年网页设计的流行趋势

    距离2020年还不到2个月的时间,不少网页设计师已经开始蠢蠢欲动关注明年的设计趋势。那麽,明年网页设计趋势到底流行哪些元素?我们一起研究下! 预测2020年网页设计的流行趋势 趋势一:3D的深度与现实主义 网页设计…

    2022年6月25日 建站资讯
    0128

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息