微信早已成為制霸手機的應用之一，而朋友圈也無孔不入地影響著我們的生活，縱觀朋友圈，我們一般會看到這幾種形式：
- 公眾號圖文
- 原創照片（9圖以內）配文字，或純文字（長按生成）
- 火爆的h5圖文
- 外鏈圖文、視頻或音樂
生成的外鏈非常常見，可以說“分享到朋友圈”也是各種app應用利用微信來激增自己的下載量或日活量的一項非常大的功能點。但其中的設計真的做得好嗎？這篇文章我小試牛刀來分析一下關于朋友圈外鏈的用戶體驗設計。
根據上述案例，我可以看到所有的“朋友圈”內都包含三個元素：主題內容、跳轉路徑、功能誘導。
【第一個元素：主體內容】
由于朋友圈的內容一共就是六類：圖、文、圖文結合、音頻、視頻、H5（有動畫非視頻）。
撇開朋友圈自帶的圖、文、公眾號圖文，外鏈內容主要可以分為三類：圖文、音頻、視頻。
1.通常音頻、視頻都屬于多媒體，所以在單個移動端頁面實現的功能是有限的：
①音頻通常一個頁面即可實現播放和暫停，但不能快進倒退，如{蝦米音樂}：
②視頻有的可以直接播放，有播放和暫停，快進和倒退，如{AcFun}，但有的需要單獨頁面展開，如{bilibili}播放器，同時自帶App內的功能，如彈幕等。
2.圖文根據內容與功能分為兩類，有限（全部顯示）內容與可展開內容：
①有限（全部顯示）內容頁尾結構基本與微信公眾號的圖文相似，如{簡書}、{好奇心日報}：
②生活文字閱讀類的，如{豆瓣}、{知乎}等生成的外鏈可展開內容就有很多，而且還涉及到后文的跳轉問題。（①中{好奇心日報}尾部紫色框出也屬于可展開內容，但和{知乎}一樣，打開設置了門檻。）
本元素的UX設計點——
a.內容排版：
一般來說，生成朋友圈的外鏈排版是和App內部一樣的，所以App的排版決定了外鏈內容的排版，但部分網站是響應式的，移動端外鏈有自己的排版形式。（關于這個問題，后文會說到，因為有些排版僅僅就是為了跳轉。）
無論是那種，我們從用戶角度出發，朋友圈外鏈的意義和需要操作的時間來歸納：
微信朋友圈的圖文閱讀，是用戶的碎片化閱讀，其受眾和微信公眾號圖文受眾是一致的，所以應該以信息的獲取為主，主體內容可以通過學習微信公眾號的圖文排版，建議以清晰、大、核心內容的實現為排版的首要項，相對弱化復雜功能（當App內和微信外鏈中內容有不同時，過多、過大的引導下載標簽不可取，后文有反例），以內容清晰為第一要義，如需實現更多的功能涉及到第二元素：跳轉。
同樣的，音頻和視頻中的信息是需要花比圖文更多時間的獲取的，所以以保留流暢的播放為首。設置播放門檻或其他功能，需要花用戶更多時間操作，可以考慮通過跳轉到單獨頁面來完成。
b.標題：
標題應該是主題元素中比較重要的一點，和視覺設計無關，但和用戶體驗設計有關，這一點很多設計師不會去注意，產品經理會注意更多。（題外話：因為我個人是從新媒體轉行到UX/UE的，所以也會注意到這一部分）
在某種程度上說：
一個標題決定了這個外鏈是否會被點開！
但并不是說，我們要學習一下公眾號那些逆天的可以用來斗鏈接的標題。
（衍生閱讀：《還在斗圖？現在已經開始斗雞湯文鏈接了》，會摘部分圖對比出來，App外鏈確實不需要這樣做，雖然h5中標題是重要營銷手段，但目的不同，所以不完全值得效仿。）
上圖所列舉一些朋友圈外鏈標題都是比較正常的，強調格式的重要性。
我認為合理的規范格式有：
①【圖文標題格式】主題（文章題目）-作者/數據-App名稱
②【音頻、視頻媒體格式】數據-視頻/音頻名詞-作者-App名稱
（③【創意格式】突出分享者的心情的內容，以【事件】的描述為主，但這個是場景設計，要設計好App內的用戶會在什么場景分享到朋友圈）
為什么呢？
- 因為文章本身應該是最吸引人的主題，放在前面，其次是作者或數據，因為這樣有渲染大家都在閱讀、贊同、關注等，那么就會使人想點開。
- 音頻、視頻這種藝術媒體，題目和內容是需要理解時間的，而且往往不會直接引起共鳴，數據是最好的引起共鳴的方式。
- 這里想表達一下對{扇貝單詞}的溢美之詞，因為【事件】的描述是非常能體現分享者的心理，用一個鏈接來直接說明ta干了什么事，大家快來給ta點贊！但不建議在這前面加上“扇貝打卡日記”。
- 接上一點，關于App名稱，如“扇貝打卡日記”或{豆瓣}這樣App名稱+欄目（豆瓣日記、豆瓣同城、豆瓣廣播），我覺得應該是最后放的，或者根本不要，因為朋友圈的外鏈下面，微信已經替你寫好來源了，所以寫在最前面等于占用了外鏈標題字符顯示限制的寶貴資源。
- 另外有些用戶在分享時會配文字，但字數有限且并不是所有用戶會，所以我們不要指望用戶自己去解釋這個外鏈被分享的原因，我們只要感恩就好了！
【第二個元素：跳轉路徑】
朋友圈就是一個社交圈，用戶在分享的時候是大多抱著“告訴朋友我看什么/做什么/喜歡（討厭）什么/推薦/關注什么”這一心理，然后閱讀這一鏈接是和分享者的一個互動，只是這一互動的環境不是在App里，而是在朋友圈。
換一句話理解，我們可以把朋友圈外鏈的內容看做是，某一個App中，用戶甲與乙、丙、丁等的橋梁。
能帶你去目的地的橋才是好橋，能實現好的跳轉邏輯的設計才是微信朋友圈外鏈設計的關鍵。
根據我個人的觀察，朋友圈外鏈的跳轉一共有5個路徑：
路徑一：下載app
路徑二：app內打開
路徑三：跳轉注冊（登陸微信號再綁定微信號注冊）
路徑四：跳轉手機版（可以登錄的）瀏覽器版
跳轉瀏覽器的本質就是從路徑四到路徑一，還是讓用戶“下載App”。
*這里有一個問題：手機版與app內的異同（對比案例：{豆瓣}）
我們可以清晰的看到，{豆瓣}的App和手機版大同小異，然而在手機版設置了各種“心機”，部分圖文還是需要在App內才能打開，限制了手機版的功能，本質還是在引導用戶下載。（路徑四→路徑一）
路徑五：長按掃描二維碼關注公眾號
其實這就回到了微信內部，目的增加的是公眾號的粉絲數量，好吧，但一般公眾號圖文的“閱讀原文”里還是會放外鏈的，所以這么來來回回的，真是一大盤棋。
本元素的UX設計點——
a.跳轉的目的設計——跳轉邏輯
細心的你一定發現了，五個跳轉路徑中，除了路徑五是回到微信內，滿足某種策略需求，其他四個路徑都是轉化到微信外，下文主要就分析微信外。
用戶分兩種，未注冊、已注冊；
場景分兩種，未下載App，已下載App。
那么就畫個四象限圖：
觀察象限圖，仔細想來（箭頭指示方向，需要移動的就是第三象限），路徑一最后還是會到路徑二，通過下載再進入App內（第三象限→第四象限）；路徑三會到路徑四（第三象限→第二象限）或是路徑二（第三象限→第四象限）。
也就是說，外鏈最后的兩個終點，要么是手機版，要么是App內。但其實手機版也是會引導用戶去下載的，所以終點的終點是App內！
那么引導的核心就是：要么打開App，要么下載App。
但現實存在這樣一個問題，大多網站是app和web網站同時運營的，移動設計和web是兩套不同設計，只不過有的頁面是通過響應式解決的，那么我們需要考量手機版和app版能不能保持一致？
{簡書} 就是很好的例子，手機版=App版。
{知乎} 手機版內部增加了二維碼的路徑五，但主體內容其實就是和App內容一樣。
{豆瓣} 是比較特殊的，所以用來做了上述對比的案例，但手機版最后還是會引導到App內。
幾乎都是殊途同歸，因為所有外鏈最后都是從哪兒來回哪兒去，能分享出去，也可以引流回來，橋的兩頭都是通路。
同理，音頻、視頻都最終會引導下載App，在App中打開。
那么所有的跳轉邏輯都是一套，如圖：
一般App的內部使用流程都是很清晰的，從App到分享外鏈，功能都很完整，但從外鏈到App的過程基本是為了幫助產品經理、運營人員達成增新用戶數、增加日活的KPI的，所以我們的UX設計師是不是也注意到了這一點了呢，是真的為了用戶而服務的嗎？
通過理順以上跳轉的邏輯，可以精確你的UX設計了。
試問以下幾個問題：
· 用戶是不是會在朋友圈看到而去下載？
· 用戶是不是非要在App內打開？
· 所有的跳轉流程中會不會讓用戶得到好的體驗？在哪個步驟會放棄操作？
b.引導跳轉的視覺設計
這個部分就是提醒用戶進行跳轉，增加了用戶下載的幾率。上述列舉的App都有這樣的設計：
- 根據頁面層次分：有加載在頁面的內部的提示、頁面外部的提示；
- 根據部署位置分：頂部提示、底部Tab提示，與內容相關的跳轉提示標簽；
- 根據顯示效果分：有懸浮的提示、可隱藏的提示。
除了視覺表現，這個設計可以更多創意的發揮，但關鍵是要符合自己App的氣質，前文中已經有很多案例了，（{MONO}、{扇貝單詞}，{好奇心日報}都是我個人比較欣賞的，清晰簡潔，符合原App氣質），期待各位設計師的大作！
列幾個與上述案例中不同的：
種類太多，列舉不過來，選了這三個補充一點自己的想法的：
{下廚房} 產品經理真的好拼！霸道總裁愛上我的節奏，但真的好嗎？用戶看到了根本不敢點開~
{網易云音樂} 極簡，美觀，大方，邏輯清晰，看到這個想到一本書：《簡約至上——交互式設計四策略》，刪除不必要的，組織要提供的，隱藏非核心的（適時出現），信任該轉移的，推薦閱讀。
{豆瓣} 屏霸！點開朋友圈，看到這么大的圖，只有一個想法，關掉它，好在是可以關的?？呻[藏是個好功能，把選擇權給了用戶。（但此處有打個巴掌給個棗的感覺。）
【第三元素：功能誘導】
其實這個元素基本就可有可無，因為上述兩個元素設計好了，基本就是一個完整好評的朋友圈外鏈設計了，但真正的功能并不是在朋友圈實現的，而是App，所以外鏈的設計都是圍繞“讓用戶下載！下載！下載！”（重要的話說三遍，想想下廚房的引導下載符為什么要這么無孔不入）~
因為外鏈的存在就是比圖文多交互的內容，瀏覽的頁面就是App不登錄的狀態，所以所有的功能都是App本身的功能，并不需要額外添加，而這里的交互，就是讓用戶順利成章從朋友圈到App，五個路徑就是給用戶的挖的坑，都在說“來跳坑吧，下載我吧，打開我吧”！
綜合之前列舉過的的頁面，整理出用戶交互的動機：
本元素不需要分析UX設計點，從什么功能中來回什么功能中去，分享外鏈的場景設計，才是朋友圈外鏈的源頭。如果非要說點什么，我個人的看法是，那就是設計有良好互動功能的App就好了！
【總結】
微信朋友圈外鏈的UX要素：
- 0.標題引人入勝
- 1.核心內容清晰
- 2.播放功能流暢
- 3.跳轉邏輯走通
- 4.引導提示簡潔
- 5.載入內容輕盈
- 6.根源還是App分享場景
ps：
其實平時我們還會看到一種圖片，雖然不是外鏈，但標有分享來源，如：
{單讀} 含二維碼的圖片分享是可以掃描跳轉到下載App的頁面的，安卓手機可以直接跳轉進入App內，這種用戶體驗很簡潔流暢，還言簡意賅。也無強硬的讓你下載的意圖，如果用戶看著有共鳴自然會下載。（而不是遵照背著KPI的產品經理苦心安排好的提示去下載）
{網易云音樂} 無二維碼的圖片是為了提升本身App的用戶體驗而設計的。
以上內容是我因為閱讀了《界面設計模式》（個人讀書筆記的思維導圖整理）中“利用社交媒體”這一章節而展開的一些思考，主要針對目前自身在使用的部分App案例進行截取和分析。共計使用了55張截圖，對比分析了11個App案例（加上微信本身的話是12個），一張流程圖，一張思維導圖，一張象限圖。希望大家喜歡，圖片都很大，點開閱讀更佳！
大團圓式的結尾：用戶體驗設計的核心是用戶，而用戶是通過設計媒體相聯系的，在設計app應用時，我們會更在意app內的使用，而會忽略app外的使用，當我在朋友圈里看到這些外鏈的時候就想到了要寫這樣一篇文章，略顯粗淺笨拙，如有不當之處請不吝指教。
感謝讀完全文，但愿可以帶給大家一些啟發，與君共勉！比心~
