Inspecciona eventos industriales con un vocabulario de severidad explícito, roles de color adaptados al tema y iX Event List API. Esta guía crea un cuaderno local de equipos sin confundir un registro revisado con una alarma de máquina resuelta.
Interpretación independiente sin conexión de HTML/CSS. Paleta original, fuente del sistema y dimensiones de la aplicación; no es el entorno de ejecución nativo de iX. · Referencia de implementación
02
Referencia de diseño del sistema de diseño Siemens iX
Documentación pública actual de iX y captura oficial del componente de la rama principal API. Las entradas de color que aparecen a continuación son roles semánticos, no valores hexadecimales fijos inventados. Las versiones de los paquetes instalados deben mantenerse bloqueadas en conjunto; el ejemplo sin conexión usa su propia paleta y dimensiones, claramente identificadas.
Eventos industriales del sistema de diseño Siemens iX con estados de revisión y resolución diferenciados
Un cuaderno, no un panel de control de maquinaria
El ejemplo práctico es un cuaderno ficticio de equipos. Tres registros conservan su gravedad de origen, mientras que un estado local de revisión independiente indica qué ha consultado la persona lectora. Esta separación es esencial para la composición: seleccionar una fila, leer una nota y resolver una condición física son operaciones distintas. La vista previa implementa las dos primeras y no afirma controlar equipos en tiempo real.
Event List es un mejor punto de partida que las tarjetas decorativas: su estado seleccionado, indicador de gravedad y chevrón hacen que los registros repetidos se lean con claridad como una colección navegable. El inspector muestra los textos más largos fuera de la fila. No hay una transmisión de telemetría falsa ni un aviso de éxito que afirme que se ha despejado una alarma.
Roles de color del sistema de diseño Siemens iX para el significado operativo
Combina los indicadores con colores de lectura
El sistema de color distingue las capas de fondo opacas de los rellenos semitransparentes de los componentes. No se puede evaluar el relleno de un componente sin tener en cuenta la superficie que hay debajo. En el código nativo, usa las variables reales del tema en lugar de copiar un valor hexadecimal de una captura de pantalla en cada fila.
El texto estándar y el suave responden a distintas prioridades de lectura. El texto débil está pensado para contenido deshabilitado; por eso, una marca de tiempo necesaria para una investigación no debería asignarse automáticamente a ese rol. Para el primer plano de un error, es más apropiado el rol específico de texto de alarma que reutilizar sin más un relleno de estado.
Muestra la palabra Alarma, Advertencia o Info junto al borde de color.
Mantén el indicador de alarma tras la revisión local; la revisión no cambia la condición de origen.
Reserva el estilo de selección para el estado de navegación, de modo que la gravedad y la selección sigan siendo distinguibles.
Tipografía del sistema de diseño Siemens iX que distingue las notas de las etiquetas
Usa formatos en lugar de una escala de píxeles supuesta
iX divide la tipografía en encabezados, cuerpo, etiquetas, visualización y código. Las notas de inspección necesitan el comportamiento multilínea del texto de cuerpo; un recuento grande puede usar el formato de visualización; una etiqueta breve para un filtro corresponde a la categoría de etiquetas. El formato de visualización no es una forma cómoda de agrandar la descripción completa de un evento.
El ejemplo documentado ix-typography format="h3" proporciona un punto de partida concreto para la implementación. El mixin equivalente de Sass typography-h3 permite usar un elemento personalizado sin recrear sus reglas tipográficas. La vista previa usa deliberadamente una fuente alternativa del sistema y tamaños tipográficos propios de la aplicación; esos valores no se presentan como tokens oficiales de Siemens.
Selección y densidad de Event List del sistema de diseño Siemens iX
Controla la identidad independientemente de la apariencia del elemento
La captura API expone itemHeight con los valores S, L o un número. El ejemplo elige L, deja compact en su valor predeterminado false y habilita un chevrón. En un registro de producción con títulos localizados más largos, hay que verificar que la altura elegida admita el ajuste de texto, en lugar de dar por sentado que todos los registros caben porque así ocurre en el ejemplo.
Cada elemento recibe selected a partir de una comparación de ID y envía itemClick mediante el controlador onItemClick del contenedor. El inspector usa el mismo ID. Así se evita que la selección visual y el panel de detalles hagan referencia silenciosamente a registros distintos. Los cambios en los filtros borran explícitamente el ID seleccionado.
Un inspector del sistema de diseño Siemens iX que se adapta a una ventana estrecha
Coloca los detalles debajo de la colección de eventos
La cuadrícula de dos columnas con proporción dos a uno del ejemplo es una composición de la aplicación, no un token de cuadrícula publicado de iX. En una ventana estrecha, pasa a una columna y conserva el orden de los registros antes del inspector. El inspector no crea una trampa de desplazamiento anidada; la persona lectora puede desplazarse por todo el ejemplo con naturalidad.
Los metadatos del evento aparecen en una segunda línea con un color secundario legible. El filtro queda fuera de las filas repetidas y no se desplaza cuando cambian los registros. Un párrafo de estado informa del resultado de la revisión local del registro seleccionado, sin modificar el filtro ni sustituir el título.
Sistema de diseño Siemens iX: haz que el estado sea perceptible sin depender del color ni de la precisión del puntero
Texto, controles de teclado y foco
La vista previa sin conexión usa botones nativos para los registros, un selector etiquetado para la gravedad y una región de estado aria-live para los comentarios de revisión. Se puede seleccionar un registro con Intro y Espacio. La composición nativa de la biblioteca usa sus wrappers de Event List; antes de adoptar anulaciones de foco personalizadas, se debe probar el comportamiento con teclado y tecnologías de asistencia de la versión instalada.
Las etiquetas describen la distinción del negocio: «Marcar como revisado localmente», no «Resolver alarma». La acción de revisión deshabilitada va acompañada de un estado visible de revisión. El significado no depende únicamente del color, y el filtro no deja una selección obsoleta e inaccesible oculta en otra categoría.
Sistema de diseño Siemens iX: conecta el paquete, el tema y el estado local de la aplicación
Una secuencia de integración deliberada
El bloque de configuración contiene las importaciones del paquete, los atributos de tema del documento, las propiedades reales del componente, el estado completo de React y la aplicación CSS. El selector de tema es data-ix-color-schema, no un atributo personalizado de nombre parecido. Fija en la aplicación versiones compatibles del núcleo, los wrappers y los iconos instalados.
La muestra visual es una interpretación sin conexión de HTML/CSS de estas reglas de interacción. Su paleta azul marino oscuro, sus márgenes interiores de 24 píxeles y el dibujo esquemático de los equipos son decisiones originales de la aplicación. Para obtener una representación visual nativa, ejecuta el ejemplo independiente de React con la hoja de estilos oficial e inspecciona los valores del tema calculados.
Instala el núcleo, los wrappers de React y los iconos en una estructura inicial de Vite React; conserva el elemento raíz generado.
Sustituye main.jsx y style.css por los archivos proporcionados y, en el documento, selecciona classic junto con dark, light o system.
Selecciona un registro, márcalo como revisado, filtra la lista y confirma que la gravedad se mantiene mientras se borra la selección oculta.
Sistema de diseño Siemens iX: ejemplos de componentes
Muestra interactiva independiente completa
Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación independiente sin conexión de HTML/CSS. Paleta, fuente del sistema y dimensiones de la aplicación originales; no es el runtime nativo de 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 un evento como revisado no cambia su gravedad ni resuelve una alarma de un equipo. La entrada nativa de iX muestra por separado la selección de Event List y los atributos de tema.
Event List con un panel de inspección controlado por separado
Un ID seleccionado determina el resaltado del elemento y los detalles. La revisión solo registra un estado local en el cuaderno; la gravedad original sigue visible.
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}}
La vista previa usa una fuente alternativa del sistema; no distribuye las fuentes de marca de Siemens.
04
Siemens iX Configuración del agente de IA del sistema de diseño
Punto de partida para la implementación
Completa main.jsx y style.css para una estructura inicial de Vite React con su elemento raíz existente. Los wrappers oficiales, la importación de CSS y las propiedades de Event List están documentados; aquí no se ejecutó la compilación nativa del paquete. La vista previa integrada es una interpretación independiente sin conexión.
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}}
Una instrucción para tu proyecto
Instrucción para el agente
Crea un cuaderno de eventos de Siemens iX con las propiedades verificadas de Event List y los atributos de tema del documento que se describen en esta guía. Mantén la gravedad independiente de la selección y de la revisión local. En la versión nativa, usa colores semánticos del tema. No des a entender nunca que una acción del cuaderno resuelve una alarma física. Etiqueta los filtros, permite usar las filas con el teclado y coloca el inspector debajo en pantallas estrechas.
05
Sistema de diseño Siemens iX: fuentes y alcance
Guía independiente de OpenDesign. Los datos de eventos y la ilustración de los equipos son ficticios. Los estilos de la vista previa son una interpretación original; el ejemplo independiente de React usa el API de iX documentado. No se implementan conexión a máquinas, telemetría ni reconocimiento de alarmas en tiempo real.
