# 临床试验网站设计：不同角色共享研究线索

原网页：https://www.jvds.cn/share/ui-design/dextrial-audience-trial-information-u041
语言：zh-CN
发布：2026-10-13
作者：界达设计工作室（JVDS）

Dextrial的临床试验网站设计，用患者、医生与研究机构三类卡片说明不同任务，再给列表和详情提供共同的研究线索。浅色背景、人物照片与轻量图标让页面容易进入，真正支撑查找的则是标题、编号、状态和目录。

## 核心结论

- 三类角色入口让阅读目的明确，基础说明和领域分类各有位置。
- 列表编号与详情目录分别支持身份核对和段落查找。

## 三张角色卡，先告诉人从哪里开始

项目介绍下方横排三张浅灰卡，绿色心形、蓝色听诊器等小图标位于上方，说明文字在下面。患者查找、医生转介与研究组织任务被分成不同区域，视觉面积相近，读者不用先读一整段混合说明才能找到相关方向。

这种多角色网站设计的好处，是承认不同人需要[不同的信息顺序](https://www.jvds.cn/share/website-design/service-page-design-guide)。患者可能先读基础介绍，专业人员可能先找设计与条件，机构还要了解另一类服务。共用风格并不要求他们从同一篇长文起步。

界达设计认为，角色入口应该帮助定位，不必把人锁住。列表与详情仍应保留可识别的研究对象，切换阅读路径时也能知道自己在看同一项记录。三张卡在图中说明了分工，实际跨路径关联还需要操作检查。

![DexTrial三张浅灰角色卡，分别以心形、听诊器和监测图标说明患者、医生与研究组织任务](https://www.jvds.cn/upload/2026/1008/d187-tp/u041-i1.webp)

项目介绍下方三张卡｜每个角色名称后有对应任务，分流由职责开始。

## 患者页的亲近感，落在说明与入口上

患者页首屏是一组人物照片，白色标题叠在较暗区域，下面换成白底介绍和户外照片。基础说明与简短事项摘要邻近，再往下是问答。人物气氛让页面更亲切，白底又给需要认真阅读的文字留出空间。

相邻页面用轻量线性图标和文字列出研究领域，照片穿插其间，Get in Touch with Us与表单位于下方。这种分类比只用一幅人物图更能解释下一步在哪里。图标是提示，领域名称仍是识别的主体。

了解资料、发送咨询和正式参加研究应使用不同动作名称，让读者认出当前阶段。医疗研究信息也宜明确内容责任与更新时间，入口形式和文字需要与各自用途一致。

![DexTrial患者页中的人物主视觉、基础说明、FAQ及旁边领域分类和联系表单](https://www.jvds.cn/upload/2026/1008/d187-tp/u041-i2.webp)

患者页主视觉下方｜基础说明与FAQ接住初步阅读，领域分类另提供查找路径。

## 列表与长详情都有稳定的查找位置

研究列表左侧是条件，右侧每条记录用细线和留白分开，标题、编号、国家与文字状态集中出现。有的条目提供Patient Page与Healthcare Professional Page，说明两种阅读方向可以围绕同一个对象展开。

长详情页左侧另有目录，简介、设计与条件各有入口，右侧按标题和分组向下展开。目录帮助定位段落，编号与研究名则帮助核对身份，两者用途不同。浅色底与绿蓝小标记延续全站，但没有替代文字状态。

界达设计会先检查列表和详情的标题、编号、日期是否一致，再检查受众切换与目录。静态样例里的Recruiting不能当作当前招募事实，状态也应能找到维护来源和[更新时间](https://www.jvds.cn/share/ui-design/b2b-business-state-model)。排版足够整齐以后，内容一致性仍是这类资料界面的关键。

![DexTrial左侧多条件研究列表，右侧详情显示患者和专业人员入口及章节目录](https://www.jvds.cn/upload/2026/1008/d187-tp/u041-i3.webp)

研究列表与详情并排｜编号、标题、状态明确记录身份，两类入口接到同一研究。

## 常见问题

### 专业资料网站为什么需要不同受众路径？

不同角色需要的信息顺序往往不同。路径可以分开，但同一记录的名称、编号与状态应保持一致。

## 设计检查清单

- 逐项核对列表与详情的研究身份。
- 确认状态说明具备维护来源和更新时间。

## 整理多角色的资料阅读路径

如果你的专业服务或资料平台同时面向公众与业务人员，需要重整分类、目录和咨询入口，可从角色任务与内容清单开始讨论。

界达设计工作室（JVDS）提供UI/UX设计与网站设计、开发服务，可一起梳理页面内容、界面结构与实现需求。

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