【白熊求职】产品训练营延伸阅读材料

南瓜租房客户端首页产品需求规格说明

书

产品经理：刘志鹏

2017/10/30

 【白熊求职】产品训练营延伸阅读材料

版本历史

版本 撰写时间 变更人 更新内容

V1.0 2017/10/30 刘志鹏 新建

V1.1 2017/11/10 刘志鹏 根据需求评审时提

出的意见进行调整

V1.2 2017/12/14 刘志鹏 城市选择页增加了

一句文案

V1.3 2017/12/15 刘志鹏 启动图增加了跳过

按钮

V1.4 2017/12/19 刘志鹏 调整了更新提醒的

操作按钮

V1.5 2017/12/20 刘志鹏 列表页增加了按

Android 的 back 按

钮的操作

项目背景

开发南瓜租房客户端第一个版本

项目目标

N/A

项目方案综述

首页包含『房源』和『我的』两个 Tab 切换，

『房源』为默认展示，包括三部分内容：

1. 运营推荐位置；

2. 『通勤找房』『双人找房』两个特色功能入口

3. 列表页与首页展示形式上为一个页面，用户向上滑动首页时，列表页上移占满页面，等

同于首页切换为列表页（另一个入口是首页『全部房源』按钮，点击的效果和滑动页面

 【白熊求职】产品训练营延伸阅读材料

一致）

需求内容

1. 首页综述

1.1 DEMO

1.2 说明

 【白熊求职】产品训练营延伸阅读材料

注：『功能入口』第一期暂不做

2. 城市切换

2.1 入口 DEMO

2.2 入口说明

居中展示应用名称『南瓜租房』

，有城市切换按钮

2.3 城市默认选择逻辑

 【白熊求职】产品训练营延伸阅读材料

2.4 城市列表页 DEMO

 【白熊求职】产品训练营延伸阅读材料

2.5 城市列表页说明

2.5.1 说明

- 城市列表页包括『定位城市』和『选择城市』两部分

定位城市：当 APP 定位成功&定位坐标所属城市已上线情况下，展示定位

城市

选择城市：即目前平台上线租房业务的城市列表，顺序以 Server 端返回的

顺序为准

- 当前选择的城市以特殊颜色高亮显示

- 点击具体城市，则收起城市列表返回首页，若选择的城市非当前城市，

则刷新首页

- 点击 x 按钮，则收起城市列表返回首页不执行任何操作

- （v1.2 更新）第一版上线时城市列表仅有北京，增加展示文案『更多城

市敬请期待』

 【白熊求职】产品训练营延伸阅读材料

2.5.2 定位失败的情况

若 APP 定位失败或定位坐标所属城市未上线的情况下，城市列表页不展示

『定位城市』，如下

3. Tab 切换

3.1 DEMO

3.2 说明

点击可切换『首页』和『我的』页面

『我的』页面的需求见

http://confluence.sohuno.com/pages/viewpage.action?pageId=269928

78

4. 推荐 banner

 【白熊求职】产品训练营延伸阅读材料

4.1 DEMO

4.2 说明

展 示 APP 管 理 后 台 『 首 页 banner 』 配 置 的 项 目

（http://confluence.sohuno.com/pages/viewpage.action?pageId=26997

897） ，点击后跳转配置的 url 的页面（见 4.3）

，若配置的 url 为定义的程序内

页面跳转（例如.跳到某筛选列表页）

，则直接跳转至 APP 对应页面

banner 图和 url 的配置见需求

设计注意：需设计无图状态此处的展示样式

4.3 专题 WebView

4.3.1 DEMO

 【白熊求职】产品训练营延伸阅读材料

4.3.2 说明

顶栏标题取网页的 title，页面为 Webview 展示网页内容

5. 为你推荐

5.1 DEMO

5.2 说明

 【白熊求职】产品训练营延伸阅读材料

5.2.1 标题

展示『为你推荐』的固定文案标题

5.2.2 入口

展 示 APP 管 理 后 台 『 首 页 推 荐 』 配 置 的 项 目 （ 需 求 见

http://confluence.sohuno.com/pages/viewpage.action?pageId=269

97897），按管理后台配置的顺序展示

点击后跳转配置的 url 的页面（见 4.3）

5.2.3 入口交互

APP 管理后台可以配置至多 15 个推荐项目，此处按配置的顺序从左至右展

示，可左右滑动

6. 首页和列表页间的切换

1. 上图展示了首页与列表页间的切换，可以设计为不能停留在中间状态，即响应用户

上滑手势，页面自动由图一向上滚动（设计：注意顶栏的渐变）为图三的状态

 【白熊求职】产品训练营延伸阅读材料

2. 若用户在首页状态下，点击下方列表页区域任何按钮（如筛选按钮、列表项等），则

响应为页面按 1 所描述从首页切换至列表页

3. 在列表页顶部时，用户继续向下滑动，则页面自动由图三向下滚动为图一状态

4. 在列表页任何位置，用户点击左上角返回按钮，操作同 2

5. 在列表页任何位置，用户点击 Android 的 back 按钮，操作同 2

7. 启动图

7.1 DEMO

7.2 说明

如上图，固定启动图放在 APP 本地工程中，APP 启动后，会先展示本地固定启动图，

展示 2s（暂时这样，不合适之后再调整）

，在这 2s 中，请求网络，若请求到图片，则展

示管理后台配置的启动图，展示 2s 后进入首页；若在固定启动图展示的 2s 内未请求到

管理后台配置的启动图，则直接进入首页

7.3 管理后台配置启动图增加跳过按钮

 【白熊求职】产品训练营延伸阅读材料

展示管理后台配置的启动图时（如 7.2 所述，展示 2s）

，右上角增加『跳过』按钮，用

户点击后直接进入首页

8. 更新提醒（v1.4 更新）

8.1 DEMO

 【白熊求职】产品训练营延伸阅读材料

8.2 说明

- APP 启动时（在展示本地启动图时）

，对比当前版本号与 APP 管理后台『版本

管理』配置的版本号，若当前版本号低于管理后台版本号，则在进入首页后弹出

更新提示，如上图

- 标题展示 APP 管理后台配置的『新版提示标题』

，完全展示可折行

- 内容展示 APP 管理后台配置的『新版提醒内容』

，注意：内容过长时，对话框

有最大高度，内容区域可滚动

- 点击『立即更新』：Android 使用本地下载功能，通过 APP 管理后台配置的

『APK 安装包链接』下载 APK；iOS 则跳转至 APP 管理后台配置的『iOS 安装

包链接』APP STORE 对应页面

- 点击『稍后再说』

（& Android 手机 back 按钮）

：对话框收起，执行如下逻辑

 【白熊求职】产品训练营延伸阅读材料

- 点击右上角『x 按钮』：对话框收起，执行如下逻辑

 【白熊求职】产品训练营延伸阅读材料

举例：当前 APP 为 1.0.1，更新提醒 1.1.0，用户操作『稍后再说』

，下次启动时，

检测到更新版本依然是 1.1.0，则不弹出更新提醒，若检测到更新版本是 1.1.1，

则弹出更新提醒

若更新提醒 1.1.0，用户点击过三次『稍后再说』或一次『x』按钮，则不弹出该

版本更新提醒

8.3 强制更新

若 APP 管理后台选择某版本为强制更新，则 APP 停留在本地启动图页面，并弹

出如下更新提示对话框

 【白熊求职】产品训练营延伸阅读材料

即『暂不更新』按钮为『退出应用』

，点击后退出 APP，点击 Android 的 back

按钮同样为退出应用