E3.08.1chip multi-select with add remove设计

标签适合多选且可动态增删

别名: 选择标签 · choice chip · 可增删标签

概念解释

标签选择(chip / tag selection)把已选和可选对象做成可增可删的小块:点一块加入选择,再点去掉,或从建议里添一个新块。它适合成员会变的多选——兴趣、过滤器、可见范围——而不是一次勾死的静态复选清单。动态指集合在这次任务里会变长变短,不是开发者以后会改选项表。输入框里自由造词的标签是另一类字段;这里的标签首先是选择,造词只是可选的补充。

每一块同时是对象和控件:看见它就看见成员,点它就改成员。

机制

块把「已选集合」铺在视野里,增删是对这个集合做插入和删除,而不是在一份隐藏名单上翻布尔值。人用对象操作来理解:桌上多一张卡片或拿走一张。因此新增必须有明确入口(建议列表、输入、从池中点选),删除必须落在那一块上,而不是去一份总开关里反勾。

动态还要求块的身份稳定。同一个兴趣被加两次应合并,而不是出现两个「摄影」。建议列表随已选变化(已加的不再出现,相关的提前),让增的动作始终对着「还没在集合里的东西」。若建议是静止的、已选项还在建议里可再点,插入模型就会变成反复开关,标签退回成样子奇怪的复选框。

边界

选项固定且必须对照说明的场景(权限条款、法定项),复选框的标签可读性更好,块会把长句剪碎。单选不要用一排可点亮的块去模仿分段:去掉当前块会走到空,而分段通常不允许空。立即生效的过滤器常用标签,随表单提交的兴趣选择也可以用,但要在块旁说明「保存后才生效」,否则增删会被当成已经写入。树形或级联关系塞进扁平的块会丢掉层级,应回到树或级联。

怎么落地

  • 成员需要在任务中变长变短时用标签块,不要用收起的多选下拉把集合藏起来。
  • 提供「从建议加入」和「从已选去掉」两条对称路径,已加入的建议项应消失或变成已选样式。
  • 同一对象只允许一块;重复加入要合并,不要叠出双胞胎。
  • 验证:加三块再删一块,问旁观者集合里还有谁。说不出或指出已删除的块,说明块没有承担成员身份。

延伸

  • 同组E3.08.2 标签换行会造成布局跳动 · E3.08.3 已选标签的删除入口需足够大
  • 相邻E2.20 标签输入 · E3.06 多选下拉 · E3.01 复选框
  • 站内检索choice chip · tag selection · add and remove chips

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E3.08.1