超全面的分享功能設計總結

王M爭：最近發現一款看片神器——埋堆堆。這是 TVB 推出的官方 APP，里面有 TVB 歷年制作的經典劇集，而且更重要的是不需要充會員，沒有片頭廣告。

整體界面設計的也很簡潔，但是我發現劇集播放界面竟然沒有分享按鈕，用戶想分享的話必須進入全屏狀態。對于 C 端產品來說，分享是獲得流量的一大途徑。這篇文章就跟大家來聊一聊分享功能的設計。

為了更好的了解分享功能，我們要解決以下三個問題:

• 為什么分享？（why）
• 分享什么？（what）
• 怎么分享？（how）

一、為什么分享？

分享功能的應用表面上來說，就是將自己的產品推廣到各個平臺（微信、朋友圈、微博、QQ、空間等），讓更多的用戶看到。其實更深層次的原因在于對產品社區化的追求。大多數的 C 端產品如果想取得成功必然要完成「從一個工具到一個社區」的轉變。工具可以解決用戶的剛需，因為用戶需要聽歌，看電影，即時通訊。但是做一個工具是沒有出路的，因為大家都可以做工具，只有社區化處理才能把用戶留住。其實也很容易理解，我們一直強調給產品賦予游戲化設計體驗，因為沒有什么產品的用戶粘度比（爆款）游戲還高。大家都喜歡玩游戲，游戲本質上來說就是競爭與合作，產品跟游戲一樣，更多的用戶（玩家）意味著更多的樂趣。

最近三年的年底保留節目支付寶集五福和朋友圈搶票加速，砍價就屬于合作的范疇。而前段時間很火的頭腦王者就體現了競爭的一面，如果沒有排行榜，如果好友無法互相查看戰績，那么我相信頭腦王者肯定不會火到那個程度。人類是群體動物，智商碾壓的成就感是需要跟人分享的。當然我相信它也不會垮掉，因為有的人就是單純的喜歡做題。

二、分享什么？

從上面我們了解到了分享的最終目的是幫助產品留住用戶。那分享的主體應該是產品，但真的是這樣嗎？

我們經常會看一些活動頁面在右上方加一個分享按鈕。其實我個人比較反感，因為研究發現用戶并不喜歡分享整個內容頁面。這個也很好理解，用戶只喜歡分享自己感興趣的內容。我看到了一篇不錯的文章，聽到一首好歌，我愿意去分享。對于一整個活動，我為什么要去分享？即使分享也應該是我抽中了獎品之后，將獎品分享到朋友圈。或者我抽獎機會用完了，跳出一個彈框告訴我，分享到朋友圈可以增加抽獎機會，那么我才愿意去分享。無緣無故的讓用戶去分享整個活動鏈接吃相太難看。

對于分享的主體我們應該化繁為簡。以網易云音樂為例，你可以去分享一首歌，一張專輯，一份歌單，一句歌詞，甚至你連評論都可以分享。QQ 音樂是暫時不支持評論分享的功能。

分享的載體主要有兩種：鏈接和圖片。具體使用哪種看內容量，如果內容過多，用戶需要更深入的了解，那么使用鏈接更加合適。如果內容過少，一條新聞短訊，一句心靈雞湯那么可以使用圖片。例如你在 QQ 閱讀里想分享一段很有哲理的話。

總而言之，鏈接優勢在于詳細，圖片優勢在于直觀。

三、怎么分享？

如何去觸發分享功能呢？目前來說最常見的就是點擊分享按鈕，分享按鈕從位置上來區分有三種。

1. 界面右上角

這是我們最常見的分享按鈕樣式，可以是分享 icon，也可以是文字鏈接。這里需要重點說的是，有的分享功能是隱藏在更多里。例如，我們在微信公眾號看到的文章就屬于這種。

2. 界面底部

分享按鈕放在界面底部也很常見，例如 QQ 音樂。

對于歌曲和文章來說，用戶基本需求都可以總結為：點贊，下載（收藏），評論和分享。為什么公眾號里的分享要收到更多里呢？造成這種差異在我看來主要是因為媒介的不同，你聽歌的話手機可能放在口袋里，但是你要閱讀一篇文章目光是時刻都要停留在屏幕上的。所以公眾號無法像 QQ 音樂一樣直接把這些功能固定在界面下方，那樣會侵占閱讀空間，只能把分享功能放到更多里。

這里可能會有人反駁我 ，你看知乎就是把這些功能固定在界面下方的。這是因為知乎里回答字數有多有少，有的回答言簡意賅，寥寥幾字就能獲得高贊。而微信公眾號里的文章一般字數會很多，除了支付寶這種特立獨行的公眾號。

而且當用戶下拉瀏覽的時候，功能欄是收起來的，只有當用戶往上滑動才會出現。對于這個我在《超全面的移動端頂部欄設計分析》也提到過，用戶下拉代表了用戶正在閱讀，那么為了增加閱讀區域，我們選擇隱藏。用戶一旦上滑就說明他中止了當前的閱讀流程。出現這種情況有兩個原因：

• 寫的太次了，不感興趣，我要返回到上一級，寫評論懟答主或點滅。
• 寫的太好了，我要點贊，收藏，評論贊美答主，查看答主信息。

3. 跟隨信息流

跟隨信息流的分享主要應用于社交類產品中比較多，例如，微博，twitter 等。

當然除了點擊按鈕分享，我們還可以通過截屏分享。最常見的就是我們在淘寶里截屏就會彈出分享列表。

總結

以上就是我對分享功能做的一個總結，希望可以幫到大家。如果你們有不同的看法或意見，歡迎留言討論。

歡迎關注作者的微信公眾號：「王M爭」

「UI設計中的關鍵細節」

• 《讓設計細節更高級的10個實用小技巧》
• 《10個關鍵點，告訴你如何設計產品評論模塊》
• 《卡片設計、分割線、無框設計哪個好？來看高級設計師的分析！》
• 《設計實戰！稱職又好用的電影購票APP應該如何設計？》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com