房产App设计：深色界面如何分清条件

Rezo的房产App设计没有把所有内容都涂成亮色。买租切换用白色突出，价格和底部操作使用黄绿色，其他条件放在低对比的深色分组里。这套层次适合观察：页面信息很多时，怎样让交易意图、房屋资料和下一步各自容易找。

核心结论

• 买租位于筛选页最上方，先明确交易方向，再展开房屋条件。
• 详情用价格、三项属性和照片分段组织，资料与联系人相邻。
• 亮色集中在价格与主要操作上，小组件也沿用相同视觉规则。

筛选先问买还是租

Filters页在“I am looking to”下面放Buy Property与Rent Property长条切换。选中项是白底，其他项留在深底里。它排在所有条件之前，读者先说明交易方向，再看Commercial和Residential等房产类型。

接着是Owner、Builder、Agent等发布者选项，房屋种类则放在独立圆角框内，使用两列勾选项。不同控件对应不同组，标题也留在组上方。大量条件没有被排成一串相同小标签，找某一类信息时更容易定位。

房龄选项放在下面，Apply filter以亮黄绿色占据底部。界达设计认为，筛选页有一个集中提交的位置，会比每组都设置醒目按钮更容易读。后续结果还应保留已选条件，尤其是买租方式与价格单位，避免离开筛选页后又需要猜。

详情里的价格与属性有不同力度

房源详情把月租价格用黄绿色突出，名称留在其下，楼层、户型和面积再用三张小卡排列。价格回答成本，属性回答房屋条件，三张等宽卡让这组基础资料容易横向扫读。图标旁还有文字，因此不必只从一张床猜户型。

验证文字和日期也在同一块区域中，但亮色对勾只能提示存在一个标记。正式界面应说明验证覆盖什么、何时更新；本文只能点评这个线索的位置，不能把它当成房源现状已被核实。

下方照片采用大小不同的拼排，能同时展示多个室内角度，底部Builder information再接联系人头像、姓名、电话和聊天。看房屋资料与找到沟通对象距离不远，适合在询问前保留房名及租售方式。

组件一致，还需要内容准确

组件图里，分享面板和价格滑条都用黄绿色按钮，房源卡则用白色Contact。深底、圆角和细线图标在不同组件中重复出现，页面即使更换内容，仍保留同一套视觉语言。对复杂房产产品来说，这种统一能帮助读者认出哪些地方可以继续操作。

但一致的外观不能替代准确标题。详情里Floor Plan下方是室内照片，如果内容只有实景照片，建议直接改成室内照片；户型平面图需要另有明确入口。栏目名字说准了，读者才知道能从这里判断装修还是空间布局。

日历组件的星期标题重复为SUN，出售卡和租赁详情又出现相同房名与相近金额。这些都适合在交付前用真实内容校对。建议同时核对星期序列、交易单位与房源身份，让精致组件在实际业务中也读得明白。

常见问题

房源筛选为什么先区分买租？

交易方向会改变价格和后续沟通的含义。把买租放在顶部有助于先定范围，结果卡和详情还应继续显示同样的交易方式与单位。

房源详情需要同时放照片与户型吗？

两者回答不同问题。实景照片帮助看环境和装修，平面图帮助看房间关系；缺少某类资料时，应该用准确栏目名称说明已有内容。

设计检查清单

• 核对筛选、结果、详情里的买租与价格单位。
• 只看小卡文字，确认楼层户型面积都能辨认。
• 检查每类图片标题与实际内容是否相符。