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

好友邀請是當前許多應用產品——尤其是社交性較強的產品都有的一個推廣方式。而Lofter作為基于繪畫、攝影、設計作品分享的一個社交性與內容性兼備的平臺，在當前版本還沒有提供好友邀請功能，不得不說是一個小小的遺憾。

注：本文章基于Lofter iOS端 V5.2.3版本進行討論。

1. 用戶場景

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

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

1.1 場景一

1.1.1 用戶畫像

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

1.1.2 場景

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

1.2 場景二

1.2.1 用戶畫像

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

1.2.2 場景

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

2. 流程設計

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

流程圖

3. 交互方案

3.1 入口方案

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

3.1.1 “添加關注”入口

由首頁導航欄右端的“添加關注”icon發起，進入“添加關注”頁面后，在導航欄右端新增“邀請好友”鏈接。

原版首頁

原版“添加關注”頁

“添加關注”入口流程

3.1.2 “我的關注”入口

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

原版“我的關注”頁

“我的關注”入口流程

3.1.2 “我的關注”入口

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

原版“我的粉絲”頁

“我的粉絲”入口流程

3.2 出口方案

3.2.1 “邀請微博好友”出口

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

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

3.2.2 “邀請微信好友”出口

點擊后調出微信界面，經選擇目標用戶、編輯留言、發送三個步驟，流程結束后后由用戶選擇返回Lofter還是留在微信。

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

3.2.3 “邀請通訊錄”出口

點擊后進入“邀請通訊錄好友”界面，通過該界面讀取的系統通訊錄選擇目標用戶（支持多選），確認選擇后進入系統的群發短信界面，短信發送后返回“邀請通訊錄好友“界面（便于并引導用戶繼續邀請遺漏的好友），并彈出toast提示邀請成功。

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

3.2.4 “生成邀請鏈接”出口

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

作者：Qinsman，通信行業UE設計師，微信公眾號：西市饅頭鋪子。博客：http://qinsman.com/，歡迎大家與我交流。

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