房地产App设计:首页改版前后对比

房地产App的首页只有一个任务:把人从“我在看房”带到“我想点开的那套房”。下面的初稿并没有任何功能坏掉,每个功能都能用。问题是它要求读者一次性吸收所有东西:一个搜索框、五个圆形分类、四种不同的按钮、一个横幅,还有一张塞了九个小细节的卡片。

修改版保留了所有功能,只改了顺序、大小和样式的数量。

整个页面的改版前后对比

新手初稿

修改后

左边,眼睛先撞上一个搜索框、五个分类圆圈、三种不同样式的四个控件、一个通栏蓝色横幅、一颗星、一个箭头、每张照片上叠着的两个按钮,还有一个盖在房源细节上的悬浮“地图”按钮。单看每一样都没毛病,合在一起却没有“第一眼该看什么”。

右边,页面从上到下依次阅读:你是谁、搜什么、租还是买、什么类型的房子,然后是一张大房源。横幅还在,但它待在底部,更小,不再和搜索抢戏。

修改 1:一行搜索,一个租房或买房控件

之前

之后

一个带麦克风的描边搜索框、五个圆形分类图标,然后是填充的“租房”按钮、纯文字的“买房”、描边的“排序”按钮和“筛选”链接。对比之下:一个灰色搜索框配一个蓝色筛选按钮,租房和买房则是同一个分段控件的两半。

初稿把四个控件塞在一行,还给每个都配了不同的外观:租房是填充按钮,买房是裸文字,排序是描边,筛选是带图标的普通链接。读者得先搞清楚哪些是按钮、哪些是标签、哪些是开关,才能开始使用。

修改版让每个任务只有一种形状。搜索和筛选在同一行,因为筛选本来就是搜索的一部分。租房或买房是在两个选项里二选一,这正是分段控件的用途:两个选项都可见,选中的那个清楚地亮着。排序被挪开了,因为只有出现结果之后它才有意义。

可复用的规则:如果两个控件做同类的事,它们就该长得一样;如果做不同的事,就不该一样。

修改 2:显示选中状态的分类

之前

之后

五个细描边圆圈,每个下面有个小标签,只有蓝色标签表明“公寓”被选中。对比之下:带图标和文字、排成一行的填充标签,“公寓”是实心蓝色,后面的标签一直延伸到屏幕边缘之外。

在初稿里,唯一能看出选中项的线索,是圆圈下面一行小字的蓝色标签。圆圈本身看起来都一样,眼睛只能逐个读标签才能找到当前项。

实心填充的标签在你提问之前就给出了答案。选中态是颜色和字重的不同,而不是文字上一点点差别。标签也是宽大于高,图标和文字在同一行,整排占的高度更小。右边缘被截断的那个标签说明这一行可以滚动,不需要任何箭头。

修改 3:按顺序阅读的房源卡片

之前

之后

“精选房源”带一颗星和一个箭头,照片上有“1 Year Old”徽章以及加号和爱心按钮,蓝色的每月 $2,400,“出售”和“出租”两个标签,一个地址,卧室和卫生间的细节被悬浮的“地图”按钮挡住。对比之下:一张大圆角照片,只有一个爱心,然后是每月 $2,400、两居室公寓、里斯本阿尔法玛,以及 2 卧、2 卫、980 平方英尺。

看房的人会按同样的顺序问四个问题:多少钱、是什么房、在哪儿、多大。修改版把卡片按这个顺序排好,每行回答一个问题。价格是最大的文字,然后是房型,再往后是较淡的地点和细节行。

初稿把答案搅在了一起。价格那一行还挤着两个写着“出售”和“出租”的标签,而这套房只出租。地址在细节上面、价格下面,颜色还不一样。细节是 9 点的小字,最后一项还被地图按钮盖住,读者因此看不到面积,而面积恰恰是大多数人要比较的数字。

照片上还去掉了“1 Year Old”徽章和加号按钮。每张图上两个悬浮按钮,是在要求读者做他们还没想好的决定。一个爱心就够了,照片也更大,因为卖房子的正是照片。

可复用的规则:卡片就是一句话。先决定语序,再给每个词一种样式。

修改 4:四个标签页,一种图标风格

之前

之后

首页、我的房产、消息、收藏和更多,填充和描边图标混用。对比之下:首页、已保存、消息和我的,全部是描边图标,只有首页是蓝色。

初稿有五个标签页,其中三个很接近:我的房产、收藏和更多,听起来都像是放已保存或自有房子的地方。图标也把填充形状(房子、消息)和描边(楼房、爱心)混在一起,所以很难分辨当前标签,还是只是画得更粗的标签。

修改版用四个标签页和一种图标风格,标签之间唯一的区别就是哪个处于激活状态。“收藏”改成“已保存”,更短,也和卡片上的爱心对得上。“更多”改成“我的”,一个能说明里面是什么的名字。Apple 的指南把标签栏描述为顶层板块之间的导航,所以一个其实是“杂项菜单”的入口不该放在里面。

那些更小的修改

• **有人的头部。**修改版加了问候语、实心蓝圆里的首字母头像,以及带红点的铃铛。初稿没有头部,没有任何东西告诉你这是谁的App。
• **一个边距。**初稿左边 12、右边 16,所以没有东西和屏幕边缘对齐。修改版每一行两侧都用 20。
• **一套间距体系。**间隔是 4、8、12 或 16。当每个间隔都来自同一个短清单,各行不用分割线也显得有关联。
• **来自平台的字阶。**初稿的文字从 9 到 15 px,毫无规律。修改版使用 11 到 22 pt 的 iOS 字号,这些是人真正读得舒服的大小。
• 更平静的横幅。“List your home for Free”去掉了斜体强调词、房子轮廓和里面的第二个按钮,现在是只有一个箭头的单行。

审视你自己的房地产App

获取 Figma 文件

免费文件包含两个页面、修改后页面的每个部分(都是组件)、颜色变量、iOS 文字样式,以及一份附有照片署名的说明文档。

免费 Figma 文件

房地产首页改版前后对比

两个页面和每个修改后的部分,都是 Figma 组件。免费,仅可查看,复制到你的草稿即可使用。

在 Figma 中打开

FAQ

房地产App首页应该先展示什么?

一个带筛选按钮的搜索框,然后是租房或买房以及房产类型。房源紧跟其下,横幅和次要优惠放在后面。

房产App里该如何展示租房和买房?

用一个分成两半的分段控件,这样两个选项始终可见,被选中的清楚高亮。一行里放四种不同的按钮样式,只会让人猜。

房源卡片应该包含什么?

先是价格,然后是房型、地点,以及卧室、卫生间和面积等关键细节。照片上有一个收藏按钮就够了。

房地产App应该有几个标签页?

四个是个好数字:首页、已保存、消息和我的。避免两个听起来像同一个地方的标签页,比如“收藏”和“我的房产”。

如何显示哪个分类被选中?

用品牌色填充选中的标签,其他保持中性。圆圈下面文字颜色的细微变化很容易被忽略。

来源

• 两个页面都是我们自己在 Figma 中设计和测量的。
• 照片来自 Unsplash,作者为 Luke van Zyl、A. L. Brown 和 Annie Spratt,遵循 Unsplash 许可。
• Apple Human Interface Guidelines: Tab bars。
• Apple Human Interface Guidelines: Typography,iOS 文字大小。
• 首发于 App Brainy 的轮播图。