# NHS 设计系统

## NHS 设计系统 界面预览

选择一种方式，查看可选帮助，处理未作答的问题，并修改偏好。

## NHS 设计系统 设计参考

NHS.UK frontend 10.6.1 和 NHS 数字服务手册。预览使用带 Arial 字体的官方本地 CSS/JS，不使用需授权的 Frutiger 字体或 NHS 标志。响应式数值已根据所选软件包进行核对；未提供临床内容。

### 字体与品牌标识

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| Font stack | Frutiger W01, Arial, sans-serif | Frutiger 需要获得相应授权；本研究选用 Arial。 |
| nhsuk-body | 16px small / 19px large | 默认正文文本。 |
| nhsuk-body-l | 26px desktop | 引导段落，不用于每一条介绍性文字。 |
| nhsuk-body-s | 14px small / 16px large | 谨慎使用的次要信息。 |
| nhsuk-heading-l | Transactional h1 | 后续的 h2 使用 heading-m。 |
### 语义化颜色变量

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| $nhsuk-text-colour | #212b32 | 正文内容 |
| $nhsuk-secondary-text-colour | #4c6272 | 提示 |
| $nhsuk-link-colour | #005eb8 | 链接目标 |
| $nhsuk-focus-colour | #ffeb3b | 键盘焦点 |
| $nhsuk-border-colour | #d8dde0 | 结构边界 |
| $nhsuk-input-border-colour | #4c6272 | 输入框边界 |
| $nhsuk-error-colour | #d5281b | 验证反馈 |
| $nhsuk-button-colour | #007f3b | 主要操作 |
### 响应式间距

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| nhsuk-u-margin-bottom-1 | 4px → 4px | 小屏幕 → 768px 以上；使用该类，不要在本地重复定义。 |
| nhsuk-u-margin-bottom-2 | 8px → 8px | 小屏幕 → 768px 以上；使用该类，不要在本地重复定义。 |
| nhsuk-u-margin-bottom-3 | 8px → 16px | 小屏幕 → 768px 以上；使用该类，不要在本地重复定义。 |
| nhsuk-u-margin-bottom-4 | 16px → 24px | 小屏幕 → 768px 以上；使用该类，不要在本地重复定义。 |
| nhsuk-u-margin-bottom-5 | 24px → 32px | 小屏幕 → 768px 以上；使用该类，不要在本地重复定义。 |
| nhsuk-u-margin-bottom-6 | 32px → 40px | 小屏幕 → 768px 以上；使用该类，不要在本地重复定义。 |
| nhsuk-u-margin-bottom-7 | 40px → 48px | 小屏幕 → 768px 以上；使用该类，不要在本地重复定义。 |
| nhsuk-u-margin-bottom-8 | 48px → 56px | 小屏幕 → 768px 以上；使用该类，不要在本地重复定义。 |
| nhsuk-u-margin-bottom-9 | 56px → 64px | 小屏幕 → 768px 以上；使用该类，不要在本地重复定义。 |
### 页面布局

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| nhsuk-width-container | 960px maximum | 固定宽度的外层容器。 |
| nhsuk-main-wrapper--s | Smaller vertical wrapper | 适用于事务型服务。 |
| nhsuk-grid-column-two-thirds | Desktop column; mobile stack | 网格宽度从 769px 起生效。 |
| Breakpoints | 320 / 641 / 769 / 990px | 手机、平板、桌面、大型桌面。 |
| nhsuk-u-reading-width | Readable content measure | 外围容器较宽时使用。 |
## NHS 设计系统 完整指南

实用指南，介绍如何为真实界面选择、应用和评审此系统。

完整指导、实现起点和源代码链接。

## NHS 设计系统 NHS 背景与字体

### 不冒用身份的医疗界面

> NHS.UK frontend 提供视觉和交互基础，但不会安排咨询，也不会决定诊所支持哪些出席方式。本研究展示一个虚构的预约，并允许访客选择偏好。选择结果仅供本地查看，并非预约。

Frutiger 是 NHS 品牌资产，使用时须遵守授权条件。本独立资源使用文档注明的回退字体 Arial，且不包含 NHS 标志。官方 CSS 保持不变；显式的本地字体覆盖设置可避免请求 Frutiger。

阅读配套规范

## NHS 设计系统 事务型字体排版

### 用问题本身建立层级

页面问题使用 nhsuk-heading-l，次级章节使用 nhsuk-heading-m。这与长篇编辑类页面不同，后者的指南内容从 heading-xl 开始。单选字段集的图例可以采用标题字号，同时保留分组语义。

常规段落类用于区分正文、引导文字和小号辅助文案。页面开头适合使用一次 26px 的引导文字，而预约说明应保持普通正文样式。预览保留了足够的行宽，便于日期和地点名称换行。

阅读配套规范

## NHS 设计系统 间距与容器

### NHS 间距体系不同于 GOV.UK 间距刻度

NHS 响应式单位采用不同的序列，并在 768px 以上切换。例如，单位 6 会从 32px 变为 40px。不要仅因辅助类名称相似，就把 GOV.UK 的 unit-6 数值用于 NHS。

示例使用 960px 容器和三分之二宽度的阅读栏。原生网格行为会在桌面断点以下切换为单列布局。布局变化由库控制，小型独立身份标识条则由应用样式控制。

```
.appointment-section {
  @include nhsuk-responsive-margin(6, "bottom");
}
```

代码参考

阅读配套规范

### 响应式断点

文档将 641px 定义为平板断点，将 769px 定义为桌面断点。网格列宽从桌面断点起生效，但这并不意味着所有字体规则都要等到同一个断点才生效。请使用原生类，不要为所有属性实现一个统一断点。

阅读配套规范

## NHS 设计系统 分组选项：出席方式

### 一个字段集，一个答案

示例使用 nhsuk-fieldset，包含可见图例，并为单选输入使用相同的 name 属性。每个输入都有各自的 id 和标签。通过 aria-describedby 将提示与整个分组关联。这些关系让浏览器能够将其作为一组选一的选项呈现。

单选项结构会将输入和标签放在 nhsuk-radios__item 内。标准单选项适用于主要问题；小号变体适用于更紧凑的筛选场景。使用方向键操作时，虚构的出席选项仍保持互斥。

- 图例说明要做出的选择。

- 共用的 attendance name 属性将选项组成一个选择组。

- 每个标签都指向不同的输入 ID。

阅读配套规范

## NHS 设计系统 提供帮助，但不隐藏关键信息

### 使用原生 details 元素

details 示例包含 nhsuk-details__summary 和 summary-text span，后面接 nhsuk-details__text。它使用浏览器原生行为展开。预约身份和“不会进行任何预约”的说明应放在 disclosure 外，因为每个人都需要看到这些信息。

在 10.6 中，Nunjucks API 使用 summary.text 或 summary.html；较旧的 summaryText 选项已弃用。如果使用宏，建议采用新的对象结构。HTML 示例无需依赖模板，同时保留相同的结构。

阅读配套规范

## NHS 设计系统 选项错误与回顾

### 验证选项组，但不要预先选择选项

初始状态下不选择任何选项。未作答就继续时，会显示行内错误，并将选项组与该错误信息关联。随后预览会聚焦到错误信息。返回回顾页面时，已选选项仍会显示。这些是叠加在原生控件之上的应用状态决策。

回顾页面会再次显示所选方式和虚构的预约身份。操作按钮标注为“更改偏好”。页面不会显示暗示临床服务已接受该偏好的确认信息，也不会虚构健康建议或准备要求。

1. 请先选择出席方式，再继续。

2. 选择“电话”，然后打开本地回顾页面。

3. 将偏好更改为“亲自到场”，并检查更新后的回顾页面。

阅读配套规范

## NHS 设计系统 本地前端资源

### 使用选定的软件包和模块

此设置会将 10.6.1 CSS 和浏览器模块复制到静态资源目录。该模块导出 initAll；请在组件标记生成后调用它。独立示例使用同一份本地提供的发行版本，并在页面级别覆盖为 Arial。

样式包含组件规则和响应式基础样式。用于更改回顾面板的小型脚本属于独立的应用代码。生产服务应以维护中的数据替换虚构的预约记录，并通过自己的后端处理实际的偏好请求。

阅读配套规范

## NHS 设计系统 检查组合方案

### 确认医疗服务场景

关键检查点是：访客能够识别预约，理解出席偏好尚未确认，并能在不丢失上下文的情况下更改所选方式。通用的成功提示会模糊这一区别。

使用键盘操作单选按钮组和 details 摘要，然后在窄屏视图中检查较长的诊所名称。未选择选项时，错误应引导用户返回选项组。该库提供可复用的行为，但实际预约规则和临床信息仍由相关机构负责。

阅读配套规范

## NHS 设计系统组件示例

### 出席方式单选按钮组

使用带标签的 fieldset，包含互斥的原生输入控件和 NHS 组件类。

```
<fieldset class="nhsuk-fieldset" aria-describedby="contact-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">How would you prefer to attend?</legend>
  <div class="nhsuk-hint" id="contact-hint">Select one option.</div>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="in-person" name="attendance" type="radio" value="in-person">
      <label class="nhsuk-label nhsuk-radios__label" for="in-person">In person</label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="telephone" name="attendance" type="radio" value="telephone">
      <label class="nhsuk-label nhsuk-radios__label" for="telephone">Telephone</label>
    </div>
  </div>
</fieldset>
```

代码参考

### 可选的上下文帮助

原生 details 元素可展示补充信息，而不会隐藏当前任务。

```
<details class="nhsuk-details">
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">About these example choices</span>
  </summary>
  <div class="nhsuk-details__text"><p>These are fictional options, not available appointment slots.</p></div>
</details>
```

代码参考

### 完整的独立示例

完整文档包含其布局、控件与初始化。解压所链接的示例归档，即可获得完全一致的相对 vendor 资源，然后通过 HTTP 提供服务。

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Appointment preference — OpenDesign study</title><link rel="stylesheet" href="vendor/nhsuk-10.6.1/nhsuk-frontend.min.css"><style>body,body *,body *::before,body *::after{font-family:Arial,sans-serif!important}[hidden]{display:none!important}.study-strip{background:white;border-bottom:1px solid #d8dde0;padding:16px}.study-strip p{margin:0}.study-card{background:#fff;border:1px solid #d8dde0;padding:24px;margin-bottom:32px}h1:focus{outline:none}.study-result{border-left:4px solid #005eb8;padding:16px 24px;background:white}button,a,input{touch-action:manipulation}</style></head><body><header class="study-strip"><p class="nhsuk-body-s"><strong>OpenDesign · NHS component study</strong><br>Fictional appointment. This page cannot book or change care.</p></header><main class="nhsuk-width-container nhsuk-main-wrapper nhsuk-main-wrapper--s" id="maincontent"><div class="nhsuk-grid-row"><div class="nhsuk-grid-column-two-thirds"><div class="study-card"><h2 class="nhsuk-heading-m">Example appointment</h2><p class="nhsuk-body">Community clinic · Alex Example<br>Tuesday, 20 October · 10:30am</p></div><section id="choice"><h1 class="nhsuk-heading-l">Choose an attendance preference</h1><form id="form" novalidate><div class="nhsuk-form-group" id="group"><fieldset class="nhsuk-fieldset" aria-describedby="contact-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">How would you prefer to attend?</legend>
  <div class="nhsuk-hint" id="contact-hint">Select one option.</div>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="in-person" name="attendance" type="radio" value="in-person">
      <label class="nhsuk-label nhsuk-radios__label" for="in-person">In person</label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="telephone" name="attendance" type="radio" value="telephone">
      <label class="nhsuk-label nhsuk-radios__label" for="telephone">Telephone</label>
    </div>
  </div>
</fieldset></div><details class="nhsuk-details">
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">About these example choices</span>
  </summary>
  <div class="nhsuk-details__text"><p>These are fictional options, not available appointment slots.</p></div>
</details><button class="nhsuk-button" type="submit">Review preference</button></form></section><section id="review" hidden><h1 class="nhsuk-heading-l" tabindex="-1" id="review-title">Your preference</h1><div class="study-result"><p class="nhsuk-body" id="selected"></p><p class="nhsuk-body">This is a local example. The appointment has not changed.</p></div><button class="nhsuk-button nhsuk-button--secondary nhsuk-u-margin-top-5" id="change" type="button">Change preference</button></section><p class="nhsuk-body-s">Native 10.6.1 controls with Arial. <a href="vendor/nhsuk-10.6.1/LICENSE.txt">Frontend licence</a>.</p></div></div></main><script type="module">import{initAll}from './vendor/nhsuk-10.6.1/nhsuk-frontend.min.js';initAll();const form=document.getElementById('form'),group=document.getElementById('group'),fs=group.querySelector('fieldset');form.addEventListener('submit',e=>{e.preventDefault();document.getElementById('error')?.remove();group.classList.remove('nhsuk-form-group--error');fs.setAttribute('aria-describedby','contact-hint');const value=form.querySelector(':checked')?.value;if(!value){group.classList.add('nhsuk-form-group--error');const p=document.createElement('p');p.id='error';p.className='nhsuk-error-message';p.tabIndex=-1;p.textContent='Select how you would prefer to attend';fs.querySelector('.nhsuk-radios').before(p);fs.setAttribute('aria-describedby','contact-hint error');p.focus();return}document.getElementById('selected').textContent='Selected method: '+(value==='telephone'?'Telephone':'In person');document.getElementById('choice').hidden=true;document.getElementById('review').hidden=false;document.getElementById('review-title').focus()});document.getElementById('change').addEventListener('click',()=>{document.getElementById('review').hidden=true;document.getElementById('choice').hidden=false;form.querySelector(':checked').focus()});</script></body></html>
```

代码参考

- 从“来源”一节下载完整示例。其 README 给出了确切的本地启动命令。

- 保持 vendor 路径相对于本文档；该归档包含此预览所使用的全部资源。

## NHS 设计系统 Agent 设置

### 实现起点

将 shell 命令和 HTML 分别放入对应文件。Arial 是独立预览中明确指定的覆盖字体；NHS 机构应遵守实际的字体许可和品牌要求。Sources 中的完整可运行示例 ZIP 还提供了准确的预览依赖项和完整文档。将其解压到相应目录，在该目录中运行 python3 -m http.server 8080，然后打开 http://localhost:8080/nhs.html。请勿通过 file:// 打开基于模块的示例。

```
npm install nhsuk-frontend@10.6.1
mkdir -p public/assets
cp node_modules/nhsuk-frontend/dist/nhsuk/nhsuk-frontend.min.css public/assets/
cp node_modules/nhsuk-frontend/dist/nhsuk/nhsuk-frontend.min.js public/assets/

<link rel="stylesheet" href="/assets/nhsuk-frontend.min.css">
<style>body, body *, body *::before, body *::after { font-family: Arial, sans-serif !important; }</style>
<script type="module">
  import { initAll } from '/assets/nhsuk-frontend.min.js';
  initAll();
</script>
```

### 适用于你项目的提示词

```
使用 NHS.UK Frontend 10.6.1 构建一个独立的预约偏好问题。使用 fieldset 和 legend 组织互斥的出席方式，并为单选按钮添加关联提示；使用原生 Details 提供可选帮助。让问题和必要说明始终可见。用户在未作答时进入回顾页面，应显示带链接的错误摘要和行内错误；返回本地回顾页面时，保留已选方式。加载对应的 CSS 和模块 initAll，并使用文档中明确说明的 Arial 研究覆盖设置。不要添加预约查询、实际预约更改、临床建议或任何暗示与 NHS 有关的身份声明。
```

## NHS 设计系统 来源与范围

基于 NHS.UK frontend 10.6.1 的独立预约偏好研究。不使用 NHS 标志、授权字体 Frutiger、真实预约或临床说明，也不暗示获得认可。

- 排版 字体使用资格和事务型文字层级。

- 颜色 具名语义变量。

- 间距 响应式类级别。

- 布局 容器和桌面网格。

- 单选按钮 选项组结构和状态。

- Details Disclosure 结构和当前宏 API。

- 前端源码 官方实现和发行版本。

- 下载完整可运行示例 包含完整 HTML、本地 CSS/JavaScript 依赖、随附许可证以及确切启动说明的 ZIP 包。无需构建步骤。

## NHS 设计系统 相关资源

### NL 设计系统

使用真实的贡献者组件和明确的主题，构建公共服务界面。本参考采用 Utrecht CSS，展示令牌映射、数据列表结构，以及使用相同编辑流程的两种原创主题。

### NSW 设计系统

通过完整的工作坊指南和独立的本地阅读清单，了解 NSW 设计令牌、Public Sans 字体排版，以及支持键盘操作的原生标签页。

### ONS 设计系统

构建一个前后不会矛盾的调查问卷：使用 ONS 原生复选框、互斥选项、准确的字体和颜色引用，以及完整的本地回顾流程。


- [实现参考](https://service-manual.nhs.uk/design-system/components/radios)
- [来源](https://service-manual.nhs.uk/design-system/styles/typography)
- [来源](https://service-manual.nhs.uk/design-system/styles/colour)
- [来源](https://service-manual.nhs.uk/design-system/styles/spacing)
- [来源](https://service-manual.nhs.uk/design-system/styles/layout)
- [阅读配套规范](https://service-manual.nhs.uk/design-system/styles/typography)
- [代码参考](https://service-manual.nhs.uk/design-system/styles/spacing)
- [阅读配套规范](https://service-manual.nhs.uk/design-system/styles/spacing)
- [阅读配套规范](https://service-manual.nhs.uk/design-system/styles/layout)
- [阅读配套规范](https://service-manual.nhs.uk/design-system/components/radios)
- [阅读配套规范](https://service-manual.nhs.uk/design-system/components/details)
- [阅读配套规范](https://github.com/nhsuk/nhsuk-frontend)
- [代码参考](https://service-manual.nhs.uk/design-system/components/radios)
- [代码参考](https://service-manual.nhs.uk/design-system/components/details)
- [排版 字体使用资格和事务型文字层级。](https://service-manual.nhs.uk/design-system/styles/typography)
- [颜色 具名语义变量。](https://service-manual.nhs.uk/design-system/styles/colour)
- [间距 响应式类级别。](https://service-manual.nhs.uk/design-system/styles/spacing)
- [布局 容器和桌面网格。](https://service-manual.nhs.uk/design-system/styles/layout)
- [单选按钮 选项组结构和状态。](https://service-manual.nhs.uk/design-system/components/radios)
- [Details Disclosure 结构和当前宏 API。](https://service-manual.nhs.uk/design-system/components/details)
- [前端源码 官方实现和发行版本。](https://github.com/nhsuk/nhsuk-frontend)