社交SNS网站的完整设计思路.docx

1、社交SNS网站的完整设计思路社交（SNS）的完整设计思路一、前言看到下面一些的名字，单身的你或许还是比较兴奋。没错，以下这些都是比较成熟的交友。排名不分先后：世纪佳缘、爱情公寓、城市达人、百合网、珍爱网、嫁我网、51个人空间、亿友网、赛我网、聚友网、 360圈、 爱的根源、江南情缘、 QQ交友中心、速配网、知己交友网、人和网、 同楼网 、圈网先看下面一组数据：其实网络交友市场由来已久，从02年 03年到现在，大大小小的交友林林总总，这块市场确实是很大的。随着交友市场的成熟，几大交友的格局也逐渐形成。窥其几年的发展轨迹，我还是看得出：交友的特点：1、注册用户数多；2、用户群体年轻3、用户活跃度高

2、；4、用户粘性较强；5、用户需求强烈；交友的趋势：1、交友方式丰富化；走直接交友到线下交友（电视相亲、活动相亲）交友的方式越来越多。同样交友方式的丰富化也为网友市场的价值挖掘和盈利探索提供了摸索和实践的机会。2、交友载体多元化；交友载体不仅仅是PC，现在有越来的载体如手机、移动网络等。可能到最后实现多网合一，交友的便利体现的淋漓尽致。3、用户沟通社区化；用户沟通由横向并行到纵向交叉，社区化的交友方式越来深的用户青睐。白来世纪机缘、珍爱等几家独领风骚，现在爱情公寓、开心、校、139等等慢慢抢占市场。4、市场竞争差异化；伴随市场的准入门槛和实力对抗，差异化竞争越趋明显如：心理学匹配、严肃交友、白领

3、交友、电视红娘不管是想通过网络交友认识异性，作为择偶对象、人生朋友、性伴侣，还是在网上寻找满足感、归宿感、情感心理依托也不管交友站么打着多么号召力的番号，其规则还是换汤不换药的路线。还单身么？想泡与被泡么？想相识异性么？那就来吧！作为平台运营方来说，我们做的事很明确，就是：“怎么样把找与愿与被找到的联系起来。”1）画图玩为什么要画图呢，图体验思路，图可以组织逻辑，如果你的逻辑还不错可以直接在脑子里进行抽象思维，那我还是建议你把想法画出来。接下来我打开ROSE画个图，至于大家可选用的工具多了，此处不做说明。【图1】=【图2】=说明：很明白，通过图1、2大体说明了这个社区的要去设计一些功能。以及这

4、些功能的主次层级关系。在大的TEAM，这些SNS的社区需求可以分解为几个产品经理去做。可光有这个图，还不够，至于具体的这个SNS社区到底是通过怎么样一种机制去实现的呢，我觉得有必要接着画第二图。第二步：画一下SNS社区的协作机制如下：【图3】=【图4】=说明：在完成图3、4后产品经理不仅清楚或明确了要做什么，具体要实现哪些功能的问题，而且从深层意思上明白了，整个SNS社区的协作机制。从浅入深的理解这个庞大的社区系统，怎么样去根据它的所谓体貌特征更好合适的设计整个系统的构架和交互。在完成了对社区的整体理解后，第一步就是围绕ID,也就是社区用户的问题，用户怎么来？通过那几种方式来，通过哪几种途径来

5、？社区有了用户以后，怎么样行为最初的好友关系，以及后面围绕“ID”（在社区里体现为好友）怎么样挖掘更多的好友价值？也是产品经理在写需求的时候需要重点考虑的问题。第三步：画一下SNS社区最简单的注册以及邀请注册如下：【图5】=【图6】=说明：其实注册用户，成为好友，邀请用户注册是个通常的做法，所以这快的画（逻辑）也是比较简单，SNS社区通过不断的邀请注册成为几何倍数的增长。当然产品经理在具体的邀请模块中必须要把系统默认的组名关系要规定好，到底你的初始数据需要摆哪些组，举开心（kaixinoo1为例，它里面就把常用的同学、同事等作为默认的组。因为它和邀请类型是相对应的。可能大家在写需求写到后面发现

6、，社区个人资料的字段设置也是和组精密相关的。第四步：？刚才的1、2、3步骤说白了，是组合逻辑的一个过程，那接下来第四步要画什么，那就根据您写SNS社区需求的需要了，是要写：“社区个人动态处理逻辑”，还是“个人主页访问权限处理逻辑”，还是说“圈子、群组”实现逻辑，从逻辑的角度来综合的来考虑一下，我这块的社区到底哪些地方的流程、逻辑需要约束和定制，很简单的功能是允许程序员按照通过的实现方式去做的，所以把握好主次、侧重为后期的需求完善也是铺个良好的前奏。接下来，我再分享几个常用的SNS社区，需求的逻辑，我画的貌似都是ROSE的激活图，可能也是时间有限，难免有不规和不完整之处，仅供大家参考。【图7】=

7、【图8】=【图9】=【图10】=这一章节的教程就此结束，此时此刻，设计社区需求的产品经理应该脑子里很清晰的印着一道道网络，看过越狱的朋友应该更有体会，其实这玩意值钱，做产品做到后面不是说做哪一类的产品，而是说我有了一定的功夫，做什么都OK，原理是相通的。我也希望PM们一定要做到心中有树，这样开展原型设计的时候才能更快更好。 社交（SNS）的完整设计思路之2(2010-01-02 21:26:39) 标签： it2）定目录我个人的理解为：“逻辑条理化”，很多人说，你这么干繁琐不繁琐啊。我认为这个过程是必要的，且不可缺少的。究其原因是因为你有了一个推过反复推敲的可行的目录，才能更合适的展开或变更需

8、求。要不很多情况下，写，写了一半断电了。这种情况应该说是很多的，其实很简单的养个一个好的习惯就可以避免了。明确有哪些模块，每个模块有哪些功能。喜欢脑爆的朋友们可以先通过Mind_manager画好，我省略了这一步，直接在AXURE上把目录定下来。接下来我为大家写一个SNS社区的目录出来，看看是不是很直观。【图11】=作为经验之谈，我一般先在axure里面就SNS社区把目录可能涉及的所有交互页面，都先初步命名好，然后建一个全局导航，作为axure模板，这样导航效果一做好，加上各个的，这样整体线框就出来了。很大程序上提高了写需求的效率。不信你也可以试试。【图12】=说明：基本上整个目录结构什么都O

9、K以后接下来就开始写原型需求了，写原型设计的时候通常注意2点：1、尽可能的出线框图，产品经理们不要把太多的时间花在页面风格或页面原型表现的细节上。这样很容易浪费时间，等你的页面交互都弄好后，可以根据讨论好的风格让设计师进行设计；2、页面布局的时候一定要合理，线性统一。刚入门的产品经理想到哪就写到哪，策划到哪，到最后交付的时候就会发现100个页面60个不太一样，这样也造成了美工设计人员很不好执行。所以产品经理在写PRD需求的时候，一定要理解，哪些模块是通用的，通用模块都适用于哪些功能；哪些模块是不同的，整个页面结构的划分为什么要这样。【图13】=窗体顶端3）分解安排需求 模块这么多，预估得一个月

10、，到底要怎么合理的安排优先级呢？我们可以把系统功能拆分来，例如下图所示的：将优先级分为：核心功能和扩展功能，以及核心功能对应的延展功能，以及扩展功能对应的延展功能。打个比方，SNS社区一般会先做基本社区框架，如：会员系统的设计、好友的约定划分功能解为核心功能，【图14】=反过来也就说，先把系统底层的功能框架设计好，然后慢慢的加上邀请、积分、积分兑换功能，然后再加上APP组件（如：一句话大冒险啊、新同居时代、好友买卖什么的。）【图15】=OK接下来我们就开始从注册、邀请注册开始让大家的焦点回到页面上来。注册我们考虑的会员的准入问题。1）注册进来是必须要通过邀请，还是说也同时允许自然注册。2）默认

11、注册进来最基本的字段应该有哪些【图16、17】=说明：字段的组合并不是简单的拼凑，也不是说别人社区有哪些字段，我们就应有哪些字段。真正的要考虑到现在自己社区的实际情况。1）有多少字段，就可以通过这些字段的匹配组合找到很多关系的人，这一点作用是用在“查找好友”过程中的；2）字段的合理划分，是与“权限访问设置”密切相关的，做过权限系统的大家都情况，我们可以把权限组合成“权限组”、“权限”，一个合适的产品设计，在很大程度上影响了需求的可行性。【大家看下面的搜索好友的一个页面交互，比较一下，是不是这样的道理。】【图18】=窗体底端窗体顶端4）写模块需求接下来我就拿SNS社区的“圈子”模块为例子，给大家

12、做一下示。圈子，即为群组很多地方称呼不一，其实质是一样的。139、开心、5G貌似交互输出都不太一样，首先我们先研究一下，这3个的大体UI和功能。【图19、20、21】=最早做BBS的朋友，做这块应该是轻车熟路，更况WEB2.0时代，容都用用户产生，只要稍微的把功能平台搭建好、话题引导好接下来问题就不大了。1）从圈子用户角度，在做圈子/群组过程中，应该着重从：浏览、查找、申请、浏览、回复、等角度出发。2）从圈子管理者角度，能很方便的完成、主题的精华、置顶、编辑、删除，用户申请的处理，圈子信息的维护，T人等操作，那就基本上满足了这个角色的需求。3）从圈子的创建者角度，完成圈子的提交、维护，和其它对

13、管理员的管理等就可以了。同比139也好，还是5G、开心也好，产品设计者真正的站在使用者的角度这是很大程序上符合用户体验的一个好的做法。使用者和研发者想的不一样，像我们研发设计人员想的过多的是，一个表单的提交，需要不需要审核，审核先展示，还是审核后展示，信息汇集到列表，是什么样的一个表现形式，对于圈子里不同的角色的形成和权限怎么划分和处理。而真正好的研发设计人员，PM们在基本这些基本的实现逻辑、实现方式处理好后，要从使用者的角度进行交互设计。如：用户关心的是，我加入了哪些群，哪些群的申请我还在审核中，我加入的群中，我分别是哪些角色？是一般成员，还是管理员，还是我就是创建者；我想很快捷的找到一个特

14、定的群，我怎么找，等等在手把手教你设计SNS社区【2】中我已经把社区圈子的一个基本的行为用例分享过了，大家可以去看。那就刚才说的真正的权限这块，想必大家也很是关心，我就再帖出来，供大家参考。【图22】=流程是对逻辑的具体化补充，光有一个基本的业务逻辑或行为逻辑是不行的，一定要功能流程化。我们分析一下圈子的主体：1）ID、圈子ID的集合；2）圈子的主题；3）圈子的照片；4）其它圈子的管理等。【图23、24、25】=写到这就要画原型页面了，对于上面所涉及到权限这块，开发的时候，最好还是用excel画好权限表，流程化的东西，字段、权限量化。（解释一下，教程中很多东西，我都是为了配合教程的讲解现画的。

15、具体的情况视你和团队的融洽度定。一般我出需求现在就只要出逻辑、流程、交互页面+字段就成。窗体底端5）画页面原型（技巧介绍） 画页面原型，出前台界面表现。深有感概的是，感AXURE这个软件，让我们的工作全面提速。大家对AXURE应该很了解吧，网上还有AXURE的交流群。我打英文版以来用了近3年了，常用的就是哪些功能。基于onmouse/onclick/onfous以及onload一些交互。要是做些TAG或菜单动态样式，就可以又以下它的轮换样式就好了。说到这，我就一些画页面的软件技巧略带讲解一下。【图26】=【图27】=【图28】=【图29】=【图30】=AXURE可能还会用到模拟“图片替换效果”

16、、对于外调的交互效果，直接可以用inframe。补充一点，axure在画线框图的效果中，1）一定要注意把一些共同的元素作为“组件”或“模板”用，这样保存的文件会比较少；2）对一些原型效果微调的时候，可以组合多层形状，可以具体到“top=？、left=?”这样打开出来的页面不会因为绝对位置不一样，在演示的时候形成错位感。这里不一一说明。我们根据最早的目录，开始进行圈子具体交互页面的拼魔方运动。大家也一起跟着试一下，如果给你3个小时，你能很高质的完成么？其实画的过程可以查漏补缺，对整个需求的用户体验设计起到一定的思考。5）画页面原型，整理文档 这两天在做一个广告监控系统，所以就耽误了几天写SNS教

17、程的时间。就刚刚看到的现状，顺便也总结了一下，产品人员不要满足于用工具，很多人真的很无聊，老是在网上一个劲的研究工具怎么用，工具用会了又怎么样。姑且把产品经理错误的划分为，“小成”和“大成”，掌握了一定的工具那也不算不成，我教产品新人的时候我也先让他们了解做产品需要哪些技能，掌握哪些工具，往往他们在一段时间喜洋洋后，我们会他们吃枣后打一棒子。就教程【6】中讲到的，axure画交互页面原型只是占需求中很小的一部分，综合的分析一下，业务逻辑系统实现逻辑功能实现逻辑页面表现逻辑，（页面表现只是作为数据输出，和用户行为交互必不可少的界面而已。）【图31】=【图32】=【图33】=页面不再一一举例，以下

18、是我画圈子页面的次序安排，抛砖引玉，给大家提供参考。1、创建圈子提及表单页2、圈子申请、申请处理页申请类型：用户申请交互、管理员交互申请交互（对应用户申请处理交互，管理员申请处理交互。）3、圈子管理页管理类型：基本信息管理、访问权限管理、成员管理、圈子公告4、圈子列表页类型：全部圈子+热门圈子、好友圈子、我的圈子（角色：我是创建者、我是管理员、我是成员、正在申请）5、具体圈子首页布局：圈子介绍+圈子公告 、latest话题+latest图片、圈子管理员（角色：创建者+管理员）+最新加入成员+最新到访成员6、圈子话题布局 latest20话题(字段：标题 +发布者 +浏览/回复数)7、圈子话题最

19、终页8、发表表发话题页9、圈子照片布局 latest30照片 （说明：圈子需要也要分相册，根据不同的情况定。）10、圈子照片最终页11、上传圈子照片12、以及其它的邀请好友加入圈子等页面图34】=当这个模块所有的页面完成以后，把各个按钮、都加上，然后F5快捷键生成页面，把自己当用户所有的页面都流程化的过一遍，看看哪快流程或页面布局不合理，再针对性的调整、完善一下模块功能逻辑或页面表现逻辑。特别是一些重要的地方，比如页面套标签需要注意的地方，你得加上合理的备注，这样就很清晰了。写完以后，如果是有必要就写的需求，系统的整合到文档中作为版本管理。(SVN)最后整体打包，你的SNS社区需求就可以交付讨论了。不管是大项目还是小产品，只要你掌握了产品的几点重要的原则，其实还是比较简单的。到最后无论做什么，只要原理相通，都小菜一碟！不过我有点体会，对原创的系统设计还是比较有挑战性的。所以我现在希望多做些多挑战性的项目。最后附上我做sns系统的截图，看一下伟大的产品经理吧，大家都是伟大的产品经理，加油！加油吧O(_)O哈哈