# 医生预约App设计：DocVisit的双起点

原网页：https://www.jvds.cn/share/ui-design/docvisit-appointment-state-u063
语言：zh-CN
发布：2026-10-15
作者：界达设计工作室（JVDS）

DocVisit把预约的起点分成两种：知道方向的人可以搜索医生或专科，暂时拿不准的人也能看到联系支持人员的入口。这套医生预约App设计值得借鉴的地方，是它没有要求所有人先学会同一种找医生的方法，而是把不同程度的了解接到后面的医生资料和时间选择。

## 搜索旁边，保留一个能求助的入口

首页先呈现搜索框，提示可以按医生、专科或症状输入。下面是常见专科，再往下是医生卡片。蓝色线描图标与专科文字并排，图形帮助扫视，名称承担辨认工作；即使不熟悉图标，也不必只凭形状猜它代表什么。

医生卡片把头像、姓名、专科、费用示例和查看资料按钮放在一起。这里的卡片承担的是初步筛选，完整情况则留给下一层。界达设计工作室（JVDS）认为，这种划分适合搜索结果较多的服务：列表只需让人知道是否值得继续看，不必把所有资料压进首屏。

另一张放大的帮助卡写着寻找合适专科的引导，配有蓝色勾选条目和浅蓝按钮。它与医生列表共享配色，却用整块底色表现不同任务。如果真实服务需要等待，进入后应说明接通方式和预计响应时间，才能让“求助”成为有边界的选择。

![DocVisit医生搜索、专科与医生卡片下的人工帮助入口](https://www.jvds.cn/upload/2026/1008/d187-tp/u063-i1.webp)

首页下部与右侧放大区｜不知道从哪里开始时，人工帮助仍可被找到。

## 医生资料与可选时间保持近邻

详情上方用圆头像建立身份，旁边列出咨询时长、语言和经验等字段。接着就是日期横条与时段网格，预约按钮位于下方。这样的阅读顺序把“找谁”和“什么时候”放在同一条短路径上，少了在资料页与日历页之间来回找信息的距离。

[选中日期和时段](https://www.jvds.cn/share/ui-design/ui-component-states-design-system)都使用实蓝底，普通选项保留白色或浅灰背景。两类选择因此有相似的状态语法。不过，浅灰时段的意义需要在正式界面中明确：它可能代表不可选，也可能只是普通状态，用户不能仅凭淡色自行推断。

日条局部只看到日号和星期。若横向选择会跨月，月份与年份应有稳定的显示位置。底部的Book Consultation也可以配合已选医生与完整时间摘要，让最后一次点击发生在明确的信息上。

![DocVisit医生详情、日号星期和蓝色选中时段](https://www.jvds.cn/upload/2026/1008/d187-tp/u063-i2.webp)

医生详情主体与底部｜医生信息保持可见，日期条仍需完整范围。

## 预约状态改变，动作也跟着改变

预约列表分为Upcoming、Completed、Cancelled。待赴约卡提供取消和改期，已完成卡提供再次预约和就诊摘要，取消卡则保留原预约信息。比起每张卡都放同一组按钮，这种安排更贴合每个状态下还能做的事情。

蓝色按钮承接继续操作，取消动作使用红色。提醒开关又被放在日期附近，使它与对应预约保持联系。不同页面出现相同的示例编号不适合被当成真实记录；正式内容需要让日期、医生和独立编号共同帮助辨认，尤其是在连续预约同一位医生时。

这套设计的重点是[任务衔接](https://www.jvds.cn/share/ui-design/medical-appointment-flow-design)：求助入口解决方向不明，详情页完成身份与时间确认，列表再负责管理后续变化。服务状态、等待信息和动作结果若也能保持这个对应关系，视觉上的简洁才会转化为清楚的预约体验。

![DocVisit待进行、已完成与已取消分组的医生预约卡片](https://www.jvds.cn/upload/2026/1008/d187-tp/u063-i3.webp)

预约列表顶部和每张卡底部｜分组改变可用动作，编号应指向一次明确预约。

## 把不同起点接到同一条流程

医生预约、咨询服务或专家平台，如果同时面对熟悉与不熟悉服务的用户，可以从搜索、求助和状态管理的关系开始整理流程。

界达设计工作室（JVDS）提供UI/UX设计与网站设计、开发服务，可协助梳理服务入口、预约流程和信息层级。

[联系界达设计，聊聊你的项目](https://www.jvds.cn/contact)