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

集中式公寓在 C 端的展示说明

版本 修改内容 修改日期 修改人

V1.0 / 2018/1/18 乔浩

V1.0 房型图片增加公共区域的图片展示 2018/1/23 乔浩

阅读对象：

产品人员：刘志鹏、夏丹宁、梅升阳

设计人员：N/A

测试人员：待定

开发人员：王鹏飞、沈奥林、许庆钢

1

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

一．需求背景

伴随以后集中式公寓的增多（目前有十一家合作的集中式公寓），在 C 端有必

要对其进行单独的分类展示，一方面为了方便租客快速寻找集中式房源，另一

方面也是为了在集中式房源的品牌展示上做优化。

二．展示位置

由于目前没有单独的 tab 可以进入集中式公寓，考虑到后期会做首页入口（类

似于现在南瓜租房在焦点看房中的位置），目前先以专题位的形式单独展示集中

式公寓，点击该专题位进入集中式公寓门店列表页。

专题位的文案：独栋公寓，享受高品质生活

2

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

三．公寓门店列表页

3

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

3.1 页面结构

• 头部：返回、页面名称、分享

• 筛选条件：位置、品牌

• 公寓门店信息：展示图、户型及可租房源、门店名称、门店位置、最低价

格

3.2 头部说明

• 头部样式如下

• 样式操作说明

点击后返回到上一级页 文案为【集中式公寓】 点击后底部上滑出分享

面，上一级页面特指通 浮层，详见【app-分享

过任何路径进入到该集 prd】。

中式公寓门店列表页面

的路径本身。包括首

页、活动页等。

3.3 筛选条件

• 筛选条件分为两大类：位置筛选和品牌筛选，其中位置筛选采用和首页一致

的规则和样式

• “品牌”筛选点击后弹出所有品牌公寓标签，品牌标签顺序为公寓第一次在审

核后台创建时的日期

• 展示顺序为从左至右，从上到下，最多展示十行，超过后右侧出现滑动条

• 未选择任何公寓时，“清空&确定”按钮置灰不可点击，选择至少一个公寓名

4

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

称 tag 时，按钮变为可点击状态

• 点击页面下方空白处或者“品牌”可收起该下拉框，收起后不记录上次操作

5

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

• 当筛选条件下无公寓门店时，展示样式如下

• 文案为：啊哦，暂时没有相关门店呢

3.4 公寓门店信息

• 公寓门店样式如下

• 门店展示图为 B 端上传的【公共区域】的第一张图

• 户型及可租房源为在 B 端填写的数据，固定展示在门店图的右下角

• 公寓名称为在 B 端填写的【公寓名称】字段

• 位置为在焦点楼盘库中的地理位置

6

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

3.5 门店列表排序说明

• 门店按积分总和排序，积分总和为所有户型积分相加，积分总和越高，排名

越靠前

• 单个户型的积分算法如下（同分散式的房源积分的规则）

因子 子因子 说明

房型 7 日热度 / 每个人浏览加 5 分，最多加到 50 分

户型图 有则加 5 分

管家图片 有则加 3 分

标签数量 一个：加 4 分 三个：加 9 分

两个：加 7 分 四个：加 10 分

房型介绍 150 字为基准分：加 10 分

每少 50 字：扣 5 分（未到 50 不扣分）

信息完善度 每多 50 字：加 2 分

积分上限：20 分

房间图片数量 卧室：每张加 2 分，上限 10 分

客厅：每张加 2 分，上限 10 分

卫生间：每张加 2 分，上限 10 分

厨房：每张加 1 分，上限 5 分

未打标签：不加分

积分上限：35 分

房型基础信 / 更新房源信息后，触发实时更新

息编辑更新

房型新鲜度 / 新房型：加 21 分

每过一天扣 3 分，扣完为止

7

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

四．公寓户型列表

8

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

4.1 页面结构

• 头部：返回、公寓门店名称、分享

• 公共区域轮播图

• 基本信息：位置、公寓名、公寓介绍

• 房型列表

4.2 头部说明

• 头部样式如下

• 样式操作说明

点击后返回到上一级页 文案为 B 端公寓门店名称 点击后底部上滑出分享

面，上一级页面特指通 子弹 浮层，详见【app-分

过任何路径进入到该集 享 prd】。

中式公寓门店列表页面

的路径本身。包括首

页、活动页等。

9

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

4.3 公共区域轮播图

• 当在 B 端公共区域只上传一张图时，不存在轮播效果

• 当上传公共区域图片大于 1 时，存在轮播效果，时间间隔为 1s，轮播方向

向右，尾首相接循环轮播，同时支持手动左右滑动

• 点击图片后可查看大图，标题展示“当前第几张图片/总图片数”，点击左上

角返回门店页

4.4 基本信息

位置

• 位置：该项为当前房源所在位置，显示离该房源 3 公里以内的地铁站的位

置，并标注真实距离。如果超过了 3 公里，则不显示地铁站信息。

10

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

• 信息呈现内容为：

区域（如海淀）+商圈（知春里），距离几号线（10）+哪一站（知春里

站）+距离（1120 米）

。

点击之后到【地图详情页面】

• 地图详情页面如下

• 点击 ，返回到上一级。

• 点击 回到当前房源定位中心。

• 页面初始比例为 100 米。

• 两根手指缩放动作可调整比例尺大小。

• 点击导航按钮，调取手机自带第三方导航 app，传输当前房源的位置到地

图 app。

• 4 个 button——地铁、公交、运动、餐饮。点击后会搜索附近相应场所，

11

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

并将房源位置自动定位至页面中心

公寓名称

• 公寓名称与 B 端同步，后期待公寓 profile 页上线后，点击即可进入

公寓介绍

• 公寓介绍样式如下

• 逻辑说明：C 端页面只展示 4 行，超过 4 行则后面文案收起，文案显示为

【展开】，点击展开后文案相应切换为【收起】

12

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

房型列表

• 房型列表样式如下

• tittle 名称为【房型列表】

• 缩略图为 B 端房型图的第一张图，名称为【几室几厅几卫】，若没有厅或卫

则不展示，括号内的部分为房源特色名，若不存在特色名则不展示

• 剩余可租房源展示如图，若无可租房源则展示为【剩余 0 套】

• 价格为月付&季付&半年付&年付中最低的价格

• 点击房型条任意处进入房型详情页

• 房型列表展示一级展示顺序为（优先展示可租的房源）

1.【可租房源】

2.【无可租房源】

• 二级展示顺序为相应类别下 B 端房型上传时间先后顺序

13

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

五．房型详情页

14

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

5.1 页面结构

• 头部：返回，收藏，举报，分享

• 房源图：图片，标签，剩余可租

• 基本信息：租金，公寓名称，租型，户型，特色名、标签，位置，重

要信息，房源配置

• 拓展信息：房型介绍，周边及交通，公寓介绍，小区介绍

• 联系管家：浮层在页面底部，点击给管家拨打电话

5.2 头部说明

• 头部样式

• 样式操作说明

图标名称

点击触发效果 点击后返回到上 点击后即收藏本套房源 用户点击以后 点击后底部上

一级页面，上一 详情页面。点击后触发 出现小弹窗， 滑出分享浮

级页面特指通过 操作，心形标识变为红 然后进入到举 层，详见

任何路径进入到 色填充状态 ，同时 报页面。举报 【app-分享

该房源详情页面 提示 toast“收藏成功”； 页面具体展示 prd】。

的路径本身。包 第二次点击的时候提示 见【举报弹

括首页、活动页 toast“取消收藏”。未登 窗】。（附

等。 录状态点击收藏，前往 录）未登录状

登录/注册页面 态点击收藏，

前往登录/注

册页面

15

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

5.3 房源图

图片显示

• 显示管家在 B 端后台上传的所有房源图片，图片类型为卧室（01 卧、

02 卧、03 卧……），户型，客厅，卫生间，厨房，更多。（tag 显示顺序

如上，根据管家上传的图片显示相应的 tag 类型，每个 tag 最多显示 5

张图）

• 图片显示顺序为后台上传顺序，默认头图为卧室图的第一张图片。

• 【更多】标签为【在 B 端未打标签的图片+公共区域】的图片

• 若 B 端所有图片均未打标签，则不展示 tag（按 B 端上传顺序展示）

• 图片上展示该房型剩余可租房源，文案为【剩余多少套房源可租】

图片操作

• 滑动图片时，下方对应的 tag 与图片相匹配，且显示为橙色。

• 点击 tag，滑动到该 tag 图片的第一张。

• 点击图片，进入当前点击的图片放大页。

16

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

图片放大

• 图片可以通过两个手指缩放。

• 滑动图片时，下方对应的 tag 显示为橙色。

• 点击 tag，滑动到该 tag 图片的第一张。

• 点击 ，返回房型详情页。

17

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

5.4 基本信息

价格

• 默认显示单月价格最低的支付方式和月租金，单月价格相同显示月付价。

显示规则为：数字+元/月+（月付价/季付价/半年付/年付价）。

• 点击租金区域，弹窗如下：

• 弹窗的显示排序规则为（显示租金不为空的支付方式），顺序为：月付-季

付-半年付-年付。

• 当前页面显示的价格有重点标注（如图变为黄色）。

• 押金为零则显示“押金：0 元”。

• 点击×或页面空白处，付款方式弹窗消失

公寓名称

• 公寓名称与 B 端同步，后期待公寓 profile 页上线后，点击即可进入

18

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

名称显示

• 按照后台名称进行显示，规则为：整租 · 几室几厅几卫（房源特色名）

• 规则解释：

1. 目前 B 端将集中式统一作为整租处理

2. 几室几厅为后台管家填写项，然后提取【户型】字段，厅和卫若为 0 则不展

示

3. 括号内为特色名，具体取【特色房型名】字段，若没有则不展示

位置

• 同 4.4 基本信息-位置【快速查看】

房型标签

• 标签展示顺序依据 B 端而定，只展示四个

重要信息概况

• 主要信息为 4 项，房间面积、户型、楼层情况、朝向。

• 房源面积为：在 B 端填写的面积，展现格式为：数字+㎡

• 厅室展示为：取后台【户型】字段，若户或卫为 0 则不展示

• 楼层：若 B 端填写当前楼层，则展示为当前楼层/总楼层（例如：2/20

层），若 B 端未填写当前楼层，则展示为总楼层（例如：共 6 层）

• 朝向：南北、东西、南等，根据后台显示呈现取后台【朝向】字段，若没

有则不展示

19

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

房型配置

• 房型配置展示在 B 端选择的所有配置

• 配置区域的高度依据配置数目而定，不采用固定高度（区别于线上 C 端分

散式的展示）

房型介绍

• 房型介绍若为空则此处不展示

• 展示行数及规则同公寓介绍【快速查看】

周边及交通

周边及交通

• 显示当前房源所在位置，比例尺为 100 米，点击前往地图详情页。

• 地铁、公交、运动、餐饮为 4 个 button，点击前往地图详情页并展示所选

button 的标注点。具体如表所示：

点击选项 地铁 公交 运动 餐饮

详情页地 1. 按照 500 米的比 1. 按照 200 米 1. 按照 500 米 1. 按照 200 米的

图显示情 例进行页面显 的比例进行 的比例进行 比例进行页面

况 示。 页面显示。 页面显示。 显示。

2. 显示附近不超过 2. 显示附近不 2. 显示附近 2. 显示附近 2KM

3KM 的所有地 超过 2KM 的 3KM 以内的 以内的不超过 8

铁站。 所有公交 不超过 8 个 个餐饮场所。

站。 运动场所。

20

 公寓介绍

• 展示审核后台的公寓 logo 和公寓介绍

x • 文案展示规则同房型列表页【公寓介绍】

小区介绍

1. 显示信息为：建筑类型、绿化率、建筑年代、物业类型（以此文档为准）。

2. 楼盘库中没有数据的字段显示“暂无”。

21

六．首页的展示说明

• 首页按房型展示，展示样式如下

• 按房型展示，房型名为【门店名称+几居室+朝向】，若 B 端未填写朝向则不

显示

• 基本情况包括【整租+房间面积+楼层情况+地理位置+价格+

22

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

页面 缩略图 文案

门店列表页 门店列表页第一 Title：城市+品质生活独栋公寓

个门店的缩略图 Detail：生活不止眼前的苟且，还有诗和远

方，快来这里探寻有趣的生活吧。

门店详情页 门店的第一张图 Title:门店名称

Detail：最低租金+位置

房型详情页 房型的第一张图 Title：几居室（特色名）+门店名称

Detail：最低租金+位置

23