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

从零开始学运营,10年运营老司机带路,2天线下集训+1年在线学习,做个优秀的运营人。了解详情
本文作者将结合自己之前做过的一个项目原型分享给大家,希望对0-2岁的产品经理、交互设计师有所帮助。
电话响起,屏幕上的名字是“催稿的老曹”,我没接;我妈问我电话为什么没接,我说没听见;接着又打来了,想想还是接一下吧。
催稿的老曹:道长,我是老曹哇,最近人人都是产品经理QQ群有好多小伙伴找我要完整点的APP原型,我看你APP项目做的比较多,原型画的也比较规范比较赞,能不能把你之前已经上线的项目分享一份给新人朋友学习学习,不着急,可以多给你点时间慢慢搞! 我:真的可以慢慢搞吗? (心理完全不信) 催稿的老曹:是啊,要不明天就给我吧。 我:不是让我慢慢搞吗? 催稿的老曹:是的啊,一天时间还不慢吗?哈哈(接着电话挂了)
想想老曹也是个有情怀的人,作为人人都是产品经理CEO还亲自来约稿,真是为中国产品经理成长操碎了心。于是,我决定把自己之前做过的一个项目原型分享给大家,希望对0-2岁的产品经理、交互设计师有所帮助。 一般做社区功能都会有关注的人的动态列表、搜索、话题、推荐用户这几个基本功能模块,功能的形式或布局不同的产品阶段会有所不同。需要注意的是,产品经理可以一开始就规划好所有的功能,但不要一次性全部上线掉,一次性上全部功能会带来的问题是功能跑起来的难度。
  1. 首先是用户使用的难度,比如搜索,产品在刚开始上线的时候是不合适上线的,搜索是高级功能,用户很熟悉了以后才知道搜什么,前期是没有什么用的;其次是刚开始上线的时候,可以被搜到的内容很少,用户搜一两次后发现搜不到就对这个功能放弃了。
  2. 其次是运营的难度,比如话题上线后,需要考虑更新频率、停留时长、内容等等,一般话题除了结合自己产品本身业务有关的内容外,还有是根据用户喜好去鼓励一部分用户产出质量好的内容给另一部分用户消费的目的。
功能结构是这样子的:

第一部分:社区钱柜娱乐777

(右击在新标签页中打开,即可查看大图) 上线后的一段时间,需要注意动态的产出的数量和单个用户的浏览时长做一些推送上的调整,在没有做关注列表之前可以做一些减少此类内容推送的功能;当内容量和用户量都上去后,可以考虑上线关注列表的功能,这里需要注意一个坑是,如果没有“关注”这一帧,用户“关注”别的用户后能干些什么。我们是这么解决这个坑的,首先是前期的时候发布的新内容本来就少,所以用户进来该页面刷新的时候,优先显示我关注过的用户的最新内容在列表的前面,如果我关注的用户没有产生过新内容,再去显示没关注过的用户最新发布的内容。 产品经理还需要思考一些逻辑上的边缘情况,比如别的用户A停留在该页面,因为页面没有刷新,此时用户A去点击一条已经被删除了的动态,怎么处理?最新动态首先是按照发布时间,如果有动态发布时间相同、点赞次数相同、评论次数相同,这样的情况该怎么排序?深入做一个产品的时候,特别是功能,细节是贼多的,这里产品新人可能考虑没那么全,还需要多跟团队请教或多犯错,没别的办法。

第二部分:搜索

(右击在新标签页中打开,即可查看大图) 搜索在界面上就比较容易理解一些,需要深耕的是搜索展示结果的精准度,比如用户搜索的关键字是A,那结果里面优先排列出A的来,其次才是AA、AB、ABC等等,第一期的时候搜索规则不用做很复杂,做一个简单的功能先上线给用户使用,再去优化迭代。

第三部分:关注列表

(右击在新标签页中打开,即可查看大图) 这里没什么在排序上面和前面最新的一样就行,注意关注按钮这里不显示,另外考虑两个边缘情况,第一个是用户如果没有登录的时候,有两个交互场景可以采用,场景一是你可以定义用户点击导航条上面的“关注”切换时就跳转到登录页面;场景二是用户可以进入该页面,不过页面上提示用户去登录并给出登录按钮。 第二个边缘情况是用户没有关注过任何人,那么道长的建议是用下面的方式去做: (右击在新标签页中打开,即可查看大图) 虽然用户去把通讯录或微博好友导进来的概率低,不过建立关系的时机还是需要抓住的,用户如果愿意导入好友,那证明他们就不太会流失,这个是有一个研究定论,Facebook、领英他们去研究那些不流失的用户特点时,发现这些用户至少关注了5个人。道长有见过有些产品关注页面除了一句提示用户先去关注人的文案外,就没有别的了,这里产品新人一定要注意。

第四部分:动态列表写评论

  1. 一种是点击到详情页面写评论;
  2. 另一种是点击那个评论按钮后就在当前页面弹出写评论的面板。
两种方式没有对错,可能有撕逼的人会来扯说第二种用户参与门槛更低什么的,建议还是考虑产品本身的诉求:
你的产品是需要把用户引导到详情页面去写,还是希望用户在列表页面去写?
跟进自己的诉求再去定功能。

第五部分:推荐话题

(右击在新标签页中打开,即可查看大图) 推荐话题列表没什么好讲的,按时间排序就行了,有见过按热度排序的,按热度排序不太可取,毕竟话题还是有一定的时效性的,话题超过一定的时间后不排除会有活跃度,不过还是推荐用时间排序。

第六部分:动态详情页面

(右击在新标签页中打开,即可查看大图) 动态的详情页面需要注意好几个问题:
  1. 首先是各种状态要考虑好,比如没有人写评论或没有人点赞的情况;
  2. 其次是评论列表要考虑好有两种榜,一种是所谓的最热评论,一种是最新评论,产品经理要考虑什么样的评论才能被放在最热列表里面。另外最热列表和最新列表是否要去重,这些细节都要考虑到的。

第七部分:后台

(右击在新标签页中打开,即可查看大图) 所以,一个最简单的社区后台至少有动态管理、评论管理、用户管理、话题管理功能,复杂一点的管理逻辑也都会规划在里面;还有一点是数据统计和埋点的需求,大部分的数据统建建议用第三方的,第三方的统计会更靠谱一点;另外就是成本和自己开发比起来会更适合,数据统计前期可以按照自己的需求整理,一般是先列出关键指标,把统计目的讲清楚,然后把路劲列出来,就能得出哪些点需要埋数据,数据统计不要全统计,记得自己的关键指标。 ……………………………………………… 我是美丽的分界线 ……………………………………………… 这篇文章刚交稿,老曹又来跟我说,要不干脆写一系列吧,这样大家学起来也系统一些。作为基友,我无法拒绝。所以,接下来我还会做更多连载分享,大家多多关注。 如果你想获取文中原型图源文件,请关注起点学院公众号(ID:qidianxueyuan666)回复关键词“666”获取下载地址。 如果你想跟我交流原型设计技巧,欢迎加QQ群:159912926

#专栏作家#

芒果道长,人人都是产品经理专栏作家,起点学院特聘导师。腾讯课堂【30天教你做一个APP】作者。 本文独家首发于人人都是产品经理,未经本站许可,不得转载。 题图来自 Pexels,基于 CC0 协议
打赏也是一种认可
6人打赏
评论
有话不说憋着难受!
  • 原型下载后,打不开,到99%会出现一个错误。
    回复
  • 666
    回复
  • 公众号的百度网盘链接打不开。。。链接失效
    回复
  • 用什么画的原型 Axure?
    回复
  • 第四部分,关于评论的两种跳转方式,虽然对错谈不上,我认为还是有高低之分的。
    根据原型图的表述,评论功能是用“输入框”来承载的,那么在当前页面进行评论是最合适的。从最本质的原理来解释,就是现实世界延伸到APP中。例如:我在纸质快递单的表格中写寄件信息,我的笔戳到纸质快递单的表格时,快递单是不会有任何变化的。
    如果某些原因,你需要评论功能跳转到新页面,那么用icon来代替输入框更合适,因为点击icon产生变化是正常的。
    回复
  • 其他方面学到很多知识,谢谢作者。提出这个问题,是我的一些理解,希望和作者讨论交流
    回复
  • 最新版的微博评论就是文章里的这种形式,也可以展开至全屏,老版本是直接跳转到新页面。个人觉得微博评论比较多部都是很简短的,改版有一定的可取之处,适合快捷评论,但是也有缺点:在输入框里,需要上下滑动比较费劲,而且输入框比较小,文字的size也比较小。跳转到新的一个页面,用户有一种全局观的感受,有利于用户输入优质的评论,更适合长文字的评论。个人拙见,欢迎讨论。 ;-)
    回复
  • 灰常有收获!
    回复
  • 很给力的文章啊,有用Mockplus做原型的吗?很棒的国产原型工具,上手快,操作简单!
    回复
  • 非常棒,这种原型看着就舒服,为什么我做出来的像被狗啃过的一样
    回复
  • 多做,把每个原型也当产品一样去做,不停的优化!
    回复
  • 以后我也要黑白灰,看的我神清气爽
    回复
  • 哈哈哈 彩色的尴尬一下, 重要的是避开评审的时候一堆人跟你扯用颜色不对巴拉巴拉,另外不给UI干扰~
    回复
  • 排版工整。感觉设计师只需要上色,找图和画 icon就不需要考虑其它的了。“越是有经验的产品经理考虑的东西是背后的逻辑和关系,越不会注重原型的表达”这种说法您怎么看?
    回复
  • 分软实力和硬实力,软实力就是沟通和逻辑了,硬实力就是你交付给团队的东西,比如原型和文档,做的完整和做的更好,团队协作效率也更高,相信我。
    回复
  • 有句话叫做“演员不一定要好看,更要有实力”——如果这个演员本身非常好看,就更好了。
    回复
  • 先收藏再还原
    回复
  • 666
    回复
  • 谢谢分享,很受用!
    作者也是个金庸迷啊
    回复
  • 哈哈 嗯 尤其喜欢木婉清
    回复
  • 感谢芒果道长!!!
    回复
  • 你开森就好 哈哈
    回复
  • 赞赏请道长喝茶
    回复
  • 感谢认同
    回复
  • 感谢作者的分享,虽然画原型并非一个产品经理最重要的工作,但是一份优雅精致的原型能够为自己赢得尊重。 ;-)
    回复
  • 为产品负责,更为自己负责,所以,把自己的活干到精致是基本要求,共勉,小伙伴~~
    回复
  • 把源文件下载之后,发现里面非常规范,各种跳转的流程和细节考虑也非常严谨。我觉得可以当作学习的模板。
    回复
  • 我从微信那个百度云链接的是400多KB的 原型不对啊
    回复
  • 源文件里面每个页面下方都把页面逻辑和交互逻辑写上去了,所以页面看起来不一样么?
    回复
  • 看完原型了。。。
    治好了多年的强迫症
    收下我的膝盖
    回复
  • 我从百度云下载的是400多KB的 是不是不是啊
    回复
  • ;-) 请邮顺丰~~哈哈
    回复
  • :grin: 到付吗
    回复
  • 学习了
    回复
  • 能帮到你我也很嗨皮~
    回复
  • 页面做的真的好。学习了
    回复
  • 还有下一期,继续关注哈~~
    回复
  • mark
    回复
  • 请我道长,最新页面一眼看过去,吸引眼球是用户头像,名称,关注等元素;你想表达什么?是希望用户关注吗?你想用用户干什么?
    回复
  • 我的原型只阐明功能结构哈,
    希望用户干什么更多是UI和交互去引导,比如关注按钮的颜色、面积、文字粗细、动效等都会影响用户使用该功能的意愿。
    更多还是需要结合自己产品所处的阶段去做功能哈,比如你强烈的需要用户去关注,那么就把关注功能做明显点。
    回复
  • 原型很不错,可以看出有很不错的功底,不知道精选页面是什么?可以补充一下吗?
    回复
  • 我感觉应该可以的,你都这么说了,老曹应该会拿刀架着我补充的吧~~~ :cry:
    回复
  • 我看了移动端原型,请问285*575的尺寸是基于什么考虑?
    回复
  • 宽度是iphone的等比缩放,高度开始的时候我是507,后面发现没什么用,我加高是为了原型展示的信息更多一点。 有人说原型一定要按照UI的尺寸缩放做,这个说法不准确,举个简单的例子,UI 按照i6分辨率做的文字是30px,我们缩放到原型的尺寸后发现字号对不上了。。 强调一点哈,原型的目的是表达清楚功能。
    回复
  • 您好,请问在哪能下载您的原型啊?
    回复
  • 真的有这么懒的读者。。。
    回复
  • 习惯就好,这样的人非常多。
    回复
  • 既然说有,就应该可以找到,否则就说没有或者不明确表示!
    回复
  • 严重建议老曹,APP扫码登陆web端
    不然我老是忘记密码啊,web又要登陆才能评论😭😭
    回复
  • 以后会加上去的。
    回复
  • 1:身为互联网人,不要只关注标题
    2:运营推广的方式超乎你想象,有时令人发指
    3:重逻辑,轻原型。探索产品的意义比画高保真原型更值得你花时间
    回复
  • 你说的非常有道理。但是对于新人而言,原型基本功是必须要掌握好的。本文就是针对新人的。
    回复
  • 请关注起点学院公众号(ID:qidianxueyuan666),然后回复关键词“666”获取下载地址 ~~
    回复
  • mark
    回复
  • mark
    回复
  • 原型画的不错,很规整,我也喜欢把所有页面放在一个页面里,这样看起来比较顺畅不会被打断。 :idea:
    回复
  • 老铁握爪啊~
    回复
  • 钱柜娱乐777