Inspecione eventos industriais com um vocabulário explícito de níveis de gravidade, funções de cor adaptadas ao tema e o iX Event List API. Este guia cria um caderno local de equipamentos sem confundir um registro revisado com um alarme de máquina resolvido.
Guia OpenDesign7 capítulos39 entradas de referênciaGuia de aplicação original
01
Prévia da interface do sistema de design Siemens iX
Filtre eventos fictícios, inspecione uma observação sobre equipamento e marque um registro como revisado localmente, mantendo visível a gravidade original.
Interpretação independente e offline de HTML/CSS. Paleta original, fonte do sistema e dimensões do aplicativo; não é o ambiente de execução nativo do iX. · Referência de implementação
02
Referência de design do sistema de design Siemens iX
Documentação pública atual do iX e captura oficial do componente API da branch principal. As entradas de cor abaixo são papéis semânticos, não valores hexadecimais fixos inventados. As versões dos pacotes instalados devem ser compatíveis entre si; o exemplo offline usa uma paleta e dimensões próprias, claramente identificadas.
Sistema de design Siemens iX: eventos industriais com estados distintos de revisão e resolução
Um caderno, não um painel de controle de máquinas
O exemplo funcional é um caderno fictício de equipamentos. Três registros mantêm a gravidade de origem, enquanto um estado de revisão local separado acompanha o que o leitor inspecionou. Essa separação é essencial para a composição: selecionar uma linha, ler uma observação e resolver uma condição física são operações diferentes. A prévia implementa as duas primeiras e não afirma oferecer controle em tempo real.
O Event List é um ponto de partida melhor do que cartões decorativos, pois seu estado selecionado, marcador de gravidade e chevron tornam registros repetidos fáceis de percorrer como uma coleção navegável. O inspetor exibe textos mais longos fora da linha. Não há fluxo de telemetria falso nem notificação de sucesso que afirme que um alarme foi resolvido.
Sistema de design Siemens iX: papéis de cor para significados operacionais
Combine marcadores com cores de leitura
O sistema de cores diferencia camadas de fundo opacas de preenchimentos semitransparentes dos componentes. Não é possível avaliar o preenchimento de um componente sem considerar a superfície abaixo dele. Use as variáveis reais do tema no código nativo, em vez de copiar um valor hexadecimal de uma captura de tela para cada linha.
Os estilos de texto padrão e suave atendem a prioridades de leitura diferentes. O texto fraco é destinado ao conteúdo desativado; por isso, um horário necessário para uma investigação não deve ser automaticamente colocado nesse estilo. Para o primeiro plano de uma mensagem de erro, o papel dedicado a texto de alarme é mais apropriado do que reutilizar um preenchimento de status sem critério.
Exiba a palavra Alarme, Aviso ou Informação ao lado da borda colorida.
Mantenha o marcador de alarme após a revisão local; a revisão não altera a condição de origem.
Reserve o estilo selecionado para o estado de navegação, para que gravidade e seleção continuem distintas.
Sistema de design Siemens iX: tipografia que diferencia observações de rótulos
Use formatos em vez de supor uma escala de pixels
O iX organiza a tipografia em títulos, corpo, rótulos, exibição e código. Observações de inspeção precisam do comportamento multilinha do corpo; uma contagem grande pode usar o estilo de exibição; e um rótulo curto de filtro pertence à categoria de rótulos. O estilo de exibição não é um atalho para aumentar o texto de toda a descrição de um evento.
O exemplo documentado ix-typography format="h3" oferece um ponto de partida concreto para a implementação. O mixin Sass equivalente typography-h3 permite usar um elemento personalizado sem recriar as regras tipográficas. A prévia usa intencionalmente uma fonte substituta do sistema e tamanhos tipográficos do aplicativo; esses valores não são apresentados como tokens oficiais da Siemens.
Sistema de design Siemens iX: seleção e densidade do Event List
Controle a identidade separadamente da aparência do item
A captura API expõe itemHeight como S, L ou um número. O exemplo escolhe L, mantém compact no padrão false e habilita um chevron. Um registro de produção com títulos localizados mais longos deve verificar se a altura escolhida comporta a quebra de linha, em vez de presumir que todos os registros cabem só porque o exemplo cabe.
Cada item recebe selected a partir da comparação de IDs e envia itemClick pelo manipulador onItemClick do wrapper. O inspetor consulta o mesmo ID. Isso evita que a seleção visual e o painel de detalhes se refiram silenciosamente a registros diferentes. As mudanças de filtro limpam explicitamente o ID selecionado.
Sistema de design Siemens iX: um inspetor que se adapta a uma janela estreita
Mova os detalhes para baixo da coleção de eventos
A grade de duas colunas em proporção dois para um do exemplo é um layout do aplicativo, não um token de grade publicado do iX. Em uma janela estreita, ela passa a ter uma coluna, mantendo os registros antes do inspetor. O inspetor não cria uma armadilha de rolagem aninhada; o leitor pode percorrer o exemplo inteiro naturalmente.
Os metadados do evento aparecem em uma segunda linha, com uma cor secundária legível. O filtro fica fora das linhas repetidas e não muda de lugar quando os registros são alterados. Um parágrafo de status informa o resultado da revisão local do registro selecionado, sem alterar o filtro nem substituir o título.
Sistema de design Siemens iX: torne os estados perceptíveis sem depender de cor ou precisão do ponteiro
Texto, controles de teclado e foco
A prévia offline usa botões nativos para os registros, um seletor identificado para a gravidade e uma região de status aria-live para informar o resultado da revisão. Enter e Espaço podem selecionar um registro. A composição da biblioteca nativa usa os wrappers do Event List; antes de adotar substituições personalizadas de foco, teste o comportamento de teclado e de tecnologias assistivas na versão instalada.
Os rótulos descrevem a distinção de negócio: Marcar como revisado localmente, não Resolver alarme. Uma ação de revisão desativada vem acompanhada de um estado revisado visível. A cor não transmite todo o significado, e o filtro não deixa uma seleção obsoleta e inacessível oculta em outra categoria.
Sistema de design Siemens iX: conecte o pacote, o tema e o estado local do aplicativo
Uma sequência de integração planejada
O bloco de configuração contém as importações de pacotes, os atributos de tema do documento, as propriedades reais dos componentes, o estado completo de React e o CSS do aplicativo. O seletor de tema é data-ix-color-schema, não um atributo personalizado de nome parecido. No aplicativo, fixe versões compatíveis do core, dos wrappers e dos ícones instalados.
O exemplo visual é uma interpretação offline de HTML/CSS dessas regras de interação. Sua paleta azul-marinho escura, margens internas de 24 pixels e ilustração esquemática de equipamentos são escolhas originais do aplicativo. Para obter fidelidade visual nativa, execute o exemplo separado de React com a folha de estilos oficial e inspecione os valores calculados do tema.
Instale core, wrappers React e ícones em um scaffold Vite React; mantenha o elemento raiz gerado.
Substitua main.jsx e style.css pelos arquivos fornecidos e selecione classic com dark, light ou system no documento.
Selecione um registro, marque-o como revisado, filtre a lista e confirme que a gravidade persiste enquanto a seleção oculta é limpa.
Sistema de design Siemens iX: exemplos de componentes
Exemplo interativo completo e independente
Salve o documento completo como index.html e abra-o em um navegador. Interpretação independente offline de HTML/CSS. Paleta original, fonte do sistema e dimensões do aplicativo; não é o runtime nativo do iX.
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>
Marcar um evento como revisado não altera sua gravidade nem resolve um alarme de equipamento. A entrada nativa do iX demonstra separadamente a seleção na Event List e os atributos de tema.
Event List com painel de inspeção controlado separadamente
Um ID selecionado controla o destaque do item e os detalhes. A revisão apenas registra um estado local no caderno; a gravidade original continua visível.
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}}
A prévia usa uma fonte alternativa do sistema; ela não distribui fontes da marca Siemens.
04
Configuração do agente do sistema de design Siemens iX
Ponto de partida para implementação
Complete main.jsx e style.css para um scaffold Vite React com seu elemento raiz existente. Os wrappers oficiais, a importação CSS e as propriedades da Event List estão documentados; a compilação do pacote nativo não foi executada aqui. A prévia incorporada é uma interpretação independente 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}}
Um prompt para seu projeto
Prompt para agente de IA
Crie um caderno de eventos Siemens iX usando as propriedades verificadas da Event List e os atributos de tema documentados neste guia. Preserve a gravidade independentemente da seleção e da revisão local. Use cores semânticas do tema na versão nativa. Nunca sugira que uma ação no caderno resolve um alarme físico. Mantenha os filtros identificados, permita acessar as linhas pelo teclado e empilhe o painel de inspeção em telas estreitas.
05
Fontes e escopo do sistema de design Siemens iX
Guia independente de OpenDesign. Os dados de eventos e a ilustração dos equipamentos são fictícios. O estilo da prévia é uma interpretação original; o exemplo separado de React usa o API documentado do iX. Não há conexão com máquinas, telemetria nem reconhecimento de alarmes em tempo real.
