本篇以Lofter為研究對(duì)象，為其設(shè)計(jì)一個(gè)邀請(qǐng)好友加入一起玩LOFTER的流程，設(shè)計(jì)范圍由刺激用戶發(fā)起邀請(qǐng)開(kāi)始，到成功將邀請(qǐng)發(fā)送給朋友為止。

好友邀請(qǐng)是當(dāng)前許多應(yīng)用產(chǎn)品——尤其是社交性較強(qiáng)的產(chǎn)品都有的一個(gè)推廣方式。而Lofter作為基于繪畫(huà)、攝影、設(shè)計(jì)作品分享的一個(gè)社交性與內(nèi)容性兼?zhèn)涞钠脚_(tái)，在當(dāng)前版本還沒(méi)有提供好友邀請(qǐng)功能，不得不說(shuō)是一個(gè)小小的遺憾。

注：本文章基于Lofter iOS端 V5.2.3版本進(jìn)行討論。

1. 用戶場(chǎng)景

Lofter是一個(gè)內(nèi)容定位比較小眾化的產(chǎn)品，它希望吸引的是亮眼的、精致的攝影、繪畫(huà)作品。而同時(shí)，Lofter的用戶定位卻并不希望設(shè)置任何門(mén)檻，無(wú)論是熟悉圖片分享社區(qū)類應(yīng)用的中（高）級(jí)用戶，還是進(jìn)入一款應(yīng)用后“到處戳戳”的新手用戶，都是Lofter所樂(lè)于留住的，畢竟，能否發(fā)布高質(zhì)量作品、是否有意愿積極參與社區(qū)互動(dòng)，與對(duì)互聯(lián)網(wǎng)產(chǎn)品的熟悉與否并無(wú)直接關(guān)系。

因此，考慮“邀請(qǐng)好友”這一功能的用戶場(chǎng)景時(shí)，同樣需要兼顧無(wú)目的地四處嘗試的新手用戶，也要顧及在需要這個(gè)功能時(shí)有意（或下意識(shí)地）去某個(gè)可能存在該功能的界面查看是否有相關(guān)信息的中級(jí)用戶。下面將以兩個(gè)典型的用戶場(chǎng)景，嘗試?yán)砬暹@兩類用戶接觸到并使用“邀請(qǐng)好友”功能的過(guò)程。

1.1 場(chǎng)景一

1.1.1 用戶畫(huà)像

• 姓名：李瑤
• 女，24歲，插畫(huà)設(shè)計(jì)師。
• 學(xué)歷：本科生。
• 愛(ài)好：手繪，黏土制作，看英劇。
• 性格：內(nèi)向，但在熟識(shí)的朋友面前很活潑。
• 社交應(yīng)用使用情況：較少使用微信，QQ也很少在下班后使用。她的兩個(gè)重要“據(jù)點(diǎn)”是微博和站酷，微博上有她在黏土制作的小圈子中的很多朋友，而站酷則是她和許多插畫(huà)界的朋友、前輩們交流心得的平臺(tái)。
• 特征與需求：LOFTER新用戶，結(jié)交陌生的朋友固然是她用LOFTER的原因，但她更希望把這個(gè)讓她用起來(lái)很舒適的平臺(tái)推薦給她在微博和站酷的朋友們。并不長(zhǎng)于探索APP的功能，也對(duì)自己的關(guān)注數(shù)、粉絲數(shù)等數(shù)據(jù)并不在意的她很少去關(guān)注自己的個(gè)人信息頁(yè)，因此，她需要在對(duì)普通用戶而言更顯眼的地方找到一個(gè)添加好友的入口。

1.1.2 場(chǎng)景

• 李瑤下班后，在寫(xiě)字樓負(fù)一樓的快餐店叫了一份湯面，等待時(shí)，她打開(kāi)這幾天才開(kāi)始使用的LOFTER隨意翻閱著。然而，因?yàn)樗P(guān)注的用戶太少，首頁(yè)“關(guān)注”標(biāo)簽下，充斥著同一、兩個(gè)人發(fā)布的信息，她有點(diǎn)厭煩，“關(guān)注點(diǎn)別的什么人吧”——她這樣想著。
• 她看到，首頁(yè)右上角就有一個(gè)由一個(gè)頭像剪影和一個(gè)加號(hào)組成的icon，她猜這就是添加好友的入口吧。當(dāng)點(diǎn)擊右上角的icon后，她進(jìn)入了“添加關(guān)注”界面。
• 李瑤首先對(duì)這個(gè)界面頭部進(jìn)行了概覽，她發(fā)現(xiàn)這一界面由“猜你喜歡”、“同城熱門(mén)”、“微博好友”三個(gè)似乎可以點(diǎn)擊的標(biāo)簽組成，此外，右上角還有“邀請(qǐng)好友”字樣的按鈕。
• 她決定先從更顯而易見(jiàn)的三個(gè)標(biāo)簽頁(yè)看起，她按順序翻閱了“猜你喜歡”和“同城熱門(mén)”后，發(fā)現(xiàn)自己對(duì)這些陌生人并不感興趣，她更期待與熟識(shí)的朋友分享自己的愛(ài)好和生活。
• 第三個(gè)標(biāo)簽頁(yè)“微博好友”很符合李瑤的要求，可她發(fā)現(xiàn)，“已開(kāi)通LOFTER的好友”的名單短得可憐，想邀請(qǐng)沒(méi)有開(kāi)通LOFTER的好友怎么辦？
• 好在下方還有一個(gè)“邀請(qǐng)更多好友”按鈕，同時(shí)，她也想起了導(dǎo)航欄右側(cè)的“邀請(qǐng)好友”按鈕，她點(diǎn)擊了其中任意一個(gè)后，進(jìn)入了“邀請(qǐng)好友”界面。
• 李瑤看到，這里不但可以邀請(qǐng)微博好友，還可以邀請(qǐng)通訊錄、微信好友。
• 李瑤決定首先完成剛才的想法——邀請(qǐng)幾個(gè)熟識(shí)的微博好友，于是她進(jìn)入“邀請(qǐng)微博好友“界面，在長(zhǎng)長(zhǎng)的“邀請(qǐng)微博好友”列表中邀請(qǐng)了她心目中合適的人選，一切都很簡(jiǎn)單，她只要點(diǎn)擊想邀請(qǐng)的好友右邊的“邀請(qǐng)”按鈕就可以完成邀請(qǐng)，然后收到屏幕中央“邀請(qǐng)已發(fā)送”的反饋。
• 返回“邀請(qǐng)好友”界面后，李瑤覺(jué)得意猶未盡，但她并不常和手機(jī)通訊錄里的朋友通過(guò)網(wǎng)絡(luò)聯(lián)系，也很少用微信，不過(guò)，她想起來(lái)，還有幾個(gè)站酷上經(jīng)?；ハ帱c(diǎn)評(píng)作品、交流設(shè)計(jì)心得的好友可以邀請(qǐng)——然而并沒(méi)有邀請(qǐng)站酷好友的選項(xiàng)。
• 她決定嘗試最后一個(gè)選項(xiàng)“生成邀請(qǐng)鏈接”，進(jìn)入后她發(fā)現(xiàn)這是一個(gè)占領(lǐng)了全屏的輸入框，其中有LOFTER已經(jīng)定制好的一段話，她覺(jué)得這段話已經(jīng)很合適了，便點(diǎn)擊了底端的“復(fù)制邀請(qǐng)鏈接”按鈕，屏幕上隨即出現(xiàn)的toast——“鏈接已復(fù)制到剪貼板，快去發(fā)給好友吧！”。
• 李瑤登錄站酷，把復(fù)制好的文字逐一粘貼進(jìn)私信、發(fā)送給了自己希望邀請(qǐng)的好友。，最后完成了一次愉快的好友邀請(qǐng)流程。

1.2 場(chǎng)景二

1.2.1 用戶畫(huà)像

• 姓名：王彤
• 男，26歲，職業(yè)攝影師。
• 學(xué)歷：本科生。
• 愛(ài)好：攝影，籃球，滑板，嘗試各類互聯(lián)網(wǎng)產(chǎn)品，關(guān)注社會(huì)熱點(diǎn)。
• 性格：外向，話嘮——在網(wǎng)絡(luò)上更加話嘮，樂(lè)于結(jié)交各方朋友。
• 社交應(yīng)用使用情況：作為一個(gè)樂(lè)于“嘗鮮”的APP控，王彤幾乎所有主流社交應(yīng)用都注冊(cè)過(guò)，但他最常使用的依然只有微信，幾乎和所有同輩的朋友都是通過(guò)微信作為唯一的聯(lián)系方式。此外，作為一個(gè)更多偏好拍攝市井底層的“社會(huì)型”攝影師，他和當(dāng)?shù)厝?nèi)很多70后前輩們也很熟絡(luò)，當(dāng)然，他們之間的聯(lián)絡(luò)更多的是依賴傳統(tǒng)的電話。
• 特征與需求：剛剛注冊(cè)LOFTER的用戶，處于嘗鮮階段，樂(lè)于在不同功能間切換。把玩了一個(gè)晚上上，王彤覺(jué)得LOFTER還是個(gè)不錯(cuò)的平臺(tái)，但幾乎沒(méi)有熟識(shí)的朋友在使用這個(gè)APP，他有點(diǎn)猶豫是否要長(zhǎng)期使用。而距離決定將LOFTER推薦給自己的朋友圈子還欠缺一個(gè)契機(jī)，因此，在合適的地方不突兀地提供一個(gè)刺激點(diǎn)也許是他開(kāi)始邀請(qǐng)各路朋友加入LOFTER的開(kāi)端。

1.2.2 場(chǎng)景

• 王彤在一天結(jié)束前例行最后地把玩著手機(jī)，他深深地覺(jué)得LOFTER——這個(gè)剛剛下載的圖片社交應(yīng)用很不錯(cuò)，既適合攝影師這樣的人群，又連他這樣一個(gè)對(duì)APP體驗(yàn)很挑剔的人都覺(jué)得交互很舒服，不過(guò)總覺(jué)得欠缺了點(diǎn)什么？大概是因?yàn)檎J(rèn)識(shí)的同齡朋友和大齡前輩們都沒(méi)人知道這里的緣故吧。不過(guò)，作為一個(gè)很少長(zhǎng)期使用微信外社交平臺(tái)的“嘗鮮一族”，王彤也沒(méi)有馬上介紹給朋友們一起使用的沖動(dòng)。
• 想到這里，王彤下意識(shí)地決定去看看自己的關(guān)注和粉絲列表，也許那里有解決他這種“欠缺感”的線索。他打開(kāi)關(guān)注列表，看到只有5個(gè)關(guān)注，還是自己在首頁(yè)上亂逛的時(shí)候隨便關(guān)注的幾個(gè)作品看起來(lái)順眼的陌生人。不過(guò)列表底端有一個(gè)反色的按鈕引起了他的注意，“邀請(qǐng)好友加入Lofter“，關(guān)注更多動(dòng)態(tài)”——他有點(diǎn)心動(dòng)了。接著，王彤又打開(kāi)了粉絲列表——數(shù)目更顯凄涼，只有1個(gè)，大概是對(duì)他剛才嘗試發(fā)布功能時(shí)發(fā)出的那張作品感興趣的人吧，在粉絲列表底端同樣有一個(gè)反色的按鈕，“你的粉絲有點(diǎn)少哦？邀請(qǐng)好友加入Lofter”，他不禁一笑，連軟件都看出了他的“凄慘”，好吧，就點(diǎn)進(jìn)去開(kāi)始邀請(qǐng)點(diǎn)朋友進(jìn)來(lái)吧！
• 進(jìn)入“邀請(qǐng)好友”界面后，王彤快速地找到了自己最需要的一行——“邀請(qǐng)微信好友”，輕按了觸屏。
• 這時(shí)進(jìn)入了微信的選擇最近聊天界面，王彤決定從自己最好的前同事、遠(yuǎn)在北京的楊鵬開(kāi)始。
• 王彤點(diǎn)選了楊鵬的頭像，進(jìn)入了帶有黑色遮罩層的聊天界面，屏幕中央是一個(gè)輸入窗口，不可編輯區(qū)中有LOFTER已經(jīng)定制好的一段話。非常注意聊天語(yǔ)氣的王彤覺(jué)得這樣太生硬，于是在下方可編輯的輸入框里輸入了一行更顯真誠(chéng)的話語(yǔ)，然后點(diǎn)擊了發(fā)送。
• 這時(shí)，在輸入窗口相同位置彈出了“發(fā)送成功”的提示，并提供了“返回Lofter”和“留在微信”兩個(gè)選項(xiàng)。王彤快速地想——已經(jīng)夜深了，其他人明天再發(fā)送就好，不過(guò)，他想起在“邀請(qǐng)好友”界面中還有”邀請(qǐng)通訊錄好友“的選項(xiàng)，他還想邀請(qǐng)幾個(gè)老前輩嘗試一下這個(gè)平臺(tái)，通過(guò)短信是個(gè)不錯(cuò)的主意。于是，王彤點(diǎn)擊了”返回Lofter”。
• 界面符合王彤期望地返回了“邀請(qǐng)好友”界面，他點(diǎn)擊“邀請(qǐng)通訊錄好友”后，打開(kāi)了通訊錄。
• 王彤看到姓名前的圓形框，他猜這里可以多選，但他覺(jué)得群發(fā)短信不禮貌，還是決定一個(gè)一個(gè)邀請(qǐng)。他選中了張志軍，一個(gè)可以稱得上是他入行后導(dǎo)師的前輩，按下了頁(yè)面底端的“邀請(qǐng)好友（張志軍）”按鈕。
• 然后，在隨之進(jìn)入的短信編輯界面中，王彤同樣在已經(jīng)定制好的邀請(qǐng)?jiān)~前后進(jìn)行了編輯，讓行文顯得禮貌得體而且真誠(chéng)，確認(rèn)無(wú)誤后，他按下了發(fā)送按鈕。
• 頁(yè)面隨即返回了“邀請(qǐng)通訊錄好友”界面，同樣的，其他人王彤打算明天再繼續(xù)邀請(qǐng)。王彤按下Home鍵，在臨睡前完成了一次愉快的好友邀請(qǐng)。

2. 流程設(shè)計(jì)

結(jié)合第1節(jié)中的場(chǎng)景敘述，考慮在首頁(yè)和“我”頁(yè)面各設(shè)置一個(gè)入口，一深一淺，兼顧初級(jí)用戶與中級(jí)用戶的需求。在通過(guò)兩個(gè)入口抵達(dá)邀請(qǐng)好友頁(yè)面時(shí)后，提供邀請(qǐng)微博好友、邀請(qǐng)微信好友、邀請(qǐng)通訊錄好友、生成邀請(qǐng)鏈接四種邀請(qǐng)方式（出口）。流程圖設(shè)計(jì)如下：

流程圖

3. 交互方案

3.1 入口方案

如前文所述，考慮在“首頁(yè)-添加關(guān)注”頁(yè)面設(shè)置一個(gè)層級(jí)較淺、更適合無(wú)目的用戶的入口，在“我”頁(yè)面設(shè)置一個(gè)層級(jí)較深、更適合有目的用戶的入口。其中，后者又分別在“我的關(guān)注”和“我的粉絲“頁(yè)面各設(shè)置一個(gè)，即合計(jì)3個(gè)入口。
“邀請(qǐng)好友”頁(yè)面則采用簡(jiǎn)潔的垂直列表設(shè)計(jì)，用清晰的icon和文案將用戶分流至其所需的邀請(qǐng)方式（出口）。

3.1.1 “添加關(guān)注”入口

由首頁(yè)導(dǎo)航欄右端的“添加關(guān)注”icon發(fā)起，進(jìn)入“添加關(guān)注”頁(yè)面后，在導(dǎo)航欄右端新增“邀請(qǐng)好友”鏈接。

原版首頁(yè)

原版“添加關(guān)注”頁(yè)

“添加關(guān)注”入口流程

3.1.2 “我的關(guān)注”入口

在“我的關(guān)注”頁(yè)的用戶列表底部新增一個(gè)Bar狀鏈接：“邀請(qǐng)好友加入Lofter，關(guān)注更多動(dòng)態(tài)”，借由用戶希望關(guān)注更多有趣的賬號(hào)的心理，刺激用戶邀請(qǐng)好友：

原版“我的關(guān)注”頁(yè)

“我的關(guān)注”入口流程

3.1.2 “我的關(guān)注”入口

在“我的粉絲”頁(yè)的用戶列表底部新增一個(gè)Bar狀鏈接：“邀請(qǐng)好友加入Lofter，關(guān)注更多動(dòng)態(tài)”，借由用戶對(duì)自己的粉絲數(shù)過(guò)少的失落和不滿心理，刺激用戶前往邀請(qǐng)好友：

原版“我的粉絲”頁(yè)

“我的粉絲”入口流程

3.2 出口方案

3.2.1 “邀請(qǐng)微博好友”出口

由于Lofter已內(nèi)嵌邀請(qǐng)微博好友的接口，可以直接讀取微博好友列表、直接發(fā)送默認(rèn)的邀請(qǐng)文案，因此微博好友的邀請(qǐng)流程基于原版的交互流程設(shè)計(jì)——在未開(kāi)通的微博好友列表中，點(diǎn)擊“邀請(qǐng)“按鈕即可直接發(fā)送邀請(qǐng)，并在屏幕中央彈出Toast提示用戶邀請(qǐng)已發(fā)送。這里由于允許多次發(fā)送邀請(qǐng)信息，因此并沒(méi)有對(duì)”邀請(qǐng)“按鈕分別設(shè)計(jì)點(diǎn)擊前和點(diǎn)擊后的樣式。

“邀請(qǐng)微博好友”出口流程

3.2.2 “邀請(qǐng)微信好友”出口

點(diǎn)擊后調(diào)出微信界面，經(jīng)選擇目標(biāo)用戶、編輯留言、發(fā)送三個(gè)步驟，流程結(jié)束后后由用戶選擇返回Lofter還是留在微信。

“邀請(qǐng)微博好友”出口流程

3.2.3 “邀請(qǐng)通訊錄”出口

點(diǎn)擊后進(jìn)入“邀請(qǐng)通訊錄好友”界面，通過(guò)該界面讀取的系統(tǒng)通訊錄選擇目標(biāo)用戶（支持多選），確認(rèn)選擇后進(jìn)入系統(tǒng)的群發(fā)短信界面，短信發(fā)送后返回“邀請(qǐng)通訊錄好友“界面（便于并引導(dǎo)用戶繼續(xù)邀請(qǐng)遺漏的好友），并彈出toast提示邀請(qǐng)成功。

“邀請(qǐng)通訊錄好友”出口流程

3.2.4 “生成邀請(qǐng)鏈接”出口

點(diǎn)擊后進(jìn)入“生成邀請(qǐng)鏈接”界面，在多行文本輸入框中編輯邀請(qǐng)文案（或直接使用默認(rèn)文案）后，點(diǎn)擊頁(yè)面底部的“復(fù)制邀請(qǐng)鏈接”即可將文本引入剪貼板，用于在其他應(yīng)用中復(fù)制，同時(shí)彈出toast提示復(fù)制成功。復(fù)制成功后界面不跳轉(zhuǎn)返回，滿足用戶在復(fù)制后一旦意識(shí)到有字眼要修改、希望繼續(xù)編輯的需求。

作者：Qinsman，通信行業(yè)UE設(shè)計(jì)師，微信公眾號(hào)：西市饅頭鋪?zhàn)?。博客：http://qinsman.com/，歡迎大家與我交流。

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