医疗健康 App 设计:预约挂号首页的改版前后对比

人们打开健康类 App,最主要的原因只有一个:看自己的下一次预约。下面的初稿一打开却是折扣横幅,预约被塞在靠近底部的一条细长小条里。修正版把预约放到第一位,并砍掉了所有和它抢注意力的东西。

所有功能都保留。你依然可以搜索、浏览科室、预约医生、给诊所发消息。

整个屏幕的改版前后对比

新手初稿

修正版

左边,最先抢眼的是一个优惠:青绿色横幅,配着医生照片、一个按钮和一个链接。而用户真正为之而来的东西,也就是周二和 Dr. Sarah Lee 的预约,却是屏幕上最小的一块,排在另外两个板块之后。

右边,同一个预约成了最大的一块,包含医生、日期、时间和开始视频通话的按钮。优惠从首页上消失了,因为首次就诊折扣是给还没预约的人看的,而这位用户已经预约了。

修正 1:把下一次预约放在最前面

之前

之后

“立即预约您的首次就诊!”,首次视频问诊立减 20%,配有“立即预约”按钮、“了解更多”链接和轮播圆点;对比之下是“下一次预约”卡片:Dr. Sarah Lee,心脏科医生,一个视频通话按钮,日期和时间排在同一行。

首页应该先回答“我接下来要做什么?”,再回答其他问题。对回诊的患者来说,答案就是预约:和谁、什么时候、怎么进入。初稿里这个答案躺在最底部,是一行小字加一个“详情”链接。

修正版把预约变成主角。医生的头像和名字告诉你是谁,日期和时间同在一行,视频图标一点就能加入。横幅得被关掉,带按钮的卡片才会被使用。

日期也变得更短、更好读。“Tue, Oct 28, 2026 • 10:30 AM - 11:00 AM”变成了“Tue, 28 Oct”和“10:30 AM”,因为年份不会有疑问,而结束时间很少会影响你决定去不去。

可复用的规则:首页的顶部属于人们回来要找的东西,而不是你想推销的东西。

修正 2:四个科室,一种颜色

之前

之后

八个八种颜色的圆形图标:心脏科、牙科、眼科、呼吸科、神经科、骨科、儿科和更多;对比之下是四个白色方块配青绿色图标:心脏、牙科、眼科和更多。

八个图标八种颜色,让视线有八个可以停留的地方,却没有任何一个值得停留的理由。颜色是一种信号,而这里它什么也没说:红色的心脏并不比紫色的眼睛更紧急。

修正版只保留一种颜色,也就是品牌青绿色,让颜色重新有了意义。标签也更短(“Cardio”“Dental”“Eyes”),每个都能在可读的字号下排进一行。并且只展示四个,再加一个“更多”方块,因为需要冷门科室的人会用搜索,而搜索框就在正上方。

修正 3:把医生卡片改成一行

之前

之后

一张卡片包含照片、姓名、“心脏科医生 | City Heart Clinic”、五颗星、4.8(120 条评价)、“诊费:$50”、“今日可约”标签、“立即预约”按钮和一个心形图标,下一张卡片被截断;对比之下是两行列表,每行有小照片、姓名、“心脏科医生 · 1.2 km”,以及 4.9(212)的评分。

初稿的卡片承载了九项信息和两个操作。单看每一项都合理。放在一起,卡片就成了一张读者得逐行扫描的表单,而每张卡片上的“立即预约”按钮,把一个浏览页面变成了卖场。

修正版保留三行:姓名,然后是科室和距离(它决定了你到底去不去得了),再是一个评分及其评价数。诊费、可约时间和预约按钮都挪到医生自己的页面,那里有足够的空间来解释它们。一个箭头表示“点一下打开”。

这些行也是纵向排列,而不是横向滑动的轮播。边缘被截断的卡片确实能暗示后面还有内容,但列表能让人一眼比较两位医生,而这才是真正的任务。

修正 4:顶部只留一个图标

之前

之后

“你好,Leo!”和“今天感觉怎么样?”,搜索、铃铛和聊天图标;对比之下是一个绿色首字母头像、“早上好,Leo Martins”和一个带红点的铃铛。

初稿的顶部有三个图标,其中两个是重复的。顶部的铃铛和“通知”标签页打开的是同一个地方,聊天图标和“聊天”标签页也是一样。当两扇门通向同一个房间,人们会纳闷哪一扇才是真的。

搜索图标只是搜索框的替身。修正版直接展示搜索框,放在预约卡片下方一行,不需要再点开任何东西。铃铛保留下来,因为诊所的提醒或消息,是唯一值得挂一个红点的东西。

那些较小的修正

• 四个标签页,不是五个。 “通知”离开了标签栏,因为铃铛已经覆盖了它。“Chat”改成了“Messages”,也就是大多数收件箱另一端用的那个词。
• 带首字母的头像。 一个纯青绿色圆形加上 LM,告诉你这是谁的账号,和其他所有 App 的做法一样。
• 统一边距。 初稿左边用 14,右边用 12。修正版每一行两侧都用 20,间距使用 8、12、14 和 20。
• 朴素的问候。 “你好,Leo!今天感觉怎么样?”问了一个屏幕回答不了的问题。“早上好,Leo Martins”就没有这个问题。
• 没有优惠轮播。 横幅有三个圆点,按钮旁边还有第二个链接。修正版把优惠从这个屏幕上拿掉,只在主卡片里留下一个清晰的操作。

审视你自己的健康 App

获取 Figma 文件

免费文件包含两个屏幕、每个修正部分的改版前后组件、UI 颜色变量、iOS 文字样式,以及一份附有照片署名的说明文档。

免费 Figma 文件

医生预约首页,改版前后对比

两个屏幕以及每个修正部分的 Figma 组件。免费,仅供查看,可复制到你的草稿。

在 Figma 中打开

FAQ

医生预约 App 的首页应该最先显示什么?

下一次预约,带上医生、日期、时间和加入视频通话的入口。搜索和科室排在它后面。

健康 App 的首页应该显示多少个科室?

大约四个,外加一个“更多”方块。找冷门科室的人会用搜索,所以八个或更多彩色图标组成的长长网格只会增加噪音。

医疗 App 里的医生卡片应该显示什么?

姓名、科室、医生离你有多远,以及一个评分和评价数。诊费、可约时间和预约按钮应该放在医生的页面上。

健康 App 应该在首页使用促销横幅吗?

不要放在即将到来的预约上方。首次就诊优惠适合还没预约的人,而回诊的患者是为别的事来的。

医疗 App 需要多少个标签页?

四个就够了:首页、预约、消息和个人资料。通知可以放在顶部,做成带红点的铃铛。

来源

• 两个屏幕都是我们自己在 Figma 中设计和测量的。
• 照片来自 Unsplash,摄影师为 Jonathan Borba、Bruno Rodrigues 和 vaibhav vivian,遵循 Unsplash 许可协议。
• 最初作为轮播图发布于 App Brainy。