NHS tasarım sistemi.

NHS tasarım sistemi NHS Bağlamı ve Yazı Tipleri

Yanlış kimlik izlenimi vermeyen bir sağlık arayüzü

NHS.UK frontend, görsel ve etkileşim temelini sağlar; ancak randevu planlamaz veya bir kliniğin hangi katılım yöntemlerini desteklediğine karar vermez. Bu çalışma kurgu bir randevuyu gösterir ve ziyaretçinin tercih yapmasına olanak tanır. Sonuç, yerel bir gözden geçirmedir; rezervasyon değildir.

Frutiger, lisans koşullarına tabi bir NHS marka varlığıdır. Bu bağımsız kaynak, belgelenmiş yedek yazı tipi olan Arial’ı kullanır ve NHS logosunu içermez. Resmî CSS olduğu gibi korunur; açık bir yerel yazı tipi geçersiz kılması Frutiger isteklerini önler.

Destekleyici belirtimi okuyun

NHS tasarım sistemi İşlem Metinleri

Hiyerarşiyi sorunun belirlemesini sağlayın

Sayfadaki soru için nhsuk-heading-l, alt bölüm için nhsuk-heading-m kullanın. Bu, yönlendirmenin heading-xl ile başladığı uzun bir editoryal sayfadan farklıdır. Radyo alan grubu, grup anlamını kaybetmeden başlık boyutunda bir açıklama kullanabilir.

Düzenli paragraf sınıfları gövde metnini, giriş metnini ve küçük destekleyici metni birbirinden ayırır. Sayfanın başında bir kez kullanılan 26px boyutundaki giriş metni yararlı olabilir; randevu talimatları ise normal gövde metni olarak kalmalıdır. Önizlemede, tarihlerin ve konum adlarının alt satıra geçmesine yetecek genişlik korunur.

Destekleyici belirtimi okuyun

NHS tasarım sistemi Boşluk ve Kapsayıcı

NHS boşluk ölçeği, GOV.UK boşluk ölçeğiyle aynı değildir

NHS duyarlı birimleri farklı bir sıra izler ve 768px üzerinde değişir. Örneğin, 6. birim 32px'ten 40px'e çıkar. Yardımcı adları benzer görünüyor diye GOV.UK'in 6. birim değerini NHS için kullanmayın.

Demoda 960px kapsayıcı ve üçte ikilik bir okuma sütunu kullanılır. Yerel ızgara davranışı, masaüstü görünümünün altında tek sütuna geçer. Düzen değişiklikleri kütüphane tarafından yönetilirken küçük, bağımsız kimlik şeridi uygulama stilidir.

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

Kod referansı

Destekleyici belirtimi okuyun

Duyarlı tasarım sınırları

Belgelerde 641px tablet, 769px ise masaüstü olarak belirtilir. Izgara sütun genişlikleri masaüstü boyutunda devreye girer; bu, tüm tipografi kurallarının aynı eşik değerini beklediği anlamına gelmez. Tüm özellikler için tek bir genel kesme noktası tanımlamak yerine yerel sınıfları kullanın.

Destekleyici belirtimi okuyun

NHS tasarım sistemi Gruplandırılmış Katılım Seçenekleri

Tek alan grubu, tek yanıt

Örnekte görünür bir açıklamaya sahip nhsuk-fieldset ve radyo girişlerinde ortak bir name özniteliği kullanılır. Her girişin kendine ait bir id ve label'ı vardır. İpucu, aria-describedby aracılığıyla grupla ilişkilendirilir. Bu ilişkiler, tarayıcının tek ve karşılıklı olarak birbirini dışlayan bir seçenek sunmasını sağlar.

Radyo öğesi yapısında giriş ve etiket nhsuk-radios__item içinde yer alır. Standart radyo düğmeleri ana soru için uygundur; küçük varyant ise daha yoğun filtre bağlamları için tasarlanmıştır. Kurgusal katılım seçenekleri, ok tuşlarıyla gezinildiğinde de birbirini dışlayan seçenekler olarak kalır.

• Açıklama, kararı belirtir.
• Ortak katılım adı, seçim grubunu oluşturur.
• Her etiket farklı bir giriş ID'sini hedefler.

Destekleyici belirtimi okuyun

NHS tasarım sistemi Temel Bilgileri Gizlemeden Yardım Edin

Yerel details öğesini kullanın

Details örneğinde nhsuk-details__summary ve bir summary-text span'i, ardından da nhsuk-details__text yer alır. Öğe, tarayıcının yerel davranışıyla açılır. Randevu kimliğini ve bu sayfanın randevu oluşturmadığı bilgisini herkesin görmesi gerektiğinden, bu bilgileri açılır içeriğin dışında tutun.

10.6 sürümünde Nunjucks API, summary.text veya summary.html kullanır; eski summaryText seçeneği kullanımdan kaldırılmıştır. Makroları kullanıyorsanız yeni nesne yapısını tercih edin. HTML örneği, aynı yapıyı korurken şablon bağımlılığını önler.

Destekleyici belirtimi okuyun

NHS tasarım sistemi Seçim Hataları ve Gözden Geçirme

Önceden seçim yaptırmadan grubu doğrulayın

Başlangıçta hiçbir seçenek belirlenmez. Yanıt vermeden devam edildiğinde satır içi hata gösterilir ve grup bu hata mesajıyla ilişkilendirilir. Ardından önizleme odağı hataya taşır. Gözden geçirme ekranından dönüldüğünde seçim görünür kalır. Bunlar, yerel kontrollerin üzerine eklenen uygulama durumu kararlarıdır.

Gözden geçirme ekranında seçilen yöntem ve kurgusal randevunun kimliği yinelenir. Eylem metni Tercihi değiştir şeklindedir. Bir sağlık hizmetinin tercihi kabul ettiğini düşündüren onay mesajı gösterilmez; sağlık tavsiyesi veya hazırlık gerekliliği de uydurulmaz.

1. Bir katılım yöntemi seçmeden devam edin.
2. Telefonla seçeneğini belirleyip yerel gözden geçirme ekranını açın.
3. Tercihi Yüz yüze olarak değiştirin ve güncellenen gözden geçirme ekranını inceleyin.

Destekleyici belirtimi okuyun

NHS tasarım sistemi Yerel Ön Uç Varlıkları

Seçilen paketi ve modülü kullanın

Kurulum, 10.6.1 sürümündeki CSS paketini ve tarayıcı modülünü statik varlıklar dizinine kopyalar. Modül initAll öğesini dışa aktarır; bileşen işaretlemesi oluşturulduktan sonra bu öğeyi çağırın. Bağımsız örnek, aynı yerel dağıtımı ve sayfa düzeyinde bir Arial geçersiz kılmasını kullanır.

Stiller, bileşen kurallarını ve duyarlı tasarımın temel kurallarını içerir. Gözden geçirme panelini değiştiren küçük betik, ayrı bir uygulama kodudur. Üretim ortamındaki bir hizmet, kurgusal randevu kaydını güncel verilerle değiştirmeli ve gerçek bir tercih isteğini kendi arka ucu üzerinden işlemelidir.

Destekleyici belirtimi okuyun

NHS tasarım sistemi Birleşimi Gözden Geçirme

Sağlık hizmeti bağlamını kontrol edin

Ayırt edici kontrol noktaları şunlardır: ziyaretçi randevuyu tanıyabilmeli, katılım tercihinin henüz onaylanmadığını anlamalı ve bağlamı kaybetmeden seçtiği yöntemi değiştirebilmelidir. Genel bir başarı bildirimi bu ayrımı belirsizleştirir.

Radyo grubunu ve details özetini klavyeyle kullanın; ardından uzun bir klinik adı içeren dar görünümü inceleyin. Seçim yapılmadığında gösterilen hata, kullanıcıyı gruba yönlendirmelidir. Kütüphane yeniden kullanılabilir davranışlar sağlar; gerçek randevu kurallarından ve klinik bilgilerden ise kurum sorumludur.

Destekleyici belirtimi okuyun

NHS tasarım sistemi Bileşen Örnekleri

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