用戶體驗(yàn)設(shè)計(jì)的核心是用戶，而用戶是通過(guò)社交媒體相聯(lián)系的，在設(shè)計(jì)app應(yīng)用時(shí)，我們會(huì)更在意app內(nèi)的使用，而會(huì)忽略app外的使用。當(dāng)我在朋友圈里看到這些外鏈的時(shí)候就想到了要寫這樣一篇文章，略顯粗淺笨拙，如有不當(dāng)之處請(qǐng)不吝指教。

你們知道嗎？朋友圈的英文翻譯是：moments，而不是friends circle哦~

微信早已成為制霸手機(jī)的應(yīng)用之一，而朋友圈也無(wú)孔不入地影響著我們的生活，縱觀朋友圈，我們一般會(huì)看到這幾種形式：

1. 公眾號(hào)圖文
2. 原創(chuàng)照片（9圖以內(nèi)）配文字，或純文字（長(zhǎng)按生成）
3. 火爆的h5圖文
4. 外鏈圖文、視頻或音樂(lè)

生成的外鏈非常常見(jiàn)，可以說(shuō)“分享到朋友圈”也是各種app應(yīng)用利用微信來(lái)激增自己的下載量或日活量的一項(xiàng)非常大的功能點(diǎn)。但其中的設(shè)計(jì)真的做得好嗎？這篇文章我小試牛刀來(lái)分析一下關(guān)于朋友圈外鏈的用戶體驗(yàn)設(shè)計(jì)。

根據(jù)上述案例，我可以看到所有的“朋友圈”內(nèi)都包含三個(gè)元素：主題內(nèi)容、跳轉(zhuǎn)路徑、功能誘導(dǎo)。

第一個(gè)元素：主體內(nèi)容

由于朋友圈的內(nèi)容一共就是六類：圖、文、圖文結(jié)合、音頻、視頻、H5（有動(dòng)畫非視頻）。

撇開(kāi)朋友圈自帶的圖、文、公眾號(hào)圖文，外鏈內(nèi)容主要可以分為三類：圖文、音頻、視頻。

1. 通常音頻、視頻都屬于多媒體，所以在單個(gè)移動(dòng)端頁(yè)面實(shí)現(xiàn)的功能是有限的

1. 音頻通常一個(gè)頁(yè)面即可實(shí)現(xiàn)播放和暫停，但不能快進(jìn)倒退，如蝦米音樂(lè)：
2. 視頻有的可以直接播放，有播放和暫停，快進(jìn)和倒退，如AcFun，但有的需要單獨(dú)頁(yè)面展開(kāi)，如bilibili播放器，同時(shí)自帶App內(nèi)的功能，如彈幕等。

2. 圖文根據(jù)內(nèi)容與功能分為兩類，有限（全部顯示）內(nèi)容與可展開(kāi)內(nèi)容

（1）有限（全部顯示）內(nèi)容頁(yè)尾結(jié)構(gòu)基本與微信公眾號(hào)的圖文相似，如簡(jiǎn)書、好奇心日?qǐng)?bào)

（2）生活文字閱讀類的，如豆瓣、知乎等生成的外鏈可展開(kāi)內(nèi)容就有很多，而且還涉及到后文的跳轉(zhuǎn)問(wèn)題（（1）中好奇心日?qǐng)?bào)尾部紫色框出也屬于可展開(kāi)內(nèi)容，但和知乎一樣，不能直接打開(kāi)，設(shè)置了門檻。），如圖：

本元素的UX設(shè)計(jì)點(diǎn)

（1）內(nèi)容排版

一般來(lái)說(shuō)，生成朋友圈的外鏈排版是和App內(nèi)部一樣的，所以App的排版決定了外鏈內(nèi)容的排版，但部分網(wǎng)站是響應(yīng)式的，移動(dòng)端外鏈有自己的排版形式。（關(guān)于這個(gè)問(wèn)題，后文會(huì)說(shuō)到，因?yàn)橛行┡虐鎯H僅就是為了跳轉(zhuǎn)。）

無(wú)論是那種，我們從用戶角度出發(fā)，朋友圈外鏈的意義和需要操作的時(shí)間來(lái)歸納：

微信朋友圈的圖文閱讀，是用戶的碎片化閱讀，其受眾和微信公眾號(hào)圖文受眾是一致的，所以應(yīng)該以信息的獲取為主，主體內(nèi)容可以通過(guò)學(xué)習(xí)微信公眾號(hào)的圖文排版，建議以清晰、大、核心內(nèi)容的實(shí)現(xiàn)為排版的首要項(xiàng)，相對(duì)弱化復(fù)雜功能（當(dāng)App內(nèi)和微信外鏈中內(nèi)容有不同時(shí)，過(guò)多、過(guò)大的引導(dǎo)下載標(biāo)簽不可取，后文有反例），以內(nèi)容清晰為第一要義，如需實(shí)現(xiàn)更多的功能涉及到第二元素：跳轉(zhuǎn)。

同樣的，音頻和視頻中的信息是需要花比圖文更多時(shí)間的獲取的，所以以保留流暢的播放為首。設(shè)置播放門檻或其他功能，需要花用戶更多時(shí)間操作，可以考慮通過(guò)跳轉(zhuǎn)到單獨(dú)頁(yè)面來(lái)完成。

（2）標(biāo)題

標(biāo)題應(yīng)該是主題元素中比較重要的一點(diǎn)，和視覺(jué)設(shè)計(jì)無(wú)關(guān)，但和用戶體驗(yàn)設(shè)計(jì)有關(guān)，這一點(diǎn)很多設(shè)計(jì)師不會(huì)去注意，產(chǎn)品經(jīng)理會(huì)注意更多。（題外話：因?yàn)槲覀€(gè)人是從新媒體轉(zhuǎn)行到UX/UE的，所以也會(huì)注意到這一部分）

在某種程度上說(shuō)：一個(gè)標(biāo)題決定了這個(gè)外鏈?zhǔn)欠駮?huì)被點(diǎn)開(kāi)！

但并不是說(shuō)，我們要學(xué)習(xí)一下公眾號(hào)那些逆天的可以用來(lái)斗鏈接的標(biāo)題。

（衍生閱讀：《還在斗圖？現(xiàn)在已經(jīng)開(kāi)始斗雞湯文鏈接了》，會(huì)摘部分圖對(duì)比出來(lái)，App外鏈確實(shí)不需要這樣做，雖然h5中標(biāo)題是重要營(yíng)銷手段，但目的不同，所以不完全值得效仿。）

上圖所列舉一些朋友圈外鏈標(biāo)題都是比較正常的，強(qiáng)調(diào)格式的重要性。

我認(rèn)為合理的規(guī)范格式有：

1. 【圖文標(biāo)題格式】主題（文章題目）-作者/數(shù)據(jù)-App名稱
2. 【音頻、視頻媒體格式】數(shù)據(jù)-視頻/音頻名詞-作者-App名稱
3. 【創(chuàng)意格式】突出分享者的心情的內(nèi)容，以【事件】的描述為主，但這個(gè)是場(chǎng)景設(shè)計(jì)，要設(shè)計(jì)好App內(nèi)的用戶會(huì)在什么場(chǎng)景分享到朋友圈

為什么呢？

• 因?yàn)槲恼卤旧響?yīng)該是最吸引人的主題，放在前面，其次是作者或數(shù)據(jù)，因?yàn)檫@樣有渲染大家都在閱讀、贊同、關(guān)注等，那么就會(huì)使人想點(diǎn)開(kāi)。
• 音頻、視頻這種藝術(shù)媒體，題目和內(nèi)容是需要理解時(shí)間的，而且往往不會(huì)直接引起共鳴，數(shù)據(jù)是最好的引起共鳴的方式。
• 這里想表達(dá)一下對(duì)扇貝單詞的溢美之詞，因?yàn)椤臼录康拿枋鍪欠浅Ｄ荏w現(xiàn)分享者的心理，用一個(gè)鏈接來(lái)直接說(shuō)明ta干了什么事，大家快來(lái)給ta點(diǎn)贊！但不建議在這前面加上“扇貝打卡日記”。
• 接上一點(diǎn)，關(guān)于App名稱，如“扇貝打卡日記”或豆瓣這樣App名稱+欄目（豆瓣日記、豆瓣同城、豆瓣廣播），我覺(jué)得應(yīng)該是最后放的，或者根本不要，因?yàn)榕笥讶Φ耐怄溝旅?，微信已?jīng)替你寫好來(lái)源了，所以寫在最前面等于占用了外鏈標(biāo)題字符顯示限制的寶貴資源。
• 另外有些用戶在分享時(shí)會(huì)配文字，但字?jǐn)?shù)有限且并不是所有用戶會(huì)，所以我們不要指望用戶自己去解釋這個(gè)外鏈被分享的原因，我們只要感恩就好了！

第二個(gè)元素：跳轉(zhuǎn)路徑

朋友圈就是一個(gè)社交圈，用戶在分享的時(shí)候是大多抱著“告訴朋友我看什么/做什么/喜歡（討厭）什么/推薦/關(guān)注什么”這一心理，然后閱讀這一鏈接是和分享者的一個(gè)互動(dòng)，只是這一互動(dòng)的環(huán)境不是在App里，而是在朋友圈。

換一句話理解，我們可以把朋友圈外鏈的內(nèi)容看做是，某一個(gè)App中，用戶甲與乙、丙、丁等的橋梁。能帶你去目的地的橋才是好橋，能實(shí)現(xiàn)好的跳轉(zhuǎn)邏輯的設(shè)計(jì)才是微信朋友圈外鏈設(shè)計(jì)的關(guān)鍵。

根據(jù)我個(gè)人的觀察，朋友圈外鏈的跳轉(zhuǎn)一共有5個(gè)路徑：

路徑一：下載app

路徑二：app內(nèi)打開(kāi)

路徑三：跳轉(zhuǎn)注冊(cè)（登陸微信號(hào)再綁定微信號(hào)注冊(cè)）

路徑四：跳轉(zhuǎn)手機(jī)版（可以登錄的）瀏覽器版

跳轉(zhuǎn)瀏覽器的本質(zhì)就是從路徑四到路徑一，還是讓用戶“下載App”。

這里有一個(gè)問(wèn)題：手機(jī)版與app內(nèi)的異同（對(duì)比案例：豆瓣）

我們可以清晰的看到，豆瓣的App和手機(jī)版大同小異，然而在手機(jī)版設(shè)置了各種“心機(jī)”，部分圖文還是需要在App內(nèi)才能打開(kāi)，限制了手機(jī)版的功能，本質(zhì)還是在引導(dǎo)用戶下載。（路徑四→路徑一）

路徑五：長(zhǎng)按掃描二維碼關(guān)注公眾號(hào)

其實(shí)這就回到了微信內(nèi)部，目的增加的是公眾號(hào)的粉絲數(shù)量，好吧，但一般公眾號(hào)圖文的“閱讀原文”里還是會(huì)放外鏈的，所以這么來(lái)來(lái)回回的，真是一大盤棋。

本元素的UX設(shè)計(jì)點(diǎn)

（1）跳轉(zhuǎn)的目的設(shè)計(jì)——跳轉(zhuǎn)邏輯

細(xì)心的你一定發(fā)現(xiàn)了，五個(gè)跳轉(zhuǎn)路徑中，除了路徑五是回到微信內(nèi)，滿足某種策略需求，其他四個(gè)路徑都是轉(zhuǎn)化到微信外，下文主要就分析微信外。

• 用戶分兩種，未注冊(cè)、已注冊(cè)；
• 場(chǎng)景分兩種，未下載App，已下載App。

那么就畫個(gè)四象限圖：

觀察象限圖，仔細(xì)想來(lái)（箭頭指示方向，需要移動(dòng)的就是第三象限），路徑一最后還是會(huì)到路徑二，通過(guò)下載再進(jìn)入App內(nèi)（第三象限→第四象限）；路徑三會(huì)到路徑四（第三象限→第二象限）或是路徑二（第三象限→第四象限）。
也就是說(shuō)，外鏈最后的兩個(gè)終點(diǎn)，要么是手機(jī)版，要么是App內(nèi)。但其實(shí)手機(jī)版也是會(huì)引導(dǎo)用戶去下載的，所以終點(diǎn)的終點(diǎn)是App內(nèi)！

那么引導(dǎo)的核心就是：要么打開(kāi)App，要么下載App。

但現(xiàn)實(shí)存在這樣一個(gè)問(wèn)題，大多網(wǎng)站是app和web網(wǎng)站同時(shí)運(yùn)營(yíng)的，移動(dòng)設(shè)計(jì)和web是兩套不同設(shè)計(jì)，只不過(guò)有的頁(yè)面是通過(guò)響應(yīng)式解決的，那么我們需要考量手機(jī)版和app版能不能保持一致？

• 簡(jiǎn)書就是很好的例子，手機(jī)版=App版。
• 知乎手機(jī)版內(nèi)部增加了二維碼的路徑五，但主體內(nèi)容其實(shí)就是和App內(nèi)容一樣。
• 豆瓣是比較特殊的，所以用來(lái)做了上述對(duì)比的案例，但手機(jī)版最后還是會(huì)引導(dǎo)到App內(nèi)。

幾乎都是殊途同歸，因?yàn)樗型怄溩詈蠖际菑哪膬簛?lái)回哪兒去，能分享出去，也可以引流回來(lái)，橋的兩頭都是通路。
同理，音頻、視頻都最終會(huì)引導(dǎo)下載App，在App中打開(kāi)。

那么所有的跳轉(zhuǎn)邏輯都是一套，如圖：

一般App的內(nèi)部使用流程都是很清晰的，從App到分享外鏈，功能都很完整，但從外鏈到App的過(guò)程基本是為了幫助產(chǎn)品經(jīng)理、運(yùn)營(yíng)人員達(dá)成增新用戶數(shù)、增加日活的KPI的，所以我們的UX設(shè)計(jì)師是不是也注意到了這一點(diǎn)了呢，是真的為了用戶而服務(wù)的嗎？?通過(guò)理順以上跳轉(zhuǎn)的邏輯，可以精確你的UX設(shè)計(jì)了。

試問(wèn)以下幾個(gè)問(wèn)題：

• 用戶是不是會(huì)在朋友圈看到而去下載？
• 用戶是不是非要在App內(nèi)打開(kāi)？
• 所有的跳轉(zhuǎn)流程中會(huì)不會(huì)讓用戶得到好的體驗(yàn)？在哪個(gè)步驟會(huì)放棄操作？

（2）引導(dǎo)跳轉(zhuǎn)的視覺(jué)設(shè)計(jì)

這個(gè)部分就是提醒用戶進(jìn)行跳轉(zhuǎn)，增加了用戶下載App的幾率。上述列舉的App都有這樣的設(shè)計(jì)：

1. 根據(jù)頁(yè)面層次分：有加載在頁(yè)面的內(nèi)部的提示、頁(yè)面外部的提示；
2. 根據(jù)部署位置分：頂部提示、底部Tab提示，與內(nèi)容相關(guān)的跳轉(zhuǎn)提示標(biāo)簽；
3. 根據(jù)顯示效果分：有懸浮的提示、可隱藏的提示。

除了視覺(jué)表現(xiàn)，這個(gè)設(shè)計(jì)可以更多創(chuàng)意的發(fā)揮，但關(guān)鍵是要符合自己App的氣質(zhì)，前文中已經(jīng)有很多案例了，（MONO、扇貝單詞，好奇心日?qǐng)?bào)都是我個(gè)人比較欣賞的，清晰簡(jiǎn)潔，符合原App氣質(zhì)），期待各位設(shè)計(jì)師的大作！

種類太多，列舉不過(guò)來(lái)，選了這三個(gè)補(bǔ)充一點(diǎn)自己的想法的：

• 下廚房：產(chǎn)品經(jīng)理真的好拼！霸道總裁愛(ài)上我的節(jié)奏，但真的好嗎？用戶看到了根本不敢點(diǎn)開(kāi)~
• 網(wǎng)易云音樂(lè)：極簡(jiǎn)，美觀，大方，邏輯清晰，終極要義：要么“下載”，要么“打開(kāi)”?。ň褪俏疑衔牧_里吧嗦一堆的，用四個(gè)字就概括啦?。┛吹竭@一點(diǎn)，就想到一本書：《簡(jiǎn)約至上——交互式設(shè)計(jì)四策略》，刪除不必要的，組織要提供的，隱藏非核心的（適時(shí)出現(xiàn)），信任該轉(zhuǎn)移的，推薦閱讀。
• 豆瓣：屏霸！點(diǎn)開(kāi)朋友圈，看到這么大的圖，只有一個(gè)想法，關(guān)掉它，好在是可以關(guān)的?？呻[藏是個(gè)好功能，把選擇權(quán)給了用戶。（但此處有打個(gè)巴掌給個(gè)棗的感覺(jué)。）

第三元素：功能誘導(dǎo)

其實(shí)，這個(gè)元素基本就可有可無(wú)，因?yàn)樯鲜鰞蓚€(gè)元素設(shè)計(jì)好了，基本就是一個(gè)完整好評(píng)的朋友圈外鏈設(shè)計(jì)了，但真正的功能并不是在朋友圈實(shí)現(xiàn)的，而是App，所以外鏈的設(shè)計(jì)都是圍繞“讓用戶下載！下載！下載！”（重要的話說(shuō)三遍，想想下廚房的引導(dǎo)下載符為什么要這么無(wú)孔不入）

因?yàn)橥怄湹拇嬖诰褪潜葓D文多交互的內(nèi)容，瀏覽的頁(yè)面就是App不登錄的狀態(tài)，所以所有的功能都是App本身的功能，并不需要額外添加，而這里的交互，就是讓用戶順利成章從朋友圈到App，五個(gè)路徑就是給用戶的挖的坑，都在說(shuō)：

“來(lái)跳坑吧，下載我吧，打開(kāi)我吧”！

綜合之前列舉過(guò)的的頁(yè)面，整理出用戶交互的動(dòng)機(jī)：

本元素不需要分析UX設(shè)計(jì)點(diǎn)，從什么功能中來(lái)回什么功能中去，分享外鏈的場(chǎng)景設(shè)計(jì)，才是朋友圈外鏈的源頭。如果非要說(shuō)點(diǎn)什么，我個(gè)人的看法是，那就是設(shè)計(jì)有良好互動(dòng)功能的App就好了！

總結(jié)

微信朋友圈外鏈的UX要素：

• 0.標(biāo)題引人入勝
• 1.核心內(nèi)容清晰
• 2.播放功能流暢
• 3.跳轉(zhuǎn)邏輯走通
• 4.引導(dǎo)提示簡(jiǎn)潔
• 5.載入內(nèi)容輕盈
• 6.根源還是App分享場(chǎng)景

ps：其實(shí)平時(shí)我們還會(huì)看到一種圖片，雖然不是外鏈，但標(biāo)有分享來(lái)源，如：

• 單讀含二維碼的圖片分享是可以掃描跳轉(zhuǎn)到下載App的頁(yè)面的，安卓手機(jī)可以直接跳轉(zhuǎn)進(jìn)入App內(nèi)，這種用戶體驗(yàn)很簡(jiǎn)潔流暢，還言簡(jiǎn)意賅。也無(wú)強(qiáng)硬的讓你下載的意圖，如果用戶看著有共鳴自然會(huì)下載。（而不是遵照背著KPI的產(chǎn)品經(jīng)理苦心安排好的提示去下載）
• 網(wǎng)易云音樂(lè)無(wú)二維碼的圖片是為了提升本身App的用戶體驗(yàn)而設(shè)計(jì)的。

以上內(nèi)容是我因?yàn)殚喿x了《界面設(shè)計(jì)模式》（個(gè)人讀書筆記的思維導(dǎo)圖整理）中“利用社交媒體”這一章節(jié)而展開(kāi)的一些思考，主要針對(duì)目前自身在使用的部分App案例進(jìn)行截取和分析。共計(jì)使用了55張截圖，對(duì)比分析了11個(gè)App案例（加上微信本身的話是12個(gè)），一張流程圖，一張思維導(dǎo)圖，一張象限圖。希望大家喜歡，圖片都很大，點(diǎn)開(kāi)閱讀更佳！

感謝讀完全文，但愿可以帶給大家一些啟發(fā)，與君共勉！比心~

作者：Eliza（森森），UX、交互設(shè)計(jì)新人、1年產(chǎn)品運(yùn)營(yíng)&用研、2年新媒體運(yùn)營(yíng)

本文由 @Eliza 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。