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

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

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

1. 用戶場景

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

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

1.1 場景一

1.1.1 用戶畫像

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

1.1.2 場景

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

1.2 場景二

1.2.1 用戶畫像

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

1.2.2 場景

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

2. 流程設(shè)計

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

流程圖

3. 交互方案

3.1 入口方案

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

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

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

原版首頁

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

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

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

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

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

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

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

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

原版“我的粉絲”頁

“我的粉絲”入口流程

3.2 出口方案

3.2.1 “邀請微博好友”出口

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

“邀請微博好友”出口流程

3.2.2 “邀請微信好友”出口

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

“邀請微博好友”出口流程

3.2.3 “邀請通訊錄”出口

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

“邀請通訊錄好友”出口流程

3.2.4 “生成邀請鏈接”出口

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

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

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