Дизайн-система 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 Примеры компонентов дизайн-системы

<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 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>

<!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>