Visa Product tasarım sistemi.

Visa Product tasarım sistemi Okunabilir İnceleme Durumuna Sahip Bir Tercih Görevi

Her soruyu bağımsız tutun

Örnek, ekstre biçimini ve özet sıklığını sorar. Bunlar ayrı radyo gruplarıdır: sıklığı değiştirmek, biçim seçimini kaldırmaz. Birincil işlemden önce her iki seçeneği de yineleyen özet, kullanıcının sonucu bir simgeyi yorumlamadan veya gizli bir varsayılanı anlamaya çalışmadan incelemesini sağlar.

Tercihi inceleme işlemi yalnızca yerel bir onay kaydeder. Sayfa kart numarası istemez, hesaba erişmez, ekstre oluşturmaz ve finansal hizmet ayarını değiştirmez. Böylece örnek, tasarım sisteminin seçim ve geri bildirim davranışına odaklanır.

Destekleyici belirtimi okuyun

Visa Product tasarım sistemi Nova stilleri ve Visa teması ayrı içe aktarımlardır

Yapı, temanın tamamı değildir

Resmî kurulumda önce styles.css, ardından themes/visa/index.css gösterilir. İlki bileşen ve yardımcı sınıf kurallarını sağlar; ikincisi Visa temasını sunar. Yalnızca birini yüklemek eksik bir entegrasyon oluşturur. Bağımsız örnek ve içe aktarma kod parçacığı da bu sırayı korur.

Kontrol edilen paketin sürümü 1.6.5’tir. Örnek, görüntülenirken üçüncü taraf bir stil sayfası isteğine bağlı olmaması için CSS paketini yerel olarak gömer. Uzak font-face bildirimleri kaldırılır ve uygulama, yedek olarak sistem yazı tipini açıkça kullanır. Bu, yazı tipi değişikliği belirtilmiş yerel Nova CSS kullanımıdır; tescilli yazı tipiyle birebir eşleştiği iddiası değildir.

Destekleyici belirtimi okuyun

Visa Product tasarım sistemi Varsayılan ve alternatif paletlerde, her renk için eşleşen bir ön plan rengi bulunur

Bir dolgu rengini metin rolü olmadan başka yere taşımayın

Varsayılan/açık temadaki etkin renk #1434cb, üzerine gelindiğinde #173be8 ve basıldığında #0f2595 olur. Bu rengin üzerindeki metin rolü beyazdır. Alternatif tema bağlamında rol eşlemesi değişir; bu nedenle örnek, yalnızca arka planı geçersiz kılmak yerine başlık yüzeyinde v-alternate kullanır.

Vurgu rengi #fcc015, tüm düğmeler için kullanılacak evrensel bir dolgu rengi değildir. Vurgu ve etkin rollerinin nasıl kullanılacağını tema bağlamı belirler. Referans tablosunda varsayılan palet açıklanır; aynı stil sayfasında daha sonra tanımlanan koyu ve alternatif renkler, yanıltıcı tek bir değer kümesi oluşturacak şekilde birleştirilmez.

Destekleyici belirtimi okuyun

Visa Product tasarım sistemi rem ölçeğini temanın kök boyutuna göre değerlendirin

Temanın 14 piksellik kök boyutu, alışılmış rem varsayımlarını değiştirir

Visa teması, kök yazı tipi boyutunu 14 piksel olarak tanımlar. Bu nedenle yaklaşık 2.285714rem olan headline-1 değeri, bu kök boyutunda 32 piksele karşılık gelir; 16 piksellik kök varsayılarak elde edilen değere değil. body-1 yaklaşık 1.142857rem, body-2 ise 1rem’dir.

Ölçeklenebilir boyut belirteçleri, bir piksel değerinin tema ölçek faktörüyle çarpımını ifade eder. Duyarlı bağlamlarda ikinci bir faktör de devreye girebilir. Boşlukları uygulamaya uyarlarken bu ifadeyi koruyun; yalnızca varsayılan hesaplanmış sayıyı kopyalamak bu ilişkiyi kaybettirir. Örnekte, sıklık kontrollerinde resmî gap yardımcı sınıfları; genel iki sütunlu düzende ise uygulamaya özgü boyutlar kullanılır.

Destekleyici belirtimi okuyun

Visa Product tasarım sistemi Nova sunumunun altında yerel radyo düğmesi anlamı

Stil verilmiş bir daire, radyo grubu değildir

Herkese açık meta veriler, v-radio sınıfını gerçek bir input type="radio" öğesine uygular ve bunu bir label ile eşleştirir. Önizlemede bu yerel yapı korunur ve her seçeneğin görünür açıklaması kendi label öğesine sarılır. Klavye okları grup içinde seçimler arasında gezinmeyi sağlar; seçili durum tarayıcı ve yardımcı teknolojiler tarafından kullanılabilir olmaya devam eder.

Her sorunun adını bir fieldset ve legend belirtir. Biçim seçenekleri, seçimin sonuçlarını açıklar: PDF indirilebilir bir örnektir; HTML ise yeniden akış sağlayan bir biçim olarak tanımlanır. Ürüne özgü içerik özgündür; denetimlerin yapısı ve sınıfları yerel kitaplıktan alınmıştır.

• İki biçim seçeneği için bir ad, sıklık için başka bir ad kullanın.
• Özetin tutarlı bir etiket kullanabilmesi için radyo düğmesinin value değerini görünür metinden ayrı tutun.
• Durumu yalnızca dekoratif bir sınıfla değil, checked ve disabled öznitelikleriyle belirtin.

Destekleyici belirtimi okuyun

Visa Product tasarım sistemi Nova CSS denetimlere stil verir; seçimi yerel HTML yönetir

Gruplama ve inceleme mantığını stil sayfasının dışında tutun

Örnekte, gerçek radyo girişlerinde Nova’nın v-radio sınıfı kullanılır. Ortak name öznitelikleri biçim seçeneklerini birbirini dışlayacak şekilde gruplarken farklı bir name özniteliği sıklık grubunu ayırır. Fieldset ve legend grup bağlamını sağlar; ilişkilendirilmiş bir label ise seçeneğin tüm metnini denetimin erişilebilir adına dahil eder.

CSS paketi seçenek belirlemez, uygulama kalıcılığını yönetmez veya inceleme kaydı oluşturmaz. Sağlanan betik, iki yerel grubu okuyup yerel bir özet oluşturur. Önceki değerler artık mevcut tercihi yansıtmadığından, seçim değişikliği bu özeti temizler.

Uygulamada hem yapısal stil sayfasını hem de Visa temasını kullanın. Alternatif başlıkta v-alternate kullanılır; form ise varsayılan renk bağlamında kalır. Yalnızca arka planı değiştirip ön plan rollerini çözümsüz bırakarak başlığı taklit etmeyin.

Destekleyici belirtimi okuyun

Visa Product tasarım sistemi Her genişlikte tek bir okuma sırası

Görev sırasını değiştirmeden özeti taşıyın

Geniş ekranlarda seçim grupları ve mevcut seçim özeti yan yana görünür. Dar ekranlarda özet, formun ardından gelir. Belge görseli göreve ilişkin bilgi sağlamadığından gizlenir; tüm etiketler, açıklamalar ve eylemler korunur.

CSS kitaplığı güncel tarayıcıları destekler. Resmî geliştirme yönergeleri eski tarayıcılarla uyumluluk garantisi vermez. Bu nedenle üretim ekipleri, modern bir önizlemenin sorunsuz çalışmasını evrensel destek olarak kabul etmek yerine destekledikleri sürümleri test etmelidir.

1. Sabitlenmiş yapısal CSS ve Visa temasını yükleyin, ardından uygulama düzeni stillerini ekleyin.
2. Erişilebilir HTML ve üç aylık seçeneklerini belirleyin, tercihi gözden geçirin ve ikisinin de özette göründüğünü doğrulayın.
3. Seçeneklerden birini değiştirin, inceleme bildiriminin sıfırlandığını doğrulayın; ardından Sıfırla’yı ve dar ekran düzenini test edin.

Destekleyici belirtimi okuyun

Visa Product tasarım sistemi Bileşen Örnekleri

<!-- index.html after installing @visa/[email protected] in a Vite vanilla project -->
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Statement preference</title>
<link rel="stylesheet" href="/node_modules/@visa/nova-styles/styles.css">
<link rel="stylesheet" href="/node_modules/@visa/nova-styles/themes/visa/index.css">
<style>:root{font-family:Arial,sans-serif}body{font-family:Arial,sans-serif;background:#fff}*{box-sizing:border-box}.app{max-width:1150px;margin:auto;padding:24px}.hero{padding:32px;display:grid;grid-template-columns:1fr 150px;align-items:center;gap:24px;border-radius:6px}.hero h1{font-family:Arial,sans-serif;font-weight:600;line-height:1.2;margin:12px 0 16px}.hero p{font-family:Arial,sans-serif}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:600}.paper{width:120px;height:150px;background:white;border-radius:6px;transform:rotate(8deg);padding:20px;box-shadow:8px 8px 0 #0f2595;position:relative}.paper span{display:block;height:3px;background:#1434cb;margin:10px 0;width:70px}.paper span:nth-child(2){width:45px}.paper b{position:absolute;bottom:10px;right:15px;color:#1434cb;font:600 36px Arial}.workspace{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;margin:32px 0}.workspace h2,.workspace legend{font-family:Arial,sans-serif;font-weight:600}.hint{font-size:14px;color:#4a4a4a;line-height:1.5;margin:12px 0 16px}.option{display:flex;gap:16px;padding:20px 16px;border:1px solid #ddd;border-radius:6px;margin:12px 0;cursor:pointer}.option:has(:checked){border:2px solid #1434cb;padding:19px 15px;background:#f6f9ff}.option b{font-size:16px}.option small{display:block;font-size:14px;color:#4a4a4a;line-height:1.5;margin-top:4px}.option .v-radio{flex-shrink:0}.frequency{margin-top:28px}.frequency legend{margin-bottom:16px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.v-button{font-family:Arial,sans-serif}.summary{background:#f5f5f5;padding:24px;border-radius:6px;align-self:start;min-height:285px}.summary h2{margin:16px 0 8px}.rule{height:1px;background:#ddd;margin-top:20px}.status{padding:16px 0;font-size:14px;line-height:1.5}.confirmed{color:#1434cb;font-weight:600}footer{font-size:12px;color:#4a4a4a;border-top:1px solid #ddd;padding-top:16px;line-height:1.5}@media(max-width:650px){.app{padding:16px}.hero{padding:24px;grid-template-columns:1fr}.paper{display:none}.workspace{grid-template-columns:1fr;gap:24px}.hero h1{font-size:28px}.option{padding:16px 12px}.option:has(:checked){padding:15px 11px}}
</style><main class="app"><header class="v-surface v-alternate hero"><div><p class="eyebrow">ACCOUNT PREFERENCES / SAMPLE</p><h1 class="v-typography-headline-1">Choose how you read<br>your statement.</h1><p class="v-typography-body-1">One clear choice, with the details visible before you confirm.</p></div><div class="paper" aria-hidden="true"><span></span><span></span><span></span><b>01</b></div></header><div class="workspace"><form id="form"><fieldset><legend class="v-typography-headline-3">Statement format</legend><p class="hint">This page stores a demonstration preference only.</p><label class="option"><input class="v-radio" type="radio" name="delivery" value="Digital PDF" checked><span><b>Digital PDF</b><small>A downloadable sample statement for offline reading.</small></span></label><label class="option"><input class="v-radio" type="radio" name="delivery" value="Accessible HTML"><span><b>Accessible HTML</b><small>A reflowable sample statement with structured headings.</small></span></label></fieldset><fieldset class="frequency"><legend class="v-typography-headline-3">Summary frequency</legend><div class="v-flex v-gap-16"><label class="v-flex v-align-items-center v-gap-4"><input class="v-radio" type="radio" name="frequency" value="Monthly" checked>Monthly</label><label class="v-flex v-align-items-center v-gap-4"><input class="v-radio" type="radio" name="frequency" value="Quarterly">Quarterly</label></div></fieldset><div class="actions"><button class="v-button" type="submit">Review preference</button><button class="v-button v-button-secondary" id="reset" type="button">Reset</button></div></form><aside class="summary"><p class="eyebrow">YOUR CURRENT SELECTION</p><h2 class="v-typography-headline-3" id="selection">Digital PDF</h2><p id="period">Monthly summary</p><div class="rule"></div><p class="hint">No account data is used. No statement is generated or delivered.</p><p class="status" id="status" role="status">Review your preference to create a local confirmation.</p></aside></div><footer>Nova styles 1.6.5 and Visa theme. The example application styles use a system-font fallback. Original demonstration, no financial service connection.</footer></main>
<script>const form=document.querySelector('#form'),status=document.querySelector('#status');function update(){document.querySelector('#selection').textContent=form.elements.delivery.value;document.querySelector('#period').textContent=form.elements.frequency.value+' summary';status.textContent='Review your preference to create a local confirmation.';status.classList.remove('confirmed')}form.onchange=update;form.onsubmit=e=>{e.preventDefault();status.textContent='Reviewed locally: '+form.elements.delivery.value+', '+form.elements.frequency.value.toLowerCase()+'. No account setting changed.';status.classList.add('confirmed')};document.querySelector('#reset').onclick=()=>{HTMLFormElement.prototype.reset.call(form);update()};</script>
</html>

import '@visa/nova-styles/styles.css';
import '@visa/nova-styles/themes/visa/index.css';
import './application.css';