看不見的設計——關於“分享”的小細節

現在“分享”幾乎成為網站的標配。每個網站都想讓瀏覽者把自己的內容傳播出去，於是只要是可以分享的地方就有那麼一排分享按鈕，甚至每張圖片每個評論都有分享按鈕。但是“分享”可不只是做一排按鈕那麼簡單，它背後藏著很多細節。這篇文章我就講講關於“分享”需要了解的細節和我的一些想法。

分享的主體

分享，就是我要把這個東西告訴別人。開啟一張網頁，上面有那麼多東西，我要告訴別人什麼呢？這個就是分享的主體。一個頁面不同位置的分享按鈕都有著不同的分享主體。舉個例子，我們對比一下落網期刊這裡的兩個分享按鈕，我點選之後選擇分享到微博。

分享的結果如下：上面的分享按鈕分享的是這個期刊，而下面的按鈕分享的是當前播放的這首歌。

可見，當我們給網站某處新增分享功能時，要想清楚分享的主體是什麼。對於不同的分享主體做以區分，就更能體現出每個分享按鈕的意義，當然一個頁面還是不建議出現太多分享按鈕。

分享的時機

“分享”的設計同質化比較嚴重，多數網站都是一排圖示。對於使用者來說，可能習慣了這種設計，無需“教育”就知道點這些圖示可以進行分享。但是與其等待使用者主動分享不如讓分享按鈕在合適的時機出現，讓一切自然發生。

比如，閱讀類產品可以在使用者滑到文章底部時再提示分享，購物類網站可以在使用者訂單支付成功時引導分享。

分享的視角和內容

社交媒體一般都支援分享的內容自定義，即分享出去所呈現的樣子是可以控制的。一般情況下，分享的內容包含以下四項：標題、簡介、縮圖和連結。下圖是在微信中將一篇文章分享給朋友時所呈現的樣子，上面黑色的大字是標題，灰色的小字是簡介，右邊是縮圖，至於連結，則是當查閱者點開的時候跳轉的頁面。

由於這些東西是可以自定義的，所以我們可以讓分享者分享出去的頁面和查閱者點開看見的頁面不一樣。常見的是在微信中傳播的小測試，比如在扇貝單詞量測試中，分享者分享自己的測試結果，查閱者通過分享者的分享連結開啟之後看見的不再是分享者的測試結果頁，而是開始測試的頁面，這樣就形成了一個很好的傳播鏈。

當然標題、簡介、縮圖也可以根據分享者的當前操作狀態隨時修改，以達到不同的分享效果，吸引查閱者點選。比如上面的測試結果分享出去的標題就是：我的英語單詞量竟然是5500，你也來測測吧。它是實時的，而不是一個不變的標題。

分享的特權

對於經過一些社交媒體認證的網站，在分享時是有一些特權的。比如在認證的微信公眾號中設定安全域名就可以自定義分享內容，獲得微博appkey的網站內容在分享時會被解析為linkcard。下圖就是微博linkcard效果，未獲得微博appkey的網站分享出去的內容裡面帶有連結就顯示為藍色的連結，但獲得授權的分享出去就會顯示為卡片的樣式。

微信分享和其他分享

最後單獨說說微信分享。在這些社交媒體中微信是個異類，因為對於分享按鈕的點選響應微信和其他社交媒體不一樣。一般來說點選分享按鈕就會跳轉到一個新的釋出頁面（釋出微博、發表說說等），但是由於微信沒有網頁端的朋友圈，分享到微信就只能在移動客戶端上操作。所以分享到微信就等同於使用者需要使用移動裝置掃碼在微信內部開啟再點選右上角的按鈕分享。

“分享到微信”按鈕實質上不算是分享，更像是一個提示。由於網頁可以在多端開啟，所以這個提示也需要根據當前開啟裝置環境來做不同適應。可以粗略地分為三類：桌面端瀏覽器、移動端非微信瀏覽器、微信內建瀏覽器。桌面開啟一般會彈出二維碼，提示使用手機掃碼再分享；移動端非微信瀏覽器則是提示使用者儲存二維碼並使用微信掃描；微信內建瀏覽器則直接提示點選右上角按鈕進行分享。下圖就是在三種情況下的不同提示效果。

當然，文字提示略顯單薄，我們可以把這些提示做得有趣一點。之前大眾點評一個特別火的H5的分享提示就融入了情境，很自然，不突兀。

關於“分享”的小細節，暫時想到這麼多。可見，很常見的東西要是深究其細節也是非常複雜的。希望我們以後做這些很常見的功能時，也能把它做得細緻入微，讓人稱讚。