本周主题是设计如何添加标签，主要是为一个列表的每条项目添加标签。听起来并不复杂，但其中细节设计却是困难重重，几经改版虽然很烧脑，但是思考的过程很有意思，在这里稍微做下总结。

原版上图所示，我接到的需求是给出一个标签的功能，能够为列表中的条目添加标签。大多数具有标签功能的产品基本上是单项添加标签（例如邮箱是对每封邮件添加或者删除标签），但因为我们的这款产品的特殊性，用户通常会批量添加、删除或者是修改标签，所以一定要考虑批量操作与单项操作时的不同逻辑。

如上图2是设计后效果图。设计点：1、标签为色块放在列表左侧，因为产品特性原因，每个标签字数并不会太多，所以把标签的第一个文字直接放在色块上。

每条项目贴标签或者删除标签的步骤也非常清晰，第一步选中项目，第二步点击标签按钮，第三部勾选标签或去掉已经选中的标签，第四步点击确定，这样就完成了标签的添加或者删除了！

设计到这里没有问题，单项项目操作十分清晰，但是问题在于，在选中多条项目进行编辑时，这些项目贴的标签可能都不同，打开标签页时，标签的状态展示就是一个问题。

所以下面就如何对标签进行批量编辑进行了深入探索～

第一版

如上图3所示，如果我同时选中了type3、type4、type5这三个项目，那么可以看出“热门”被贴2次，“新品推荐”被贴1次，“重点”被贴3次，那么在标签管理页，这三个标签究竟是都显示被勾选了还是只有被贴3次的“重点”被勾选，而“热门”和“新品推荐”不被勾选呢？

如果“热门”被勾选，但是type5并没有被贴上此标签，现在如果给type5贴上“热门”标签，就无法完成；但如果“热门”没有被勾选，那么现在我如果要删掉type4的“热门”标签就无法完成。所以当时的解决方案，一旦批量编辑项目，项目原有的标签全部被清空，标签管理页中所有的标签都显示不被勾选的状态， 然后选中谁就批量添加谁。

不过后来觉得用户太容易误操作，尤其批量清空太粗暴，所以尝试了下面这版委婉的方式。

第二版

考虑到主要是在批量编辑时标签管理页中标签状态的显示问题，在新的版本中就在标签的显示上多加了一个状态，即半选中状态，即虚线对号。如果有的标签（例如“热门”）在有的项目（type3、4）中被添加，有的项目（type5）中没被添加，那么在批量编辑时，“热门”就会呈现虚线对号，而因为type3、4、5都添加了“重点”标签，那么它就是实线对号。这样在我要对type5添加热门标签时，直接点击虚线对号，变成实线对号就代表已经被添加。

做完之后找用户测试了一下，然而大家对虚线对号这个状态表示相当困惑，而且从虚线切换到实线之后，就是实线和无之间的转换，就再也切换不回虚线状态，认为这种方式过于细腻繁琐学习成本太高。好吧虽然略心塞，也不得不先放一放，重新梳理一下思路。

第三版

在这个阶段我总结了一下，认为我始终纠结于状态的显示和切换是不是走进了死胡同，跳出来试试，就出现了如下简化版。

在梳理逻辑结构后，我直接把编辑标签的功能拆分成添加和删除两个操作，选择项目之后，勾选标签，选中标签后点击添加就是添加此标签，点击删除就是删除此标签，如果本来没有这个标签你也要选了点删除那就相当于空操作也没不会造成影响。

这种形式虽然简单但是有点笨拙，而且有可能会造成一个误区，标签管理页的添加和删除按钮很容易让用户混淆，“添加”究竟是给项目添加标签还是知识建立新的标签，这点很容易被误会，用户可能要多尝试几次才会明白它们的含义。

第四版

经过不断的尝试及收到的反馈，我觉得前面方案的最大问题就是“不直观”，不论是哪种方案，用户都要思考一番才能明白如何编辑，学习成本比较高。那么能不能采取一种方案能非常直观的表示几种不同的状态呢？

这个版本中，首先去掉了复选框的形式，直接点击标签，被选的标签直接跳到上面的空白框中，点击叉号标签又会返回到下面的列表中。如果3个项目都选中标签，则标签背景为深色，只被部分选中的标签背景则为浅色。以热门为例，点击框中热门的叉号，则所有项目去掉热门标签；如果选择列表中的热门，则所有的项目都贴上热门标签。当然在这里其实确定和取消按钮也没有存在的意义了，但是为了保持和产品中别的操作的一致性暂时留着。

但是这个版本中，一个标签同时出现两次，虽然操作起来会顺畅但看起来会有些繁复没有那么简练，如果对于标签非常多的状况下会有点可怕，但如果标签那么多的话可以尝试一下这种方式。