E3.08.1chip multi-select with add remove设计
标签适合多选且可动态增删
别名: 选择标签 · choice chip · 可增删标签
概念解释
标签选择(chip / tag selection)把已选和可选对象做成可增可删的小块:点一块加入选择,再点去掉,或从建议里添一个新块。它适合成员会变的多选——兴趣、过滤器、可见范围——而不是一次勾死的静态复选清单。动态指集合在这次任务里会变长变短,不是开发者以后会改选项表。输入框里自由造词的标签是另一类字段;这里的标签首先是选择,造词只是可选的补充。
每一块同时是对象和控件:看见它就看见成员,点它就改成员。
机制
块把「已选集合」铺在视野里,增删是对这个集合做插入和删除,而不是在一份隐藏名单上翻布尔值。人用对象操作来理解:桌上多一张卡片或拿走一张。因此新增必须有明确入口(建议列表、输入、从池中点选),删除必须落在那一块上,而不是去一份总开关里反勾。
动态还要求块的身份稳定。同一个兴趣被加两次应合并,而不是出现两个「摄影」。建议列表随已选变化(已加的不再出现,相关的提前),让增的动作始终对着「还没在集合里的东西」。若建议是静止的、已选项还在建议里可再点,插入模型就会变成反复开关,标签退回成样子奇怪的复选框。
边界
选项固定且必须对照说明的场景(权限条款、法定项),复选框的标签可读性更好,块会把长句剪碎。单选不要用一排可点亮的块去模仿分段:去掉当前块会走到空,而分段通常不允许空。立即生效的过滤器常用标签,随表单提交的兴趣选择也可以用,但要在块旁说明「保存后才生效」,否则增删会被当成已经写入。树形或级联关系塞进扁平的块会丢掉层级,应回到树或级联。
怎么落地
- 成员需要在任务中变长变短时用标签块,不要用收起的多选下拉把集合藏起来。
- 提供「从建议加入」和「从已选去掉」两条对称路径,已加入的建议项应消失或变成已选样式。
- 同一对象只允许一块;重复加入要合并,不要叠出双胞胎。
- 验证:加三块再删一块,问旁观者集合里还有谁。说不出或指出已删除的块,说明块没有承担成员身份。