关于你们想要了解的图片标签

这是chaosTALK的第008篇文章

这也是chaosTALK的第一篇引用文章

之前很多小伙伴有问小红书图片上标签的设计

以下是小红书产品经理Gill的梳理和解读

“

第一次打开小红书的时候，首页图片上闪动的标签让我印象深刻。加入小红书后，得知它叫“树枝标签”。

进行了一些信息内容结构相关的工作后，我开始发现树枝标签是一个相当复杂和有效的设计，而在用户反馈里、与面试者的聊天中、网上的小红书产品分析中，极少有人谈论它。

似乎它的存在合理到，所有人在乖乖地使用它（至少成千上万的吐槽里没有它），却没有费心地观察和剖析过它。

这不就是我们最希望的设计吗？一种本应如此的感觉，没有刻意设计的效果，使用者根本不会察觉背后的困难度和复杂性。

带着好奇和钦佩，我向树枝标签的创造者——小红书的产品总负责Chaos和UI设计师Elvin了解了树枝标签的设计灵感，并做了相关解读。

————————

『你说要有光，于是就有了光』

作为基于图文的体验分享社区，小红书一直在努力平衡内容贡献者的发布成本和内容消费者的感知体验。

在最开始的版本中，所有的商品信息都存在于笔记的文本中：

对应的笔记编辑界面是下面这样的，用问句引导用户按照我们需要的信息格式去编辑内容：

使用这种文字载体，最大的限制在于，一篇笔记只适合描述一件商品。当越来越多的用户开始分享多款商品的对比时，我们引入了图片上标签，和很多图片分享APP一样，最开始用的是有底色的标签。

发布中用户可以在图片上打3种类型的标签：品牌、价格、地点。依然是希望发布者能给出“是什么”、“多少钱”、“在哪买” 这些浏览者关心的信息。

这样的标签存在了一段时间之后，它的缺点也逐渐显露出来：

• 用户为了描述1件商品，在发布时需要打3次标签
  

• 标签多的时候图片被大面积覆盖，损害了浏览者的体验

Chaos和Elvin决定设计新的标签样式，目标很简单：好用、好看。

3.0版本的时候，树枝标签诞生了。

闪现效果的第一个demo是下面这张gif：

这样由一点延伸开来的树枝结构，营造出浑然天成的整体感，用户无需费心理解，便能知道这三条射线在讲述原点所指的一个图片区域。

这样的设计，第一眼就能明白怎么用，用一次就不会忘记，繁杂信息被简单有秩地呈现，最大程度地减轻了用户的认知负担。

笔记发布流程中添加标签那一步，也相应地改变了：

当用户试图标注图片上一件商品时，TA进入了一个场景，在这个场景下，TA只需要跟随6个输入框的提示逐步完成对这件商品的描述。相较于之前的标签下，对于每件商品，用户进入商品描述场景的次数由3减为1，而场景里的操作就像是本能反应一样简单。

前置的有意识操作转化为后置的无意识操作，降低了发布者的介入度，让他们在不费脑的状态下完成打标签的流程。

我问Chaos和Elvin这个idea的来源，他们说，是受钢铁侠这种科技电影里的触屏启发，想做一个点击之后信息biu~biu~biu~飞进飞出的效果，我实在描述不好，你们看图yy吧。

还能说什么呢，YOU MUST CREATE！

————————

『保护创意最好的办法，就是将其最好地执行』

小红书的标签样式，被不少同类产品模仿过，但就像传话游戏一样，创意原型在逐层传递中因为人的主观理解不同会产生“累积误差”。没有专利保护的产品创意，核心团队只有把它执行到完美，才能区别于模仿者，声明对这个创意的所有权。所以我们对于树枝标签的创新没有停止于它的交互体验。

细心的用户会发现，在最近的几个版本里，越来越多的树枝标签上出现了一个小购物袋icon，点击它可以打开这个商品的购买页面，直接下单购买。

还有一些提到餐厅、酒店的树枝标签上出现了一个地标icon，点击它可以打开对应地点的详细介绍页。

以树枝标签为载体，抽取笔记中提到的可消费对象，顺滑地完成用户场景从发现到购买的过渡。

除了上述可见的商业变现价值，树枝标签在社区内容推荐和用户获取上也有一定的运用，以后有时间再介绍。

PS：如果对树枝标签的技术实现细节感兴趣，我们的Android工程师明明桑在博客中的详细介绍哦~

”

其实，小红书的“树状标签”已经上线快两年了，现在在国内的不少产品中我们也能看到各种类似的变体。未来它会成长成什么样子，我们现在并不确信，只希望它能健康的成长成它该有的样子，和小红书一起健康的成长。

此时此刻，让我想起了刚刚球衣退役的邓肯，波波维奇最后这么说道：“这个男人，还是当初你们交给我的那个男人，他还是刚跨进马刺大门时的那个邓肯，从来没有改变过......”

一样的，小红书的初心，从来没有改变过。

.^_^.