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

131 評(píng)論 124821 瀏覽 1139 收藏 12 分鐘

本文作者將結(jié)合自己之前做過的一個(gè)項(xiàng)目原型分享給大家,希望對(duì)0-2歲的產(chǎn)品經(jīng)理、交互設(shè)計(jì)師有所幫助。

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

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

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

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

我:不是讓我慢慢搞嗎?

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

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

一般做社區(qū)功能都會(huì)有關(guān)注的人的動(dòng)態(tài)列表、搜索、話題、推薦用戶這幾個(gè)基本功能模塊,功能的形式或布局不同的產(chǎn)品階段會(huì)有所不同。需要注意的是,產(chǎn)品經(jīng)理可以一開始就規(guī)劃好所有的功能,但不要一次性全部上線掉,一次性上全部功能會(huì)帶來的問題是功能跑起來的難度。

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

功能結(jié)構(gòu)是這樣子的:

第一部分:社區(qū)首頁

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

上線后的一段時(shí)間,需要注意動(dòng)態(tài)的產(chǎn)出的數(shù)量和單個(gè)用戶的瀏覽時(shí)長做一些推送上的調(diào)整,在沒有做關(guān)注列表之前可以做一些減少此類內(nèi)容推送的功能;當(dāng)內(nèi)容量和用戶量都上去后,可以考慮上線關(guān)注列表的功能,這里需要注意一個(gè)坑是,如果沒有“關(guān)注”這一幀,用戶“關(guān)注”別的用戶后能干些什么。我們是這么解決這個(gè)坑的,首先是前期的時(shí)候發(fā)布的新內(nèi)容本來就少,所以用戶進(jìn)來該頁面刷新的時(shí)候,優(yōu)先顯示我關(guān)注過的用戶的最新內(nèi)容在列表的前面,如果我關(guān)注的用戶沒有產(chǎn)生過新內(nèi)容,再去顯示沒關(guān)注過的用戶最新發(fā)布的內(nèi)容。

產(chǎn)品經(jīng)理還需要思考一些邏輯上的邊緣情況,比如別的用戶A停留在該頁面,因?yàn)轫撁鏇]有刷新,此時(shí)用戶A去點(diǎn)擊一條已經(jīng)被刪除了的動(dòng)態(tài),怎么處理?最新動(dòng)態(tài)首先是按照發(fā)布時(shí)間,如果有動(dòng)態(tài)發(fā)布時(shí)間相同、點(diǎn)贊次數(shù)相同、評(píng)論次數(shù)相同,這樣的情況該怎么排序?深入做一個(gè)產(chǎn)品的時(shí)候,特別是功能,細(xì)節(jié)是賊多的,這里產(chǎn)品新人可能考慮沒那么全,還需要多跟團(tuán)隊(duì)請(qǐng)教或多犯錯(cuò),沒別的辦法。

第二部分:搜索

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

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

第三部分:關(guān)注列表

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

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

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

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

雖然用戶去把通訊錄或微博好友導(dǎo)進(jìn)來的概率低,不過建立關(guān)系的時(shí)機(jī)還是需要抓住的,用戶如果愿意導(dǎo)入好友,那證明他們就不太會(huì)流失,這個(gè)是有一個(gè)研究定論,F(xiàn)acebook、領(lǐng)英他們?nèi)パ芯磕切┎涣魇У挠脩籼攸c(diǎn)時(shí),發(fā)現(xiàn)這些用戶至少關(guān)注了5個(gè)人。道長有見過有些產(chǎn)品關(guān)注頁面除了一句提示用戶先去關(guān)注人的文案外,就沒有別的了,這里產(chǎn)品新人一定要注意。

第四部分:動(dòng)態(tài)列表寫評(píng)論

  • 一種是點(diǎn)擊到詳情頁面寫評(píng)論;
  • 另一種是點(diǎn)擊那個(gè)評(píng)論按鈕后就在當(dāng)前頁面彈出寫評(píng)論的面板。

兩種方式?jīng)]有對(duì)錯(cuò),可能有撕逼的人會(huì)來扯說第二種用戶參與門檻更低什么的,建議還是考慮產(chǎn)品本身的訴求:

你的產(chǎn)品是需要把用戶引導(dǎo)到詳情頁面去寫,還是希望用戶在列表頁面去寫?

跟進(jìn)自己的訴求再去定功能。

第五部分:推薦話題

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

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

第六部分:動(dòng)態(tài)詳情頁面

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

動(dòng)態(tài)的詳情頁面需要注意好幾個(gè)問題:

  • 首先是各種狀態(tài)要考慮好,比如沒有人寫評(píng)論或沒有人點(diǎn)贊的情況;
  • 其次是評(píng)論列表要考慮好有兩種榜,一種是所謂的最熱評(píng)論,一種是最新評(píng)論,產(chǎn)品經(jīng)理要考慮什么樣的評(píng)論才能被放在最熱列表里面。另外最熱列表和最新列表是否要去重,這些細(xì)節(jié)都要考慮到的。

第七部分:后臺(tái)

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

所以,一個(gè)最簡單的社區(qū)后臺(tái)至少有動(dòng)態(tài)管理、評(píng)論管理、用戶管理、話題管理功能,復(fù)雜一點(diǎn)的管理邏輯也都會(huì)規(guī)劃在里面;還有一點(diǎn)是數(shù)據(jù)統(tǒng)計(jì)和埋點(diǎn)的需求,大部分的數(shù)據(jù)統(tǒng)建建議用第三方的,第三方的統(tǒng)計(jì)會(huì)更靠譜一點(diǎn);另外就是成本和自己開發(fā)比起來會(huì)更適合,數(shù)據(jù)統(tǒng)計(jì)前期可以按照自己的需求整理,一般是先列出關(guān)鍵指標(biāo),把統(tǒng)計(jì)目的講清楚,然后把路勁列出來,就能得出哪些點(diǎn)需要埋數(shù)據(jù),數(shù)據(jù)統(tǒng)計(jì)不要全統(tǒng)計(jì),記得自己的關(guān)鍵指標(biāo)。

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

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

如果你想獲取文中原型圖源文件,請(qǐng)關(guān)注起點(diǎn)學(xué)院公眾號(hào)(ID:qidianxueyuan666)回復(fù)關(guān)鍵詞“666”獲取下載地址。

如果你想跟我交流原型設(shè)計(jì)技巧,歡迎加QQ群:159912926

#專欄作家#

芒果道長,人人都是產(chǎn)品經(jīng)理專欄作家,起點(diǎn)學(xué)院特聘導(dǎo)師。騰訊課堂【30天教你做一個(gè)APP】作者。

本文獨(dú)家首發(fā)于人人都是產(chǎn)品經(jīng)理,未經(jīng)本站許可,不得轉(zhuǎn)載。

題圖來自 Pexels,基于 CC0 協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 666

    來自四川 回復(fù)
  2. 666

    來自新加坡 回復(fù)
  3. 666

    來自廣東 回復(fù)
  4. 獲益良多

    來自廣東 回復(fù)
  5. 666

    來自四川 回復(fù)
  6. 666

    來自北京 回復(fù)
  7. 666

    來自內(nèi)蒙古 回復(fù)
  8. 道長,你做過社交app的后臺(tái)嗎?

    來自四川 回復(fù)
    1. 有,完整的,今年春節(jié)分享

      來自浙江 回復(fù)
  9. 666

    來自廣東 回復(fù)
  10. 666

    來自湖北 回復(fù)
  11. 666

    來自湖北 回復(fù)
  12. 666還不錯(cuò)

    來自北京 回復(fù)
  13. 666

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

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

      來自浙江 回復(fù)
  15. 666

    來自上海 回復(fù)
  16. 666

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

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

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

    來自廣東 回復(fù)
    1. 我想問問,自從你回復(fù)到現(xiàn)在時(shí)隔兩年多了,小伙伴的練習(xí)的咋樣啦

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

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

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

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

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

    來自湖南 回復(fù)
    1. 最好是交付完美和完整的東西,對(duì)自己負(fù)責(zé),對(duì)認(rèn)真的人負(fù)責(zé)哈

      來自浙江 回復(fù)
  22. 666

    來自江蘇 回復(fù)
  23. 666

    來自廣東 回復(fù)
  24. 666

    來自浙江 回復(fù)
  25. 手動(dòng)點(diǎn)贊!
    另附起點(diǎn)學(xué)院邀請(qǐng)碼會(huì)員uo8oh4e,可得100元入社優(yōu)惠

    來自江蘇 回復(fù)
  26. 公眾號(hào)運(yùn)營出問題啦,麻煩提供下文件的下載,謝謝。

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

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

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

      來自浙江 回復(fù)
    2. mgdz0104

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

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

      來自浙江 回復(fù)
    2. 收到,謝謝

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

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

      來自浙江 回復(fù)
  30. 666

    來自上海 回復(fù)