社交(SNS)网站的完整设计思路

精品文档 1欢迎下载 社交 社交 SNSSNS 网站的完整设计思路 网站的完整设计思路 一 前言一 前言 看到下面一些网站的名字 单身的你或许还是比较兴奋 没错 以下这些都是 比较成熟的交友网站 排名不分先后 世纪佳缘 爱情公寓 城市达人 百合 网 珍爱网 嫁我网 51 个人空间 亿友网 赛我网 聚友网 360 圈 爱 的根源 江南情缘 QQ 交友中心 速配网 知己交友网 人和网 同楼网 圈网 先看下面一组数据 精品文档 2欢迎下载 其实网络交友市场由来已久 从 02 年 03 年到现在 大大小小的交友网站林林 总总 这块市场确实是很大的 随着交友市场的成熟 几大交友网站的格局也 逐渐形成 窥其几年的发展轨迹 我还是看得出 交友网站的特点 交友网站的特点 1 注册用户数多 2 用户群体年轻 3 用户活跃度高 4 用户粘性较强 5 用户需求强烈 交友网站的趋势 交友网站的趋势 1 交友方式丰富化 精品文档 3欢迎下载 走直接交友到线下交友 电视相亲 活动相亲 交友的方式越来越多 同样交 友方式的丰富化也为网友市场的价值挖掘和盈利探索提供了摸索和实践的机会 2 交友载体多元化 交友载体不仅仅是 PC 现在有越来的载体如手机 移动网络等 可能到最后实 现多网合一 交友的便利体现的淋漓尽致 3 用户沟通社区化 用户沟通由横向并行到纵向交叉 社区化的交友方式越来深的用户青睐 白来 世纪机缘 珍爱等几家网站独领风骚 现在爱情公寓 开心 校内 139 等等 慢慢抢占市场 4 市场竞争差异化 伴随市场的准入门槛和实力对抗 差异化竞争越趋明显如 心理学匹配 严肃 交友 白领交友 电视红娘 不管是想通过网络交友认识异性 作为择偶对象 人生朋友 性伴侣 还是在 网上寻找满足感 归宿感 情感心理依托 也不管交友站么打着多么号召力的 番号 其规则还是换汤不换药的路线 还单身么 想泡与被泡么 想相识异性么 那就来吧 作为平台运营方来 说 我们做的事很明确 就是 怎么样把找与愿与被找到的联系起来 1 1 画图玩 画图玩 为什么要画图呢 图体验思路 图可以组织逻辑 如果你的逻辑还不错可以直 接在脑子里进行抽象思维 那我还是建议你把想法画出来 接下来我打开 ROSE 画个图 至于大家可选用的工具多了 此处不做说明 精品文档 4欢迎下载 精品文档 5欢迎下载 图 1 图 2 说明 很明白 通过图 1 2 大体说明了这个社区的要去设计一些功能 以及这 些功能的主次层级关系 在大的 TEAM 这些 SNS 的社区需求可以分解为几个产 品经理去做 可光有这个图 还不够 至于具体的这个 SNS 社区到底是通过怎 么样一种机制去实现的呢 我觉得有必要接着画第二张图 第二步 画一下第二步 画一下 SNSSNS 社区的协作机制社区的协作机制 如下如下 精品文档 6欢迎下载 图 3 精品文档 7欢迎下载 图 4 说明 在完成图 3 4 后产品经理不仅清楚或明确了要做什么 具体要实现哪些 功能的问题 而且从深层意思上明白了 整个 SNS 社区的协作机制 从浅入深 的理解这个庞大的社区系统 怎么样去根据它的所谓体貌特征更好合适的设计 整个系统的构架和交互 在完成了对社区的整体理解后 第一步就是围绕 ID 也就是社区用户的问题 用户怎么来 通过那几种方式来 通过哪几种途径来 社区有了用户以后 怎 么样行为最初的好友关系 以及后面围绕 ID 在社区里体现为好友 怎么 样挖掘更多的好友价值 也是产品经理在写需求的时候需要重点考虑的问题 第三步 画一下第三步 画一下 SNSSNS 社区最简单的注册以及邀请注册社区最简单的注册以及邀请注册 如下如下 精品文档 8欢迎下载 图 5 精品文档 9欢迎下载 图 6 说明 其实注册用户 成为好友 邀请用户注册是个通常的做法 所以这快的 画 逻辑 也是比较简单 SNS 社区通过不断的邀请注册成为几何倍数的增长 当然产品经理在具体的邀请模块中必须要把系统默认的组名关系要规定好 到 底你的初始数据需要摆哪些组 举开心 kaixinoo1 为例 它里面就把常用的 同学 同事等作为默认的组 因为它和邀请类型是相对应的 可能大家在写需 求写到后面发现 社区个人资料的字段设置也是和组精密相关的 第四步 第四步 刚才的 1 2 3 步骤说白了 是组合逻辑的一个过程 那接下来第四步要画什 么 那就根据您写 SNS 社区需求的需要了 是要写 社区个人动态处理逻辑 还是 个人主页访问权限处理逻辑 还是说 圈子 群组 实现逻辑 从 逻辑的角度来综合的来考虑一下 我这块的社区到底哪些地方的流程 逻辑需 要约束和定制 很简单的功能是允许程序员按照通过的实现方式去做的 所以 把握好主次 侧重为后期的需求完善也是铺个良好的前奏 接下来 我再分享几个常用的 SNS 社区 需求的逻辑 我画的貌似都是 ROSE 的 激活图 可能也是时间有限 难免有不规范和不完整之处 仅供大家参考 精品文档 10欢迎下载 图 7 精品文档 11欢迎下载 图 8 精品文档 12欢迎下载 图 9 精品文档 13欢迎下载 图 10 这一章节的教程就此结束 此时此刻 设计社区需求的产品经理应该脑子里很 清晰的印着一道道网络 看过 越狱 的朋友应该更有体会 其实这玩意值钱 做产品做到后面不是说做哪一类的产品 而是说我有了一定的功夫 做什么都 OK 原理是相通的 我也希望 PM 们一定要做到心中有树 这样开展原型设计的 时候才能更快更好 社交 社交 SNSSNS 网站的完整设计思路之 网站的完整设计思路之 2 2 2010 01 02 21 26 39 转载 标签 it 精品文档 14欢迎下载 2 2 定目录 定目录我个人的理解为 逻辑条理化 很多人说 你这么干繁琐不繁琐 啊 我认为这个过程是必要的 且不可缺少的 究其原因是因为你有了一个推 过反复推敲的可行的目录 才能更合适的展开或变更需求 要不很多情况下 写 写了一半断电了 这种情况应该说是很多的 其实很简单的养个一个好的 习惯就可以避免了 明确有哪些模块 每个模块有哪些功能 喜欢脑爆的朋友们可以先通过 Mind manager 画好 我省略了这一步 直接在 AXURE 上把目录定下来 接下来我为大家写一个 SNS 社区的目录出来 看看是 不是很直观 图 11 作为经验之谈 我一般先在 axure 里面就 SNS 社区把目录可能涉及的所有交互 页面 都先初步命名好 然后建一个全局导航 作为 axure 模板 这样导航效 果一做好 加上各个的链接 这样整体线框就出来了 很大程序上提高了写需 求的效率 不信你也可以试试 精品文档 15欢迎下载 图 12 说明 基本上整个目录结构什么都 OK 以后接下来就开始写原型需求了 写原型 设计的时候通常注意 2 点 1 尽可能的出线框图 产品经理们不要把太多的时间花在页面风格或页面原型 表现的细节上 这样很容易浪费时间 等你的页面交互都弄好后 可以根据讨 论好的风格让设计师进行设计 2 页面布局的时候一定要合理 线性统一 刚入门的产品经理想到哪就写到哪 策划到哪 到最后交付的时候就会发现 100 个页面 60 个不太一样 这样也造成 了美工设计人员很不好执行 所以产品经理在写 PRD 需求的时候 一定要理解 哪些模块是通用的 通用模块都适用于哪些功能 哪些模块是不同的 整个页 面结构的划分为什么要这样 精品文档 16欢迎下载 图 13 3 3 分解安排需求 分解安排需求 模块这么多 预估得一个月 到底要怎么合理的安排 优先级呢 我们可以把系统功能拆分来 例如下图所示的 将优先级分为 核 心功能和扩展功能 以及核心功能对应的延展功能 以及扩展功能对应的延展 功能 打个比方 SNS 社区一般会先做基本社区框架 如 会员系统的设计 好友的约定划分功能解为核心功能 精品文档 17欢迎下载 图 14 反过来也就说 先把系统底层的功能框架设计好 然后慢慢的加上邀请 积分 积分兑换功能 然后再加上 APP 组件 如 一句话大冒险啊 新同居时代 好 友买卖什么的 精品文档 18欢迎下载 图 15 OK 接下来我们就开始从注册 邀请注册开始让大家的焦点回到页面上来 注册 我们考虑的会员的准入问题 1 注册进来是必须要通过邀请 还是说也同时允 许自然注册 2 默认注册进来最基本的字段应该有哪些 精品文档 19欢迎下载 精品文档 20欢迎下载 图 16 17 精品文档 21欢迎下载 说明 字段的组合并不是简单的拼凑 也不是说别人社区有哪些字段 我们就 应有哪些字段 真正的要考虑到现在自己社区的实际情况 1 有多少字段 就 可以通过这些字段的匹配组合找到很多关系的人 这一点作用是用在 查找好 友 过程中的 2 字段的合理划分 是与 权限访问设置 密切相关的 做过 权限系统的大家都情况 我们可以把权限组合成 权限组 权限 一个 合适的产品设计 在很大程度上影响了需求的可行性 大家看下面的搜索好友的一个页面交互 比较一下 是不是这样的道理 图 18 4 4 写模块需求 写模块需求 精品文档 22欢迎下载 接下来我就拿 SNS 社区的 圈子 模块为例子 给大家做一下示范 圈子 即 为群组很多地方称呼不一 其实质是一样的 139 开心 5G 貌似交互输出都 不太一样 首先我们先研究一下 这 3 个的大体 UI 和功能 精品文档 23欢迎下载 精品文档 24欢迎下载 图 19 20 21 最早做 BBS 的朋友 做这块应该是轻车熟路 更况 WEB2 0 时代 内容都用用户 产生 只要稍微的把功能平台搭建好 话题引导好接下来问题就不大了 1 从圈子用户角度 在做圈子 群组过程中 应该着重从 浏览 查找 申请 浏览 回复 等角度出发 2 从圈子管理者角度 能很方便的完成 主题的精华 置顶 编辑 删除 用 户申请的处理 圈子信息的维护 T 人等操作 那就基本上满足了这个角色的 需求 3 从圈子的创建者角度 完成圈子的提交 维护 和其它对管理员的管理等就 可以了 同比 139 也好 还是 5G 开心也好 产品设计者真正的站在使用者的角度这是 很大程序上符合用户体验的一个好的做法 使用者和研发者想的不一样 像我 们研发设计人员想的过多的是 一个表单的提交 需要不需要审核 审核先展 示 还是审核后展示 信息汇集到列表 是什么样的一个表现形式 对于圈子 精品文档 25欢迎下载 里不同的角色的形成和权限怎么划分和处理 而真正好的研发设计人员 PM 们 在基本这些基本的实现逻辑 实现方式处理好后 要从使用者的角度进行交互 设计 如 用户关心的是 我加入了哪些群 哪些群的申请我还在审核中 我加入的 群中 我分别是哪些角色 是一般成员 还是管理员 还是我就是创建者 我 想很快捷的找到一个特定的群 我怎么找 等等 在手把手教你设计 SNS 社区 2 中我已经把社区圈子的一个基本的行为用例分 享过了 大家可以去看 那就刚才说的真正的权限这块 想必大家也很是关心 我就再帖出来 供大家参考 精品文档 26欢迎下载 图 22 精品文档 27欢迎下载 流程是对逻辑的具体化补充 光有一个基本的业务逻辑或行为逻辑是不行的 一定要功能流程化 我们分析一下圈子的主体 1 ID 圈子 ID 的集合 2 圈 子的主题 3 圈子的照片 4 其它圈子的管理等 精品文档 28欢迎下载 精品文档 29欢迎下载 精品文档 30欢迎下载 精品文档 31欢迎下载 精品文档 32欢迎下载 图 23 24 25 写到这就要画原型页面了 对于上面所涉及到权限这块 开发的时候 最好还 是用 excel 画好权限表 流程化的东西 字段 权限量化 解释一下 教程 中很多东西 我都是为了配合教程的讲解现画的 具体的情况视你和团队的融 洽度定 一般我出需求现在就只要出逻辑 流程 交互页面 字段就成 5 5 画页面原型 技巧介绍 画页面原型 技巧介绍 画页面原型 出前台界面表现 深有感概的是 感谢 AXURE 这个软件 让我们 的工作全面提速 大家对 AXURE 应该很了解吧 网上还有 AXURE 的交流群 我 打英文版以来用了近 3 年了 常用的就是哪些功能 基于 onmouse onclick onfous 以及 onload 一些交互 要是做些 TAG 或菜单动态样 式 就可以邮件又以下它的轮换样式就好了 说到这 我就一些画页面的软件 技巧略带讲解一下 精品文档 33欢迎下载 图 26 精品文档 34欢迎下载 图 27 精品文档 35欢迎下载 图 28 精品文档 36欢迎下载 图 29 精品文档 37欢迎下载 图 30 AXURE 可能还会用到模拟 图片替换效果 对于外调的交互效果 直接可以 用 inframe 链接 补充一点 axure 在画线框图的效果中 1 一定要注意把一 些共同的元素作为 组件 或 模板 用 这样保存的文件会比较少 2 对一 些原型效果微调的时候 可以组合多层形状 可以具体到 top left 这样打开出来的页面不会因为绝对位置不一样 在演示的时候形成错位感 这 里不一一说明 我们根据最早的目录 开始进行圈子具体交互页面的拼魔方运动 大家也一起 跟着试一下 如果给你 3 个小时 你能很高质的完成么 其实画的过程可以查 漏补缺 对整个需求的用户体验设计起到一定的思考 5 5 画页面原型 整理文档 画页面原型 整理文档 这两天在做一个广告监控系统 所以就耽误 了几天写 SNS 教程的时间 就刚刚看到的现状 顺便也总结了一下 产品人员 不要满足于用工具 很多人真的很无聊 老是在网上一个劲的研究工具怎么用 工具用会了又怎么样 姑且把产品经理错误的划分为 小成 和 大成 掌握了一定的工具那也不算不成 我教产品新人的时候我也先让他们了解做产 品需要哪些技能 掌握哪些工具 往往他们在一段时间喜洋洋后 我们会他们 吃枣后打一棒子 就教程 6 中讲到的 axure 画交互页面原型只是占需求中很小的一部分 综 合的分析一下 业务逻辑 系统实现逻辑 功能实现逻辑 页面表现逻 辑 页面表现只是作为数据输出 和用户行为交互必不可少的界面而已 精品文档 38欢迎下载 图 31 精品文档 39欢迎下载 精品文档 40欢迎下载 图 32 图 33 页面不再一一举例 以下是我画圈子页面的次序安排 抛砖引玉 给大家提供 参考 1 创建圈子提及表单页 2 圈子申请 申请处理页 申请类型 用户申请交互 管理员交互申请交互 对应用户申请处理交互 管 理员申请处理交互 3 圈子管理页 管理类型 基本信息管理 访问权限管理 成员管理 圈子公告 精品文档 41欢迎下载 4 圈子列表页 类型 全部圈子 热门圈子 好友圈子 我的圈子 角色 我是创建者 我是管 理员 我是成员 正在申请 5 具体圈子首页 布局 圈子介绍 圈子公告 l