『嘿！設計師』是我的一個新欄目僧家，主要從一個前端開發(fā)者的角度講一些設計師關心的代碼原理雀摘，或者聊一聊開發(fā)者和設計師之間協(xié)作的一些事兒，也偶爾教設計師一些能提高效率的獨特技巧八拱。借此希望開發(fā)者和設計師之間能夠彼此了解更多届宠，工作起來更加順暢。
現(xiàn)在“分享”幾乎成為網站的標配乘粒。每個網站都想讓瀏覽者把自己的內容傳播出去豌注，于是只要是可以分享的地方就有那么一排分享按鈕，甚至每張圖片每個評論都有分享按鈕灯萍。但是“分享”可不只是做一排按鈕那么簡單轧铁，它背后藏著很多細節(jié)。這篇文章我就講講關于“分享”需要了解的細節(jié)和我的一些想法旦棉。
分享的主體
分享齿风，就是我要把這個東西告訴別人药薯。打開一張網頁，上面有那么多東西救斑，我要告訴別人什么呢童本？這個就是分享的主體。一個頁面不同位置的分享按鈕都有著不同的分享主體脸候。舉個例子穷娱，我們對比一下落網期刊這里的兩個分享按鈕，我點擊之后選擇分享到微博运沦。
分享的結果如下：上面的分享按鈕分享的是這個期刊泵额，而下面的按鈕分享的是當前播放的這首歌。
可見携添，當我們給網站某處添加分享功能時嫁盲，要想清楚分享的主體是什么。對于不同的分享主體做以區(qū)分烈掠，就更能體現(xiàn)出每個分享按鈕的意義羞秤，當然一個頁面還是不建議出現(xiàn)太多分享按鈕。
分享的時機
“分享”的設計同質化比較嚴重左敌，多數(shù)網站都是一排圖標锥腻。對于用戶來說，可能習慣了這種設計母谎，無需“教育”就知道點這些圖標可以進行分享。但是與其等待用戶主動分享不如讓分享按鈕在合適的時機出現(xiàn)京革，讓一切自然發(fā)生奇唤。
比如，閱讀類產品可以在用戶滑到文章底部時再提示分享匹摇，購物類網站可以在用戶訂單支付成功時引導分享咬扇。
分享的視角和內容
社交媒體一般都支持分享的內容自定義，即分享出去所呈現(xiàn)的樣子是可以控制的廊勃。一般情況下懈贺，分享的內容包含以下四項：標題、簡介坡垫、縮略圖和鏈接梭灿。下圖是在微信中將一篇文章分享給朋友時所呈現(xiàn)的樣子，上面黑色的大字是標題冰悠，灰色的小字是簡介堡妒，右邊是縮略圖，至于鏈接溉卓，則是當查閱者點開的時候跳轉的頁面皮迟。
由于這些東西是可以自定義的搬泥，所以我們可以讓分享者分享出去的頁面和查閱者點開看見的頁面不一樣。常見的是在微信中傳播的小測試伏尼，比如在扇貝單詞量測試中忿檩，分享者分享自己的測試結果，查閱者通過分享者的分享鏈接打開之后看見的不再是分享者的測試結果頁爆阶，而是開始測試的頁面燥透，這樣就形成了一個很好的傳播鏈。
當然標題扰她、簡介兽掰、縮略圖也可以根據(jù)分享者的當前操作狀態(tài)隨時修改，以達到不同的分享效果徒役，吸引查閱者點擊孽尽。比如上面的測試結果分享出去的標題就是：我的英語單詞量竟然是5500，你也來測測吧忧勿。它是實時的杉女，而不是一個不變的標題。
分享的特權
對于經過一些社交媒體認證的網站鸳吸，在分享時是有一些特權的熏挎。比如在認證的微信公眾號中設置安全域名就可以自定義分享內容，獲得微博appkey的網站內容在分享時會被解析為linkcard晌砾。下圖就是微博linkcard效果坎拐，未獲得微博appkey的網站分享出去的內容里面帶有鏈接就顯示為藍色的鏈接，但獲得授權的分享出去就會顯示為卡片的樣式养匈。
微信分享和其他分享
最后單獨說說微信分享哼勇。在這些社交媒體中微信是個異類，因為對于分享按鈕的點擊響應微信和其他社交媒體不一樣呕乎。一般來說點擊分享按鈕就會跳轉到一個新的發(fā)布頁面（發(fā)布微博积担、發(fā)表說說等），但是由于微信沒有網頁端的朋友圈猬仁，分享到微信就只能在移動客戶端上操作帝璧。所以分享到微信就等同于用戶需要使用移動設備掃碼在微信內部打開再點擊右上角的按鈕分享。
“分享到微信”按鈕實質上不算是分享湿刽，更像是一個提示的烁。由于網頁可以在多端打開，所以這個提示也需要根據(jù)當前打開設備環(huán)境來做不同適應诈闺〈樵辏可以粗略地分為三類：桌面端瀏覽器、移動端非微信瀏覽器、微信內置瀏覽器把曼。桌面打開一般會彈出二維碼杨帽，提示使用手機掃碼再分享；移動端非微信瀏覽器則是提示用戶保存二維碼并使用微信掃描嗤军；微信內置瀏覽器則直接提示點擊右上角按鈕進行分享注盈。下圖就是在三種情況下的不同提示效果。
當然叙赚，文字提示略顯單薄老客，我們可以把這些提示做得有趣一點。之前大眾點評一個特別火的H5的分享提示就融入了情境震叮，很自然胧砰，不突兀。
關于“分享”的小細節(jié)苇瓣，暫時想到這么多尉间。可見击罪，很常見的東西要是深究其細節(jié)也是非常復雜的哲嘲。希望我們以后做這些很常見的功能時，也能把它做得細致入微媳禁，讓人稱贊眠副。
原創(chuàng)文章，未經允許竣稽，請勿轉載
