# Sistema di progettazione Siemens iX ## Anteprima dell’interfaccia del sistema di progettazione sistema di design Siemens iX Filtra gli eventi fittizi, esamina una nota su un’apparecchiatura e contrassegna localmente un record come esaminato, mantenendo visibile la gravità originale. ## Siemens iX Riferimento di progettazione del sistema di design Documentazione pubblica aggiornata di iX e snapshot ufficiale del componente dal ramo principale API. Le voci di colore riportate di seguito sono ruoli semantici, non valori esadecimali fissi inventati. Le versioni dei pacchetti installati devono essere bloccate insieme; l’esempio offline usa una propria palette e dimensioni, indicate chiaramente. ### Tema e punto di ingresso del pacchetto | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Core package | @siemens/ix | Componenti web e foglio di stile globale. | | React wrappers | @siemens/ix-react | Integrazione dei componenti React. | | Icons | @siemens/ix-icons | Dipendenza ufficiale per le icone. | | data-ix-theme | classic | Selettore del tema a livello di documento. | | data-ix-color-schema | dark \| light \| system | La grafia esatta dell’attributo è definita dallo schema. | | Global CSS | @siemens/ix/dist/siemens-ix/siemens-ix.css | Importa una sola volta all’avvio dell’applicazione. | ### Ruoli di lettura e di superficie | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --theme-color-primary | Primary action role | Risolvi in base al tema scelto. | | --theme-color-std-text | Default reading color | Titoli degli eventi e testo del corpo. | | --theme-color-soft-text | Secondary reading color | Orari e metadati delle risorse. | | --theme-color-weak-text | Disabled reading color | Non utilizzare per informazioni secondarie importanti. | | --theme-color-alarm-text | Alarm text role | Da usare quando il testo di errore richiede un colore di primo piano. | | --theme-color-component-1 | Interactive component fill | Semitrasparente; la superficie sottostante ne influenza l’aspetto. | | color-0 | Transparent background role | Gli altri livelli di sfondo sono opachi. | ### Vocabolario dei livelli di gravità | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Alarm | Error, invalid or dangerous condition | Mantieni l’etichetta testuale accanto all’indicatore colorato. | | Critical | Between alarm and warning | Un significato distinto, non un’altra sfumatura decorativa. | | Warning | Condition requiring attention | Non elevarlo silenziosamente al livello di allarme. | | Success | Positive outcome | Un’azione di revisione non implica necessariamente che un allarme sia rientrato. | | Info | Informational condition | Separalo dai contenuti disabilitati. | | Neutral | Unclassified neutral condition | Disponibile quando non si applica alcuna valutazione dello stato. | ### Gerarchia dei confini | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --theme-color-hard-bdr | Strong solid boundary | Elevata separazione. | | --theme-color-std-bdr | Standard control boundary | Controllo di input o selezione. | | --theme-color-soft-bdr | Card boundary | Usato per l’ispettore del notebook. | | --theme-color-weak-bdr | Region boundary | Separa delicatamente le aree principali. | | --theme-color-x-weak-bdr | Very subtle boundary | Separatore poco enfatizzato. | | --theme-primary-bdr-1 | Complete border value | Usalo come bordo: var(--theme-primary-bdr-1), non come colore. | ### Ruoli tipografici | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Headings | H1 through H6 | Gerarchia del documento. | | Body | Multiline reading | Note e spiegazione dell’ispezione. | | Label | Single-line component text | Controlli e campi compatti. | | Display | Single-line KPI presentation | Conteggi, non paragrafi. | | Code | Code and technical syntax | API esempi o identificativi, se opportuno. | ### Snapshot di Event List API | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | IxEventList.itemHeight | S \| L \| number; default S | Usa L per il titolo e i metadati di esempio. | | IxEventList.compact | boolean; default false | La modalità compatta è selezionata esplicitamente. | | IxEventList.chevron | boolean; default false | Mostra un’indicazione di navigazione. | | IxEventList.animated | boolean; default false | Evita movimenti superflui in un log statico. | | IxEventListItem.itemColor | string | Espressione del colore del tema CSS. | | IxEventListItem.selected | boolean; default false | Controllato dall’ID del record selezionato. | | IxEventListItem.variant | outline \| filled; default outline | Scelta di presentazione. | | IxEventListItem.disabled | boolean; default false | Disattiva solo quando l’interazione non è disponibile. | | itemClick | Custom event | Il wrapper React onItemClick seleziona il record. | ## Guida completa al sistema di design Siemens iX 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 Siemens iX: eventi industriali con stati distinti di revisione e risoluzione ### Un taccuino, non un pannello di controllo di una macchina > L’esempio di lavoro è un quaderno fittizio dedicato alle attrezzature. Tre registrazioni mantengono il livello di gravità originale, mentre uno stato di revisione locale separato tiene traccia di ciò che il lettore ha esaminato. Questa separazione è essenziale per la composizione: selezionare una riga, leggere una nota e risolvere una condizione fisica sono operazioni diverse. L’anteprima implementa le prime due e non dichiara di controllare dispositivi in tempo reale. L'Elenco eventi è un punto di partenza migliore rispetto alle schede decorative, perché lo stato selezionato, l'indicatore di gravità e la chevron rendono leggibili i record ripetuti come raccolta navigabile. Il pannello di ispezione contiene i testi più lunghi, fuori dalla riga. Non ci sono flussi di telemetria fittizi né notifiche di esito positivo che dichiarino la risoluzione di un allarme. Leggi la specifica di supporto ## Ruoli cromatici del sistema di design Siemens iX per il significato operativo ### Abbina gli indicatori ai colori di lettura Il sistema di colori distingue i livelli di sfondo opachi dai riempimenti semitrasparenti dei componenti. Non è possibile valutare un riempimento di un componente indipendentemente dalla superficie sottostante. Nel codice nativo, usa le variabili del tema effettive invece di copiare un valore esadecimale da uno screenshot in ogni riga. Il testo standard e quello attenuato rispondono a priorità di lettura diverse. Il testo debole è pensato per i contenuti disabilitati; perciò, un timestamp utile per un’indagine non dovrebbe essere assegnato automaticamente a questo ruolo. Per il testo in primo piano di un errore è più adatto il ruolo dedicato al testo di allarme, anziché riutilizzare alla cieca un colore di riempimento per lo stato. - Mostra la parola Allarme, Avviso o Informazione accanto al bordo colorato. - Mantieni il contrassegno di allarme dopo la revisione locale: la revisione non modifica la condizione di origine. - Riserva lo stile di selezione allo stato della navigazione, così che la gravità e la selezione restino distinguibili. Leggi la specifica di supporto ## Sistema di design Siemens iX: una tipografia che distingue le note dalle etichette ### Usa i formati anziché una scala di pixel presunta iX suddivide la tipografia in titoli, testo corrente, etichette, testi di grande formato e codice. Le note di ispezione richiedono il comportamento multilinea del testo corrente; un conteggio elevato può usare lo stile di grande formato; una breve etichetta di filtro rientra nella categoria delle etichette. Lo stile di grande formato non è un espediente per ingrandire l’intera descrizione di un evento. L'esempio documentato ix-typography format="h3" fornisce un'implementazione concreta. Il mixin Sass equivalente typography-h3 supporta un elemento personalizzato senza dover ricreare le relative regole tipografiche. L'anteprima usa deliberatamente un font di sistema come fallback e dimensioni tipografiche definite dall'applicazione; questi valori non vengono presentati come token ufficiali di Siemens. Leggi la specifica di supporto ## Siemens iX Selezione e densità dell’elenco eventi del sistema di design ### Definisci l’identità del controllo indipendentemente dall’aspetto dell’elemento Lo snapshot API espone itemHeight come S, L o un numero. L’esempio sceglie L, lascia compact al valore predefinito false e abilita il chevron. Per un registro di produzione con titoli localizzati più lunghi, verifica che l’altezza scelta sia adeguata al testo su più righe, invece di presumere che ogni record rientri solo perché l’esempio lo consente. Ogni elemento riceve la selezione tramite un confronto tra ID e la invia al gestore onItemClick del wrapper come itemClick. L’inspector legge lo stesso ID. In questo modo si evita che la selezione visiva e il pannello dei dettagli facciano riferimento, senza segnalarlo, a record diversi. Le modifiche ai filtri azzerano esplicitamente l’ID selezionato. Leggi la specifica di supporto ## Sistema di design Siemens iX Un inspector che si adatta anche a viewport stretti ### Sposta i dettagli sotto l’elenco degli eventi La griglia a due colonne dell’esempio è un layout applicativo, non un token di griglia pubblicato iX. Nelle viewport strette diventa una sola colonna, mantenendo i record in ordine prima dell’ispettore. L’ispettore non crea una trappola di scorrimento annidata: è possibile scorrere l’intero esempio in modo naturale. I metadati dell’evento sono visualizzati su una seconda riga con un colore secondario ben leggibile. Il filtro resta al di fuori delle righe ripetute e non si sposta quando cambiano i record. Un paragrafo di stato comunica l’esito della revisione locale del record selezionato, senza modificare il filtro né sostituire il titolo. Leggi la specifica di supporto ## Sistema di design Siemens iX Sistema di progettazione: rendi lo stato percepibile senza affidarti al colore o alla precisione del puntatore ### Testo, comandi da tastiera e stato attivo L’anteprima offline usa pulsanti nativi per i record, un menu a discesa etichettato per la gravità e un’area di stato aria-live per fornire un riscontro sulla revisione. È possibile selezionare un record con Invio e con la barra spaziatrice. La composizione con la libreria nativa usa i wrapper Event List; prima di adottare sovrascritture personalizzate dello stato attivo, è necessario verificare il comportamento da tastiera e con le tecnologie assistive della versione installata. Le etichette descrivono la distinzione operativa: Contrassegna come esaminato localmente, non Risolvi allarme. Un’azione di revisione disabilitata è accompagnata da uno stato visibile che indica che il record è stato esaminato. Il significato non è affidato interamente al colore e il filtro non lascia una selezione obsoleta e inaccessibile nascosta in un’altra categoria. Leggi la specifica di supporto ## Sistema di design Siemens iX Sistema di progettazione: collega il pacchetto, il tema e lo stato locale dell’applicazione ### Una sequenza d’integrazione ponderata Il blocco di configurazione contiene le importazioni del pacchetto, gli attributi del tema del documento, le proprietà effettive dei componenti, l’intero stato React e CSS dell’applicazione. Il selettore del tema è data-ix-color-schema, non un attributo personalizzato dal nome simile. Blocca le versioni installate di core, wrapper e icone su versioni compatibili nell’applicazione. L’esemplare visivo è un’interpretazione offline HTML/CSS di queste regole d’interazione. La palette blu navy scuro, i margini interni di 24 pixel e il disegno schematico delle apparecchiature sono scelte originali dell’applicazione. Per ottenere una resa visiva nativa, esegui l’esempio React separato con il foglio di stile ufficiale e controlla i valori calcolati del tema. 1. Installa core, i wrapper React e le icone in uno scaffold Vite React; conserva l’elemento radice generato. 2. Sostituisci main.jsx e style.css con i file forniti, poi seleziona classico con scuro, chiaro o sistema nel documento. 3. Seleziona un record, contrassegnalo come esaminato, filtra l’elenco e verifica che la gravità persista mentre la selezione nascosta venga azzerata. Leggi la specifica di supporto ## Sistema di design Siemens iX Esempi di componenti del sistema di progettazione ### Esempio interattivo completo e autonomo Salva l’intero documento come index.html e aprilo in un browser. Interpretazione indipendente offline HTML/CSS. Palette originale, font di sistema e dimensioni dell’applicazione; non è il runtime iX nativo. ``` Equipment event notebook — iX interpretation
EVENT NOTEBOOKSample plant / offline

Independent HTML interpretation of Siemens iX interaction rules. Original colors, dimensions and fictional equipment records. Local review does not acknowledge or resolve a live alarm.

``` Riferimento del codice - Contrassegnare un evento come esaminato non ne modifica la gravità e non risolve un allarme dell’apparecchiatura. La voce iX nativa mostra separatamente la selezione di Event List e gli attributi del tema. ### Event List con pannello di ispezione controllato separatamente Un ID selezionato determina l’evidenziazione dell’elemento e i dettagli. La revisione registra solo uno stato locale nel taccuino; la gravità originale resta visibile. ``` // In a Vite React project: npm install @siemens/ix @siemens/ix-react @siemens/ix-icons // src/main.jsx import React, {useState} from 'react'; import {createRoot} from 'react-dom/client'; import {IxEventList, IxEventListItem, IxTypography} from '@siemens/ix-react'; import '@siemens/ix/dist/siemens-ix/siemens-ix.css'; import './style.css'; document.documentElement.dataset.ixTheme='classic'; document.documentElement.dataset.ixColorSchema='dark'; const records=[ {id:'E-014',severity:'alarm',title:'Cooling flow below sample threshold',asset:'Pump A',time:'09:42',note:'Original demonstration record: inspect the cooling circuit before considering a reset.'}, {id:'E-015',severity:'warning',title:'Filter service approaching',asset:'Pump B',time:'09:38',note:'Original demonstration record: schedule a filter inspection.'}, {id:'E-016',severity:'info',title:'Inspection checklist attached',asset:'Line C',time:'09:30',note:'Original demonstration record: a checklist is available for review.'} ]; function App(){ const [filter,setFilter]=useState('all'),[selected,setSelected]=useState('E-014'),[reviewed,setReviewed]=useState([]); const visible=records.filter(r=>filter==='all'||r.severity===filter); const record=visible.find(r=>r.id===selected); return

Equipment event notebook

Fictional records. Reviewing an entry does not control equipment or acknowledge a live alarm.

{visible.map(r=>setSelected(r.id)}>
{r.title}{r.severity.toUpperCase()} · {r.asset} · {r.time}{reviewed.includes(r.id)?' · Reviewed locally':''}
)}
} createRoot(document.getElementById('root')).render(); /* src/style.css — custom dimensions are application choices */ main{max-width:72rem;margin:auto;padding:24px;color:var(--theme-color-std-text)} .workspace{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-top:24px} .workspace>*{min-width:0}aside{padding:20px;border:1px solid var(--theme-color-soft-bdr)} .record{display:grid;gap:4px;padding:8px;white-space:normal;overflow-wrap:anywhere} .record span{color:var(--theme-color-soft-text)} button,select{font:inherit;padding:10px;background:var(--theme-color-component-1);color:var(--theme-color-std-text);border:1px solid var(--theme-color-std-bdr)} button:focus-visible,select:focus-visible{outline:2px solid var(--theme-color-primary);outline-offset:3px} @media(max-width:700px){.workspace{grid-template-columns:1fr}} ``` Riferimento del codice - Usa itemColor per l’indicatore di gravità e un’etichetta testuale leggibile per la gravità. - Quando si modifica il filtro di gravità, la selezione viene azzerata, così l’ispettore non mostra i dettagli di un evento nascosto. - Il pulsante di revisione locale implementa la logica dell’applicazione, non un inesistente API di conferma dell’allarme iX. ### Tipografia che si adatta al tema senza copiare le dimensioni dei caratteri Usa la proprietà format documentata o il mixin Sass, invece di fissare una dimensione del testo per tutti i temi. ``` Inspection record @import "@siemens/ix/scss/mixins/font"; .inspection-title { @include typography-h3; } ``` Riferimento del codice - L’anteprima usa un font di sistema alternativo; non distribuisce i font del marchio Siemens. ## Sistema di design Siemens iX Configurazione dell’agente AI per il sistema di progettazione ### Punto di partenza per l’implementazione Completa main.jsx e style.css per uno scaffold Vite React con il relativo elemento radice esistente. I wrapper ufficiali, l’importazione CSS e le proprietà di Event List sono documentati; qui non è stata eseguita la compilazione con i pacchetti nativi. L’anteprima incorporata è un’interpretazione indipendente offline. ``` // In a Vite React project: npm install @siemens/ix @siemens/ix-react @siemens/ix-icons // src/main.jsx import React, {useState} from 'react'; import {createRoot} from 'react-dom/client'; import {IxEventList, IxEventListItem, IxTypography} from '@siemens/ix-react'; import '@siemens/ix/dist/siemens-ix/siemens-ix.css'; import './style.css'; document.documentElement.dataset.ixTheme='classic'; document.documentElement.dataset.ixColorSchema='dark'; const records=[ {id:'E-014',severity:'alarm',title:'Cooling flow below sample threshold',asset:'Pump A',time:'09:42',note:'Original demonstration record: inspect the cooling circuit before considering a reset.'}, {id:'E-015',severity:'warning',title:'Filter service approaching',asset:'Pump B',time:'09:38',note:'Original demonstration record: schedule a filter inspection.'}, {id:'E-016',severity:'info',title:'Inspection checklist attached',asset:'Line C',time:'09:30',note:'Original demonstration record: a checklist is available for review.'} ]; function App(){ const [filter,setFilter]=useState('all'),[selected,setSelected]=useState('E-014'),[reviewed,setReviewed]=useState([]); const visible=records.filter(r=>filter==='all'||r.severity===filter); const record=visible.find(r=>r.id===selected); return

Equipment event notebook

Fictional records. Reviewing an entry does not control equipment or acknowledge a live alarm.

{visible.map(r=>setSelected(r.id)}>
{r.title}{r.severity.toUpperCase()} · {r.asset} · {r.time}{reviewed.includes(r.id)?' · Reviewed locally':''}
)}
} createRoot(document.getElementById('root')).render(); /* src/style.css — custom dimensions are application choices */ main{max-width:72rem;margin:auto;padding:24px;color:var(--theme-color-std-text)} .workspace{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-top:24px} .workspace>*{min-width:0}aside{padding:20px;border:1px solid var(--theme-color-soft-bdr)} .record{display:grid;gap:4px;padding:8px;white-space:normal;overflow-wrap:anywhere} .record span{color:var(--theme-color-soft-text)} button,select{font:inherit;padding:10px;background:var(--theme-color-component-1);color:var(--theme-color-std-text);border:1px solid var(--theme-color-std-bdr)} button:focus-visible,select:focus-visible{outline:2px solid var(--theme-color-primary);outline-offset:3px} @media(max-width:700px){.workspace{grid-template-columns:1fr}} ``` ### Un prompt per il tuo progetto ``` Crea un taccuino eventi Siemens iX usando le proprietà di Event List verificate e gli attributi del tema del documento descritti in questa guida. Mantieni la gravità indipendente dalla selezione e dalla revisione locale. Nella versione nativa, usa i colori semantici del tema. Non suggerire mai che un’azione del taccuino risolva un allarme fisico. Etichetta i filtri, rendi le righe accessibili da tastiera e disponi l’ispettore in verticale sugli schermi stretti. ``` ## Sistema di design Siemens iX Fonti e ambito del sistema di progettazione Guida indipendente OpenDesign. I dati degli eventi e l’illustrazione delle apparecchiature sono fittizi. Gli stili dell’anteprima sono un’interpretazione originale; l’esempio React separato usa API iX documentato. Non sono implementati collegamenti a macchinari, telemetria o conferme in tempo reale. - Installazione di React Pacchetti, CSS e attributi del tema. - Istantanea di API del componente Proprietà ed eventi effettivi degli eventi. - Fondamenti del colore Ruoli per superfici, lettura e stati. - Tipografia Categorie di testo e relative funzioni. - Implementazione della tipografia Formato e punto d’ingresso Sass. - Bordi Gerarchia dei contorni. - Event List Esempi di componenti e variazioni di densità. ## Sistema di design Siemens iX Risorse correlate al sistema di progettazione ### Sprout Social Seeds Esamina i token effettivi di Seeds per colori, spaziatura, tipografia di prodotto e bordi attraverso una coda editoriale completa, con selezione multipla, stati vuoti dopo il filtraggio e annullamento. ### SumUp Circuit Una guida Circuit con token semantici esatti, proprietà di convalida native, un editor completo degli articoli del venditore e un’anteprima illustrata dal lato cliente. ### TDesign Crea un editor compatto di criteri API con TDesign React: ruoli concreti del tema, scala delle dimensioni di due pixel, registrazione dei campi Form e composizione tipizzata di Table. - [Riferimento per l’implementazione](https://ix.siemens.io/docs/components/event-list/code) - [Fonte](https://ix.siemens.io/docs/home/installation/react) - [Fonte](https://ix.siemens.io/docs/styles/colors) - [Fonte](https://ix.siemens.io/docs/styles/borders) - [Fonte](https://ix.siemens.io/docs/styles/typography/guide) - [Fonte](https://raw.githubusercontent.com/siemens/ix/main/packages/core/component-api.json) - [Leggi la specifica di supporto](https://ix.siemens.io/docs/components/event-list/code) - [Leggi la specifica di supporto](https://ix.siemens.io/docs/styles/colors) - [Leggi la specifica di supporto](https://ix.siemens.io/docs/styles/typography/code) - [Leggi la specifica di supporto](https://raw.githubusercontent.com/siemens/ix/main/packages/core/component-api.json) - [Leggi la specifica di supporto](https://ix.siemens.io/docs/guidelines/accessibility/code) - [Leggi la specifica di supporto](https://ix.siemens.io/docs/home/installation/react) - [Riferimento del codice](https://ix.siemens.io/docs/components/event-list/code) - [Riferimento del codice](https://raw.githubusercontent.com/siemens/ix/main/packages/core/component-api.json) - [Riferimento del codice](https://ix.siemens.io/docs/styles/typography/code) - [Installazione di React Pacchetti, CSS e attributi del tema.](https://ix.siemens.io/docs/home/installation/react) - [Istantanea di API del componente Proprietà ed eventi effettivi degli eventi.](https://raw.githubusercontent.com/siemens/ix/main/packages/core/component-api.json) - [Fondamenti del colore Ruoli per superfici, lettura e stati.](https://ix.siemens.io/docs/styles/colors) - [Tipografia Categorie di testo e relative funzioni.](https://ix.siemens.io/docs/styles/typography/guide) - [Implementazione della tipografia Formato e punto d’ingresso Sass.](https://ix.siemens.io/docs/styles/typography/code) - [Bordi Gerarchia dei contorni.](https://ix.siemens.io/docs/styles/borders) - [Event List Esempi di componenti e variazioni di densità.](https://ix.siemens.io/docs/components/event-list/code)