某社區APP完整原型案例(附源文件下載)

131 評論 124789 瀏覽 1139 收藏 12 分鐘

本文作者將結合自己之前做過的一個項目原型分享給大家,希望對0-2歲的產品經理、交互設計師有所幫助。

電話響起,屏幕上的名字是“催稿的老曹”,我沒接;我媽問我電話為什么沒接,我說沒聽見;接著又打來了,想想還是接一下吧。

催稿的老曹:道長,我是老曹哇,最近人人都是產品經理QQ群有好多小伙伴找我要完整點的APP原型,我看你APP項目做的比較多,原型畫的也比較規范比較贊,能不能把你之前已經上線的項目分享一份給新人朋友學習學習,不著急,可以多給你點時間慢慢搞!

我:真的可以慢慢搞嗎? (心理完全不信)

催稿的老曹:是啊,要不明天就給我吧。

我:不是讓我慢慢搞嗎?

催稿的老曹:是的啊,一天時間還不慢嗎?哈哈(接著電話掛了)

想想老曹也是個有情懷的人,作為人人都是產品經理CEO還親自來約稿,真是為中國產品經理成長操碎了心。于是,我決定把自己之前做過的一個項目原型分享給大家,希望對0-2歲的產品經理、交互設計師有所幫助。

一般做社區功能都會有關注的人的動態列表、搜索、話題、推薦用戶這幾個基本功能模塊,功能的形式或布局不同的產品階段會有所不同。需要注意的是,產品經理可以一開始就規劃好所有的功能,但不要一次性全部上線掉,一次性上全部功能會帶來的問題是功能跑起來的難度。

  • 首先是用戶使用的難度,比如搜索,產品在剛開始上線的時候是不合適上線的,搜索是高級功能,用戶很熟悉了以后才知道搜什么,前期是沒有什么用的;其次是剛開始上線的時候,可以被搜到的內容很少,用戶搜一兩次后發現搜不到就對這個功能放棄了。
  • 其次是運營的難度,比如話題上線后,需要考慮更新頻率、停留時長、內容等等,一般話題除了結合自己產品本身業務有關的內容外,還有是根據用戶喜好去鼓勵一部分用戶產出質量好的內容給另一部分用戶消費的目的。

功能結構是這樣子的:

第一部分:社區首頁

(右擊在新標簽頁中打開,即可查看大圖)

上線后的一段時間,需要注意動態的產出的數量和單個用戶的瀏覽時長做一些推送上的調整,在沒有做關注列表之前可以做一些減少此類內容推送的功能;當內容量和用戶量都上去后,可以考慮上線關注列表的功能,這里需要注意一個坑是,如果沒有“關注”這一幀,用戶“關注”別的用戶后能干些什么。我們是這么解決這個坑的,首先是前期的時候發布的新內容本來就少,所以用戶進來該頁面刷新的時候,優先顯示我關注過的用戶的最新內容在列表的前面,如果我關注的用戶沒有產生過新內容,再去顯示沒關注過的用戶最新發布的內容。

產品經理還需要思考一些邏輯上的邊緣情況,比如別的用戶A停留在該頁面,因為頁面沒有刷新,此時用戶A去點擊一條已經被刪除了的動態,怎么處理?最新動態首先是按照發布時間,如果有動態發布時間相同、點贊次數相同、評論次數相同,這樣的情況該怎么排序?深入做一個產品的時候,特別是功能,細節是賊多的,這里產品新人可能考慮沒那么全,還需要多跟團隊請教或多犯錯,沒別的辦法。

第二部分:搜索

(右擊在新標簽頁中打開,即可查看大圖)

搜索在界面上就比較容易理解一些,需要深耕的是搜索展示結果的精準度,比如用戶搜索的關鍵字是A,那結果里面優先排列出A的來,其次才是AA、AB、ABC等等,第一期的時候搜索規則不用做很復雜,做一個簡單的功能先上線給用戶使用,再去優化迭代。

第三部分:關注列表

(右擊在新標簽頁中打開,即可查看大圖)

這里沒什么在排序上面和前面最新的一樣就行,注意關注按鈕這里不顯示,另外考慮兩個邊緣情況,第一個是用戶如果沒有登錄的時候,有兩個交互場景可以采用,場景一是你可以定義用戶點擊導航條上面的“關注”切換時就跳轉到登錄頁面;場景二是用戶可以進入該頁面,不過頁面上提示用戶去登錄并給出登錄按鈕。

第二個邊緣情況是用戶沒有關注過任何人,那么道長的建議是用下面的方式去做:

(右擊在新標簽頁中打開,即可查看大圖)

雖然用戶去把通訊錄或微博好友導進來的概率低,不過建立關系的時機還是需要抓住的,用戶如果愿意導入好友,那證明他們就不太會流失,這個是有一個研究定論,Facebook、領英他們去研究那些不流失的用戶特點時,發現這些用戶至少關注了5個人。道長有見過有些產品關注頁面除了一句提示用戶先去關注人的文案外,就沒有別的了,這里產品新人一定要注意。

第四部分:動態列表寫評論

  • 一種是點擊到詳情頁面寫評論;
  • 另一種是點擊那個評論按鈕后就在當前頁面彈出寫評論的面板。

兩種方式沒有對錯,可能有撕逼的人會來扯說第二種用戶參與門檻更低什么的,建議還是考慮產品本身的訴求:

你的產品是需要把用戶引導到詳情頁面去寫,還是希望用戶在列表頁面去寫?

跟進自己的訴求再去定功能。

第五部分:推薦話題

(右擊在新標簽頁中打開,即可查看大圖)

推薦話題列表沒什么好講的,按時間排序就行了,有見過按熱度排序的,按熱度排序不太可取,畢竟話題還是有一定的時效性的,話題超過一定的時間后不排除會有活躍度,不過還是推薦用時間排序。

第六部分:動態詳情頁面

(右擊在新標簽頁中打開,即可查看大圖)

動態的詳情頁面需要注意好幾個問題:

  • 首先是各種狀態要考慮好,比如沒有人寫評論或沒有人點贊的情況;
  • 其次是評論列表要考慮好有兩種榜,一種是所謂的最熱評論,一種是最新評論,產品經理要考慮什么樣的評論才能被放在最熱列表里面。另外最熱列表和最新列表是否要去重,這些細節都要考慮到的。

第七部分:后臺

(右擊在新標簽頁中打開,即可查看大圖)

所以,一個最簡單的社區后臺至少有動態管理、評論管理、用戶管理、話題管理功能,復雜一點的管理邏輯也都會規劃在里面;還有一點是數據統計和埋點的需求,大部分的數據統建建議用第三方的,第三方的統計會更靠譜一點;另外就是成本和自己開發比起來會更適合,數據統計前期可以按照自己的需求整理,一般是先列出關鍵指標,把統計目的講清楚,然后把路勁列出來,就能得出哪些點需要埋數據,數據統計不要全統計,記得自己的關鍵指標。

……………………………………………… 我是美麗的分界線 ………………………………………………

這篇文章剛交稿,老曹又來跟我說,要不干脆寫一系列吧,這樣大家學起來也系統一些。作為基友,我無法拒絕。所以,接下來我還會做更多連載分享,大家多多關注。

如果你想獲取文中原型圖源文件,請關注起點學院公眾號(ID:qidianxueyuan666)回復關鍵詞“666”獲取下載地址。

如果你想跟我交流原型設計技巧,歡迎加QQ群:159912926

#專欄作家#

芒果道長,人人都是產品經理專欄作家,起點學院特聘導師。騰訊課堂【30天教你做一個APP】作者。

本文獨家首發于人人都是產品經理,未經本站許可,不得轉載。

題圖來自 Pexels,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 666

    來自四川 回復
  2. 666

    來自新加坡 回復
  3. 666

    來自廣東 回復
  4. 獲益良多

    來自廣東 回復
  5. 666

    來自四川 回復
  6. 666

    來自北京 回復
  7. 666

    來自內蒙古 回復
  8. 道長,你做過社交app的后臺嗎?

    來自四川 回復
    1. 有,完整的,今年春節分享

      來自浙江 回復
  9. 666

    來自廣東 回復
  10. 666

    來自湖北 回復
  11. 666

    來自湖北 回復
  12. 666還不錯

    來自北京 回復
  13. 666

    來自北京 回復
  14. 在哪里能下載下來呢?

    來自上海 回復
    1. 剛更新的下載鏈接:https://share.weiyun.com/oJpndk2j

      來自浙江 回復
  15. 666

    來自上海 回復
  16. 666

    來自江蘇 回復
  17. 為什么我下下來的只有一部分啊?

    來自重慶 回復
    1. 剛更新的下載鏈接:https://share.weiyun.com/oJpndk2j

      來自浙江 回復
  18. 牛逼!原型圖簡潔又美麗,準備模仿道長的做一次練練手

    來自廣東 回復
    1. 我想問問,自從你回復到現在時隔兩年多了,小伙伴的練習的咋樣啦

      來自浙江 回復
  19. 道長!我來晚了,第一篇的原型被第二篇的原型覆蓋了,第一篇的原型的鏈接能給一下嗎?

    回復
    1. 剛更新的下載鏈接:https://share.weiyun.com/oJpndk2j

      來自浙江 回復
  20. 同問原圖 下載地址啊

    來自湖南 回復
    1. 剛更新的下載鏈接:https://share.weiyun.com/oJpndk2j

      來自浙江 回復
  21. 道長,您好,仔細看了您分享的原型,是沒有做任何交互的低保真原型,想問一下,平時我們給研發的交付版本可以是這種形式嗎?或者說帶點交互的低保真原型會不會更好

    來自湖南 回復
    1. 最好是交付完美和完整的東西,對自己負責,對認真的人負責哈

      來自浙江 回復
  22. 666

    來自江蘇 回復
  23. 666

    來自廣東 回復
  24. 666

    來自浙江 回復
  25. 手動點贊!
    另附起點學院邀請碼會員uo8oh4e,可得100元入社優惠

    來自江蘇 回復
  26. 公眾號運營出問題啦,麻煩提供下文件的下載,謝謝。

    來自上海 回復
    1. 剛更新的下載鏈接:https://share.weiyun.com/oJpndk2j

      來自浙江 回復
  27. 原型做的非常好,方便加個微信交流嗎?

    來自江蘇 回復
    1. 剛更新的下載鏈接:https://share.weiyun.com/oJpndk2j

      來自浙江 回復
    2. mgdz0104

      來自浙江 回復
  28. 原形圖下載地址?

    來自四川 回復
    1. 剛更新的下載鏈接:https://share.weiyun.com/oJpndk2j

      來自浙江 回復
    2. 收到,謝謝

      來自四川 回復
  29. 原形圖下載地址呢?

    來自上海 回復
    1. 剛更新的下載鏈接:https://share.weiyun.com/oJpndk2j

      來自浙江 回復
  30. 666

    來自上海 回復