【案例】产品，从需求到高保真原型到开发的过程

点击上方'人人都是产品经理'可以订阅哦

今年五月份的时候，有幸参加了人人都是产品经理上海线上的产品马拉松，见到了很多同行，通过简单的交流，也稍微了解到了不同产品之间的区别。然后就进入了当天的活动主题了.

在活动结束后的某一天，我脑中不知道怎么就冒出个把这个产品做出来的想法，然后我就稀里糊涂的开始了，刚开始的时候，由于自己工作有点忙,速度特别的慢，晚上回家后没啥动力，自己也懒，慢慢吞吞的搞了两个月，连文档内容都没怎么看到。所幸的事，中间跳了个槽，有了点时间，于是就真正意义上的开始执行了。这过程真特么坎坷呀，虽然速度很慢，但总算完成的差不多了，就是问题还是很多。

这是当时我们小组围绕主题讨论的成果，我把核心功能挑选出来，并简化了相关功能后，重新做了一个相对简单，相对直接的结构图。下面开始主要内容

信息结构图

可以先对比下和之前的区别：

定义下两个最核心的名词：

活动广场：用户发起的所有活动的聚集地

档期：听着是不是觉得很高大上的名词，简单讲，就是空闲时间。档期相当于是活动广场中活动的来源，因为只有先有空闲时间，才有活动组成的活动广场，相当于一个提供内容的功能！

对比两个脑图可以发现，去掉了“活动广场”和“档期”中的一些用户之间的关系，也去掉了一些只有关系用户才能看到的内容的部分。变成了一个所有人都可查看，都可参加的关系。

如图：整体分为四个频道，活动广场，档期，我，私信，其中，活动广场，档期，我 为同层频道，私信 单独做了个入口。

功能说明：

一 . 活动广场（首页）

1.1 功能结构

全局功能（NavigationBar 和tabbr）：这边就不做描述了，大家一看原型就能懂（如下图）

PS:下图中的1 为全局的信息提示入口,2为档期的发布入口

1.1.1活动推荐:

特色活动置顶推荐，点击查看详细

1.1.2活动列表:

用户发起过的活动按照离当前位置有近到远的顺序排列，如图：需展示标题,地点,时间,费用,已参与人数,图片

1. 时间格式： 1）离当天日期l两天以内，用今天,明天表示
2）超过的用“月-日”表示

1.1.3发起活动:

活动信息包含（如上结构图）：

必须项：标题，内容，发起活动的时间，活动地址，图片 ，活动开始时间，结束时间，非必填：已参加人数，最多参加人数，费用，地点地图

用户自定义发起活动，活动所填信息如图：

1.1.4活动内容详情:

活动详情信息展示 包括：图片，介绍，地理位置(跳转至地图)，时间，费用，参与人数/总人数，活动发起人（可跳转到个人资料，页面请看原型，此页面有私信功能，但原型中未跳转到私信页面）,参加人员的列表（点击用户头像跳转到用户个人资料，可私信）。

1.1.5 活动动作:

用户可参加，分享，收藏活动，评论

1.1.6 后期功能：

1）活动评论

2）活动照片（发起者有权限）

3）活动列表的搜索功能

第二部分 档期

一 功能概述

1.1 档期列表

如上图：

每条档期包括：头像，昵称，性别，发布时间，档期时间，内容，地理位置。

点击该记录会跳转到发起人的个人信息；

附近人的档期：LBS定位获取，由近到远排序显示，如是好友，需标注

好友来源(拓展功能)：APP内部关注，手机通讯录，社交APP（人人，新浪/腾讯微博）

2.1.2发起档期
优先选择系统提供的标签，也可以自己手动填写，此处的内容随便填写

6、 第三部分 个人中心

包含我的资料，我的活动，我的档期，设置等四个二级分类

3.1 我的资料（如下图）：

资料包含：昵称，头像，年龄，性别，个人简介，照片墙（自定义张数），所在地区，社交账号（微博，人人，微信）
通过点击每一行跳转到下一级页面可修改当前数据

3.2 我的档期

我发布的档期列表，可直接通过未过期的档期快速生成活动（如下图，右上角图标），并且把相关数据直接带过去，节约了填写活动详情的时间

已过期的档期（如下图） 文字，背景全部变灰，让进行中和 已过期的形成对比，从而能够快速分辨 进行中 和 已过期的档期，下面的模块 “我的活动”类型一样，滑动可删除，如果档期没过期，那么档期中的此条档期 也得删除

3.3 我的活动

分两种: 发起的活动和参加的活动，都是列表形式展示，同时还有两种操作

1） 查看详细，跳转到详细页面

2） 滑动可删除，当删除时，活动广场里面的该条记录也要删除

3.4 设置

一些系统杂七杂八的功能，此处不考虑

7、 第四部分 私信

7.1 功能介绍

此功能是为了方便和其它用户聊天而设计的，功能如下(如图)：

1) 私信发起：在其它用户的个人资料里面可私聊该用户

2) 私信列表：和其它用户的私聊条目的列表展示

3) 私聊页面：聊天页面（类QQ,微信）

注意事项：列表的聊天时间

原型

基本实现了高保真原型，就是有些地方不严谨，因为自己不会PS ，所有图标都是网上找的,因此有些地方图标不够准确。另外tabbar这边还有个问题，切换功能模块的时候，图标不能点正中心，得往边上偏移，超过可视范围才行。如下图，必须得点击五角星之外的地方，否则，内容部分就是出现问题。这不知道是啥原因，求解决。

原型下载：http://pan.baidu.com/s/1jG00Njg

源码

这边的代码需要时间本来不想写的，但想到自己程序猿出生，还是绝对做了，下次没银子坚决不干这种事情了。嗯，就是这么任性。源码单纯的就是实现功能，UI也没仔细的做。问题也是多多多。

这边的android 代码，布局除了首页和导航区别外，其他基本都相同。

源代码下载：http://pan.baidu.com/s/1yFnsi

APP下载：http://pan.baidu.com/s/1o6jxF2y

整个app的问题还是挺多的，由于个人的原因，后续没多少时间来慢慢修改了，无法让大家看到完善的了，于是就把它发布出来了，否则得躺在我硬盘里面跨年了。

点击下方 “阅读原文” ，推荐《屏幕滑动原型案例下载》一文阅读

↓↓↓