某社區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. 原型下載后,打不開,到99%會出現一個錯誤。

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

      來自浙江 回復
  5. 666

    來自江蘇 回復
  6. 公眾號的百度網盤鏈接打不開。。。鏈接失效

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

      來自浙江 回復
  7. 用什么畫的原型 Axure?

    來自湖北 回復
    1. 對勁!

      來自浙江 回復
  8. 第四部分,關于評論的兩種跳轉方式,雖然對錯談不上,我認為還是有高低之分的。
    根據原型圖的表述,評論功能是用“輸入框”來承載的,那么在當前頁面進行評論是最合適的。從最本質的原理來解釋,就是現實世界延伸到APP中。例如:我在紙質快遞單的表格中寫寄件信息,我的筆戳到紙質快遞單的表格時,快遞單是不會有任何變化的。
    如果某些原因,你需要評論功能跳轉到新頁面,那么用icon來代替輸入框更合適,因為點擊icon產生變化是正常的。

    來自北京 回復
    1. 其他方面學到很多知識,謝謝作者。提出這個問題,是我的一些理解,希望和作者討論交流

      來自北京 回復
    2. 最新版的微博評論就是文章里的這種形式,也可以展開至全屏,老版本是直接跳轉到新頁面。個人覺得微博評論比較多部都是很簡短的,改版有一定的可取之處,適合快捷評論,但是也有缺點:在輸入框里,需要上下滑動比較費勁,而且輸入框比較小,文字的size也比較小。跳轉到新的一個頁面,用戶有一種全局觀的感受,有利于用戶輸入優質的評論,更適合長文字的評論。個人拙見,歡迎討論。 ??

      來自福建 回復
    3. 時隔多年,我還是很喜歡像你一樣討論產品的伙伴!

      來自浙江 回復
  9. 灰常有收獲!

    來自廣東 回復
    1. 我也灰常開心你有收獲

      來自浙江 回復
  10. 非常棒,這種原型看著就舒服,為什么我做出來的像被狗啃過的一樣

    來自浙江 回復
    1. 那你家狗得多累,每次還有跟你過原型,還要啃一下,加油加油

      來自浙江 回復
  11. 以后我也要黑白灰,看的我神清氣爽

    來自上海 回復
    1. 哈哈哈,我也是從花花綠綠過來的

      來自浙江 回復
  12. 排版工整。感覺設計師只需要上色,找圖和畫 icon就不需要考慮其它的了?!霸绞怯薪涷灥漠a品經理考慮的東西是背后的邏輯和關系,越不會注重原型的表達”這種說法您怎么看?

    來自廣東 回復
    1. 我猜測,一般說這話的人要么是有錢有勢,要么是原型畫的很差。對自己認真,對認真的人認真,其他的人的話語,不重要,畢竟,我們跟他們不熟!加油!

      來自浙江 回復
  13. 先收藏再還原

    回復
    1. 還原了沒

      來自浙江 回復
  14. 666

    回復
  15. 謝謝分享,很受用!
    作者也是個金庸迷啊

    來自上海 回復
    1. 嗯,最愛木婉清

      來自浙江 回復
  16. 感謝芒果道長?。?!

    來自北京 回復
    1. 客氣客氣

      來自浙江 回復
  17. 贊賞請道長喝茶

    回復
    1. 哇,謝謝

      來自浙江 回復
  18. 感謝作者的分享,雖然畫原型并非一個產品經理最重要的工作,但是一份優雅精致的原型能夠為自己贏得尊重。 ??

    來自浙江 回復
    1. 是的,認真準沒錯

      來自浙江 回復
  19. 我從微信那個百度云鏈接的是400多KB的 原型不對啊

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

      來自浙江 回復
  20. 看完原型了。。。
    治好了多年的強迫癥
    收下我的膝蓋

    來自浙江 回復
    1. 我從百度云下載的是400多KB的 是不是不是啊

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

      來自浙江 回復
    3. 膝蓋寄過來一下

      來自浙江 回復
  21. 學習了

    來自安徽 回復
    1. 動手做沒

      來自浙江 回復
  22. 頁面做的真的好。學習了

    回復
    1. 動手試試沒

      來自浙江 回復
  23. mark

    來自廣東 回復
    1. hi,frank

      來自浙江 回復
  24. 請我道長,最新頁面一眼看過去,吸引眼球是用戶頭像,名稱,關注等元素;你想表達什么?是希望用戶關注嗎?你想用用戶干什么?

    來自廣東 回復
    1. 是的!
      社交的邏輯:性或臉,所以一般來講,帶點設計或有點社交要求的產品都會把用戶的信息做的相對顯眼!

      來自浙江 回復
  25. 原型很不錯,可以看出有很不錯的功底,不知道精選頁面是什么?可以補充一下嗎?

    來自廣東 回復
    1. 可以的,之前太忙了,今年春節我會更新掉

      來自浙江 回復
  26. 我看了移動端原型,請問285*575的尺寸是基于什么考慮?

    來自北京 回復
    1. 好問題,沒啥考慮,不要糾結哈

      來自浙江 回復
  27. 您好,請問在哪能下載您的原型???

    回復
    1. 真的有這么懶的讀者。。。

      來自廣東 回復
    2. 哈哈哈,可能那位同學也沒找到地址

      來自浙江 回復
    3. 1:身為互聯網人,不要只關注標題
      2:運營推廣的方式超乎你想象,有時令人發指
      3:重邏輯,輕原型。探索產品的意義比畫高保真原型更值得你花時間

      來自廣東 回復
    4. 厲害

      來自河南 回復
    5. 贊!

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

      來自浙江 回復
  28. mark

    回復
    1. frank , again

      來自浙江 回復
  29. mark

    回復
    1. 直接點,關注

      來自浙江 回復
  30. 原型畫的不錯,很規整,我也喜歡把所有頁面放在一個頁面里,這樣看起來比較順暢不會被打斷。 ??

    來自廣東 回復
    1. 我們在哪見過?

      來自浙江 回復