Progettazione di prodotti aziendali · Nuova risorsa
Sistema di design Orange OUDS Web.
Esamina i token semantici effettivi, i pacchetti tema e il comportamento nativo di Offcanvas di Orange OUDS 1.4 attraverso uno studio comparativo completo e responsive.
Le prime dichiarazioni, per l’aspetto chiaro, del preset Orange 1.4. L’aspetto scuro risolve i propri valori tramite data-bs-theme, anziché riutilizzare questa tabella come insieme di colori letterali.
--bs-color-action-selected
#f15e00
Le prime dichiarazioni, per l’aspetto chiaro, del preset Orange 1.4. L’aspetto scuro risolve i propri valori tramite data-bs-theme, anziché riutilizzare questa tabella come insieme di colori letterali.
--bs-color-action-hover
rgba(0, 0, 0, 0.68)
Le prime dichiarazioni, per l’aspetto chiaro, del preset Orange 1.4. L’aspetto scuro risolve i propri valori tramite data-bs-theme, anziché riutilizzare questa tabella come insieme di colori letterali.
--bs-color-action-pressed
#f15e00
Le prime dichiarazioni, per l’aspetto chiaro, del preset Orange 1.4. L’aspetto scuro risolve i propri valori tramite data-bs-theme, anziché riutilizzare questa tabella come insieme di colori letterali.
--bs-color-bg-primary
#fff
Le prime dichiarazioni, per l’aspetto chiaro, del preset Orange 1.4. L’aspetto scuro risolve i propri valori tramite data-bs-theme, anziché riutilizzare questa tabella come insieme di colori letterali.
--bs-color-bg-secondary
#f4f4f4
Le prime dichiarazioni, per l’aspetto chiaro, del preset Orange 1.4. L’aspetto scuro risolve i propri valori tramite data-bs-theme, anziché riutilizzare questa tabella come insieme di colori letterali.
--bs-color-border-default
rgba(0, 0, 0, 0.2)
Le prime dichiarazioni, per l’aspetto chiaro, del preset Orange 1.4. L’aspetto scuro risolve i propri valori tramite data-bs-theme, anziché riutilizzare questa tabella come insieme di colori letterali.
--bs-color-always-black
#000
Le prime dichiarazioni, per l’aspetto chiaro, del preset Orange 1.4. L’aspetto scuro risolve i propri valori tramite data-bs-theme, anziché riutilizzare questa tabella come insieme di colori letterali.
--bs-color-always-white
#fff
Le prime dichiarazioni, per l’aspetto chiaro, del preset Orange 1.4. L’aspetto scuro risolve i propri valori tramite data-bs-theme, anziché riutilizzare questa tabella come insieme di colori letterali.
Valori predefiniti del componente nativo. Il pannello originale imposta la larghezza a 440px, mentre la regola max-width nativa lo mantiene entro i limiti della finestra.
--bs-offcanvas-width
400px
Valori predefiniti del componente nativo. Il pannello originale imposta la larghezza a 440px, mentre la regola max-width nativa lo mantiene entro i limiti della finestra.
--bs-offcanvas-height
30vh
Valori predefiniti del componente nativo. Il pannello originale imposta la larghezza a 440px, mentre la regola max-width nativa lo mantiene entro i limiti della finestra.
--bs-offcanvas-transition
transform 0.3s ease-in-out
Valori predefiniti del componente nativo. Il pannello originale imposta la larghezza a 440px, mentre la regola max-width nativa lo mantiene entro i limiti della finestra.
Pacchetti e struttura dei temi di Orange OUDS nel sistema di design Orange OUDS Web
Installa insieme i pacchetti common e Orange
OUDS Web 1.4.0 separa il comportamento condiviso dal tema con marchio. L’esempio installa @ouds/web-common e @ouds/web-orange alla stessa versione. Il pacchetto Orange fornisce CSS compilato, mentre il pacchetto common fornisce il browser JavaScript incluso. Il documento principale importa entrambi i percorsi espliciti, così la guida non lascia il lettore con un comando per il pacchetto e una pagina statica priva di stile.
@ouds/web-orange fornisce il tema Orange CSS.
@ouds/web-common fornisce JavaScript condiviso.
In questo esempio entrambi i pacchetti sono bloccati alla versione 1.4.0.
Considera OUDS come un contratto di componenti a sé
OUDS si basa su Bootstrap, ma questa derivazione non rende ogni classe a monte un sostituto diretto. Questa versione usa btn-brand, btn-default e altre varianti denominate. Il confronto fornito usa queste classi effettive e gli attributi data nativi di Offcanvas. Per una migrazione occorre confrontare sia il markup sia i valori del tema, invece di limitarsi a cambiare l’URL di un foglio di stile.
Ruoli semantici di colore e tipografia di Orange OUDS nel sistema di design Orange OUDS Web
Usa le variabili semantiche installate
Le schede originali usano color-bg-primary e color-border-default. L’accento stretto dell’intestazione segue color-action-selected, che nelle dichiarazioni per l’aspetto chiaro corrisponde a #f15e00. Il tema scuro modifica questi ruoli tramite data-bs-theme sull’elemento radice. La guida riporta quindi i valori chiari con il relativo ambito e lascia che sia il runtime a selezionare l’aspetto corretto, anziché presentare un singolo codice esadecimale arancione come se rappresentasse l’intero sistema di design.
Specifica chiaramente la tipografia
Il pacchetto inserisce HelvNeueOrange all’inizio della propria pila di font. Questo studio incorporato localmente rimuove le dichiarazioni font-face inutilizzate e usa Arial come fallback esplicito. La tabella illustra comunque la famiglia effettiva pubblicata e i ruoli tipografici del testo. Il caricamento di CSS dei componenti non dimostra che il carattere tipografico con marchio sia stato caricato; un progetto che adotta quel font deve gestirne esplicitamente le risorse.
Schede di confronto e contenuti di Orange OUDS nel sistema di design Orange OUDS Web
Dai al confronto una struttura decisionale concreta
Le tre schede mostrano quantità di dati fittizie, una breve descrizione dell’utilizzo e un’azione per esaminare i dettagli. Ogni scheda contiene testo completo, non uno screenshot di righe segnaposto. Sono contenuti originali per lo studio, non prodotti, prezzi o contratti Orange attuali. Escludere i prezzi da questo esercizio di progettazione evita anche di suggerire che si tratti di un’offerta acquistabile o di un flusso di pagamento.
Mantieni coerente l’allineamento delle schede ripetute
La composizione desktop usa tre colonne di griglia uguali e schede con layout flex a colonna, così le azioni di esame dei dettagli si allineano in basso. A 720px passa a una sola colonna con altezza naturale. Le classi native dei pulsanti forniscono gli stati effettivi delle azioni; la griglia circostante, la spaziatura interna di 24px e l’ordine dei contenuti sono scelte originali dell’applicazione visibili nel CSS fornito.
Composizione nativa Offcanvas di Orange OUDS nel sistema di design Orange OUDS Web
Popola il pannello a partire dal relativo trigger
Ogni pulsante per esaminare i dettagli punta allo stesso Offcanvas #details e contiene un piccolo indice data-plan. L’evento show.bs.offcanvas espone relatedTarget, che seleziona il titolo, la descrizione e l’elenco di caratteristiche originali corrispondenti prima di mostrare il pannello. L’elenco viene creato con textContent ed elementi di lista reali, mantenendo i dati separati dal markup. Il titolo del pannello è associato tramite aria-labelledby.
Lascia al runtime nativo la gestione dell’apertura e della chiusura
Scelta locale e ripristino in Orange OUDS nel sistema di design Orange OUDS Web
Descrivi l’azione realmente eseguita
Questa scelta locale memorizza solo il piano fittizio selezionato e mostra la selezione sotto le schede. Il messaggio specifica chiaramente che non è stato effettuato alcun ordine. Una nuova scelta sostituisce quella precedente; cancellandola, il messaggio scompare e il focus torna al primo pulsante per esaminare i dettagli. Non viene inviato nulla a un account, a un carrello o a un servizio di pagamento.
Mantieni l’aspetto distinto dalla selezione
L’azione per passare dall’aspetto chiaro a quello scuro, o viceversa, modifica l’attributo del tema sull’elemento radice e l’etichetta della propria azione. Conserva la scelta locale attuale e i contenuti delle tre schede. È una distinzione utile quando si testa un tema: una modifica visiva non dovrebbe reimpostare silenziosamente il confronto in corso dell’utente. Lo studio usa CSS nativo in entrambi gli aspetti; solo la composizione esterna è fornita dall’applicazione.
Comportamento da tastiera e su schermi stretti di Orange OUDS nel sistema di design Orange OUDS Web
Assegna un nome alle azioni di chiusura e di esame
Ogni azione delle schede include il nome del piano e il pulsante nativo di chiusura, composto dalla sola icona, ha l’etichetta accessibile esplicita «Chiudi i dettagli». Il pannello ha tabindex e un titolo etichettato, per consentire la gestione del focus tramite l’implementazione nativa. I test aprono il pannello Explore, lo chiudono con Escape e verificano che il focus torni al trigger prima di passare a un’altra scheda.
Mantieni il pannello entro i limiti effettivi della finestra
L’applicazione imposta la larghezza del pannello a 440px, ma la regola max-width nativa di Offcanvas lo mantiene entro i limiti di una finestra stretta. Le schede si dispongono in colonna e la spaziatura esterna si riduce sugli schermi piccoli. L’esempio è stato verificato a larghezze di 280px, 390px, tablet e desktop dopo aver selezionato un piano e cambiato l’aspetto, non solo nello stato iniziale.
Integrazione statica completa di Orange OUDS nel sistema di design Orange OUDS Web
Usa l’esempio completo composto da tre file
Salva orange-index.html come index.html e tieni orange.css e orange-app.js nella stessa cartella. Installa i due pacchetti con versione bloccata e avvia il server nella directory. HTML include entrambi i percorsi degli asset nativi, tutti i contenuti delle schede, la struttura del drawer e lo script dell’applicazione. Non serve alcun wrapper React, scaffold mancante o SDK inventato per riprodurre questa composizione nel browser.
Salva insieme tutti e tre i file forniti.
Installa entrambi i pacchetti OUDS corrispondenti.
Avvia il server nella cartella e controlla ogni scheda.
Verifica Escape, il ripristino del focus, la cancellazione locale e entrambe le modalità di visualizzazione.
Mantieni codice e asset sulla stessa release
Se cambi versione, verifica insieme le varianti dei pulsanti, il namespace dei dati API, i nomi degli eventi e le variabili del tema. CSS di una release e script di un’altra possono sembrare corretti finché un’interazione non rivela l’incompatibilità. La versione fornita è un riferimento concreto e testato, non la garanzia che qualsiasi combinazione futura di pacchetti si comporti allo stesso modo.
Orange OUDS Web Esempi di componenti del sistema di design
orange-index.html
Markup completo e importazioni native di CSS/JavaScript.
html
<!doctype html><html lang="en" data-bs-theme="light"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Bundle comparison study</title><link rel="stylesheet" href="./node_modules/@ouds/web-orange/dist/css/ouds-web.min.css"><link rel="stylesheet" href="./orange.css"></head><body><main><header><div><p>OUDS WEB / ORIGINAL COMPARISON STUDY</p><h1>Choose room for your day</h1><p class="scope">Three fictional mobile-data bundles for inspecting Orange-themed cards, buttons and a native detail drawer. These are not commercial offers.</p></div><button id="theme" class="btn btn-default" type="button">Use dark appearance</button></header><div class="plans"><article class="plan"><h2>Everyday</h2><p class="amount">8 GB</p><p>For messages, maps and occasional listening.</p><button class="btn btn-brand" data-plan="0" data-bs-toggle="offcanvas" data-bs-target="#details" aria-controls="details">Inspect Everyday</button></article><article class="plan"><h2>Explore</h2><p class="amount">25 GB</p><p>More room for podcasts and a longer journey.</p><button class="btn btn-brand" data-plan="1" data-bs-toggle="offcanvas" data-bs-target="#details" aria-controls="details">Inspect Explore</button></article><article class="plan"><h2>Create</h2><p class="amount">60 GB</p><p>A larger sample allowance for sharing on the move.</p><button class="btn btn-brand" data-plan="2" data-bs-toggle="offcanvas" data-bs-target="#details" aria-controls="details">Inspect Create</button></article></div><section id="selected" hidden><p role="status" id="selection-message"></p><button id="clear" class="btn btn-default">Clear local choice</button></section><p class="fine">OUDS Web 1.4.0 native CSS and Offcanvas runtime; original sample content and local selection. Arial fallback is used instead of Orange’s branded typeface.</p></main><aside class="offcanvas offcanvas-end" tabindex="-1" id="details" aria-labelledby="drawer-title"><div class="offcanvas-header"><h2 class="offcanvas-title" id="drawer-title">Bundle details</h2><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close details"></button></div><div class="offcanvas-body"><p id="drawer-description"></p><ul id="features"></ul><p>No account is connected. Keeping a choice changes this preview only.</p><button id="choose" class="btn btn-brand">Keep this local choice</button></div></aside><script src="./node_modules/@ouds/web-common/dist/js/ouds-web.bundle.min.js"></script><script src="./orange-app.js"></script></body></html>
Salva orange-index.html come index.html e lascia invariati i nomi degli altri due file.
orange-app.js
Gestione nativa degli eventi del drawer e stato locale della selezione e del tema.
javascript
const plans=[["Everyday", "8 GB", "For messages, maps and occasional listening.", ["8 GB of fictional monthly data", "One original study profile", "No contract, order or payment"]], ["Explore", "25 GB", "More room for podcasts and a longer journey.", ["25 GB of fictional monthly data", "One original study profile", "No contract, order or payment"]], ["Create", "60 GB", "A larger sample allowance for sharing on the move.", ["60 GB of fictional monthly data", "One original study profile", "No contract, order or payment"]]];let current=0;const drawer=document.querySelector('#details');drawer.addEventListener('show.bs.offcanvas',event=>{current=Number(event.relatedTarget.dataset.plan);const[name,amount,description,features]=plans[current];document.querySelector('#drawer-title').textContent=name+' · '+amount;document.querySelector('#drawer-description').textContent=description;document.querySelector('#features').replaceChildren(...features.map(text=>{const li=document.createElement('li');li.textContent=text;return li}));});document.querySelector('#choose').addEventListener('click',()=>{document.querySelector('#selected').hidden=false;document.querySelector('#selection-message').textContent=plans[current][0]+' is your local preview choice. No order was placed.';oudsWeb.Offcanvas.getInstance(drawer).hide();});document.querySelector('#clear').addEventListener('click',()=>{document.querySelector('#selected').hidden=true;document.querySelector('[data-plan]').focus()});document.querySelector('#theme').addEventListener('click',e=>{let dark=document.documentElement.dataset.bsTheme!=='dark';document.documentElement.dataset.bsTheme=dark?'dark':'light';e.currentTarget.textContent=dark?'Use light appearance':'Use dark appearance'});
Salva orange-index.html come index.html e lascia invariati i nomi degli altri due file.
04
Orange OUDS Web Configurazione dell’agente AI del sistema di design
Punto di partenza per l’implementazione
Apri http://localhost:8000/. Usa asset nativi compilati e non richiede una build Sass.
sh
npm init -y
npm install @ouds/[email protected] @ouds/[email protected]
# Save index.html, orange.css and orange-app.js from the supplied examples.
python3 -m http.server 8000
Un prompt per il tuo progetto
Prompt per l’agente
Implementa lo studio comparativo completo di OUDS Web 1.4, con i pacchetti common/Orange corrispondenti, le varianti reali btn-brand e btn-default, gli eventi nativi di Offcanvas e API, la risoluzione dei token per le modalità chiara e scura e il fallback esplicito ad Arial. Mantieni fittizi tutti i contenuti dei bundle e fai sì che la selezione resti strettamente locale.
05
Orange OUDS Web Fonti e ambito del sistema di design
Runtime effettivi di OUDS Web CSS e Offcanvas, con bundle fittizi originali OpenDesign e selezione locale. Il fallback ad Arial è esplicito; non viene rappresentata alcuna offerta commerciale né alcun ordine.
