# Sistema di design Adobe Spectrum ## Anteprima dell’interfaccia del sistema di design Adobe Spectrum Esamina tre varianti originali di un’opera grafica, seleziona un gruppo da esportare e prepara le impostazioni locali per PNG o JPEG. ## Riferimento di progettazione del sistema di design Adobe Spectrum API di Spectrum v3 di React e corrispondenze delle dimensioni. La colonna delle dimensioni numeriche riporta la conversione di base nella tabella di migrazione di Adobe; i valori size-* sensibili alla scala possono adattarsi al tocco. Non si tratta di un’esportazione dei token di Spectrum 2. I colori di anteprima e la grafica personalizzata sono scelte dell’applicazione. ### Configurazione di Provider e del tema | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | theme | defaultTheme | Oggetto del tema radice obbligatorio, importato da @adobe/react-spectrum. | | colorScheme | light \| dark | Override esplicito della preferenza del sistema operativo. | | scale | medium \| large | Scala per puntatori precisi o ampi; normalmente, lascia che sia Provider a sceglierla. | | locale | BCP 47 language tag | Contesto della lingua e della direzione di scrittura. | | breakpoints | custom name → pixel width | Questa guida imposta esplicitamente tablet: 640 e desktop: 1024, evitando i valori predefiniti in conflitto nella pagina di riferimento. | | isDisabled / isReadOnly | boolean group defaults | I provider annidati e le singole proprietà possono sovrascrivere il comportamento del gruppo. | ### Corrispondenze delle dimensioni di base | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | size-50 | 4px base | Separazione ridotta. | | size-100 | 8px base | Controlli correlati. | | size-150 | 12px base | Spazio della barra degli strumenti. | | size-200 | 16px base | Spazio tra i gruppi dell’ispettore. | | size-250 | 20px base | Spaziatura intermedia. | | size-300 | 24px base | Spazio interno del pannello. | | size-400 | 32px base | Raggruppamento più ampio. | | size-500 | 40px base | Separazione tra sezioni. | | size-600 | 48px base | Struttura ampia. | | size-1000 | 80px base | Area dell’illustrazione di dimensioni fisse. | | size-2400 | 192px base | Larghezza di esempio dell’ispettore. | | size-6000 | 480px base | Superficie ampia con limiti definiti. | ### Proprietà di stile e valori adattivi | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | marginStart / marginEnd | DimensionValue | Spaziatura logica; da preferire a left/right per supportare la direzione di scrittura. | | padding / backgroundColor | View style props | Crea una superficie esterna personalizzata invece di sovrascrivere gli elementi interni dei controlli nativi. | | width | size-* \| CSS length \| calc(...) | Esempio: calc(100% - size-2000). | | responsive value | {base: value, tablet: value} | Le chiavi corrispondono ai breakpoint espliciti di Provider. | | UNSAFE_style / UNSAFE_className | last-resort escape hatch | Non fare affidamento sul DOM o sugli stili privati dei componenti. | | single-line-height | 32 base mapping | Usa la dimensione semantica senza affermare che tutti i controlli siano sempre di 32px. | ### Contratto di selezione delle raccolte | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | selectionMode | none \| single \| multiple | L’esempio usa multiple per selezionare un gruppo. | | selectedKeys | Set of row keys \| all | Lo stato controllato deve gestire il valore sentinella all. | | onSelectionChange | callback with selection | Non interpretare la selezione come approvazione o conferma dell’avvenuta esportazione. | | disallowEmptySelection | boolean | Utile per una selezione singola obbligatoria; omesso per i gruppi di esportazione facoltativi. | | TableHeader → Column | column anatomy | Assegna chiavi stabili alle colonne per il rendering dinamico. | | TableBody → Row → Cell | row anatomy | Gli ID dei record garantiscono un’identità stabile per gli elementi della raccolta. | ### Composizione di Picker e testo | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | label | persistent text | Assegna un nome al selettore del formato di esportazione. | | selectedKey | one item key | Formato controllato, ad esempio png o jpeg. | | onSelectionChange | key callback | Contratto diverso da un gestore di eventi DOM. | | Item key | stable key | Identità del valore indipendente dall’etichetta visibile. | | Heading level | 1–6 | Livello semantico dell’intestazione; lo stile nativo segue il contesto. | | Button onPress | press callback | Attivazione utilizzabile con input diversi, anziché un’azione personalizzata accessibile solo col mouse. | ## Guida completa al sistema di design Adobe Spectrum Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## Sistema di design Adobe Spectrum: scegli v3 intenzionalmente; non mescolare le generazioni di Spectrum ### Cosa installa questo esempio > Adobe documenta ora Spectrum 2 insieme alla libreria v3. Questa pagina sceglie @adobe/react-spectrum@3 perché i contratti di Provider, raccolte e proprietà di stile offrono un esempio completo e documentato per la revisione delle risorse. Una ricetta v3 è utile per un’applicazione v3 esistente, ma non va presentata come la versione più recente di Spectrum. Prima di decidere se adottarla in un nuovo progetto, consulta il riferimento alla migrazione collegato. La differenza pratica è visibile nel codice. v3 passa size-300 tramite le proprietà di stile e fornisce defaultTheme a Provider. La guida alla migrazione traduce queste convenzioni in un API di stile diverso. Sostituire soltanto il nome del pacchetto non equivale a migrare l’esempio: import dei componenti, stili e proprietà supportate vanno esaminati insieme. Leggi la specifica di supporto ## Sistema di design Adobe Spectrum: Provider coordina aspetto, scala e lingua ### Una radice, diverse impostazioni indipendenti Provider definisce l’ambiente utilizzato da tabella, picker e pulsante. L’oggetto del tema include le definizioni di schema cromatico e scala. colorScheme può sovrascrivere la preferenza del sistema operativo, mentre scale tiene conto delle caratteristiche degli input. Sono impostazioni separate: una superficie scura su desktop non richiede bersagli touch più grandi, e uno schermo touch chiaro non dovrebbe ereditare per sbaglio un layout fitto pensato per il mouse. Nell’uso normale in produzione, lascia la scala in modalità automatica. In uno studio sui componenti, scegliere esplicitamente medium o large può aiutare a confrontare i controlli, ma va descritto come un’impostazione di analisi. locale imposta il contesto linguistico, non traduce i dati del progetto. I nomi delle campagne, le note di revisione e le etichette delle impostazioni restano contenuti dell’applicazione. Leggi la specifica di supporto ## Sistema di design Adobe Spectrum: usa dimensioni supportate e proprietà di layout esterne ### Una scala con nome è più di una scorciatoia in pixel La corrispondenza di base è 8 per size-100, 16 per size-200 e 24 per size-300. La tabella di riferimento include altri incrementi utili. Una dimensione size-* può adattarsi alla scala della piattaforma, mentre un valore static-size-* non si adatta intenzionalmente. Tieni presente questa distinzione quando definisci le dimensioni di un ispettore o di un bersaglio interattivo. Copiare ogni valore desktop risultante in CSS eliminerebbe l’adattamento fornito dall’ambiente dei componenti. Flex e View danno all’esempio una struttura esterna stabile senza riscrivere gli elementi interni di TableView. La tabella può estendersi con flex e restringersi con minWidth={0}; l’ispettore si dispone in colonna alla larghezza base e diventa vincolato al breakpoint tablet esplicito. Il padding va applicato al View proprietario della superficie. La documentazione sconsiglia di sovrascrivere colori, bordi e tipografia interni tramite meccanismi di escape non sicuri. Leggi la specifica di supporto ## Sistema di design Adobe Spectrum: lascia che sia il tema a gestire colori e tipografia nativi ### Tieni distinta la tavolozza di esempio dall’esportazione dei token L’anteprima presenta una tela grigia dai toni sobri, controlli neutri e un’illustrazione originale a colori. I colori dell’illustrazione non sono valori certificati dei token Spectrum. Nell’esempio nativo, i componenti supportati ricavano il proprio aspetto da defaultTheme. Una superficie nativa personalizzata dovrebbe usare i valori documentati di backgroundColor, anziché presumere che un singolo valore esadecimale campionato funzioni in entrambi gli schemi. Heading fornisce una struttura semantica oltre alla presentazione Spectrum nel proprio contesto. Il titolo della pagina usa level={1}; Text fornisce contenuti ordinari, come il conteggio della selezione. L’anteprima personalizzata HTML usa un font di sistema scelto dall’applicazione come fallback e dimensioni tipografiche definite dall’applicazione. È una dimostrazione del flusso di lavoro e della gerarchia relativa, non un’affermazione secondo cui il font circostante di OpenDesign o la tipografia dell’illustrazione corrispondano alle specifiche tipografiche di Spectrum. Leggi la specifica di supporto ## Sistema di design Adobe Spectrum Sistema di progettazione: una tabella di raccolta ha chiavi, colonne e semantica di selezione ### La selezione è un contratto sui dati La tabella è composta da TableHeader e Column, oltre a TableBody, Row e Cell. Ogni risorsa ha un id stabile. selectedKeys e onSelectionChange rendono la selezione controllata, così l’inspector di esportazione può ricavare il conteggio dallo stesso stato. L’utente può rinominare una risorsa senza cambiarne l’identità. Usare la posizione della riga come identità renderebbe fragile la selezione dopo un riordino. La selezione può essere il valore sentinella all. La configurazione lo risolve in tutte le risorse correnti prima di creare una ricetta. Un Set vuoto resta valido, perché l’elaborazione in blocco è facoltativa; disallowEmptySelection non è attivato intenzionalmente. In un’applicazione remota o paginata, definisci cosa significa all per quell’origine dati anziché presumere che le righe visualizzate siano l’intera raccolta. - Identità della risorsa: chiave stabile usata dalla raccolta. - Ispezione: quale illustrazione viene mostrata ingrandita nell’esempio autonomo. - Selezione in blocco: quali chiavi compaiono nella ricetta preparata. Leggi la specifica di supporto ## Sistema di design Adobe Spectrum Sistema di progettazione: Picker e Button completano l’inspector di esportazione ### Il formato è controllato indipendentemente dal gruppo di risorse Picker usa un’etichetta visibile e chiavi Item stabili. selectedKey è png o jpeg; onSelectionChange fornisce la chiave selezionata. Questo differisce dalla lettura di event.target.value da un elemento select nativo. Il formato resta selezionato quando il gruppo viene svuotato, così chi effettua la revisione può modificare la selezione senza ricreare una preimpostazione. Button usa onPress per l’attivazione e isDisabled quando non ci sono risorse selezionate. L’esempio nativo serializza gli id e il formato in una ricetta locale. Non trasforma i dati delle immagini, non genera un vero file di esportazione e non contatta un servizio per le risorse. Questo definisce un utile confine d’implementazione: l’azione e i relativi input sono concreti, anche se il motore di conversione è esterno al sistema di progettazione. Leggi la specifica di supporto ## Sistema di design Adobe Spectrum Sistema di progettazione: adatta la composizione invece di comprimere l’illustrazione ### Definisci il contratto dei breakpoint Questo esempio dichiara tablet:640 e desktop:1024. La scelta è esplicita perché la pagina Provider presenta attualmente valori predefiniti incoerenti tra la prosa esplicativa e i metadati API generati. I valori reattivi fanno riferimento a queste chiavi esatte. Alla base, l’inspector occupa tutta la larghezza; poi si dispone accanto alla tabella flessibile. Questi breakpoint sono definiti dall’applicazione: non costituiscono un nuovo standard Spectrum universale. L’illustrazione autonoma usa una tela ampia, un inspector laterale e una striscia di miniature. Sugli schermi piccoli, l’inspector rientra nel normale flusso e l’illustrazione mantiene le proprie proporzioni. Testi come le dimensioni e il formato sono fuori dall’illustrazione, quindi restano leggibili e non modificano l’opera esaminata. Leggi la specifica di supporto ## Sistema di design Adobe Spectrum Sistema di progettazione: ispezionare, selezionare e preparare sono azioni diverse ### Rendi la dimostrazione verificabile Facendo clic sulla miniatura di un’illustrazione, cambiano l’illustrazione ingrandita e i relativi metadati descrittivi. Una casella di controllo modifica il gruppo di risorse da esportare. Mantenere queste azioni indipendenti permette di esaminare una risorsa non selezionata senza esportarla inavvertitamente. L’anteprima mostra il conteggio degli elementi selezionati e conserva il formato mentre chi effettua la revisione modifica il gruppo. Il TableView nativo fornisce le interazioni della raccolta; l’esempio HTML usa normali pulsanti e caselle di controllo e non dichiara di riprodurre il modello completo di navigazione da tastiera della griglia. Entrambi offrono un percorso da tastiera per le azioni illustrate. Il risultato della ricetta è testo, non soltanto un effetto visivo temporaneo, così chi effettua la revisione può controllare esattamente quali id e quale formato sono stati preparati. Leggi la specifica di supporto ## Sistema di design Adobe Spectrum Sistema di progettazione: integra prima la parte nativa, poi estendi lo strumento ### Collega un servizio di esportazione reale a un confine esplicito Installa la suite v3 in un’app React esistente, poi usa la voce completa qui sotto. L’esempio include provider, importazioni, dati della raccolta, stato della selezione, stato del formato e stato del risultato. In un’integrazione di produzione, la preparazione della ricetta verrebbe sostituita da una richiesta di esportazione e il risultato confermato verrebbe mostrato per ogni risorsa. Non rinominare la risposta locale «Esportazione completata» prima che il servizio sia disponibile. Per la migrazione a Spectrum 2, usa le mappature di Adobe per dimensioni, breakpoint e modifiche ai componenti. Verifica nuovamente il comportamento della selezione e la persistenza del formato: una tabella visivamente simile può comunque presentare un contratto diverso. Indica esplicitamente la generazione di origine, così i collaboratori futuri non combineranno un Provider v3 con esempi incompatibili. 1. Seleziona una risorsa e verifica che il suo id compaia nella ricetta locale. 2. Seleziona tutto, cambia PNG in JPEG e controlla l’intero gruppo selezionato. 3. Cancella la selezione e verifica che l’azione venga disabilitata mentre il formato resta selezionato. 4. Riduci la larghezza della finestra e verifica che ispezione, selezione e risultato della ricetta restino accessibili. Leggi la specifica di supporto ## Sistema di design Adobe Spectrum Sistema di progettazione: esempi di componenti ### Esempio interattivo completo e autonomo Salva il documento completo come index.html e aprilo in un browser. Interpretazione originale HTML/CSS del flusso di lavoro documentato per raccolte e inspector v3. La palette e l’illustrazione sono a scopo illustrativo; non sono presenti il runtime Spectrum nativo né la conversione delle immagini. ``` Spectrum asset inspector study
Campaign library / Autumn collection
Campaign master1600 × 1200

Original artwork · illustrative preview

``` Riferimento del codice - L’illustrazione è un contenuto di esempio originale. La preparazione di una ricetta produce metadati di selezione, non file immagine convertiti; questo documento non carica Spectrum v3 né Spectrum 2. ### 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. ``` // Terminal: npm install @adobe/react-spectrum@3 // Existing React app with
; entry: src/main.jsx import * as React from 'react'; import {createRoot} from 'react-dom/client'; import {Provider, defaultTheme, Flex, View, Heading, Text, Button, TableView, TableHeader, Column, TableBody, Row, Cell, Picker, Item} from '@adobe/react-spectrum'; const assets = [ {id: 'hero', name: 'Campaign master', dimensions: '1600 × 1200'}, {id: 'square', name: 'Social square', dimensions: '1080 × 1080'}, {id: 'story', name: 'Vertical story', dimensions: '1080 × 1920'} ]; function AssetReview() { const [keys, setKeys] = React.useState(new Set(['hero'])); const [format, setFormat] = React.useState('png'); const [recipe, setRecipe] = React.useState(''); const selected = keys === 'all' ? assets : assets.filter(a => keys.has(a.id)); return Campaign exports AssetDimensions {asset => {asset.name}{asset.dimensions} } PNGJPEG {selected.length} assets selected

{recipe ? 'Local recipe prepared. No image files were converted.' : ''}

{recipe && 
{recipe}
} ; } createRoot(document.getElementById('root')).render(); ``` Riferimento del codice - Esempio completo v3 di raccolta e inspector per un’app React esistente. Crea una ricetta di esportazione nello stato locale, non file immagine. Mantieni la versione risolta del pacchetto nel lockfile e non combinare questa voce con le importazioni di Spectrum 2. ### La selezione può essere all, non solo un Set Normalizza il contratto della raccolta prima di calcolare il gruppo o abilitare l’azione. Questo frammento usa assets e keys della configurazione completa. ``` const selected = keys === 'all' ? assets : assets.filter(asset => keys.has(asset.id)); ``` Riferimento del codice - Gli id stabili sopravvivono all’ordinamento e alla rinomina. - Un gruppo vuoto disabilita solo l’azione di preparazione della ricetta; non cancella il formato corrente. ### Inspector reattivo con nomi espliciti per i breakpoint Usa le stesse chiavi su Provider e nelle props reattive. I numeri sono configurazioni deliberate dell’applicazione. ``` Asset table Export inspector ``` Riferimento del codice - La prosa di riferimento di Provider e la tabella dei valori predefiniti generata non concordano sui breakpoint predefiniti; una mappa esplicita elimina ogni ambiguità. - I margini logici marginStart e marginEnd si adattano meglio dei margini fisici sinistro e destro. ## Sistema di design Adobe Spectrum Configurazione dell’agente IA del sistema di progettazione ### Punto di partenza per l’implementazione Esempio completo v3 di raccolta e inspector per un’app React esistente. Crea una ricetta di esportazione nello stato locale, non file immagine. Mantieni la versione risolta del pacchetto nel lockfile e non combinare questa voce con le importazioni di Spectrum 2. ``` // Terminal: npm install @adobe/react-spectrum@3 // Existing React app with
; entry: src/main.jsx import * as React from 'react'; import {createRoot} from 'react-dom/client'; import {Provider, defaultTheme, Flex, View, Heading, Text, Button, TableView, TableHeader, Column, TableBody, Row, Cell, Picker, Item} from '@adobe/react-spectrum'; const assets = [ {id: 'hero', name: 'Campaign master', dimensions: '1600 × 1200'}, {id: 'square', name: 'Social square', dimensions: '1080 × 1080'}, {id: 'story', name: 'Vertical story', dimensions: '1080 × 1920'} ]; function AssetReview() { const [keys, setKeys] = React.useState(new Set(['hero'])); const [format, setFormat] = React.useState('png'); const [recipe, setRecipe] = React.useState(''); const selected = keys === 'all' ? assets : assets.filter(a => keys.has(a.id)); return Campaign exports AssetDimensions {asset => {asset.name}{asset.dimensions} } PNGJPEG {selected.length} assets selected

{recipe ? 'Local recipe prepared. No image files were converted.' : ''}

{recipe && 
{recipe}
} ; } createRoot(document.getElementById('root')).render(); ``` ### Un prompt per il tuo progetto ``` Usa @adobe/react-spectrum v3 con Provider e defaultTheme. Crea il TableView con chiavi e l’inspector di esportazione forniti usando Picker, Item, Flex, View e Button. Gestisci la selezione come Set o all, mantieni il formato quando la selezione cambia e chiama il risultato ricetta locale finché non viene collegato un vero servizio di conversione. Usa chiavi di breakpoint tablet/desktop esplicite e proprietà di stile supportate. Tieni separate le API v3 e Spectrum 2. ``` ## Sistema di design Adobe Spectrum Sistema di progettazione: fonti e ambito Studio d’implementazione OpenDesign della documentazione mantenuta di React Spectrum v3, con @adobe/react-spectrum. È disponibile anche Spectrum 2, con API diverse; questa pagina non presenta v3 come l’implementazione più recente. L’anteprima autonoma della bacheca delle risorse è un’interpretazione originale HTML/CSS con illustrazioni esemplificative e colori scelti dall’applicazione, non un componente Spectrum nativo né un editor di immagini con gestione del colore. - Provider Riferimento ufficiale React di Spectrum per l’implementazione e i vincoli trattati qui. - stile Riferimento ufficiale React di Spectrum per l’implementazione e i vincoli trattati qui. - temi Riferimento ufficiale React di Spectrum per l’implementazione e i vincoli trattati qui. - TableView Riferimento ufficiale React di Spectrum per l’implementazione e i vincoli trattati qui. - Picker Riferimento ufficiale React di Spectrum per l’implementazione e i vincoli trattati qui. - Heading Riferimento ufficiale React di Spectrum per l’implementazione e i vincoli trattati qui. - Button Riferimento ufficiale React di Spectrum per l’implementazione e i vincoli trattati qui. - migrazione Riferimento ufficiale React di Spectrum per l’implementazione e i vincoli trattati qui. ## Sistema di design Adobe Spectrum Sistema di progettazione: risorse correlate ### Alaska Airlines Auro Esplora il tema Alaska di Auro con token semantici reali per colori e tipografia, tipografia basata su classi e il componente nativo per i voli. Due voli originali dimostrano il filtraggio e la selezione locali, senza rappresentare la disponibilità di una compagnia aerea né consentire prenotazioni. ### Arco Design Crea un selettore delle sezioni di un report con il componente Transfer controllato di Arco. Esplora le scale effettive di spaziatura e dimensioni, le convenzioni delle variabili CSS, le superfici semantiche e la differenza tra selezionare e spostare le righe. ### Atlassian sistema di design Crea una bacheca per la pianificazione delle issue con i token semantici Atlassian, una scala di spaziatura a intervalli di otto pixel, le API reali di Button, Lozenge e Toggle e la configurazione di stile Compiled richiesta. Esamina un’issue, filtra la bacheca e sposta un elemento di lavoro locale senza confondere la selezione con lo stato. - [Riferimento per l’implementazione](https://react-spectrum.adobe.com/v3/TableView.html) - [Fonte](https://react-spectrum.adobe.com/v3/Provider.html) - [Fonte](https://react-spectrum.adobe.com/migrating) - [Fonte](https://react-spectrum.adobe.com/v3/styling.html) - [Fonte](https://react-spectrum.adobe.com/v3/TableView.html) - [Fonte](https://react-spectrum.adobe.com/v3/Picker.html) - [Leggi la specifica di supporto](https://react-spectrum.adobe.com/migrating) - [Leggi la specifica di supporto](https://react-spectrum.adobe.com/v3/theming.html) - [Leggi la specifica di supporto](https://react-spectrum.adobe.com/v3/styling.html) - [Leggi la specifica di supporto](https://react-spectrum.adobe.com/v3/Heading.html) - [Leggi la specifica di supporto](https://react-spectrum.adobe.com/v3/TableView.html) - [Leggi la specifica di supporto](https://react-spectrum.adobe.com/v3/Picker.html) - [Leggi la specifica di supporto](https://react-spectrum.adobe.com/v3/Provider.html) - [Riferimento del codice](https://react-spectrum.adobe.com/v3/TableView.html) - [Riferimento del codice](https://react-spectrum.adobe.com/v3/Provider.html) - [Provider Riferimento ufficiale React di Spectrum per l’implementazione e i vincoli trattati qui.](https://react-spectrum.adobe.com/v3/Provider.html) - [stile Riferimento ufficiale React di Spectrum per l’implementazione e i vincoli trattati qui.](https://react-spectrum.adobe.com/v3/styling.html) - [temi Riferimento ufficiale React di Spectrum per l’implementazione e i vincoli trattati qui.](https://react-spectrum.adobe.com/v3/theming.html) - [TableView Riferimento ufficiale React di Spectrum per l’implementazione e i vincoli trattati qui.](https://react-spectrum.adobe.com/v3/TableView.html) - [Picker Riferimento ufficiale React di Spectrum per l’implementazione e i vincoli trattati qui.](https://react-spectrum.adobe.com/v3/Picker.html) - [Heading Riferimento ufficiale React di Spectrum per l’implementazione e i vincoli trattati qui.](https://react-spectrum.adobe.com/v3/Heading.html) - [Button Riferimento ufficiale React di Spectrum per l’implementazione e i vincoli trattati qui.](https://react-spectrum.adobe.com/v3/Button.html) - [migrazione Riferimento ufficiale React di Spectrum per l’implementazione e i vincoli trattati qui.](https://react-spectrum.adobe.com/migrating)