家政服务 App 设计:首页改版前后对比

家政服务 App 的首页只有一个任务:让用户从“东西坏了”到预约上师傅,点的次数越少越好。下面的初稿具备房主需要的一切,却让他们到处找。它让用户搜索“服务、分类、专业人员”,用红色横幅大喊 30% off,摆出十二个标签只有 8 px 的分类,还把每位师傅埋在好几行 8 px 的信息里。

修改版保留了所有功能,只改了顺序。先问一个直白的问题,优惠缩成一行,三个分类撑起页面,每位师傅只展示人们真正用来挑人的信息。

整个页面,改版前后

初级稿

修改后

左边,一打东西以同样的分量争夺注意力。红色横幅是最响的对象,十二个分类块是最大的一块,而真正要干活的人被扔在底部,字小到需要眯眼看。

右边,页面按房主的思路阅读:什么坏了、有没有优惠、是哪类活、谁能来。文字从初稿的 8 到 15 px 提升到 12 到 18 px,两侧边距都是 20,没有任何东西被塞进卡片。

具体改了什么,量化对比

修改一:问一个直白的问题

之前

之后

一个细描边的搜索框,写着“搜索服务、分类、专业人员”并带麦克风,下面是一行热门搜索:漏水维修、空调服务、深度保洁、吊扇。对比一个高高的灰色输入框,带放大镜、“什么需要修”几个字和麦克风。

“搜索服务、分类、专业人员”是数据库字段的标签。它要求用户在打出一个字之前,先判断自己找的是服务、分类还是人。没有人打开水管工 App 时是这么想的。他们想的是“水槽漏水了”。

“什么需要修?”正是这个 App 存在要回答的问题,用户可以用自己的话输入问题。输入框从 32 px 增大到 48 px,成了真正的点击目标,麦克风也保留下来,方便手湿的时候用。热门搜索,漏水维修、空调服务、深度保洁和吊扇,在点击输入框时展开,所以什么都没丢,页面还少了一行 9 px 的小字。

可复用的规则:占位文字写成用户的问题,而不是你的信息架构。

修改二:把横幅变成一行

之前

之后

一个带标签图标的红色横幅,大写的“首单立减 30%”后跟三个感叹号,小字写着“结账时使用优惠码 FIX30,仅限新用户,适用条款”,还有一个黄色的“立即预约”按钮。对比一条细长的黄线,写着“首次维修立减 30%,FIX30”,带一个箭头。

红色横幅身兼三职,一件都没做好。红色像错误或警告,感叹号像垃圾信息,而优惠码只藏在小字里。它的“立即预约”按钮还和下面师傅们的“预约”按钮抢戏。

修好的这一行一口气说完同样的事:折扣、适用对象和优惠码。它是黄色,也就是 App 唯一的行动色,整行就是按钮,箭头取代了“立即预约”。没有照片,也不大喊大叫。首次用户仍然能看到优惠,老用户也不会每次打开 App 都被吼一遍。

可复用的规则:优惠是一行字,不是广告牌。把优惠码交给用户,并让这一行本身可点击。

修改三:把十二个分类砍成三个加“更多”

之前

之后

一个“全部分类”标题和“查看全部”链接,下面是三行四列共十二个小描边块,每个都有不同颜色的图标和 8 px 标签:水管、电工、保洁、粉刷、木工、空调维修、家电、除虫、搬家、园艺、开锁、智能家居。对比四个更大的描边块,配朴素的墨色图标:水管、电工、保洁和更多。

网格里十二个彩色图标看起来井井有条,但用户得读完十二个标签才能找到自己的那个。更糟的是,漏水的房主往往不知道问题属于哪个分类。天花板滴水算水管、粉刷还是木工?宽大的菜单帮不了这个人,只会让猜测更难。

这个修改分两层起作用。搜索框用平实的话接收问题,所以不知道分类的用户根本不用去猜。三个块覆盖最常见的活,“更多”则打开其余九个:粉刷、木工、空调维修、家电、除虫、搬家、园艺、开锁和智能家居。块的尺寸是 76 乘 72,图标 26 px,标签 12 px,图标改成朴素的墨色,因为十二种图标颜色是噪音,不是信息。

什么都没删。十二个分类仍然只需点一下。Thumbtack 采用同样的做法:先搜索任务,下面是一小列分类。

可复用的规则:展示大多数人需要的那几个,其余的放在“更多”后面。让搜索去照顾不知道分类的人。

修改四:按人们挑师傅的方式展示每位师傅

之前

之后

三位专业师傅,每位有 40 px 的照片、姓名、一行灰色技能如水管、漏水维修、热水器、管道疏通,一行写着 4.9 (312),已完成 1,240 单,1.2 英里,每小时 45 美元,一行写着周一至周六有空,上午 8 点至下午 6 点,以及一个大写的“预约”按钮。对比三位师傅,48 px 照片、姓名、一颗星 4.9、1,240 单和每小时 45 美元,以及绿色的最近空档,如“最近空档今天下午 3 点”,配一个“预约”按钮。

初稿把它知道的关于每位师傅的一切都列了出来:技能、评分、评价数、订单数、距离、价格和每周时间。这是 8 px 字体里的七个信息,而且三位师傅看起来一模一样,用户没法比较。三个人的时间那一行都一样,所以没有任何信息量。

人们挑师傅看三件事:他是谁、别人信不信他、什么时候能来。所以修改版展示姓名、一行“4.9 · 1,240 单 · $45/小时”,以及绿色的最近空档,比如“最近空档今天下午 3 点”。时间是新增的信息,它用预约真正需要的这一项取代了笼统的每周时间。

技能、距离和完整时间移到师傅自己的页面。照片从 40 增大到 48 px,“预约”按钮的高度从 21 增大到 34 px,成了真正的点击目标。

两个页面里的数字是一样的。Minh Tran 在两边都是 4.9、1,240 单和 $45/小时。

可复用的规则:展示人们据以选择的信息,其余的移到详情页。

更小的修改

• 每个功能都保留。 长地址从“24 Hayes St”和它的箭头展开。麦克风留在搜索框里。“优惠”标签并入了优惠行,购物车变成了“预约”标签。
• 统一边距。 初稿左边 14 px,右边 12 px。修改版两侧都用 20。
• 统一强调色。 黄色是行动色,用在优惠行和每个“预约”按钮上。初稿里红色、黄色和十二种图标颜色全在争抢。
• 四个标签,一种图标风格。 五个实心与描边混用的标签变成四个同一风格的标签,放在带细线的 78 px 平面栏上。
• 更大的字标,更短的地址。 字标增大到 24 px,地址去掉街道行和城市,因为用户知道自己住哪。
• 字号梯度。 文字从 8 到 15 px 改为 12 到 18 px。
• “查看全部”保留。 其余师傅在“查看全部”后面,第三位师傅延伸到标签栏之下,让列表看起来更长。

审视你自己的家政服务页面

获取 Figma 文件

免费文件包含初级稿、修改后的页面,以及每个部件的组件。

免费 Figma 文件

家政服务页面改版,前后对比

两个页面以及每个部件都是 Figma 组件。免费,仅可查看,复制到你的草稿即可。

在 Figma 中打开

FAQ

家政服务 App 的首页该怎么设计?

先问一个直白的问题,比如“什么需要修?”,然后是一条精简的优惠行、三到四个分类块加“更多”,以及一小列师傅。每位师傅按姓名、评分和最近空档展示,只配一个“预约”按钮。

家政服务 App 应该展示多少个分类?

首页三到四个,其余放进“更多”。十二个块会让每个人把每个标签都读一遍,而有问题的人往往不知道它属于哪个分类。

服务类 App 该用搜索栏还是分类?

两者都要,按这个顺序。问问题的搜索框接住不知道分类的人,几个分类块则覆盖知道的人的常见需求。

服务市场里的专业师傅卡片应该显示什么?

姓名、含订单数和价格的评分,以及最近可约时间。技能、距离和完整时间属于师傅自己的页面,因为它们帮不了人在三个选项中做选择。

家政服务 App 里的折扣该怎么展示?

做成一条带优惠和优惠码的细线,整行可点击。带感叹号的红色横幅像垃圾信息,它的按钮还会和“预约”按钮抢戏。

来源

• 两个页面都是我们自己的,在 Figma 中设计并测量。App Fixly、人物、地址和价格都是虚构的。优惠,即使用优惠码 FIX30 立减 30%,以及 Minh Tran 的 4.9、1,240 单和 $45/小时,在两个页面上是一样的。
• 研究的模式:Thumbtack,先搜索任务,下面是一小列分类。
• 图标来自 Phosphor(MIT)。照片来自 Pexels:Ivan S、Kindel Media、Son Hoa Nguyen 和 Mahmoud Yahyaoui。
• 最初作为轮播图发布在 App Brainy。