Изучите промышленные события с помощью явно заданной классификации уровней серьёзности, цветовых ролей с учётом темы и API Event List от iX. В этом руководстве создаётся локальный журнал оборудования, в котором проверенная запись не выдаётся за устранённую аварию оборудования.
Руководство OpenDesign7 глав39 справочных записейАвторское руководство по приложению
01
Предварительный просмотр интерфейса дизайн-системы Siemens iX
Отфильтруйте вымышленные события, изучите примечание к оборудованию и отметьте запись как проверенную локально, при этом сохранив видимым исходный уровень критичности.
Независимая автономная интерпретация HTML/CSS. Оригинальная палитра, системный шрифт и размеры приложения; это не нативная среда выполнения iX. · Справочник по реализации
02
Справочник по дизайн-системе Siemens iX
Текущая общедоступная документация iX и официальный снимок компонента API из основной ветки. Приведённые ниже значения цветов — семантические роли, а не придуманные фиксированные шестнадцатеричные коды. Установленные версии пакетов должны быть зафиксированы согласованно; в автономном примере используются собственные палитра и размеры с явным описанием.
Дизайн-система Siemens iX: промышленные события с отдельными состояниями проверки и устранения
Журнал, а не панель управления оборудованием
Рабочий пример — вымышленный журнал оборудования. В трёх записях сохраняется исходный уровень критичности, а отдельное локальное состояние проверки показывает, какие из них просмотрел читатель. Для композиции важно разделять эти понятия: выбрать строку, прочитать примечание и устранить физическую неисправность — разные действия. Предварительный просмотр поддерживает первые два и не заявляет об управлении работающим оборудованием.
Event List — лучшая основа, чем декоративные карточки: выбранное состояние, маркер критичности и шеврон помогают воспринимать повторяющиеся записи как список для навигации. Подробный текст вынесен в область сведений. Здесь нет имитации потока телеметрии или уведомления об успехе, которое ложно утверждало бы, что аварийная ситуация устранена.
Дизайн-система Siemens iX: цветовые роли для передачи операционного смысла
Сопровождайте маркеры цветами для чтения
Цветовая система различает непрозрачные фоновые слои и полупрозрачные заливки компонентов. Нельзя оценивать заливку компонента отдельно от поверхности под ней. В нативном коде используйте фактические переменные темы, а не копируйте шестнадцатеричное значение из снимка экрана в каждую строку.
Стандартный и приглушённый текст предназначены для разных задач чтения. Слабый текст предусмотрен для отключённых элементов, поэтому временную метку, важную для расследования, не следует автоматически оформлять этой ролью. Для текста ошибки лучше подходит специальная роль цвета аварийного текста, чем повторное использование цвета заливки статуса без разбора.
Показывайте рядом с цветной полосой слово «Авария», «Предупреждение» или «Информация».
Не убирайте маркер аварии после локальной проверки: проверка не меняет исходное состояние.
Используйте оформление выбора только для состояния навигации, чтобы его можно было отличить от уровня критичности.
Дизайн-система Siemens iX: типографика, отделяющая заметки от меток
Используйте форматы, а не предполагаемую шкалу пикселей
В iX типографика разделена на заголовки, основной текст, метки, крупный акцентный текст и код. Для примечаний по результатам проверки нужен основной текст с поддержкой нескольких строк; крупный счётчик можно оформить как акцентный текст; короткая метка фильтра относится к категории меток. Крупный акцентный формат не предназначен для того, чтобы просто увеличить весь текст описания события.
В документации приведён конкретный пример реализации ix-typography format="h3". Соответствующий Sass-миксин typography-h3 позволяет оформить пользовательский элемент без повторного описания правил шрифта. В предварительном просмотре намеренно используются системный резервный шрифт и размеры приложения; эти значения не выдаются за официальные токены Siemens.
Дизайн-система Siemens iX: выбор и плотность Event List
Не связывайте идентификатор элемента с его внешним видом
В снимке API для itemHeight доступны значения S, L или числовое значение. В примере выбрано L, параметр compact оставлен со значением false по умолчанию, а шеврон включён. Для производственного журнала с длинными локализованными заголовками нужно проверить выбранную высоту с учётом переноса строк, а не предполагать, что любая запись поместится только потому, что помещается пример.
Для каждого элемента значение selected вычисляется сравнением идентификаторов, а itemClick передаётся обработчику onItemClick обёртки. Область сведений использует тот же идентификатор. Так визуально выбранная запись и отображаемые подробности не расходятся незаметно. При изменении фильтра выбранный идентификатор явно сбрасывается.
Дизайн-система Siemens iX: область сведений для узкого экрана
Переместите подробности под список событий
Сетка примера в пропорции два к одному — это макет приложения, а не опубликованный токен сетки iX. На узком экране она превращается в одну колонку: сначала идут записи, затем область сведений. В этой области нет вложенной прокрутки, которая мешала бы взаимодействию: весь пример можно прокручивать обычным способом.
Метаданные события расположены на второй строке и выделены хорошо читаемым вторичным цветом. Фильтр находится за пределами повторяющихся строк и не перемещается при изменении записей. Абзац состояния сообщает результат локальной проверки выбранной записи, не изменяя фильтр и не подменяя заголовок.
Дизайн-система Siemens iX: передавайте состояние без опоры на цвет или точность указания
Текст, управление с клавиатуры и фокус
Автономный предпросмотр использует нативные кнопки для записей, элемент select с подписью для выбора уровня серьёзности и область статуса aria-live для обратной связи о проверке. Запись можно выбрать клавишами Enter и пробел. В нативной композиции библиотеки используются обёртки Event List; перед добавлением пользовательских переопределений фокуса проверьте её работу с клавиатурой и вспомогательными технологиями в установленной версии.
Подписи отражают различие с точки зрения бизнеса: «Отметить как проверенное локально», а не «Сбросить сигнал тревоги». Отключённое действие проверки сопровождается видимым состоянием «Проверено». Смысл не передаётся только цветом, а фильтр не оставляет недоступный устаревший выбор скрытым в другой категории.
Дизайн-система Siemens iX: свяжите пакет, тему и локальное состояние приложения
Продуманная последовательность интеграции
Блок настройки включает импорты пакетов, атрибуты темы документа, фактические свойства компонентов, полный набор состояний React и приложение CSS. Для выбора темы используется data-ix-color-schema, а не похожий по названию пользовательский атрибут. Зафиксируйте совместимые версии core, обёрток и значков в приложении.
Визуальный образец — автономная интерпретация этих правил взаимодействия на основе HTML/CSS. Тёмно-синяя палитра, поля по 24 пикселя и схематичное изображение оборудования — авторские решения приложения. Чтобы получить нативное визуальное соответствие, запустите отдельный пример React с официальной таблицей стилей и проверьте вычисленные значения темы.
Установите core, обёртки React и значки в шаблон Vite React; сохраните созданный корневой элемент.
Замените main.jsx и style.css предоставленными файлами, затем выберите classic и задайте для документа тему dark, light или system.
Выберите запись, отметьте её как проверенную, отфильтруйте список и убедитесь, что уровень серьёзности сохраняется, а скрытый выбор сбрасывается.
Сохраните документ целиком как index.html и откройте его в браузере. Самостоятельная автономная интерпретация на основе HTML/CSS. Авторская палитра, системный шрифт и размеры приложения; это не нативная среда выполнения 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>
Отметка о проверке события не меняет его уровень серьёзности и не сбрасывает сигнал тревоги оборудования. Отдельная запись iX показывает выбор в Event List и атрибуты темы.
Event List с отдельно управляемой панелью проверки
Выбранный идентификатор определяет подсветку элемента и сведения о нём. Проверка лишь фиксирует локальное состояние в журнале; исходный уровень серьёзности остаётся видимым.
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}}
В предпросмотре используется системный резервный шрифт; брендовые шрифты Siemens не распространяются.
04
Siemens iX Настройка агента дизайн-системы
Отправная точка для реализации
Полные файлы main.jsx и style.css для шаблона Vite React с уже имеющимся корневым элементом. Официальные обёртки, импорт CSS и свойства Event List описаны в документации; сборка нативного пакета здесь не выполнялась. Встроенный предпросмотр — самостоятельная автономная интерпретация.
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}}
Запрос для вашего проекта
Промпт для AI-агента
Создайте журнал событий Siemens iX, используя проверенные свойства Event List и атрибуты темы документа из этого руководства. Независимо от выбора и локальной проверки сохраняйте исходный уровень серьёзности. В нативной версии используйте семантические цвета темы. Не создавайте впечатление, будто действие в журнале сбрасывает сигнал тревоги физического оборудования. Добавьте подписи к фильтрам, обеспечьте управление строками с клавиатуры и располагайте панель проверки под списком на узких экранах.
05
Siemens iX Источники и область применения дизайн-системы
Самостоятельное руководство OpenDesign. Данные о событиях и иллюстрация оборудования вымышлены. Стилизация предпросмотра — авторская интерпретация; в отдельном примере React используется документированный API iX. Подключение к оборудованию, телеметрия и подтверждение активных сигналов не реализованы.
