小红书的树形标签里，暗藏着哪些玄机？ 成长笔记

最近，小红书的产品经理Gill，与树枝标签的创造者——小红书的产品总负责Chaos和UI设计师Elvin，了解了树枝标签背后的历史和逻辑。...



今天来讲一个有关小红书产品的故事：树形标签。

听说对产品设计的最高评价是“无法察觉”。小红书的树形标签无疑是符合这种标准的：在一个千万用户的社区里，所有人都在使用它，却从来没被人吐槽和讨论。

最近，小红书的产品经理Gill，与树枝标签的创造者——小红书的产品总负责Chaos和UI设计师Elvin，了解了这款好设计背后的历史和逻辑。本文转载自公众微信号“Gill谈谈”。





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



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

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

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

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

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

对应的笔记编辑界面是下面这样的，用问句引导用户按照我们需要的信息格式去编辑内容：使用这种文字载体，最大的限制在于，一篇笔记只适合描述一件商品。当越来越多的用户开始分享多款商品的对比时，我们引入了图片上标签，和很多图片分享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工程师明明桑的详细介绍。

你可能会喜欢的笔记：

啊，你看到这里啦。

小红书成长笔记里，有这个星球上最有趣、最会生活的人。如果你也相信，有趣和美可以拥抱时光，那么你来对地方了。

从一支唇膏的明艳，到全世界的流浪。请关注我们，陪伴小红书一起成长吧。

    关注 小红书成长笔记