请选择 进入手机版 | 继续访问电脑版
分享
查看: 714|回复: 1

[分享] 【转帖】选择类控件设计解析(4)

[复制链接]

【转帖】选择类控件设计解析(4)

发表于 2021-3-9 13:41:30 来自 分享 只看大图 阅读模式 倒序浏览
zzv_icon714 zzr_icon1 查看全部
本帖最后由 嗨,狗子 于 2021-3-16 18:10 编辑

前文传送门:
选择类控件设计解析(1)
选择类控件设计解析(2)
选择类控件设计解析(3)


1.6 下拉菜单
这是是一种弹出按钮,单击后会显示包含选项列表的菜单。下拉列表以最简单的形式包含四个主要部分:一个容器框,一个朝下的箭头按钮,一个项目列表和一个标签。用户可以单击向下箭头以显示互斥项的列表,从中只能选择一项。[color=rgba(0, 0, 0, 0.84)]标准下拉菜单是针对我们所理解的“下拉”这个动词。在激活状态,当你点击文本输入栏的地方时,它会打开一个菜单。列表项仅在单击向下箭头后出现,选择一个项目或在下拉列表的外部单击将其关闭。
【转帖】选择类控件设计解析(4)

下拉列表的优点:为用户提供最佳选项的功能,默认情况下处于选中状态。

淡化替代选项和更改:由于下拉列表隐藏了其他可用选项,因此它们很好地淡化了替代选项并过分强调了进行更改的能力。(这在默认值可以满足大多数用户的情况下,并且其他选项可能对非专业用户来说是危险的或令人困惑的情况下是有利的。)

熟悉:下拉列表是大多数用户熟悉的选择机制,因为下拉列表在Web和本机应用程序中得到广泛使用。
缺点是需要点击项目列表中的选项,包括:
列表包含过多的内容,可能会很麻烦地滚动。

用户习惯于捕获众所周知的值时,它们会使用户放慢速度。例如,当输入生日或信用卡到期日期时,与下拉列表进行交互相比,在直接键入内容通常更快,更容易。

忽视:由于表单内容非常紧凑,因此用户可能会意外忽视表单,网页和应用程序中的下拉列表。

容易消除:不小心将光标从框中移开会关闭下拉菜单,不得不重新开始选择过程。

下拉菜单配分组
当长型下拉菜单的设计不是特别理想时,你可以把列表分组,这样搜索起来更加简单。
【转帖】选择类控件设计解析(4)

可编辑的下拉菜单
可编辑的下拉菜单在菜单上方显示当前选择的菜单项,用户可以输入菜单中未列出的值。您可以将用户可以输入的值的类型限制为某些类型。例如,设计软件中输入字体大小时,系统会默认一些数值,同时支持你编辑修改。
【转帖】选择类控件设计解析(4)

快捷搜索选项
为了更方便用户的填入,支持字词搜寻,填写一半时,就会出现带有关键词名称选单。在选项很多的情况下,这个功能变得格外实用。
【转帖】选择类控件设计解析(4)

下拉菜单多选
下拉菜单多选是复选框的延伸:用户可以在同一个输入区域选择多个。这件控件用的比较少。
这种控件我一般在多个对象进行对比时才使用,如选择多个公司比较他们的能耗水平与用电规模,由于公司字段比较长,在查看选中状态时需注意容器能否充分显示选择的字段,在导航菜单中会明显拥挤,在表单中使用相对自由。如果可以的话,筛选中尽量避开这种类型。
【转帖】选择类控件设计解析(4)

超级下拉菜单(胖菜单)
将站点,应用程序或系统的所有不同部分合并为一个长列表,该列表进一步细分为子类别,并可以从导航栏中访问,例如下面华为云的下拉列表,大型下拉菜单用于显示大量的选项,分类,数据集或其他类型的相关内容组。
【转帖】选择类控件设计解析(4)

不符合当下标准的设计会混淆用户的感观
任何偏离你所设计的平台标准的行为都会给用户带来额外的认知负担。
【转帖】选择类控件设计解析(4)



avatar

41

主题

71

帖子

460

积分

中级会员

Rank: 3Rank: 3

积分
460
干饭小天才 发表于 2021-3-11 16:25:37 显示全部楼层
【转帖】选择类控件设计解析(4),作为开发人员我设计方面确实不行啊
avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t