# Дизайн-система NHS

## Предпросмотр интерфейса дизайн-система NHS

Выберите способ, ознакомьтесь с дополнительной справкой, исправьте отсутствие ответа и измените своё предпочтение.

## Дизайн-справка дизайн-система NHS

NHS.UK frontend 10.6.1 и руководство по цифровым сервисам NHS. В предпросмотре используются официальные локальные файлы CSS/JS со шрифтом Arial, а не лицензированный 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 | Используйте heading-m для следующего за ним h2. |
### Семантические цветовые переменные

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| $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 для единицы 6 в NHS только потому, что названия вспомогательных классов похожи.

В демонстрации используется контейнер шириной 960px и колонка для чтения шириной в две трети. На экранах меньше настольных сетка автоматически становится одноколоночной. Изменения макета контролирует библиотека, а небольшая отдельная полоса с фирменной идентичностью оформлена средствами приложения.

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

Справочник по коду

Прочитать вспомогательную спецификацию

### Границы адаптивных режимов

В документации 641px обозначен как граница планшетного размера, а 769px — настольного. Ширина колонок сетки задаётся начиная с настольного размера; это не означает, что все типографические правила начинают действовать с той же границы. Используйте встроенные классы, а не задавайте одну общую контрольную точку для всех свойств.

Прочитать вспомогательную спецификацию

## Дизайн-система NHS Сгруппированные варианты посещения

### Одна группа, один ответ

В примере используется nhsuk-fieldset с видимой легендой и общим атрибутом name у переключателей. У каждого переключателя есть собственные id и метка. Подсказка связана с группой через aria-describedby. Благодаря этим связям браузер представляет варианты как единый взаимоисключающий выбор.

Структура элемента радиогруппы помещает переключатель и метку внутрь nhsuk-radios__item. Обычные переключатели подходят для основного вопроса; компактный вариант предназначен для более плотных контекстов фильтрации. Вымышленные варианты посещения остаются взаимоисключающими при навигации клавишами со стрелками.

- Легенда обозначает, что нужно выбрать.

- Общее значение name для вариантов посещения объединяет их в группу выбора.

- Каждая метка связана с отдельным ID переключателя.

Прочитать вспомогательную спецификацию

## Дизайн-система NHS Помощь без сокрытия важной информации

### Используйте встроенный элемент details

В примере с details используются nhsuk-details__summary и вложенный span с классом summary-text, а затем nhsuk-details__text. Элемент открывается средствами браузера. Не скрывайте идентификацию приёма и информацию о том, что запись не производится: они должны быть видны всем.

В версии 10.6 макрос Nunjucks API использует summary.text или summary.html; устаревший параметр summaryText больше не рекомендуется. Если используете макросы, отдавайте предпочтение новой структуре объекта. Пример HTML не зависит от шаблонизатора, сохраняя при этом ту же структуру.

Прочитать вспомогательную спецификацию

## Дизайн-система NHS Ошибки выбора и проверка

### Проверяйте группу, не выбирая вариант заранее

Изначально ни один вариант не выбран. Если продолжить без ответа, появляется встроенное сообщение об ошибке, связанное с группой. Затем предварительный просмотр переводит фокус на ошибку. При возврате из проверки выбранный вариант остаётся видимым. Это решения, касающиеся состояния приложения и дополняющие встроенные элементы управления.

В проверке повторяются выбранный способ и вымышленная информация о приёме. Действие называется «Изменить предпочтение». Подтверждение не подразумевает, что медицинская служба приняла предпочтение; медицинские рекомендации и требования по подготовке не выдумываются.

1. Прежде чем продолжить, выберите способ посещения.

2. Выберите «По телефону» и откройте локальную проверку.

3. Измените предпочтение на «Лично» и проверьте обновлённый экран проверки.

Прочитать вспомогательную спецификацию

## Дизайн-система NHS Локальные ресурсы фронтенда

### Используйте выбранный пакет и модуль

При настройке копируются CSS версии 10.6.1 и модуль для браузера в каталог статических ресурсов. Модуль экспортирует initAll; вызывайте его после добавления разметки компонента. В автономном примере используется та же раздаваемая локально сборка и переопределение шрифта Arial на уровне страницы.

В таблицы стилей входят правила компонентов и адаптивные основы. Небольшой скрипт, изменяющий панель проверки, — отдельный код приложения. В рабочем сервисе вместо вымышленной записи о приёме будут актуальные данные, а запрос на изменение предпочтения будет обрабатываться собственной серверной частью.

Прочитать вспомогательную спецификацию

## Дизайн-система NHS Проверка композиции

### Проверьте контекст медицинской службы

Важно убедиться, что посетитель может определить, о каком приёме идёт речь, понять, что предпочтительный способ посещения ещё не подтверждён, и изменить выбранный вариант, не теряя контекста. Обычное уведомление об успешном действии скрыло бы это различие.

Проверьте работу радиогруппы и сводки details с клавиатуры, затем изучите узкую версию страницы с длинным названием клиники. Ошибка при отсутствии выбора должна вести обратно к группе. Библиотека предоставляет повторно используемые функции, а организация отвечает за реальные правила записи и медицинскую информацию.

Прочитать вспомогательную спецификацию

## Дизайн-система NHS Примеры компонентов дизайн-системы

### Группа переключателей для выбора посещения

Группа с меткой, взаимоисключающими встроенными элементами управления и классами компонентов 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>
```

Справочник по коду

### Полный автономный пример

Полный документ включает разметку, элементы управления и инициализацию. Распакуйте связанный архив примера, чтобы получить нужные относительные пути к ресурсам поставщика, затем запустите его через 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.

- Оставьте пути к ресурсам поставщика относительными к этому документу; архив включает все ресурсы, используемые в предварительном просмотре.

## Дизайн-система NHS Настройка агента

### Отправная точка для реализации

Поместите команды оболочки и HTML в соответствующие файлы. Arial задан как явное переопределение для автономного предварительного просмотра; организациям NHS следует учитывать условия лицензии на используемый шрифт и требования бренда. Полный архив 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, реальной записи на приём, медицинских инструкций и намёков на одобрение NHS.

- Типографика Условия использования шрифтов и иерархия типографики для транзакционных интерфейсов.

- Цвет Именованные семантические переменные.

- Интервалы Адаптивная шкала классов.

- Компоновка Контейнер и сетка для настольных экранов.

- Переключатели Структура групп и состояния.

- Details Структура раскрывающегося блока и актуальный макрос API.

- Исходный код фронтенда Официальная реализация и дистрибутив.

- Скачать полный рабочий пример ZIP-архив с полным HTML, локальными зависимостями CSS/JavaScript, лицензиями и точными инструкциями по запуску. Сборка не требуется.

## Дизайн-система 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 Структура раскрывающегося блока и актуальный макрос API.](https://service-manual.nhs.uk/design-system/components/details)
- [Исходный код фронтенда Официальная реализация и дистрибутив.](https://github.com/nhsuk/nhsuk-frontend)