中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

用戶體驗設計的核心是用戶，而用戶是通過社交媒體相聯系的，在設計app應用時，我們會更在意app內的使用，而會忽略app外的使用。當我在朋友圈里看到這些外鏈的時候就想到了要寫這樣一篇文章，略顯粗淺笨拙，如有不當之處請不吝指教。

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

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

1. 公眾號圖文
2. 原創照片（9圖以內）配文字，或純文字（長按生成）
3. 火爆的h5圖文
4. 外鏈圖文、視頻或音樂

生成的外鏈非常常見，可以說“分享到朋友圈”也是各種app應用利用微信來激增自己的下載量或日活量的一項非常大的功能點。但其中的設計真的做得好嗎？這篇文章我小試牛刀來分析一下關于朋友圈外鏈的用戶體驗設計。

根據上述案例，我可以看到所有的“朋友圈”內都包含三個元素：主題內容、跳轉路徑、功能誘導。

第一個元素：主體內容

由于朋友圈的內容一共就是六類：圖、文、圖文結合、音頻、視頻、H5（有動畫非視頻）。

撇開朋友圈自帶的圖、文、公眾號圖文，外鏈內容主要可以分為三類：圖文、音頻、視頻。

1. 通常音頻、視頻都屬于多媒體，所以在單個移動端頁面實現的功能是有限的

1. 音頻通常一個頁面即可實現播放和暫停，但不能快進倒退，如蝦米音樂：
2. 視頻有的可以直接播放，有播放和暫停，快進和倒退，如AcFun，但有的需要單獨頁面展開，如bilibili播放器，同時自帶App內的功能，如彈幕等。

2. 圖文根據內容與功能分為兩類，有限（全部顯示）內容與可展開內容

（1）有限（全部顯示）內容頁尾結構基本與微信公眾號的圖文相似，如簡書、好奇心日報

（2）生活文字閱讀類的，如豆瓣、知乎等生成的外鏈可展開內容就有很多，而且還涉及到后文的跳轉問題（（1）中好奇心日報尾部紫色框出也屬于可展開內容，但和知乎一樣，不能直接打開，設置了門檻。），如圖：

本元素的UX設計點

（1）內容排版

一般來說，生成朋友圈的外鏈排版是和App內部一樣的，所以App的排版決定了外鏈內容的排版，但部分網站是響應式的，移動端外鏈有自己的排版形式。（關于這個問題，后文會說到，因為有些排版僅僅就是為了跳轉。）

無論是那種，我們從用戶角度出發，朋友圈外鏈的意義和需要操作的時間來歸納：

微信朋友圈的圖文閱讀，是用戶的碎片化閱讀，其受眾和微信公眾號圖文受眾是一致的，所以應該以信息的獲取為主，主體內容可以通過學習微信公眾號的圖文排版，建議以清晰、大、核心內容的實現為排版的首要項，相對弱化復雜功能（當App內和微信外鏈中內容有不同時，過多、過大的引導下載標簽不可取，后文有反例），以內容清晰為第一要義，如需實現更多的功能涉及到第二元素：跳轉。

同樣的，音頻和視頻中的信息是需要花比圖文更多時間的獲取的，所以以保留流暢的播放為首。設置播放門檻或其他功能，需要花用戶更多時間操作，可以考慮通過跳轉到單獨頁面來完成。

（2）標題

標題應該是主題元素中比較重要的一點，和視覺設計無關，但和用戶體驗設計有關，這一點很多設計師不會去注意，產品經理會注意更多。（題外話：因為我個人是從新媒體轉行到UX/UE的，所以也會注意到這一部分）

在某種程度上說：一個標題決定了這個外鏈是否會被點開！

但并不是說，我們要學習一下公眾號那些逆天的可以用來斗鏈接的標題。

（衍生閱讀：《還在斗圖？現在已經開始斗雞湯文鏈接了》，會摘部分圖對比出來，App外鏈確實不需要這樣做，雖然h5中標題是重要營銷手段，但目的不同，所以不完全值得效仿。）

上圖所列舉一些朋友圈外鏈標題都是比較正常的，強調格式的重要性。

我認為合理的規范格式有：

1. 【圖文標題格式】主題（文章題目）-作者/數據-App名稱
2. 【音頻、視頻媒體格式】數據-視頻/音頻名詞-作者-App名稱
3. 【創意格式】突出分享者的心情的內容，以【事件】的描述為主，但這個是場景設計，要設計好App內的用戶會在什么場景分享到朋友圈

為什么呢？

• 因為文章本身應該是最吸引人的主題，放在前面，其次是作者或數據，因為這樣有渲染大家都在閱讀、贊同、關注等，那么就會使人想點開。
• 音頻、視頻這種藝術媒體，題目和內容是需要理解時間的，而且往往不會直接引起共鳴，數據是最好的引起共鳴的方式。
• 這里想表達一下對扇貝單詞的溢美之詞，因為【事件】的描述是非常能體現分享者的心理，用一個鏈接來直接說明ta干了什么事，大家快來給ta點贊！但不建議在這前面加上“扇貝打卡日記”。
• 接上一點，關于App名稱，如“扇貝打卡日記”或豆瓣這樣App名稱+欄目（豆瓣日記、豆瓣同城、豆瓣廣播），我覺得應該是最后放的，或者根本不要，因為朋友圈的外鏈下面，微信已經替你寫好來源了，所以寫在最前面等于占用了外鏈標題字符顯示限制的寶貴資源。
• 另外有些用戶在分享時會配文字，但字數有限且并不是所有用戶會，所以我們不要指望用戶自己去解釋這個外鏈被分享的原因，我們只要感恩就好了！

第二個元素：跳轉路徑

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

換一句話理解，我們可以把朋友圈外鏈的內容看做是，某一個App中，用戶甲與乙、丙、丁等的橋梁。能帶你去目的地的橋才是好橋，能實現好的跳轉邏輯的設計才是微信朋友圈外鏈設計的關鍵。

根據我個人的觀察，朋友圈外鏈的跳轉一共有5個路徑：

路徑一：下載app

路徑二：app內打開

路徑三：跳轉注冊（登陸微信號再綁定微信號注冊）

路徑四：跳轉手機版（可以登錄的）瀏覽器版

跳轉瀏覽器的本質就是從路徑四到路徑一，還是讓用戶“下載App”。

這里有一個問題：手機版與app內的異同（對比案例：豆瓣）

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

路徑五：長按掃描二維碼關注公眾號

其實這就回到了微信內部，目的增加的是公眾號的粉絲數量，好吧，但一般公眾號圖文的“閱讀原文”里還是會放外鏈的，所以這么來來回回的，真是一大盤棋。

本元素的UX設計點

（1）跳轉的目的設計——跳轉邏輯

細心的你一定發現了，五個跳轉路徑中，除了路徑五是回到微信內，滿足某種策略需求，其他四個路徑都是轉化到微信外，下文主要就分析微信外。

• 用戶分兩種，未注冊、已注冊；
• 場景分兩種，未下載App，已下載App。

那么就畫個四象限圖：

觀察象限圖，仔細想來（箭頭指示方向，需要移動的就是第三象限），路徑一最后還是會到路徑二，通過下載再進入App內（第三象限→第四象限）；路徑三會到路徑四（第三象限→第二象限）或是路徑二（第三象限→第四象限）。
也就是說，外鏈最后的兩個終點，要么是手機版，要么是App內。但其實手機版也是會引導用戶去下載的，所以終點的終點是App內！

那么引導的核心就是：要么打開App，要么下載App。

但現實存在這樣一個問題，大多網站是app和web網站同時運營的，移動設計和web是兩套不同設計，只不過有的頁面是通過響應式解決的，那么我們需要考量手機版和app版能不能保持一致？

• 簡書就是很好的例子，手機版=App版。
• 知乎手機版內部增加了二維碼的路徑五，但主體內容其實就是和App內容一樣。
• 豆瓣是比較特殊的，所以用來做了上述對比的案例，但手機版最后還是會引導到App內。

幾乎都是殊途同歸，因為所有外鏈最后都是從哪兒來回哪兒去，能分享出去，也可以引流回來，橋的兩頭都是通路。
同理，音頻、視頻都最終會引導下載App，在App中打開。

那么所有的跳轉邏輯都是一套，如圖：

一般App的內部使用流程都是很清晰的，從App到分享外鏈，功能都很完整，但從外鏈到App的過程基本是為了幫助產品經理、運營人員達成增新用戶數、增加日活的KPI的，所以我們的UX設計師是不是也注意到了這一點了呢，是真的為了用戶而服務的嗎？?通過理順以上跳轉的邏輯，可以精確你的UX設計了。

試問以下幾個問題：

• 用戶是不是會在朋友圈看到而去下載？
• 用戶是不是非要在App內打開？
• 所有的跳轉流程中會不會讓用戶得到好的體驗？在哪個步驟會放棄操作？

（2）引導跳轉的視覺設計

這個部分就是提醒用戶進行跳轉，增加了用戶下載App的幾率。上述列舉的App都有這樣的設計：

1. 根據頁面層次分：有加載在頁面的內部的提示、頁面外部的提示；
2. 根據部署位置分：頂部提示、底部Tab提示，與內容相關的跳轉提示標簽；
3. 根據顯示效果分：有懸浮的提示、可隱藏的提示。

除了視覺表現，這個設計可以更多創意的發揮，但關鍵是要符合自己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個），一張流程圖，一張思維導圖，一張象限圖。希望大家喜歡，圖片都很大，點開閱讀更佳！

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

作者：Eliza（森森），UX、交互設計新人、1年產品運營&用研、2年新媒體運營

本文由 @Eliza 原創發布于人人都是產品經理。未經許可，禁止轉載。