Usa la tipografia NHS.UK, spaziature responsive, opzioni radio raggruppate e dettagli contestuali per creare un percorso chiaro di scelta delle preferenze per un appuntamento.
Frontend NHS.UK nativo 10.6.1 CSS/JS, override Arial e stato locale originale; nessuna integrazione con servizi clinici. · Riferimento per l’implementazione
02
Riferimento di design sistema di design NHS
Frontend NHS.UK 10.6.1 e manuale dei servizi digitali NHS. L’anteprima usa CSS/JS ufficiali in locale con Arial, non Frutiger con licenza né il logo NHS. I valori responsive sono verificati rispetto al pacchetto selezionato; non vengono forniti contenuti clinici.
Il frontend NHS.UK fornisce le basi visive e di interazione; non prenota una visita né stabilisce quali modalità di partecipazione supporta una clinica. Questo studio mostra un appuntamento fittizio e permette al visitatore di scegliere una preferenza. Il risultato è una revisione locale, non una prenotazione.
Frutiger è una risorsa del marchio NHS soggetta a condizioni di licenza. Questa risorsa indipendente usa Arial, il fallback documentato, ed esclude il logo NHS. Il frontend ufficiale CSS resta intatto; un override locale esplicito del font impedisce richieste a Frutiger.
Sistema di design NHS Tipografia per le transazioni
Lascia che sia la domanda a definire la gerarchia
Usa nhsuk-heading-l per la domanda della pagina e nhsuk-heading-m per una sezione subordinata. È diverso da una pagina editoriale lunga, in cui le indicazioni iniziano con heading-xl. Il fieldset dei radio button può avere una legenda delle dimensioni di un titolo senza perdere la semantica del gruppo.
Le classi per i paragrafi distinguono il testo del corpo, l’introduzione e le note di supporto più piccole. Un’introduzione da 26px è utile una volta, all’inizio della pagina, mentre le istruzioni per l’appuntamento restano nel normale testo del corpo. L’anteprima mantiene una larghezza di riga sufficiente per mandare a capo le date e i nomi delle sedi.
La spaziatura NHS non corrisponde alla scala di spaziatura GOV.UK
Le unità responsive NHS seguono una sequenza diversa e cambiano sopra i 768px. Per esempio, l’unità 6 passa da 32px a 40px. Non trasferire in NHS il valore dell’unità 6 di GOV.UK solo perché i nomi delle utility sembrano correlati.
La demo usa il contenitore da 960px e una colonna di lettura larga due terzi. Il comportamento nativo della griglia crea una singola colonna al di sotto della larghezza desktop. Le modifiche al layout sono gestite dalla libreria, mentre la piccola fascia identificativa indipendente è uno stile dell’applicazione.
La documentazione indica 641px come larghezza tablet e 769px come larghezza desktop. Le larghezze delle colonne della griglia entrano in funzione a partire dal desktop; questo non significa che ogni regola tipografica attenda lo stesso limite. Usa le classi native invece di implementare un unico breakpoint globale per tutte le proprietà.
Sistema di design NHS Opzioni di partecipazione raggruppate
Un fieldset, una risposta
L’esempio usa nhsuk-fieldset con una legenda visibile e un attributo name condiviso per gli input radio. Ogni input ha un id e un’etichetta propri. Il suggerimento è associato al gruppo tramite aria-describedby. Queste relazioni permettono al browser di presentare un’unica scelta esclusiva.
La struttura degli elementi radio racchiude l’input e l’etichetta in nhsuk-radios__item. I radio standard sono adatti a una domanda principale; la variante piccola è pensata per filtri più densi. Le opzioni fittizie di partecipazione restano mutuamente esclusive quando si usano i tasti freccia.
La legenda descrive la scelta.
Il nome condiviso per la partecipazione crea il gruppo di selezione.
Sistema di design NHS Aiuto senza nascondere le informazioni essenziali
Usa un elemento details nativo
L’esempio details include nhsuk-details__summary e uno span summary-text, seguiti da nhsuk-details__text. Si apre con il comportamento nativo del browser. Mantieni visibili, al di fuori del contenuto a scomparsa, l’identità dell’appuntamento e l’informazione che non viene effettuata alcuna prenotazione, perché sono necessarie a tutti.
Nella versione 10.6, la macro Nunjucks API usa summary.text o summary.html; l’opzione precedente summaryText è deprecata. Se usi le macro, preferisci la nuova struttura dell’oggetto. L’esempio HTML evita una dipendenza dal motore di template, mantenendo la stessa struttura.
Sistema di design NHS Errori di scelta e riepilogo
Convalida il gruppo senza preselezionare un’opzione
Inizialmente non è selezionata alcuna opzione. Se si continua senza rispondere, compare un errore in linea che viene associato al gruppo. L’anteprima porta quindi il focus sull’errore. Tornando dal riepilogo, la selezione resta visibile. Si tratta di decisioni sullo stato dell’applicazione, sovrapposte ai controlli nativi.
Il riepilogo ripete il metodo scelto e l’identità fittizia dell’appuntamento. L’azione è «Modifica la preferenza». Non compare alcuna conferma che possa far pensare che un servizio clinico abbia accettato la preferenza; inoltre, non vengono inventati consigli sanitari o requisiti di preparazione.
Continua dopo aver selezionato un metodo di partecipazione.
Seleziona «Al telefono» e apri il riepilogo locale.
Modifica la preferenza scegliendo «Di persona» e controlla il riepilogo aggiornato.
La configurazione copia CSS 10.6.1 e il modulo browser in una directory di risorse statiche. Il modulo esporta initAll; chiamalo dopo aver creato il markup del componente. L’esempio indipendente usa la stessa distribuzione servita localmente e una regola Arial a livello di pagina.
I fogli di stile includono le regole dei componenti e le basi responsive. Il piccolo script che modifica il pannello del riepilogo è codice separato dell’applicazione. In un servizio di produzione, il record fittizio dell’appuntamento verrebbe sostituito con dati gestiti e una richiesta effettiva di modifica della preferenza sarebbe elaborata dal relativo backend.
Le verifiche essenziali sono che l’utente possa identificare l’appuntamento, capire che la preferenza di partecipazione non è ancora confermata e modificare il metodo scelto senza perdere il contesto. Un messaggio generico di operazione riuscita renderebbe meno chiara questa distinzione.
Verifica l’uso del gruppo di radio button e della sintesi details con la tastiera, poi controlla la visualizzazione stretta con il nome lungo di una clinica. L’errore per la mancata selezione dovrebbe riportare al gruppo. La libreria fornisce comportamenti riutilizzabili, mentre l’organizzazione resta responsabile delle effettive regole per gli appuntamenti e delle informazioni cliniche.
L’elemento details nativo mostra informazioni aggiuntive senza nascondere l’attività principale.
html
<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>
Il documento completo include layout, controlli e inizializzazione. Estrai l’archivio di esempio collegato per ottenere gli esatti asset vendor relativi, quindi avvialo tramite HTTP.
html
<!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>
Scarica l’esempio completo dalla sezione Fonti. Il README indica il comando esatto per avviarlo in locale.
Mantieni i percorsi vendor relativi a questo documento; l’archivio include tutti gli asset usati da questa anteprima.
04
Sistema di design NHS Configurazione dell’agent
Punto di partenza per l’implementazione
Inserisci i comandi della shell e HTML nei rispettivi file. Arial è una sovrascrittura esplicita, indipendente, per l’anteprima; le organizzazioni NHS devono attenersi alla propria licenza per i font e ai requisiti del brand. Il file ZIP dell’esempio completo funzionante, disponibile in Sources, include anche le dipendenze esatte per l’anteprima e il documento completo. Estrailo, esegui python3 -m http.server 8080 in quella directory e poi apri http://localhost:8080/nhs.html. Non aprire gli esempi basati su moduli tramite file://.
sh / html
npm install [email protected]
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>
Un prompt per il tuo progetto
Prompt per l’agente
Crea una domanda indipendente sulle preferenze di partecipazione agli appuntamenti usando NHS.UK Frontend 10.6.1. Usa un fieldset e una legenda per i metodi di partecipazione mutuamente esclusivi, suggerimenti associati ai radio button e l’elemento Details nativo per l’aiuto facoltativo. Mantieni visibili la domanda e le istruzioni essenziali. In caso di mancata risposta nel riepilogo, mostra un riepilogo degli errori collegato e un errore in linea; quando si torna dal riepilogo locale, conserva il metodo selezionato. Carica il CSS corrispondente e il modulo initAll, con la sovrascrittura Arial esplicitamente documentata per lo studio. Non aggiungere ricerca di appuntamenti, modifiche reali alle prenotazioni, consigli clinici o affermazioni di appartenenza al NHS.
05
Sistema di design NHS Fonti e ambito
Studio indipendente sulle preferenze di partecipazione agli appuntamenti, basato su NHS.UK frontend 10.6.1. Nessun logo NHS, font Frutiger con licenza, prenotazione reale, istruzione clinica o avallo implicito.
