Progettazione di prodotti aziendali · Nuova risorsa
Sistema di design Volvo Cars Web.
Esamina le fondamenta web di Volvo Cars, basate innanzitutto su HTML, i token effettivi della modalità chiara e lo stile nativo delle schede selezionabili attraverso un esempio completo di piano per fare i bagagli, con scelte indipendenti, cambio di tema e ripristino.
Stili delle schede selezionabili di Volvo Cars CSS 2.5.1 pubblicati; input nativi HTML e logica della checklist originale. · Riferimento per l’implementazione
02
Sistema di design Volvo Cars Web Riferimento di design
Token pubblici effettivi di @volvo-cars/css 2.5.1, abbinati al markup documentato delle schede selezionabili. Sono mostrati i valori chiari predefiniti; la modalità scura è fornita dallo stesso foglio di stile.
Sistema di design Volvo Cars Web HTML-first, scelta dei Foundation e delle versioni
Blocca la versione del foglio di stile che corrisponde al pattern
L’esempio usa @volvo-cars/css 2.5.1, la versione corrispondente al riferimento delle schede selezionabili usato per l’implementazione. La versione 3 ha un contratto diverso; installare il pacchetto più recente senza verificare il markup può lasciare incompleto un pattern. La versione va indicata sia nella configurazione sia nella guida: la presenza di una classe di componente non garantisce che tutte le release la stilizzino allo stesso modo.
Usa con criterio il livello web pubblico
Questo studio importa direttamente i token web pubblici e il foglio di stile per tutti i media. Non dipende dal pacchetto interno EDLS separato. L’applicazione è realizzata in HTML puro, con una piccola quantità di JavaScript per la checklist. CSS installato gestisce l’aspetto delle schede selezionabili, lo stile dei controlli e i ruoli delle modalità colore; l’app fornisce contenuti e stato.
Sistema di design Volvo Cars Web Ruoli neutri, tipografia e spaziatura
Mantieni collegati i ruoli chiari e scuri
La tabella registra le dichiarazioni predefinite per il tema chiaro, mentre data-color-mode seleziona i corrispondenti valori nativi per il tema scuro. La composizione usa ruoli di sfondo e primo piano, invece di impostare forzatamente il testo bianco su ogni scheda. Il cambio di tema deve mantenere il piano e gli extra selezionati: cambiare la palette è indipendente dal modificare la checklist.
Distinguere i passaggi fissi dal ritmo fluido della pagina
Nella documentazione di riferimento, i valori di spaziatura fissi vanno da 2px a 64px. Gli altri token pubblici della pagina usano clamp e round, quindi si adattano alle dimensioni della finestra. La composizione a due colonne e la spaziatura di 40px dell’esempio sono scelte di layout originali, applicate alle schede native. Lo stack di font pubblicato è mantenuto, ma gli asset dei font Volvo non sono inclusi; il rendering usa il fallback di sistema disponibile.
Sistema di design Volvo Cars Web Semantica delle schede selezionabili
Usare pulsanti di opzione per scegliere un piano
Le due schede dei piani contengono pulsanti di opzione nativi con lo stesso name, all’interno di un fieldset con una legend. Ogni scheda è un’etichetta con slot per titolo, metadati e descrizione. Facendo clic sulla scheda si seleziona il relativo pulsante di opzione, mantenendo disponibile il normale comportamento da tastiera. Il piano selezionato è quindi un vero stato del modulo, non un bordo decorativo gestito separatamente.
Usare caselle di controllo per le aggiunte indipendenti
L’acqua e uno strato aggiuntivo possono essere selezionati indipendentemente, quindi si usano caselle di controllo. Le schede non contengono link o pulsanti annidati: un elemento interattivo dentro un’etichetta causerebbe comportamenti di attivazione in conflitto. Le azioni di riepilogo si trovano fuori dalle schede. Il livello React forms pubblicato è un’alternativa quando il design richiede davvero contenuti interattivi più complessi nelle schede.
Mantenere un gruppo di pulsanti di opzione all’interno di un fieldset e di una legend.
Usare caselle di controllo per le aggiunte indipendenti.
Mantenere link e pulsanti all’esterno di una scheda con etichetta che usa solo CSS.
Sistema di design Volvo Cars Web Checklist derivata e conferma
Ricavare il riepilogo dagli stessi controlli
Il riepilogo combina gli elementi di base del piano scelto con gli extra selezionati. Cambiando un pulsante di opzione, si aggiornano il titolo e gli elementi di base del piano, mantenendo gli extra indipendenti. Il conteggio è calcolato dall’elenco risultante. Tutti i contenuti di esempio per la preparazione dei bagagli sono originali e non riportano intenzionalmente specifiche dei veicoli, prezzi o affermazioni su una configurazione d’acquisto Volvo reale.
Cancellare la conferma non più valida quando cambiano le scelte
Sistema di design Volvo Cars Web Modalità colore e composizione responsiva
Mantenere il tema separato dallo stato della checklist
Il selettore della modalità colore modifica data-color-mode nel documento. Non ricrea i pulsanti di opzione, le caselle di controllo o il riepilogo. Il foglio di stile nativo applica transizioni ad alcune superfici, quindi la verifica visiva dovrebbe esaminare il tema una volta stabilizzato, non uno screenshot acquisito a metà del cambio. Testo, stato dei controlli e contrasto delle superfici vanno verificati insieme.
Disporre l’ordine di lettura in colonna sugli schermi stretti
Le opzioni di preparazione dei bagagli precedono il riepilogo nell’ordine del documento. Sugli schermi dei telefoni, la griglia a due colonne diventa a colonna singola, mantenendo quell’ordine e tutte le azioni. I fieldset hanno min-width:0, così le loro dimensioni predefinite non causano overflow orizzontale. I contenuti lunghi delle schede vanno a capo nel layout delle schede selezionate, senza fuoriuscire dall’elemento contenitore.
Sistema di design Volvo Cars Web Codice sorgente completo e verifica locale
Eseguire i due file sorgente con il pacchetto corrispondente
JavaScript include tutti i contenuti originali e i gestori delle interazioni. CSS contiene solo la composizione dell’applicazione e un fallback locale per il segno di spunta delle caselle di controllo. Usa la shell HTML fornita, salva i due file sorgente e installa la versione bloccata di CSS. Importare solo il foglio di stile formattarebbe i controlli, ma non implementerebbe i conteggi della checklist né la conferma locale.
Creare l’app vanilla e installare @volvo-cars/css 2.5.1.
Salvare main.js, volvo.css e la shell root HTML fornita.
Avviare l’app e confrontare il comportamento dei pulsanti di opzione e delle caselle di controllo.
Esaminare i temi chiaro e scuro stabilizzati e lo stato ripristinato.
Verificare insieme scelte, tema e ripristino
Scegli il piano costiero, aggiungi l’acqua e verifica che compaiano quattro elementi. Mantieni il piano, aggiungi uno strato e controlla che la conferma precedente scompaia. Passa alla modalità scura senza perdere le scelte, quindi ripristina il primo piano senza extra. Verifica la selezione dei pulsanti di opzione da tastiera e il ritorno a capo sugli schermi stretti, poi esamina le superfici stabilizzate dei temi chiaro e scuro.
Sistema di design Volvo Cars Web Esempi di componenti del sistema di progettazione
main.js — selezione completa del piano
Tutte le scelte, il riepilogo derivato, la conferma locale, il tema e il ripristino.
javascript
import '@volvo-cars/css/tokens.css';
import '@volvo-cars/css/styles_all-media.css';
import './volvo.css';
document.querySelector('#root').innerHTML=`<main><header><p class="eyebrow">OpenDesign · Original planning study</p><h1>A little room for the weekend.</h1><p class="intro">Build a simple packing plan with selectable cards. These sample choices are not vehicle options or product specifications.</p><label class="mode">Color mode <select id="mode"><option value="light">Light</option><option value="dark">Dark</option></select></label></header><div class="composition"><div><fieldset class="stack-16"><legend>Choose your plan</legend><label class="selectable-card"><input type="radio" name="plan" value="city" checked><span slot="title">A day in the city</span><span slot="meta">Travel light</span><span slot="description">Space for a day bag and the things you use most.</span></label><label class="selectable-card"><input type="radio" name="plan" value="coast"><span slot="title">A quiet coastal break</span><span slot="meta">Stay a little longer</span><span slot="description">Bring layers, a weekend bag and time to pause.</span></label></fieldset><fieldset class="stack-16 extras"><legend>Add to your checklist</legend><label class="selectable-card"><input type="checkbox" value="water"><span slot="title">Water and a reusable cup</span><span slot="description">Keep everyday essentials close at hand.</span></label><label class="selectable-card"><input type="checkbox" value="layers"><span slot="title">An extra layer</span><span slot="description">Prepare for a change in the weather.</span></label></fieldset></div><aside class="summary bg-secondary p-24 shape-default"><p class="eyebrow">Your local checklist</p><h2 id="plan-title">A day in the city</h2><ul id="items"></ul><p id="count" role="status"></p><button type="button" class="button-filled" id="save">Keep this plan</button><button type="button" class="button-text" id="reset">Start again</button><p id="saved" role="status" hidden></p></aside></div><p class="note">Published Volvo Cars CSS 2.5.1 selectable-card styling with original packing content and local behavior. The preview uses the stylesheet’s system-font fallback; Volvo font assets are not bundled. Nothing is booked, purchased or sent.</p></main>`;
const plans={city:{title:'A day in the city',items:['Day bag','Comfortable shoes']},coast:{title:'A quiet coastal break',items:['Weekend bag','Route notes','A good book']}};const extras={water:'Water and a reusable cup',layers:'An extra layer'};let current='city';
function render(){current=document.querySelector('[name=plan]:checked').value;let list=[...plans[current].items,...[...document.querySelectorAll('.extras input:checked')].map(e=>extras[e.value])];document.querySelector('#plan-title').textContent=plans[current].title;const ul=document.querySelector('#items');ul.replaceChildren(...list.map(x=>{let li=document.createElement('li');li.textContent=x;return li}));document.querySelector('#count').textContent=`${list.length} things on your checklist`;document.querySelector('#saved').hidden=true;}
document.querySelectorAll('fieldset input').forEach(e=>e.addEventListener('change',render));document.querySelector('#mode').addEventListener('change',e=>document.documentElement.dataset.colorMode=e.target.value);document.querySelector('#save').addEventListener('click',()=>{let p=document.querySelector('#saved');p.hidden=false;p.textContent='Plan kept in this page. Changing a choice will clear this confirmation.';});document.querySelector('#reset').addEventListener('click',()=>{document.querySelector('[value=city]').checked=true;document.querySelectorAll('.extras input').forEach(e=>e.checked=false);render();document.querySelector('[value=city]').focus();});render();
Sostituisci il file index.html radice di Vite con questo file.
04
Sistema di design Volvo Cars Web Configurazione dell’agent
Punto di partenza per l’implementazione
La versione bloccata corrisponde a questa implementazione di schede selezionabili. Gli asset ufficiali dei font non sono inclusi nell’anteprima.
sh
npm create vite@latest weekend-plan -- --template vanilla
cd weekend-plan
npm install
npm install @volvo-cars/[email protected]
# Save index.html at the root; main.js and volvo.css in src.
npm run dev
Un prompt per il tuo progetto
Prompt per l’agente
Realizza lo studio originale sulla preparazione dei bagagli per un weekend con Volvo Cars CSS 2.5.1 e il codice sorgente completo fornito. Usa schede selezionabili native basate su etichette, un gruppo di pulsanti di opzione in un fieldset, extra indipendenti con caselle di controllo, conteggi derivati, cancellazione delle conferme non più valide e uno stato del tema indipendente dalle scelte. Mantieni tutti i contenuti di esempio distinti dalle specifiche reali dei veicoli.
05
Sistema di design Volvo Cars Web Fonti e ambito
Uno studio originale di OpenDesign sulla preparazione dei bagagli, realizzato con @volvo-cars/css 2.5.1. Non è un configuratore di veicoli. I file dei font Volvo non sono inclusi; vengono usati i fallback del foglio di stile nativo.
