Progettazione di prodotti aziendali · Nuova risorsa
Sistema di design Dell.
Crea una ricerca circoscritta dei dispositivi con DDS v3: colori semantici, scala tipografica responsive, spaziatura basata sui token e una composizione InputGroup il cui filtraggio è gestito dall’applicazione.
Interpretazione indipendente di HTML/CSS di spaziatura, tipografia e colori chiari documentati per gli input di DDS v3; font di fallback del sistema. · Riferimento per l’implementazione
02
Sistema di design Dell Riferimento di progettazione
Fondamenti di DDS v3 e Storybook verificato di Vanilla 3.2.0. I valori dei colori sono le anteprime in modalità chiara della tabella dei token Text Input, non rappresentano un tema universale. L’anteprima applica queste regole in HTML/CSS indipendenti; l’esempio di codice carica la versione reale di DDS dal CDN.
Sistema di design Dell DDS v3 e i limiti della sua implementazione
Una composizione, non un servizio di ricerca
DDS distingue le basi visive riutilizzabili dal comportamento del prodotto. Per questo inventario, il punto d’integrazione utile è InputGroup: un input nativo con slot accessori. Non esiste un costruttore Search da richiamare e il design system non recupera i dispositivi. La nostra applicazione gestisce come valori distinti l’input in bozza, la query applicata e il dispositivo selezionato. In questo modo è chiara la differenza tra digitare e inviare.
L’esempio pubblico per sviluppatori qui sotto è destinato a Vanilla 3.2.0. CSS e JavaScript utilizzano la stessa versione. Le integrazioni v2 esistenti adottano un packaging diverso e, prima di utilizzare questi import, dovrebbero seguire la documentazione per la migrazione. Il pacchetto attuale è riservato all’uso interno di Dell; il CDN documentato offre un modo concreto per valutare questa composizione senza inventare un registro npm pubblico.
Sistema di design Dell Superfici semantiche e confini
Usa i nomi dei ruoli pubblicati
La tabella di riferimento riporta i valori degli input in modalità chiara, tratti dalla documentazione ufficiale del componente. Dopo aver caricato gli stili DDS, il codice del prodotto dovrebbe utilizzare le variabili semantiche CSS. Il testo principale e la superficie secondaria creano un’area dei risultati leggibile; il bordo del brand delimita l’input. Il colore di primo piano inattivo è volutamente attenuato e non deve diventare il colore predefinito dei metadati.
Le primitive globali dei colori alimentano i ruoli semantici, che a loro volta supportano le scelte specifiche dei componenti. Chi sviluppa applicazioni dovrebbe fare riferimento ai ruoli semantici anziché sovrascrivere la scala globale. Per ottenere un aspetto scuro serve una modalità dei token effettivamente supportata; cambiare solo lo sfondo della pagina rende incoerenti i colori dei campi, delle etichette e dello stato di focus. Questo esempio locale mantiene la modalità chiara.
Sistema di design Dell Tipografia adattiva senza modificare la struttura del documento
Un’intestazione semantica, due dimensioni visive
L’intestazione della pagina rimane un h1 su ogni viewport. Usa le dimensioni documentate per Heading 1: 48/56 nei layout ampi e 40/48 sotto i 1024px. L’esempio usa font di fallback di sistema perché è un’interpretazione locale indipendente; il foglio di stile nativo fornisce le risorse dei font DDS. Body 2 è usato per le descrizioni, mentre Body 3 presenta i metadati compatti dei dispositivi.
Il modello di un dispositivo, il nome di un ufficio o lo stato dell’assistenza possono andare a capo. Mantieni gli identificatori leggibili e non troncare l’unica copia del codice di un asset. In un layout compatto cambiano la gerarchia visiva e la disposizione delle colonne, ma resta invariata l’associazione tra etichette e valori.
Sistema di design Dell Ritmo a incrementi di quattro pixel per una vista divisa
Associa i livelli della scala alle relazioni
Usa sm tra azioni correlate, lg all’interno delle righe dei risultati e xl tra la query e l’area dei risultati. Nei layout più ampi, il contenitore esterno può usare 2xl. Sono applicazioni della scala pubblicata, non prescrizioni ufficiali secondo cui ogni pagina di ricerca debba usare esattamente questi margini interni.
Sistema di design Dell Anatomia e comportamento della ricerca
L’invio manuale è intenzionale
Il simbolo di ricerca a sinistra è decorativo; è l’etichetta visibile a definire l’ambito dell’inventario. Il controllo per cancellare compare a destra solo quando è presente del testo. La modalità manuale invia il modulo, quindi il tasto Invio e il pulsante visibile Cerca dispositivi hanno lo stesso effetto. La modifica dell’input, da sola, non cambia l’insieme dei risultati applicato.
La modalità automatica prevede un comportamento diverso
DDS descrive anche una modalità automatica che si avvia dopo l’inserimento del quarto carattere. Non associare un filtro immediato, attivo già al primo carattere, a un’interfaccia documentata per quella modalità. Se passi alla ricerca automatica, rimuovi il pulsante di invio manuale e implementa con attenzione la soglia, l’annullamento e l’annuncio dei risultati. L’esempio fornito usa la modalità manuale.
Sistema di design Dell Bozza, query applicata e selezione
Transizioni di stato nell’esempio
Cancella azzera sia l’input sia il filtro applicato, ripristina l’intero inventario di esempio e riporta il focus sul campo. La selezione è un’azione separata eseguita tramite pulsante: mostra i dettagli dell’asset senza modificare la query. Se non ci sono risultati, viene visualizzata la frase applicata insieme a un’opzione esplicita per azzerare la ricerca. Non viene mai dichiarato che sia stato consultato un inventario remoto.
Inserisci il nome o il codice di un asset; i risultati correnti rimangono invariati fino all’invio.
Invia il modulo e aggiorna il conteggio dei risultati in base all’array locale filtrato.
Esamina un risultato o cancella la query; mantieni il focus sul controllo che ha avviato l’azione.
Sistema di design Dell Etichette, punti di riferimento e annunci
Dichiara l’ambito effettivo
Il modulo è un punto di riferimento di ricerca denominato Inventario dispositivi. Un’etichetta persistente e il testo guida rimangono visibili durante la digitazione. L’icona per cancellare è un pulsante con aria-label, non uno span con un gestore di clic. I simboli decorativi sono nascosti alle tecnologie assistive. Il conteggio dei risultati è un messaggio di stato annunciato in modalità cortese; viene aggiornato dopo l’invio, non a ogni pressione di tasto.
Ogni risultato usa un vero pulsante con uno stato premuto e un nome accessibile completo. L’intestazione dei dettagli identifica l’elemento esaminato. Nessun collegamento finge di aprire una pagina di gestione dei dispositivi, perché questo esempio non dispone di un backend di gestione. La selezione corrente è indicata sia da un bordo sia da un’etichetta testuale.
Sistema di design Dell Carica gli asset reali e inizializza il gruppo
Inizia dal bundle documentato
Per un’applicazione interna autorizzata, installa @dds/components da Dell Artifactory e importa dds-styles.css tramite la pipeline dei fogli di stile del progetto. Per una prova di concetto autonoma, usa i collegamenti CDN pubblici con versione bloccata mostrati qui sotto. Inizializza InputGroup dopo che il markup è disponibile. I gestori di eventi per l’invio, la cancellazione e il filtraggio rimangono codice dell’applicazione.
Sistema di design Dell Verifica il comportamento previsto della ricerca
Un test locale utile
Digita Latitude senza inviare e verifica che il conteggio precedente dei risultati rimanga invariato. Invia la ricerca ed esamina il dispositivo corrispondente. Cerca un codice non presente, verifica lo stato vuoto, quindi cancella la ricerca e controlla che ricompaiano tutti i dispositivi di esempio. Ripeti con la tastiera e su uno schermo stretto. Queste verifiche convalidano l’esempio, ma non certificano un prodotto Dell derivato né un’integrazione di rete.
Sistema di design Dell Esempi di componenti del sistema di design
Esempio interattivo completo e autonomo
Salva il documento completo come index.html e aprilo in un browser. Interpretazione indipendente di HTML/CSS della spaziatura, della tipografia e dei colori per gli input in modalità chiara documentati per DDS v3; font di fallback di sistema.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Device inventory — DDS v3 study</title><style>*{box-sizing:border-box}body{margin:0;font:16px/24px Arial,sans-serif;color:#1d2c3b;background:white}header{padding:16px 32px;border-bottom:1px solid #c5d4e3;color:#00468b}main{padding:32px;max-width:1200px;margin:auto}h1{font-size:48px;line-height:56px;font-weight:300;margin:16px 0}h2{font-size:24px;line-height:32px;font-weight:400}label{display:block;font-weight:bold;margin-bottom:8px}.search{display:flex;gap:8px;align-items:stretch}.input{border:1px solid #00468b;display:flex;align-items:center;flex:1;min-width:0}.input span{padding:8px 12px}input{border:0;padding:12px 0;width:100%;min-width:0;font:inherit;background:transparent;color:inherit}button{font:inherit;cursor:pointer;padding:8px 16px;background:white;color:#00468b;border:1px solid #00468b}button:hover{background:#ebf1f6}button:focus-visible,input:focus-visible{outline:3px solid #00468b;outline-offset:3px}.input button{border:0}.submit{background:#00468b;color:white}.submit:hover{background:#003567}.helper{font-size:14px;line-height:20px;color:#516478}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;margin-top:24px}.result{display:flex;text-align:left;align-items:center;gap:16px;width:100%;padding:16px;margin-bottom:12px;border:1px solid #c5d4e3;color:#1d2c3b}.result[aria-pressed=true]{border:2px solid #00468b;padding:15px;background:#ebf1f6}.result strong{display:block}.result small{display:block;font-size:14px}.device{width:64px;height:40px;border:3px solid #516478;border-radius:3px;background:linear-gradient(140deg,#dcebf6,#86afce);position:relative;flex-shrink:0}.device:after{content:'';position:absolute;bottom:-8px;left:-7px;right:-7px;height:4px;background:#516478;border-radius:0 0 4px 4px}.device.desktop{width:28px;height:48px;background:#c5d4e3;margin:0 18px}.device.desktop:after{display:none}aside{background:#ebf1f6;padding:24px;align-self:start}aside h2{margin-top:0}dt{font-size:12px;color:#516478;margin-top:16px}dd{margin:4px 0 0}footer{padding:16px 32px;border-top:1px solid #c5d4e3;font-size:12px;line-height:20px;color:#516478}#empty{padding:24px;background:#ebf1f6}#count{font-size:14px;margin:24px 0 0}@media(max-width:1023px){h1{font-size:40px;line-height:48px}}@media(max-width:650px){main{padding:16px}.layout{grid-template-columns:1fr}.search{flex-wrap:wrap}.input{flex-basis:100%}.submit{width:100%}header,footer{padding:16px}}</style><header>DEVICE OPERATIONS <span style="float:right;font-size:12px">Local sample inventory</span></header><main><h1>Find a device</h1><p>Review model, location and support coverage in one place.</p><form role="search" aria-label="Device inventory" id="form"><label for="query">Search devices</label><p class="helper" id="help">Enter a model or asset tag. Results change after you submit.</p><div class="search"><div class="input"><span aria-hidden="true">⌕</span><input id="query" type="search" aria-describedby="help"><button type="button" id="clear" hidden aria-label="Clear device search">Clear</button></div><button class="submit" type="submit">Search devices</button></div></form><p id="count" role="status"></p><div class="layout"><section aria-label="Matching devices"><div id="results"></div><div id="empty" hidden>No devices match this query. Clear the search to view the sample inventory.</div></section><aside aria-label="Device details"><span class="helper">SELECTED DEVICE</span><h2 id="name"></h2><dl><dt>Asset tag</dt><dd id="tag"></dd><dt>Location</dt><dd id="location"></dd><dt>Support coverage</dt><dd id="coverage"></dd><dt>Record source</dt><dd>Local demonstration data</dd></dl></aside></div></main><footer>Independent HTML/CSS interpretation of DDS v3. Published light-mode colors, spacing and type sizes; system fallback font. No Dell services are connected.</footer><script>
const devices=[{name:'Latitude 7450',tag:'LT-104',location:'London · Design studio',coverage:'Through 30 June 2027',kind:'laptop'},{name:'Precision 5680',tag:'PR-208',location:'Berlin · Engineering lab',coverage:'Through 15 March 2028',kind:'laptop'},{name:'OptiPlex 7020',tag:'OP-316',location:'Amsterdam · Front desk',coverage:'Through 20 August 2027',kind:'desktop'}];let selected=devices[0],applied='';const $=id=>document.getElementById(id);function render(){const matches=devices.filter(d=>(d.name+' '+d.tag).toLowerCase().includes(applied.toLowerCase()));$('count').textContent=matches.length+' matching device'+(matches.length===1?'':'s')+(applied?' for “'+applied+'”':'');$('results').replaceChildren();$('empty').hidden=matches.length>0;for(const d of matches){const b=document.createElement('button');b.className='result';b.setAttribute('aria-pressed',String(d===selected));const pic=document.createElement('span');pic.className='device '+d.kind;pic.setAttribute('aria-hidden','true');const label=document.createElement('span'),strong=document.createElement('strong'),small=document.createElement('small');strong.textContent=d.name;small.textContent=d.tag+' · '+d.location.split(' · ')[0];label.append(strong,small);b.append(pic,label);b.onclick=()=>{selected=d;render()};$('results').append(b)}for(const key of ['name','tag','location','coverage'])$(key).textContent=selected[key]}
$('form').onsubmit=e=>{e.preventDefault();applied=$('query').value.trim();render()};$('query').oninput=()=>{$('clear').hidden=!$('query').value};$('clear').onclick=()=>{$('query').value='';applied='';$('clear').hidden=true;render();$('query').focus()};render();
</script></html>
Questo documento fornisce un comportamento di ricerca autonomo. Usa l’esempio DDS nativo per verificare l’inizializzazione di InputGroup con il foglio di stile e lo script con versione bloccata.
Implementazione nativa completa
L’implementazione completa descritta nella configurazione, raccolta qui insieme alle spiegazioni specifiche di API. Segui i prerequisiti documentati per pacchetti e build nella configurazione.
Salva il file come index.html e avvialo in locale con accesso alla rete per usare il CDN documentato di DDS 3.2.0. Questo esempio usa l’inizializzazione effettiva di InputGroup e il filtraggio locale; non richiede un backend Dell. Alternativa npm per uso interno: npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ . L’anteprima incorporata è un’interpretazione offline di HTML/CSS, non l’esecuzione tramite questo CDN.
InputGroup con ricerca gestita dall’applicazione
La configurazione combina un input nativo e componenti aggiuntivi, inizializza InputGroup e collega l’invio effettivo del modulo. Il simbolo a sinistra è un carattere decorativo locale; non implica una dipendenza da un font di icone.
javascript
import { InputGroup } from '@dds/components';
InputGroup(document.querySelector('#device-search'));
// Use the complete form and event handlers in the setup example.
Nella documentazione v3 verificata non esiste un componente Search API autonomo.
Usa aria-label sui pulsanti con la sola icona; il filtraggio è gestito dall’applicazione.
04
Sistema di design Dell Configurazione dell’agente AI
Punto di partenza per l’implementazione
Salva il file come index.html e avvialo in locale con accesso alla rete per usare il CDN documentato di DDS 3.2.0. Questo esempio usa l’inizializzazione effettiva di InputGroup e il filtraggio locale; non richiede un backend Dell. Alternativa npm per uso interno: npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ . L’anteprima incorporata è un’interpretazione offline di HTML/CSS, non l’esecuzione tramite questo CDN.
Crea una ricerca circoscritta per l’inventario dei dispositivi utilizzando la composizione completa di InputGroup di DDS 3.2.0. Mantieni l’invio manuale, un’etichetta visibile per l’ambito, l’annuncio dei risultati locali e la funzione di cancellazione. Usa i token semantici DDS e la tipografia adattiva; non inventare un componente Search API né sostituirlo con import legacy di v2.
05
Sistema di design Dell Fonti e ambito
Riferimento indipendente a DDS v3. Il pacchetto interno richiede l’accesso al registro Dell; il CDN pubblico con versione specifica è documentato per la prototipazione. Non implica l’identità Dell, una connessione alla gestione degli asset né una certificazione ufficiale.
