『嘿！設(shè)計(jì)師』是我的一個(gè)新欄目，主要從一個(gè)前端開(kāi)發(fā)者的角度講一些設(shè)計(jì)師關(guān)心的代碼原理，或者聊一聊開(kāi)發(fā)者和設(shè)計(jì)師之間協(xié)作的一些事兒，也偶爾教設(shè)計(jì)師一些能提高效率的獨(dú)特技巧。借此希望開(kāi)發(fā)者和設(shè)計(jì)師之間能夠彼此了解更多，工作起來(lái)更加順暢。

現(xiàn)在“分享”幾乎成為網(wǎng)站的標(biāo)配。每個(gè)網(wǎng)站都想讓瀏覽者把自己的內(nèi)容傳播出去，于是只要是可以分享的地方就有那么一排分享按鈕，甚至每張圖片每個(gè)評(píng)論都有分享按鈕。但是“分享”可不只是做一排按鈕那么簡(jiǎn)單，它背后藏著很多細(xì)節(jié)。這篇文章我就講講關(guān)于“分享”需要了解的細(xì)節(jié)和我的一些想法。

分享buttons

分享的主體

分享，就是我要把這個(gè)東西告訴別人。打開(kāi)一張網(wǎng)頁(yè)，上面有那么多東西，我要告訴別人什么呢？這個(gè)就是分享的主體。一個(gè)頁(yè)面不同位置的分享按鈕都有著不同的分享主體。舉個(gè)例子，我們對(duì)比一下落網(wǎng)期刊這里的兩個(gè)分享按鈕，我點(diǎn)擊之后選擇分享到微博。

落網(wǎng)期刊的分享

分享的結(jié)果如下：上面的分享按鈕分享的是這個(gè)期刊，而下面的按鈕分享的是當(dāng)前播放的這首歌。

不同地方分享結(jié)果不一樣

可見(jiàn)，當(dāng)我們給網(wǎng)站某處添加分享功能時(shí)，要想清楚分享的主體是什么。對(duì)于不同的分享主體做以區(qū)分，就更能體現(xiàn)出每個(gè)分享按鈕的意義，當(dāng)然一個(gè)頁(yè)面還是不建議出現(xiàn)太多分享按鈕。

分享的時(shí)機(jī)

“分享”的設(shè)計(jì)同質(zhì)化比較嚴(yán)重，多數(shù)網(wǎng)站都是一排圖標(biāo)。對(duì)于用戶(hù)來(lái)說(shuō)，可能習(xí)慣了這種設(shè)計(jì)，無(wú)需“教育”就知道點(diǎn)這些圖標(biāo)可以進(jìn)行分享。但是與其等待用戶(hù)主動(dòng)分享不如讓分享按鈕在合適的時(shí)機(jī)出現(xiàn)，讓一切自然發(fā)生。

比如，閱讀類(lèi)產(chǎn)品可以在用戶(hù)滑到文章底部時(shí)再提示分享，購(gòu)物類(lèi)網(wǎng)站可以在用戶(hù)訂單支付成功時(shí)引導(dǎo)分享。

分享的視角和內(nèi)容

社交媒體一般都支持分享的內(nèi)容自定義，即分享出去所呈現(xiàn)的樣子是可以控制的。一般情況下，分享的內(nèi)容包含以下四項(xiàng)：標(biāo)題、簡(jiǎn)介、縮略圖和鏈接。下圖是在微信中將一篇文章分享給朋友時(shí)所呈現(xiàn)的樣子，上面黑色的大字是標(biāo)題，灰色的小字是簡(jiǎn)介，右邊是縮略圖，至于鏈接，則是當(dāng)查閱者點(diǎn)開(kāi)的時(shí)候跳轉(zhuǎn)的頁(yè)面。

微信分享卡片

由于這些東西是可以自定義的，所以我們可以讓分享者分享出去的頁(yè)面和查閱者點(diǎn)開(kāi)看見(jiàn)的頁(yè)面不一樣。常見(jiàn)的是在微信中傳播的小測(cè)試，比如在扇貝單詞量測(cè)試中，分享者分享自己的測(cè)試結(jié)果，查閱者通過(guò)分享者的分享鏈接打開(kāi)之后看見(jiàn)的不再是分享者的測(cè)試結(jié)果頁(yè)，而是開(kāi)始測(cè)試的頁(yè)面，這樣就形成了一個(gè)很好的傳播鏈。

扇貝單詞測(cè)試

當(dāng)然標(biāo)題、簡(jiǎn)介、縮略圖也可以根據(jù)分享者的當(dāng)前操作狀態(tài)隨時(shí)修改，以達(dá)到不同的分享效果，吸引查閱者點(diǎn)擊。比如上面的測(cè)試結(jié)果分享出去的標(biāo)題就是：我的英語(yǔ)單詞量竟然是5500，你也來(lái)測(cè)測(cè)吧。它是實(shí)時(shí)的，而不是一個(gè)不變的標(biāo)題。

分享的特權(quán)

對(duì)于經(jīng)過(guò)一些社交媒體認(rèn)證的網(wǎng)站，在分享時(shí)是有一些特權(quán)的。比如在認(rèn)證的微信公眾號(hào)中設(shè)置安全域名就可以自定義分享內(nèi)容，獲得微博appkey的網(wǎng)站內(nèi)容在分享時(shí)會(huì)被解析為linkcard。下圖就是微博linkcard效果，未獲得微博appkey的網(wǎng)站分享出去的內(nèi)容里面帶有鏈接就顯示為藍(lán)色的鏈接，但獲得授權(quán)的分享出去就會(huì)顯示為卡片的樣式。

linkcard

微信分享和其他分享

最后單獨(dú)說(shuō)說(shuō)微信分享。在這些社交媒體中微信是個(gè)異類(lèi)，因?yàn)閷?duì)于分享按鈕的點(diǎn)擊響應(yīng)微信和其他社交媒體不一樣。一般來(lái)說(shuō)點(diǎn)擊分享按鈕就會(huì)跳轉(zhuǎn)到一個(gè)新的發(fā)布頁(yè)面（發(fā)布微博、發(fā)表說(shuō)說(shuō)等），但是由于微信沒(méi)有網(wǎng)頁(yè)端的朋友圈，分享到微信就只能在移動(dòng)客戶(hù)端上操作。所以分享到微信就等同于用戶(hù)需要使用移動(dòng)設(shè)備掃碼在微信內(nèi)部打開(kāi)再點(diǎn)擊右上角的按鈕分享。

“分享到微信”按鈕實(shí)質(zhì)上不算是分享，更像是一個(gè)提示。由于網(wǎng)頁(yè)可以在多端打開(kāi)，所以這個(gè)提示也需要根據(jù)當(dāng)前打開(kāi)設(shè)備環(huán)境來(lái)做不同適應(yīng)?？梢源致缘胤譃槿?lèi)：桌面端瀏覽器、移動(dòng)端非微信瀏覽器、微信內(nèi)置瀏覽器。桌面打開(kāi)一般會(huì)彈出二維碼，提示使用手機(jī)掃碼再分享；移動(dòng)端非微信瀏覽器則是提示用戶(hù)保存二維碼并使用微信掃描；微信內(nèi)置瀏覽器則直接提示點(diǎn)擊右上角按鈕進(jìn)行分享。下圖就是在三種情況下的不同提示效果。

不同設(shè)備環(huán)境下的提示

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

大眾點(diǎn)評(píng)

關(guān)于“分享”的小細(xì)節(jié)，暫時(shí)想到這么多。可見(jiàn)，很常見(jiàn)的東西要是深究其細(xì)節(jié)也是非常復(fù)雜的。希望我們以后做這些很常見(jiàn)的功能時(shí)，也能把它做得細(xì)致入微，讓人稱(chēng)贊。

原創(chuàng)文章，未經(jīng)允許，請(qǐng)勿轉(zhuǎn)載