标签设计-小标签隐藏大交互

1.什么是「标签」

标签是一种灵活、常用的分类方式，用于使用描述它们的关键词进行标记，分类或组织。

2.用法：

• 当需要准确、具体地标记事物的属性和维度；
  

• 进行分类，便于搜索查询。

举个例子：招聘系统常常需要给候选人打标签，标记候选人的能力/特性：【沟通能力强】【具有领导才能】等；

3.举例说明：

标签根据功能可分三种状态：可读状、选中态和可删除态，三种状态可根据使用场景单独使用或组合使用。

接下来主要通过teambition创建任务时给任务打标签的交互，介绍下打标签需要注意的点。

先看"新建标签"

那应该有人会想，为什么不直接弹层中不直接出现新建标签的输入框，而是要把添加的按钮放在弹层的右上角呢，这不是又多了一步操作吗？

其实，这是因为下拉弹层需要承载另外的功能：标签库。也就是创建的标签会当成数据源存储下拉，在创建其他任务时可以直接添加，不必再次创建。因为是个【通用又常用】的功能，用来标记不同【任务】的属性和维度很大可能有共同使用的标签。如下图，已添加的【自信】【顺利】两个标签就在弹层中了。

“编辑标签”

鼠标悬停到弹层中的标签，右侧出现编辑按钮，点击后弹层变成【自信】标签的编辑态样式：

为了让用户直观的知晓哪些标签已经添加过了，在标签库，已添加的标签右侧有【对勾】标记。再次点击弹层中已添加的标签，标签库中标签按钮右侧的对勾消失，页面中已添加的标签也清除，也就是【取消添加】，这避免了用户多次添加同一个标签。

再来看两种删除标签的交互

第1种是页面中已添加的标签，鼠标悬停上去标签右侧就会出现删除按钮，点击即可直接删除，操作较容易。因为即使删除了给此任务添加的标签，但是标签资源库中已经创建好的标签是还在的，再添加上也就是点击一下的事儿，是很容易添加回来的，找回的成本低。

第2种已经创建的标签，也就是标签库中的标签，删除时需要点击【编辑】按钮进入标签的编辑态，才会出现【删除】按钮，而且用红色引起用户注意，点击删除后原弹层上出【确认删除标签？】的二次提示，交互路径较长。因为这些创建的标签就像是标签资源库一样是可以在以后其他任务新建时反复使用的。如果删除了，再次添加回来需要再次输入标签，选择对应的标签颜色，找回的成本较高，而且删除标签库中的标签，页面上已经添加的对应标签也会被删除。

文字按钮还是图标按钮？

我们看到，没有任何标签时，触发添加标签的是用文字按钮【添加标签】，而不是一个➕号，当用户已经添加过标签后，添加按钮的触发操作直接就用一个➕号的图标表示。我觉得有两点小原因：1.文字按钮，相比图标按钮，起到【解释说明】+【触发】两个作用，所以刚开始用文案按钮；2.图标按钮占据的空间更小，所以有标签后直接用➕号，鼠标悬停上去后依然给出了tips提示的。

再来看搜索框的巧妙运用

细心的同学发现了，标签弹层中还带【搜索】功能，便于快速定位和查找。

这里搜索框承载了2种功能，搜索框当输入搜索字段，当能够匹配出已创建的标签时，就是搜索的功能；

当没有匹配到已创建的标签数据源时，就是相当于个文本框，新建标签的功能。同时弹层中出现选择的颜色条，下方是【创建】按钮，可以直接创建这个标签，同时添加到页面中。

自动展开下拉弹层

一个容易被忽视的交互小细节。

添加一个标签后，会自动展开添加标签的弹层，方便连续添加多个标签，不用每次都手动点击【添加】的按钮。

但是自动展开后光标定位的问题，还分两种情况：

如何给标签分类和区分呢？

通过颜色。在创建标签时默认选中一个标签颜色，当然，用户可以根据需要选择其他的颜色，来区分标签。添加后的标签用所选颜色来显示。同时在标签的下拉弹层中，也就是标签数据库中前方也有颜色区分。

没想到吧，小小的标签，居然能理出来这么多的交互点，虽然都是小点，但是细节决定成败呀，拉开用户体验的可能就是这些小交互～

完事了吗？还没有。

还有更细节的。。。

比如，页面中添加的标签过多如何显示？

答：折行显示全部标签，不限制折行数量。

比如，用户创建的标签文字过多，怎么办？

答：单个标签给出最大宽度，超过最大限制则打点，hover出tips。

像这些细节问题，也是我们设计和写规约时要定义好的，当然可能有多种解决方式，但是一定要给出【规则】否则，设计宣讲会上，开发测试也定会抓着问的。