Progettazione di prodotti aziendali · Nuova risorsa
Sistema di progettazione Siemens iX.
Esamina gli eventi industriali con un vocabolario esplicito dei livelli di gravità, ruoli cromatici adattati al tema e iX Event List API. Questa guida crea un registro locale delle attrezzature senza confondere un record revisionato con un allarme macchina risolto.
Guida OpenDesign7 capitoli39 voci di riferimentoGuida applicativa originale
01
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.
Interpretazione offline indipendente di HTML/CSS. Palette originale, font di sistema e dimensioni dell’applicazione; non è il runtime nativo di iX. · Riferimento per l’implementazione
02
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.
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.
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.
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.
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.
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.
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.
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.
Installa core, i wrapper React e le icone in uno scaffold Vite React; conserva l’elemento radice generato.
Sostituisci main.jsx e style.css con i file forniti, poi seleziona classico con scuro, chiaro o sistema nel documento.
Seleziona un record, contrassegnalo come esaminato, filtra l’elenco e verifica che la gravità persista mentre la selezione nascosta venga azzerata.
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.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Equipment event notebook — iX interpretation</title><style>
*{box-sizing:border-box}body{margin:0;background:#000028;color:#f3f3fa;font:15px/1.5 Arial,sans-serif}button,select{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible{outline:3px solid #00cccc;outline-offset:3px}.app{max-width:1200px;margin:auto;padding:28px}.top{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid #55556b;padding-bottom:18px}.brand{letter-spacing:.12em;color:#00cccc}.dim{color:#b6b6c8}h1{font-size:30px;font-weight:500;line-height:1.2;margin:20px 0 8px}h2{font-size:21px;font-weight:500;margin:0 0 12px}.banner{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center;padding-bottom:24px}.schematic{height:140px;position:relative;display:flex;align-items:center;justify-content:space-evenly;border-bottom:2px solid #77788e;background:linear-gradient(transparent 23px,#23233c 24px);background-size:24px 24px}.schematic:before{content:'';position:absolute;left:10%;right:10%;top:68px;height:5px;background:#666780}.unit{position:relative;width:76px;height:76px;border:2px solid #b6b6c8;background:#141432;display:grid;place-content:center;text-align:center}.unit:first-child{border-color:#ff8da5}.unit span{color:#b6b6c8;font:12px monospace}.toolbar{display:flex;align-items:center;gap:16px;margin:10px 0 18px}select{background:#23233c;border:1px solid #8b8b9e;padding:8px 28px 8px 10px}.layout{display:grid;grid-template-columns:1.6fr 1fr;gap:24px}.event{width:100%;display:grid;grid-template-columns:70px 1fr 20px;gap:14px;text-align:left;align-items:center;padding:18px 14px;border:1px solid #55556b;border-left:4px solid var(--severity);background:#141432;margin-bottom:10px}.event:hover{background:#292944}.event[aria-pressed=true]{outline:2px solid #00cccc;outline-offset:1px}.event strong{font-size:15px;font-weight:600;display:block}.event small{display:block;color:#c0c0cf;margin-top:4px}.severity{font-size:11px;letter-spacing:.06em}.inspector{padding:20px;background:#23233c;border-top:3px solid #00cccc;min-height:290px}.meta{font:12px monospace;color:#b6b6c8}.tag{font-size:12px;border:1px solid #6c6c80;padding:3px 8px;display:inline-block;margin:10px 0}.action{background:#00cccc;border:0;color:#000028;padding:11px 16px;margin-top:10px}.action:disabled{background:#515168;color:#e0e0e8;cursor:default}.status{min-height:48px;color:#b7eeee;font-size:13px}.note{border-top:1px solid #55556b;margin-top:24px;padding-top:16px;color:#b6b6c8;font-size:12px}@media(max-width:650px){.app{padding:18px}.top{font-size:12px}.banner,.layout{grid-template-columns:1fr}.banner{gap:8px}.schematic{height:115px}.schematic:before{top:56px}.unit{height:60px;width:65px}h1{font-size:26px}.event{grid-template-columns:60px 1fr 10px;gap:8px}.toolbar{flex-wrap:wrap}}
</style><main class="app"><header class="top"><b class="brand">EVENT NOTEBOOK</b><span class="dim">Sample plant / offline</span></header><div class="banner"><div><h1>Inspect the event.<br>Keep its meaning.</h1><p class="dim">Review equipment notes without changing their original severity.</p></div><div class="schematic" aria-label="Original schematic of three fictional equipment units" role="img"><div class="unit">A<span>PUMP</span></div><div class="unit">B<span>PUMP</span></div><div class="unit">C<span>LINE</span></div></div></div><div class="toolbar"><label for="severity">Severity</label><select id="severity"><option value="all">All events</option><option value="alarm">Alarm</option><option value="warning">Warning</option><option value="info">Info</option></select><span class="dim" id="count"></span></div><div class="layout"><section aria-label="Event records" id="events"></section><aside class="inspector" aria-label="Selected event" id="detail"></aside></div><p class="note">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.</p></main><script>
const data=[{id:'E-014',severity:'alarm',color:'#ff8da5',title:'Cooling flow below sample threshold',asset:'Pump A',time:'09:42',note:'Inspect the cooling circuit before considering a reset. This fictional record remains an alarm after you mark the note reviewed.'},{id:'E-015',severity:'warning',color:'#ffce6b',title:'Filter service approaching',asset:'Pump B',time:'09:38',note:'Schedule a filter inspection. Reviewing this notebook entry does not schedule maintenance or alter equipment.'},{id:'E-016',severity:'info',color:'#65cfff',title:'Inspection checklist attached',asset:'Line C',time:'09:30',note:'A fictional checklist is available for review. This sample displays the record; it does not connect to a document service.'}];let selected='E-014';const reviewed=new Set();function render(){let visible=data.filter(r=>severity.value==='all'||r.severity===severity.value);document.querySelector('#count').textContent=visible.length+' event'+(visible.length===1?'':'s');events.innerHTML=visible.map(r=>`<button class="event" id="row-${r.id}" style="--severity:${r.color}" aria-pressed="${selected===r.id}" data-id="${r.id}"><span class="severity">${r.severity.toUpperCase()}</span><span><strong>${r.title}</strong><small>${r.asset} · ${r.time}${reviewed.has(r.id)?' · Reviewed locally':''}</small></span><span aria-hidden="true">›</span></button>`).join('');const r=visible.find(r=>r.id===selected);detail.innerHTML=r?`<div class="meta">${r.id} / ${r.asset}</div><h2>${r.title}</h2><span class="tag">${r.severity.toUpperCase()} · source condition unchanged</span><p>${r.note}</p><button class="action" id="review" ${reviewed.has(r.id)?'disabled':''}>Mark reviewed locally</button><p class="status" role="status">${reviewed.has(r.id)?'Reviewed in this browser session. Source severity is unchanged.':''}</p>`:'<h2>Select an event</h2><p class="dim">Choose a record to inspect its note.</p>';events.querySelectorAll('button').forEach(b=>b.onclick=()=>{selected=b.dataset.id;render();document.getElementById('row-'+selected).focus()});if(r&&!reviewed.has(r.id))document.querySelector('#review').onclick=()=>{reviewed.add(r.id);render()}}const severity=document.querySelector('#severity'),events=document.querySelector('#events'),detail=document.querySelector('#detail');severity.onchange=()=>{selected='';render()};render();
</script></html>
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.
jsx
// 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 <main><h1>Equipment event notebook</h1><p>Fictional records. Reviewing an entry does not control equipment or acknowledge a live alarm.</p>
<label htmlFor="severity">Severity</label><select id="severity" value={filter} onChange={e=>{setFilter(e.target.value);setSelected('')}}>
<option value="all">All events</option><option value="alarm">Alarm</option><option value="warning">Warning</option><option value="info">Info</option></select>
<div className="workspace"><section aria-label="Event records"><IxEventList itemHeight="L" chevron>
{visible.map(r=><IxEventListItem key={r.id} selected={selected===r.id} itemColor={`var(--theme-color-${r.severity})`} onItemClick={()=>setSelected(r.id)}>
<div className="record"><strong>{r.title}</strong><span>{r.severity.toUpperCase()} · {r.asset} · {r.time}{reviewed.includes(r.id)?' · Reviewed locally':''}</span></div>
</IxEventListItem>)}
</IxEventList></section><aside aria-label="Selected event">
{record?<><IxTypography format="h3">{record.id} / {record.asset}</IxTypography><p>{record.note}</p>
<button type="button" onClick={()=>setReviewed(a=>a.includes(record.id)?a:[...a,record.id])} disabled={reviewed.includes(record.id)}>Mark reviewed locally</button>
<p role="status">{reviewed.includes(record.id)?'Reviewed in this browser session. Source severity is unchanged.':''}</p></>:<p>Select an event to inspect its record.</p>}
</aside></div></main>
}
createRoot(document.getElementById('root')).render(<App/>);
/* 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}}
L’anteprima usa un font di sistema alternativo; non distribuisce i font del marchio Siemens.
04
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.
jsx
// 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 <main><h1>Equipment event notebook</h1><p>Fictional records. Reviewing an entry does not control equipment or acknowledge a live alarm.</p>
<label htmlFor="severity">Severity</label><select id="severity" value={filter} onChange={e=>{setFilter(e.target.value);setSelected('')}}>
<option value="all">All events</option><option value="alarm">Alarm</option><option value="warning">Warning</option><option value="info">Info</option></select>
<div className="workspace"><section aria-label="Event records"><IxEventList itemHeight="L" chevron>
{visible.map(r=><IxEventListItem key={r.id} selected={selected===r.id} itemColor={`var(--theme-color-${r.severity})`} onItemClick={()=>setSelected(r.id)}>
<div className="record"><strong>{r.title}</strong><span>{r.severity.toUpperCase()} · {r.asset} · {r.time}{reviewed.includes(r.id)?' · Reviewed locally':''}</span></div>
</IxEventListItem>)}
</IxEventList></section><aside aria-label="Selected event">
{record?<><IxTypography format="h3">{record.id} / {record.asset}</IxTypography><p>{record.note}</p>
<button type="button" onClick={()=>setReviewed(a=>a.includes(record.id)?a:[...a,record.id])} disabled={reviewed.includes(record.id)}>Mark reviewed locally</button>
<p role="status">{reviewed.includes(record.id)?'Reviewed in this browser session. Source severity is unchanged.':''}</p></>:<p>Select an event to inspect its record.</p>}
</aside></div></main>
}
createRoot(document.getElementById('root')).render(<App/>);
/* 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
Prompt per l’agente
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.
05
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.
