淺談小紅書圖片標籤

第一次打開小紅書的時候，首頁圖片上閃動的標籤讓我印象深刻。加入小紅書後，得知它叫「樹枝標籤」。

進行了一些信息內容結構相關的工作後，我開始發現樹枝標籤是一個相當複雜和有效的設計，而在用戶反饋里、與面試者的聊天中、網上的小紅書產品分析中，極少有人談論它。

似乎它的存在合理到，所有人在乖乖地使用它（至少成千上萬的吐槽里沒有它），卻沒有費心地觀察和剖析過它。

這不就是我們最希望的設計嗎？一種本應如此的感覺，沒有刻意設計的效果，使用者根本不會察覺背後的困難度和複雜性。

帶著好奇和欽佩，我向樹枝標籤的創造者——小紅書的產品總負責@chaosRED和UI設計師@AlvinZheng了解了樹枝標籤的設計靈感，並做了相關解讀。

『你說要有光，於是就有了光』

作為基於圖文的體驗分享社區，小紅書一直在努力平衡內容貢獻者的發布成本和內容消費者的感知體驗。

在最開始的版本中，所有的商品信息都存在於筆記的文本中：

對應的筆記編輯界面是下面這樣的，用問句引導用戶按照我們需要的信息格式去編輯內容：

使用這種文字載體，最大的限制在於，一篇筆記只適合描述一件商品。當越來越多的用戶開始分享多款商品的對比時，我們引入了圖片上標籤，和很多圖片分享APP一樣，最開始用的是有底色的標籤。

發布中用戶可以在圖片上打3種類型的標籤：品牌、價格、地點。依然是希望發布者能給出「是什麼」、「多少錢」、「在哪買」 這些瀏覽者關心的信息。

這樣的標籤存在了一段時間之後，它的缺點也逐漸顯露出來：

• 用戶為了描述1件商品，在發布時需要打3次標籤

• 標籤多的時候圖片被大面積覆蓋，損害了瀏覽者的體驗

@chaosRED和@AlvinZheng決定設計新的標籤樣式，目標很簡單：好用、好看。

3.0版本的時候，樹枝標籤誕生了。

（知乎不能傳動圖，閃現效果請大家去app內看）

這樣由一點延伸開來的樹枝結構，營造出渾然天成的整體感，用戶無需費心理解，便能知道這三條射線在講述原點所指的一個圖片區域。

這樣的設計，第一眼就能明白怎麼用，用一次就不會忘記，繁雜信息被簡單有秩地呈現，最大程度地減輕了用戶的認知負擔。

筆記發布流程中添加標籤那一步，也相應地改變了：

當用戶試圖標註圖片上一件商品時，TA進入了一個場景，在這個場景下，TA只需要跟隨6個輸入框的提示逐步完成對這件商品的描述。相較於之前的標籤下，對於每件商品，用戶進入商品描述場景的次數由3減為1，而場景里的操作就像是本能反應一樣簡單。

前置的有意識操作轉化為後置的無意識操作，降低了發布者的介入度，讓他們在不費腦的狀態下完成打標籤的流程。

我問Chaos和Elvin這個idea的來源，他們說，是受鋼鐵俠這種科技電影里的觸屏啟發，想做一個點擊之後信息biu~biu~biu~飛進飛出的效果，我實在描述不好，你們看圖yy吧。

還能說什麼呢，YOU MUST CREATE！

『保護創意最好的辦法，就是將其最好地執行』

小紅書的標籤樣式，被不少同類產品模仿過，但就像傳話遊戲一樣，創意原型在逐層傳遞中因為人的主觀理解不同會產生「累積誤差」。沒有專利保護的產品創意，核心團隊只有把它執行到完美，才能區別於模仿者，聲明對這個創意的所有權。所以我們對於樹枝標籤的創新沒有停止於它的交互體驗。

細心的用戶會發現，在最近的幾個版本里，越來越多的樹枝標籤上出現了一個小購物袋icon，點擊它可以打開這個商品的購買頁面，直接下單購買。

還有一些提到餐廳、酒店的樹枝標籤上出現了一個地標icon，點擊它可以打開對應地點的詳細介紹頁。

以樹枝標籤為載體，抽取筆記中提到的可消費對象，順滑地完成用戶場景從發現到購買的過渡。

除了上述可見的商業變現價值，樹枝標籤在社區內容推薦和用戶獲取上也有一定的運用，以後有時間再介紹。

PS：如果對樹枝標籤的技術實現細節感興趣，我們的Android工程師明明桑@桑明明在博客中的詳細介紹 Path和Property Animation配合讓線條動起來