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

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

[复制链接]

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

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

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


1.5 列表选择
列表选择控件包含选择按钮,容器框,项目列表标签。用户可以单击容器框中随附的项目,以从列表中选择一个或多个。列表框可能会滚动,具体取决于它包含的项目数和可见区域,更复杂的列表框允许用户通过将项目从一个列表框移动到另一个列表框来调整容器框的大小,重新排列项目列表以及进行选择。
【转帖】选择类控件设计解析(3)

优点:
交互成本低:列表框不需要用户单击任何内容即可在进行选择之前显示其中的选项(但是,如果有太多项,它们可能需要用户滚动列表)。
增加了可见性:一次查看多个选项的能力可以加快决策速度并提高选择准确性。列表选择为内容提供了更多的空间。它们易于阅读,可以容纳多文字,文本可以换行,还可以增加图片。但是,应避免在多列列表框中进行水平滚动。
用多选双列表框,用户可以控制项目的显示顺序,并获得所选项目的清晰概述,这在列表框包含多个选项时很有用。
缺点:
空间:他们往往很占用空间,不适合用在垂直高度受限的页面中。
陌生:用户可能不知道如何立即与列表框进行交互-特别是,如果多选列表框中未包含复选框,则他们可能不知道如何选择倍数。这就是为什么将复选框包含在多选列表框中非常重要的原因,除非它们将注意力集中在多选功能上或增加不必要的屏幕混乱。
用户可能无法一次看到所有选定的选项:如果在可见区域中看不到更多的可用项目,则用户可能无法同时看到所有选定的项目。为避免此缺点,请在列表框上方将所选项目显示为标记,或在不可滚动的列表中突出显示所选项目。
可以根据选择类型进行分类,这些列表框形式都可以滚动。

列表单选
用户只能从互斥选项列表中选择一项。最初的单选按钮被用于列表中超过6个选项时,被设计成垂直方向,圆形轮廓,并摆在列表项的开头,这就是列表单选。现一些设计中,选中被设计成在列表选项外加一个描边框形式或带有背景色,用以节省水平空间。
【转帖】选择类控件设计解析(3)

列表多选
这种类型的列表框包括使多个选择更加明显的复选框,设计样式上,web通常是在列表开头处设计一个正方形描边框(复选框)。
【转帖】选择类控件设计解析(3)

多选双列表框
这种类型的列表框由两个列表框组成,两处的列表框内容可以相互拖拽。比如左侧的列表框已选中项目可拖拽至右侧列表框,同时支持表内上下拖拽更换顺序。
点击“ 右箭头”按钮可将左侧的列表框所选项目移动至右侧列表框。多选双列表框实际运用较少。
【转帖】选择类控件设计解析(3)




avatar

41

主题

71

帖子

460

积分

中级会员

Rank: 3Rank: 3

积分
460
干饭小天才 发表于 2021-3-11 16:26:23 显示全部楼层
那么列表控件一个项目里面可以多次使用吗?针对整体布局会有影响吗?
avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t