手把手教你设计SNS社区

一、前言
1、本教程面向：IT互联网企业的产品经理（PM）、产品设计（PD）从业人员或爱好者。

2、本连载SNS社区教程，为了帮这两年经济不景气，特别是互联网企业内需缩减的情势下，促进社区类产品设计人员再就业，提高职业技能就好业。

3、本教程涉及的产品工具有：Rationalrose、Axure、Word （UML用例、流程、交互页面）另外的Mindmanger已经在脑中完成，不再提及。

其实不管用什么工具，只要在最短的时间内，把需求最清楚明白的表述清楚就可以。

4、作者：狒狒,IT产品从业人员，一直进行产品设计以及用户体验方面的学习，水平有限，大家请勿拍砖。

二、目录
三、正文
1、需求分析
很多产品经理，一上来又看看开心、看看校内，然后依葫芦画瓢写PRD显然是不对的。

每个公司、同样的产品往往研发运营的目的都是不太一样的。

所以仿效现成的界面功能是不可取的，所以一定要充分的去听、去听我们自己做社区，以下6点到底是什么样的情况。

做到心中有树以后，再开始进行头脑风暴（构思），把抽象的社区的概念形象起来。

1）你得要清楚公司（你们老板）想要做什么样的SNS社区？
2）做这个SNS社区有什么目的？是要做平台，还是要做工具？
3）要做的这个SNS社区，用户定位是哪些群体？
4）要做的这个SNS社区，应该有哪些模块，或要实现哪些功能？
5）要做的这个SNS社区，要与原来的系统结合？原系统底层逻辑是什么样子的？
6）要做的这个SNS社区，产品框架的增资部分或收费部分应该怎么预留或处理？
7）要做的这个SNS社区，公司给我人力、物力，以及项目的战略周期是多长？
2、竞争对手分析
竞争对手分析简单的讲讲，就是同样做社区，有哪些公司在做？有哪些做的比较好？社区A与社区B的差异在哪里？它们的运营数据是怎么样一个情况？和自己定位相近的产品都有哪些？我们的S NS社区差异化优势或竞争优势在哪里？……
通常的就是在自己没有做这个SNS社区通过媒体的调查、用户的调查、第三方数据得到一个综合的报表分析。

然后结合自身情况，进行可行性分析，进行自我定位的合理调整。

所以和谁比，怎么比，如何比，具体量化到哪个层面都是很重要的。

最后公司的领导们也清楚了，自己也清楚了，兄弟们FIRE,开工吧。

圆桌会议几轮讨论产品总监、产品经理们接着忙开。

补充一点：很多公司老板就是说要做个什么东西，也没有很明确的概念。

很多产品经理就是抄抄改改，最后SNS社区需求写OK了，用户体验的细节也OK了，产品还是缺乏灵魂。

当然跟风也没有办法，大家想必也见多了，同时也很无奈，说到底作为执行层大家都是打工的。

3、写需求
不要嫌我啰嗦，上面这么多是为了照顾一些新手。

想必大家还是对下面开始的内容感兴趣。

1）画图玩
为什么要画图呢，图体验思路，图可以组织逻辑，如果你的逻辑还不错可以直接在脑子里进行抽象思维，那我还是建议你把想法画出来。

接下来我打开ROSE画个图，至于大家可选用的工具多了，此处不做说明。

2）定目录
我个人的理解为：“逻辑条理化”，很多人说，你这么干繁琐不繁琐啊。

我认为这个过程是必要的，且不可缺少的。

究其原因是因为你有了一个推过反复推敲的可行的目录，才能更合适的展开或变更需求。

要不很多情况下，写，写了一半断电了。

这种情况应该说是很多的，其实很简单的养个一个好的习惯就可以避免了。

明确有哪些模块，每个模块有哪些功能。

喜欢脑爆的朋友们可以先通过Mind_manager画好，我省略了这一步，直接在AXURE上把目录定下来。

接下来我为大家写一个SNS社区的目录出来，看看是不是很直观。

【图11】
作为经验之谈，我一般先在axure里面就SNS社区把目录可能涉及的所有交互页面，都先初步命名好，然后建一个全局导航，作为axure模板，这样导航效果一做好，加上各个的链接，这样整体线框就出来了。

很大程序上提高了写需求的效率。

不信你也可以试试。

【图12】
说明：基本上整个目录结构什么都OK以后接下来就开始写原型需求了，写原型设计的时候通常注意2点：
1、尽可能的出线框图，产品经理们不要把太多的时间花在页面风格或页面原型表现的细节上。

这样很容易浪费时间，等你的页面交互都弄好后，可以根据讨论好的风格让设计师进行设计；
2、页面布局的时候一定要合理，线性统一。

刚入门的产品经理想到哪就写到哪，策划到哪，到最后交付的时候就会发现100个页面60个不太一样，这样也造成了美工设计人员很不好执行。

所以产品经理在写PRD需求的时候，一定要理解，哪些模块是通用的，通用模块都适用于哪些功能；哪些模块是不同的，整个页面结构的划分为什么要这样。

【图13】
3）分解安排需求
模块这么多，预估怎么做也得得一个月，到底要怎么合理的安排优先级呢？我们可以把系统功能拆分来，例如下图所示的：将优先级分为：核心功能和扩展功能，以及核心功能对应的延展功能，以及扩展功能对应的延展功能。

打个比方，S NS社区一般会先做基本社区框架，如：会员系统的设计、好友的约定划分功能解为核心功能，
【图14】
反过来也就说，先把系统底层的功能框架设计好，然后慢慢的加上邀请、积分、积分兑换功能，然后再加上APP组件（如：一句话大冒险啊、新同居时代、好友买卖什么的。

）
【图15】
OK接下来我们就开始从注册、邀请注册开始让大家的焦点回到页面上来。

注册我们考虑的会员的准入问题。

1）注册进来是必须要通过邀请，还是说也同时允许自然注册。

2）默认注册进来最基本的字段应该有哪些
【图16、17】
说明：字段的组合并不是简单的拼凑，也不是说别人社区有哪些字段，我们就应有哪些字段。

真正的要考虑到现在自己社区的实际情况。

1）有多少字段，就可以通过这些字段的匹配组合找到很多关系的人，这一点作用是用在“查找好友”过程中的；2）字段的合理划分，是与“权限访问设置”密切相关的，做过权限系统的大家都情况，我们可以把权限组合成“权限组”、“权限”，一个合适的产品设计，在很大程度上影响了需求的可行性。

大家看下面的搜索好友的一个页面交互，比较一下，是不是这样的道理。

【图18】
4）写模块需求
接下来我就拿S NS社区的“圈子”模块为例子，给大家做一下示范。

圈子，即为群组很多地方称呼不一，其实质是一样的。

139、开心、5G貌似交互输出都不太一样，首先我们先研究一下，这3个的大体UI和功能。

【图19、20、21】
最早做BBS的朋友，做这块应该是轻车熟路，更况WEB2.0时代，内容都用用户产生，只要稍微的把功能平台搭建好、话题引导好接下来问题就不大了。

1）从圈子用户角度，在做圈子/群组过程中，应该着重从：浏览、查找、申请、浏览、回复、等角度出发。

2）从圈子管理者角度，能很方便的完成、主题的精华、置顶、编辑、删除，用户申请的处理，圈子信息的维护，T人等操作，那就基本上满足了这个角色的需求。

3）从圈子的创建者角度，完成圈子的提交、维护，和其它对管理员的管理等就可以了。

同比139也好，还是5G、开心也好，产品设计者真正的站在使用者的角度这是很大程序上符合用户体验的一个好的做法。

使用者和研发者想的不一样，像我们研发设计人员想的过多的是，一个表单的提交，需要不需要审核，审核先展示，还是审核后展示，信息汇集到列表，是什么样的一个表现形式，对于圈子里不同的角色的形成和权限怎么划分和处理。

而真正好的研发设计人员，PM们在基本这些基本的实现逻辑、实现方式处理好后，要从使用者的角度进行交互设计。

如：用户关心的是，我加入了哪些群，哪些群的申请我还在审核中，我加入的群中，我分别是哪些角色？是一般成员，还是管理员，还是我就是创建者；我想很快捷的找到一个特定的群，我怎么找，等等…
在手把手教你设计SNS社区【2】中我已经把社区圈子的一个基本的行为用例分享过了，大家可以去看。

那就刚才说的真正的权限这块，想必大家也很是关心，我就再帖出来，供大家参考。

【图22】
流程是对逻辑的具体化补充，光有一个基本的业务逻辑或行为逻辑是不行的，一定要功能流程化。

我们分析一下圈子的主体：1）ID、圈子ID的集合；2）圈子的主题；3）圈子的照片；4）其它圈子的管理等。

【图23、24、25】
写到这就要画原型页面了，对于上面所涉及到权限这块，开发的时候，最好还是用excel画好权限表，流程化的东西，字段、权限量化。

（解释一下，教程中很多东西，我都是为了配合教程的讲解现画的。

具体的情况视你和团队的融洽度定。

一般我出需求现在就只要出逻辑、流程、交互页面+字段就成。

5）画页面原型（技巧介绍）
画页面原型，出前台界面表现。

深有感概的是，感谢AXURE这个软件，让我们的工作全面提速。

大家对AXURE应该很了解吧，网上还有AXURE的交流群。

我打英文版以来用了近3年了，常用的就是哪些功能。

基于onmouse/onclick/onfous以及onload一些交互。

要是做些TAG或菜单动态样式，就可以邮件又以下它的轮换样式就好了。

说到这，我就一些画页面的软件技巧略带讲解一下。

【图26】
【图27】
【图28】
【图29】
【图30】
AXURE可能还会用到模拟“图片替换效果”、对于外调的交互效果，直接可以用inframe链接。

补充一点，axure在画线框图的效果中，1）一定要注意把一些共同的元素作为“组件”或“模板”用，这样保存的文件会比较少；2）对一些原型效果微调的时候，可以组合多层形状，可以具体到“top=？、left=?”这样打开出来的页面不会因为绝对位置不一样，在演示的时候形成错位感。

这里不一一说明。

我们根据最早的目录，开始进行圈子具体交互页面的拼魔方运动。

大家也一起跟着试一下，如果给你3个小时，你能很高质的完成么。

其实画的过程可以查漏补缺，对整个需求的用户体验设计起到一定的思考。

5）画页面原型，整理文档
这两天在做一个广告监控系统，所以就耽误了几天写SNS教程的时间。

就刚刚看到的现状，顺便也总结了一下，产品人员不要满足于用工具，很多人真的很无聊，老是在网上一个劲的研究工具怎么用，工具用会了又怎么样。

姑且把产品经理错误的划分为，“小成”和“大成”，掌握了一定的工具那也不算不成，我教产品新人的时候我也先让他们了解做产品需要哪些技能，掌握哪些工具，往往他们在一段时间喜洋洋后，我们会他们吃枣后打一棒子。

就教程【6】中讲到的，axure画交互页面原型只是占需求中很小的一部分，综合的分析一下，①业务逻辑→②系统实现逻辑③功能实现逻辑→④页面表现逻辑，（页面表现只是作为数据输出，和用户行为交互必不可少的界面而已。

）
【图1】
=========================================================
======
【图2】
========================================================= ======
说明：很明白，通过图1、2大体说明了这个社区的要去设计一些功能。

以及这些功能的主次层级关系。

在大的TEAM，这些SNS的社区需求可以分解为几个产品经理去做。

可光有这个图，还不够，至于具体的这个SNS社区到底是通过怎么样一种机制去实现的呢，我觉得有必要接着画第二张图。

第二步：画一下SNS社区的协作机制[如下]：
【图3】
========================================================= ======
【图4】
========================================================= ======
说明：在完成图3、4后产品经理不仅清楚或明确了要做什么，具体要实现哪些功能的问题，而且从深层意思上明白了，整个SNS社区的协作机制。

从浅入深的理解这个庞大的社区系统，怎么样去根据它的所谓体貌特征更好合适的设计整个系统的构架和交互。

在完成了对社区的整体理解后，第一步就是围绕ID,也就是社区用户的问题，用户怎么来？通过那几种方式来，通过哪几种途径来？社区有了用户以后，怎么样行为最初的好友关系，以及后面围绕“ID”（在社区里体现为好友）怎么样挖掘更多的好友价值？也是产品经理在写需求的时候需要重点考虑的问题。

第三步：画一下SNS社区最简单的注册以及邀请注册[如下]：
【图5】
========================================================= ======
【图6】
========================================================= ======
说明：其实注册用户，成为好友，邀请用户注册是个通常的做法，所以这快的画（逻辑）也是比较简单，S NS社区通过不断的邀请注册成为几何倍数的增长。

当然产品经理在具体的邀请模块中必须要把系统默认的组名关系要规定好，到底你的初始数据需要摆哪些组，举开心（kaixinoo1为例，它里面就把常用的同学、同事等作为默认的组。

因为它和邀请类型是相对应的。

可能大家在写需求写到后面发现，社区个人资料的字段设置也是和组精密相关的。

第四步：？？？
刚才的1、2、3步骤说白了，是组合逻辑的一个过程，那接下来第四步要画什么，那就根据您写SNS社区需求的需要了，是要写：“社区个人动态处理逻辑”，还是“个人主页访问权限处理逻辑”，还是说“圈子、群组”实现逻辑，从逻辑的角度来综合的来考虑一下，我这块的社区到底哪些地方的流程、逻辑需要约束和定制，很简单的功能是允许程序员按照通过的实现方式去做的，所以把握好主次、侧重为后期的需求完善也是铺个良好的前奏。

接下来，我再分享几个常用的SNS社区，需求的逻辑，我画的貌似都是ROS E的激活图，可能也是时间有限，难免有不规范和不完整之处，仅供大家参考。

【图7】
========================================================= ======
【图8】
========================================================= ======
【图9】
========================================================= ======
【图10】
========================================================= ======
这一章节的教程就此结束，此时此刻，设计社区需求的产品经理应该脑子里很清晰的印着一道道网络，看过《越狱》的朋友应该更有体会，其实这玩意值钱，做产品做到后面不是说做哪一类的产品，而是说我有了一定的功夫，做什么都OK，原理是相通的。

我也希望PM们一定要做到心中有树，这样开展原型设计的时候才能更快更好。

5）画页面原型，整理文档
这两天在做一个广告监控系统，所以就耽误了几天写SNS教程的时间。

就刚刚看到的现状，顺便也总结了一下，产品人员不要满足于用工具，很多人真的很无聊，老是在网上一个劲的研究工具怎么用，工具用会了又怎么样。

姑且把产品经理错误的划分为，“小成”和“大成”，掌握了一定的工具那也不算不成，我教产品新人的时候我也先让他们了解做产品需要哪些技能，掌握哪些工具，往往他们在一段时间喜洋洋后，我们会他们吃枣后打一棒子。

就教程【6】中讲到的，axure画交互页面原型只是占需求中很小的一部分，综合的分析一下，①业务逻辑→②系统实现逻辑③功能实现逻辑→④页面表现逻辑，（页面表现只是作为数据输出，和用户行为交互必不可少的界面而已。

）
【图31】
【图32】
【图33】
页面不再一一举例，以下是我画圈子页面的次序安排，抛砖引玉，给大家提供参考。

1、创建圈子提及表单页
2、圈子申请、申请处理页
申请类型：用户申请交互、管理员交互申请交互（对应用户申请处理交互，管理员申请处理交互。

）3、圈子管理页
管理类型：基本信息管理、访问权限管理、成员管理、圈子公告
4、圈子列表页
类型：全部圈子+热门圈子、好友圈子、我的圈子（角色：我是创建者、我是管理员、我是成员、正在申请）
5、具体圈子首页
布局：圈子介绍+圈子公告、latest话题+latest图片、圈子管理员（角色：创建者+管理员）+最新加入成员+最新到访成员
6、圈子话题
布局latest20话题(字段：标题+发布者+浏览/回复数)
7、圈子话题最终页
8、发表表发话题页
9、圈子照片
布局latest30照片（说明：圈子需要也要分相册，根据不同的情况定。

）
10、圈子照片最终页
11、上传圈子照片
12、以及其它的邀请好友加入圈子等页面
图34】
当这个模块所有的页面完成以后，把各个按钮、链接都加上，然后F5快捷键生成页面，把自己当用户所有的页面都流程化的过一遍，看看哪快流程或页面布局不合理，再针对性的调整、完善
一下模块功能逻辑或页面表现逻辑。

特别是一些重要的地方，比如页面套标签需要注意的地方，你得加上合理的备注，这样就很清晰了。

写完以后，如果是有必要就写的需求，系统的整合到文档中作为版本管理。

(SVN)
最后整体打包，你的S NS社区需求就可以交付讨论了。

不管是大项目还是小产品，只要你掌握了产品的几点重要的原则，其实还是比较简单的。

到最后无论做什么，只要原理相通，都小菜一碟！不过我有点体会，对原创的系统设计还是比较有挑战性的。

所以我现在希望多做些多挑战性的项目。

最后附上我做sns系统的截图，看一下伟大的产品经理吧，大家都是伟大的产品经理，加油吧！。