Design de produits d’entreprise · Nouvelle ressource
Système de design Siemens iX.
Examinez des événements industriels à l’aide d’un vocabulaire explicite de niveaux de gravité, de rôles de couleur adaptés au thème et de la liste d’événements iX API. Ce guide crée un carnet d’équipement local sans confondre un événement révisé avec une alarme machine résolue.
Guide OpenDesign7 chapitres39 entrées de référenceGuide de l’application d’origine
01
Aperçu de l’interface du système de design Siemens iX
Filtrez des événements fictifs, consultez une note sur un équipement et marquez localement un enregistrement comme vérifié tout en gardant visible sa gravité d’origine.
Interprétation hors ligne indépendante de HTML/CSS. Palette originale, police système et dimensions d’application ; il ne s’agit pas de l’environnement d’exécution natif iX. · Référence de mise en œuvre
02
Référence de conception du système de design Siemens iX
Documentation publique actuelle d’iX et capture officielle de la branche principale du composant API. Les couleurs ci-dessous sont des rôles sémantiques, et non des codes hexadécimaux fixes inventés. Les versions des packages installés doivent être verrouillées ensemble ; l’exemple hors ligne utilise sa propre palette et ses propres dimensions, clairement indiquées.
Événements industriels aux états de vérification et de résolution distincts — système de design Siemens iX
Un carnet, pas un panneau de commande de machine
L’exemple fonctionnel est un carnet fictif consacré aux équipements. Trois enregistrements conservent leur gravité d’origine tandis qu’un état local de vérification distinct indique ce que le lecteur a examiné. Cette distinction est essentielle à la composition : sélectionner une ligne, lire une note et résoudre un problème matériel sont trois opérations différentes. L’aperçu permet d’effectuer les deux premières et ne prétend pas commander un système en temps réel.
Event List est un meilleur point de départ que des cartes décoratives : son état sélectionné, son marqueur de gravité et son chevron rendent les enregistrements répétés faciles à parcourir au sein d’une collection navigable. L’inspecteur accueille les textes plus longs en dehors de la ligne. Aucun flux de télémétrie factice ni notification de réussite ne prétend qu’une alarme a été levée.
Rôles de couleur du système de design Siemens iX pour les significations opérationnelles
Associer les marqueurs à des couleurs de lecture
Le système de couleurs distingue les couches d’arrière-plan opaques des remplissages semi-transparents des composants. L’apparence d’un remplissage ne peut pas être évaluée indépendamment de la surface située en dessous. Dans le code natif, utilisez les variables réelles du thème plutôt que de recopier une valeur hexadécimale de capture d’écran dans chaque ligne.
Les textes standard et atténués répondent à des priorités de lecture différentes. Le texte faible est destiné aux éléments désactivés ; un horodatage nécessaire à une enquête ne devrait donc pas automatiquement utiliser ce rôle. Pour le texte de premier plan d’une erreur, mieux vaut utiliser le rôle dédié au texte d’alarme que de réemployer aveuglément une couleur de remplissage d’état.
Afficher le mot « Alarme », « Avertissement » ou « Info » à côté du bord coloré.
Conserver le marqueur d’alarme après une vérification locale ; la vérification ne modifie pas l’état d’origine.
Réservez le style sélectionné à l’état de navigation afin de distinguer clairement la gravité de la sélection.
Typographie du système de design système de design Siemens iX : distinguer les notes des libellés
Utilisez les formats plutôt qu’une échelle de pixels supposée
iX répartit la typographie en catégories : titres, corps de texte, libellés, affichage et code. Les notes d’inspection nécessitent le comportement multiligne du corps de texte ; un grand nombre peut relever de l’affichage ; un court libellé de filtre appartient à la catégorie des libellés. Un style d’affichage n’est pas un moyen pratique d’agrandir toute la description d’un événement.
L’exemple documenté ix-typography format="h3" fournit une entrée d’implémentation concrète. Le mixin Sass équivalent typography-h3 prend en charge un élément personnalisé sans qu’il soit nécessaire de recréer ses règles typographiques. L’aperçu utilise délibérément une police système de remplacement et les tailles de texte de l’application ; ces valeurs ne sont pas présentées comme des jetons officiels Siemens.
Liste d’événements du système de design système de design Siemens iX : sélection et densité
Gérez séparément l’identité et l’apparence des éléments
L’instantané API expose itemHeight avec les valeurs S, L ou un nombre. L’exemple choisit L, laisse compact à sa valeur par défaut false et active un chevron. Pour un journal en production contenant des titres localisés plus longs, vérifiez que la hauteur choisie permet le retour à la ligne au lieu de supposer que chaque entrée tient comme dans l’exemple.
Chaque élément reçoit selected à partir d’une comparaison d’ID et transmet itemClick au gestionnaire onItemClick du composant englobant. L’inspecteur lit le même ID. La sélection visuelle et l’affichage des détails ne peuvent donc pas désigner silencieusement des entrées différentes. Les changements de filtre effacent explicitement l’ID sélectionné.
Inspecteur du système de design système de design Siemens iX, adapté aux écrans étroits
Placez les détails sous la liste des événements
La grille à deux colonnes de l’exemple est une mise en page propre à l’application, et non un jeton de grille iX publié. Sur un écran étroit, elle passe sur une colonne, en conservant l’ordre des entrées avant l’inspecteur. L’inspecteur ne crée pas de piège de défilement imbriqué : le lecteur peut faire défiler l’ensemble de l’exemple naturellement.
Les métadonnées de l’événement apparaissent sur une deuxième ligne, dans une couleur secondaire lisible. Le filtre reste en dehors des lignes répétées et ne se déplace pas lorsque les entrées changent. Un paragraphe d’état indique le résultat de l’examen local de l’entrée sélectionnée, sans modifier le filtre ni remplacer le titre.
Accessibilité du système de design système de design Siemens iX : rendre l’état perceptible sans dépendre de la couleur ni de la précision du pointeur
Texte, commandes clavier et focus
L’aperçu hors ligne utilise des boutons natifs pour les entrées, une liste déroulante avec libellé pour la gravité et une région d’état aria-live pour communiquer le résultat de l’examen. La touche Entrée et la barre d’espace permettent de sélectionner une entrée. La composition native de la bibliothèque utilise les composants enveloppants Event List ; avant d’adopter des modifications personnalisées du focus, testez le comportement clavier et la compatibilité avec les technologies d’assistance de la version installée.
Les libellés expriment la distinction métier : « Marquer comme examiné localement », et non « Résoudre l’alarme ». Un état examiné visible accompagne la désactivation de l’action d’examen. La couleur ne porte pas à elle seule toute la signification, et le filtre ne laisse pas une ancienne sélection inaccessible, masquée dans une autre catégorie.
Intégration du système de design système de design Siemens iX : relier le package, le thème et l’état local de l’application
Une séquence d’intégration réfléchie
Le bloc de configuration contient les imports des packages, les attributs de thème du document, les propriétés réelles du composant, l’état complet React et CSS de l’application. Le sélecteur de thème est data-ix-color-schema, et non un attribut personnalisé au nom similaire. Dans l’application, verrouillez les versions de core, des composants enveloppants et des icônes afin qu’elles soient compatibles.
Le spécimen visuel est une interprétation hors ligne HTML/CSS de ces règles d’interaction. Sa palette bleu marine foncé, ses marges intérieures de 24 pixels et son dessin schématique d’équipement sont des choix propres à l’application. Pour obtenir un rendu natif identique, exécutez l’exemple distinct React avec la feuille de style officielle et examinez les valeurs calculées du thème.
Installez core, les composants enveloppants React et les icônes dans un squelette Vite React ; conservez l’élément racine généré.
Remplacez main.jsx et style.css par les fichiers fournis, puis choisissez classic ainsi que dark, light ou system sur le document.
Sélectionnez une entrée, marquez-la comme examinée, filtrez la liste et vérifiez que la gravité est conservée tandis qu’une sélection masquée est effacée.
Exemples de composants du système de design système de design Siemens iX
Exemple interactif autonome complet
Enregistrez le document complet sous index.html et ouvrez-le dans un navigateur. Interprétation indépendante hors ligne HTML/CSS. Palette, police système et dimensions d’application originales ; il ne s’agit pas de l’environnement d’exécution natif d’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>
Le fait de marquer un événement comme examiné ne modifie pas sa gravité et ne résout pas une alarme d’équipement. L’entrée native d’iX présente séparément la sélection dans Event List et les attributs de thème.
Event List avec panneau d’inspection contrôlé séparément
Un ID sélectionné pilote la mise en évidence de l’entrée et l’affichage des détails. L’examen ne fait qu’enregistrer un état local dans le carnet ; la gravité d’origine reste 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}}
L’aperçu utilise une police système de remplacement ; il ne distribue pas les polices de marque Siemens.
04
Configuration de l’agent IA système de design Siemens iX
Point de départ de l’implémentation
Complétez main.jsx et style.css pour un squelette Vite React avec son élément racine existant. Les composants enveloppants officiels, l’import CSS et les propriétés de Event List sont documentés ; la compilation des packages natifs n’a pas été exécutée ici. L’aperçu intégré est une interprétation indépendante hors ligne.
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 pour votre projet
Prompt pour l’agent IA
Créez un carnet d’événements Siemens iX à l’aide des propriétés Event List vérifiées et des attributs de thème du document présentés dans ce guide. Maintenez la gravité indépendante de la sélection et de l’examen local. Dans la version native, utilisez les couleurs sémantiques du thème. Ne laissez jamais entendre qu’une action dans le carnet résout une alarme physique. Attribuez un libellé aux filtres, rendez les lignes accessibles au clavier et empilez l’inspecteur sur les écrans étroits.
05
Sources et périmètre du système de design système de design Siemens iX
Guide OpenDesign indépendant. Les données d’événements et l’illustration du matériel sont fictives. Le style de l’aperçu est une interprétation originale ; l’exemple React distinct utilise iX API, conformément à la documentation. Aucune connexion à une machine, aucune télémétrie ni aucun accusé de réception en direct ne sont implémentés.
