# Дизайн-система Siemens iX ## Предварительный просмотр интерфейса дизайн-системы Siemens iX Отфильтруйте вымышленные события, изучите примечание к оборудованию и отметьте запись как проверенную локально, при этом сохранив видимым исходный уровень критичности. ## Справочник по дизайн-системе Siemens iX Текущая общедоступная документация iX и официальный снимок компонента API из основной ветки. Приведённые ниже значения цветов — семантические роли, а не придуманные фиксированные шестнадцатеричные коды. Установленные версии пакетов должны быть зафиксированы согласованно; в автономном примере используются собственные палитра и размеры с явным описанием. ### Тема и подключение пакетов | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | Core package | @siemens/ix | Веб-компоненты и глобальная таблица стилей. | | React wrappers | @siemens/ix-react | Интеграция компонентов React. | | Icons | @siemens/ix-icons | Официальная зависимость для значков. | | data-ix-theme | classic | Селектор темы на уровне документа. | | data-ix-color-schema | dark \| light \| system | Точное написание атрибута задаётся схемой. | | Global CSS | @siemens/ix/dist/siemens-ix/siemens-ix.css | Импортируйте один раз в точке входа приложения. | ### Роли текста и поверхностей | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --theme-color-primary | Primary action role | Определяются выбранной темой. | | --theme-color-std-text | Default reading color | Заголовки событий и основной текст. | | --theme-color-soft-text | Secondary reading color | Время и метаданные ресурса. | | --theme-color-weak-text | Disabled reading color | Не используйте для важной второстепенной информации. | | --theme-color-alarm-text | Alarm text role | Используйте, когда текст ошибки должен иметь цвет переднего плана. | | --theme-color-component-1 | Interactive component fill | Полупрозрачный цвет; его вид зависит от расположенной под ним поверхности. | | color-0 | Transparent background role | Другие уровни фона непрозрачны. | ### Классификация критичности | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | Alarm | Error, invalid or dangerous condition | Сохраняйте текстовую метку рядом с цветным маркером. | | Critical | Between alarm and warning | Отдельное значение, а не ещё один декоративный оттенок. | | Warning | Condition requiring attention | Не повышайте статус до аварийного без явного основания. | | Success | Positive outcome | Действие проверки не означает, что аварийное событие успешно устранено. | | Info | Informational condition | Не путайте с отключённым содержимым. | | Neutral | Unclassified neutral condition | Доступно, когда оценка статуса не применяется. | ### Иерархия границ | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --theme-color-hard-bdr | Strong solid boundary | Высокая степень разделения. | | --theme-color-std-bdr | Standard control boundary | Элемент управления вводом или выбором. | | --theme-color-soft-bdr | Card boundary | Используется в области сведений журнала. | | --theme-color-weak-bdr | Region boundary | Мягко разделяйте крупные области. | | --theme-color-x-weak-bdr | Very subtle boundary | Разделение с низкой выразительностью. | | --theme-primary-bdr-1 | Complete border value | Используйте как границу: var(--theme-primary-bdr-1), а не как цвет. | ### Роли типографики | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | Headings | H1 through H6 | Иерархия текста | | Body | Multiline reading | Примечания и пояснения для проверки. | | Label | Single-line component text | Короткие элементы управления и поля. | | Display | Single-line KPI presentation | Счётчики, не абзацы. | | Code | Code and technical syntax | Примеры API или идентификаторы, если уместно. | ### Снимок Event List API | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | IxEventList.itemHeight | S \| L \| number; default S | Для названия и метаданных примера используйте L. | | IxEventList.compact | boolean; default false | Компактный режим явно включён. | | IxEventList.chevron | boolean; default false | Покажите индикатор перехода. | | IxEventList.animated | boolean; default false | Не добавляйте лишнюю анимацию в статический журнал. | | IxEventListItem.itemColor | string | Выражение цвета темы CSS. | | IxEventListItem.selected | boolean; default false | Управляется идентификатором выбранной записи. | | IxEventListItem.variant | outline \| filled; default outline | Параметр отображения. | | IxEventListItem.disabled | boolean; default false | Отключайте только тогда, когда взаимодействие недоступно. | | itemClick | Custom event | Обёртка React выбирает запись через onItemClick. | ## Полное руководство по дизайн-системе Siemens iX Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса. Подробные рекомендации, отправная точка для реализации и ссылки на источники. ## Дизайн-система 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 с официальной таблицей стилей и проверьте вычисленные значения темы. 1. Установите core, обёртки React и значки в шаблон Vite React; сохраните созданный корневой элемент. 2. Замените main.jsx и style.css предоставленными файлами, затем выберите classic и задайте для документа тему dark, light или system. 3. Выберите запись, отметьте её как проверенную, отфильтруйте список и убедитесь, что уровень серьёзности сохраняется, а скрытый выбор сбрасывается. Прочитать вспомогательную спецификацию ## Siemens iX Примеры компонентов дизайн-системы ### Полноценный автономный интерактивный пример Сохраните документ целиком как index.html и откройте его в браузере. Самостоятельная автономная интерпретация на основе HTML/CSS. Авторская палитра, системный шрифт и размеры приложения; это не нативная среда выполнения iX. ``` Equipment event notebook — iX interpretation
EVENT NOTEBOOKSample plant / offline

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.

``` Справочник по коду - Отметка о проверке события не меняет его уровень серьёзности и не сбрасывает сигнал тревоги оборудования. Отдельная запись iX показывает выбор в Event List и атрибуты темы. ### Event List с отдельно управляемой панелью проверки Выбранный идентификатор определяет подсветку элемента и сведения о нём. Проверка лишь фиксирует локальное состояние в журнале; исходный уровень серьёзности остаётся видимым. ``` // 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

Equipment event notebook

Fictional records. Reviewing an entry does not control equipment or acknowledge a live alarm.

{visible.map(r=>setSelected(r.id)}>
{r.title}{r.severity.toUpperCase()} · {r.asset} · {r.time}{reviewed.includes(r.id)?' · Reviewed locally':''}
)}
} createRoot(document.getElementById('root')).render(); /* 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}} ``` Справочник по коду - Используйте itemColor для маркера уровня серьёзности и добавьте хорошо читаемую текстовую подпись. - При изменении фильтра уровня серьёзности выбор сбрасывается, чтобы панель проверки не описывала скрытое событие. - Локальная кнопка проверки — это логика приложения, а не вымышленная функция API подтверждения сигнала тревоги в iX. ### Типографика, учитывающая тему, без фиксированных размеров шрифта Используйте документированное свойство format или Sass-миксин, а не фиксируйте размер шрифта для всех тем. ``` Inspection record @import "@siemens/ix/scss/mixins/font"; .inspection-title { @include typography-h3; } ``` Справочник по коду - В предпросмотре используется системный резервный шрифт; брендовые шрифты Siemens не распространяются. ## Siemens iX Настройка агента дизайн-системы ### Отправная точка для реализации Полные файлы main.jsx и style.css для шаблона Vite React с уже имеющимся корневым элементом. Официальные обёртки, импорт CSS и свойства Event List описаны в документации; сборка нативного пакета здесь не выполнялась. Встроенный предпросмотр — самостоятельная автономная интерпретация. ``` // 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

Equipment event notebook

Fictional records. Reviewing an entry does not control equipment or acknowledge a live alarm.

{visible.map(r=>setSelected(r.id)}>
{r.title}{r.severity.toUpperCase()} · {r.asset} · {r.time}{reviewed.includes(r.id)?' · Reviewed locally':''}
)}
} createRoot(document.getElementById('root')).render(); /* 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 iX, используя проверенные свойства Event List и атрибуты темы документа из этого руководства. Независимо от выбора и локальной проверки сохраняйте исходный уровень серьёзности. В нативной версии используйте семантические цвета темы. Не создавайте впечатление, будто действие в журнале сбрасывает сигнал тревоги физического оборудования. Добавьте подписи к фильтрам, обеспечьте управление строками с клавиатуры и располагайте панель проверки под списком на узких экранах. ``` ## Siemens iX Источники и область применения дизайн-системы Самостоятельное руководство OpenDesign. Данные о событиях и иллюстрация оборудования вымышлены. Стилизация предпросмотра — авторская интерпретация; в отдельном примере React используется документированный API iX. Подключение к оборудованию, телеметрия и подтверждение активных сигналов не реализованы. - Установка React Пакеты, CSS и атрибуты темы. - Снимок свойств компонента API Фактические свойства и события Event List. - Основы работы с цветом Роли поверхностей, текста и состояний. - Типографика Категории текста и их назначение. - Реализация типографики Формат и точка входа Sass. - Границы Иерархия границ. - Event List Примеры компонентов и варианты плотности. ## Siemens iX Связанные ресурсы дизайн-системы ### Sprout Social Seeds Изучите фактические публичные токены цвета, интервалов, продуктовой типографики и границ в Seeds на примере полноценной редакторской очереди: с выбором нескольких элементов, пустыми состояниями после фильтрации и отменой действия. ### SumUp Circuit Руководство по Circuit с точными семантическими токенами, встроенными свойствами валидации, полноценным редактором товаров для продавцов и иллюстрированным пользовательским интерфейсом. ### TDesign Создайте компактный редактор политики API на основе TDesign React: конкретные роли тем, двухпиксельная шкала размеров, регистрация полей Form и типизированная композиция Table. - [Справочник по реализации](https://ix.siemens.io/docs/components/event-list/code) - [Источник](https://ix.siemens.io/docs/home/installation/react) - [Источник](https://ix.siemens.io/docs/styles/colors) - [Источник](https://ix.siemens.io/docs/styles/borders) - [Источник](https://ix.siemens.io/docs/styles/typography/guide) - [Источник](https://raw.githubusercontent.com/siemens/ix/main/packages/core/component-api.json) - [Прочитать вспомогательную спецификацию](https://ix.siemens.io/docs/components/event-list/code) - [Прочитать вспомогательную спецификацию](https://ix.siemens.io/docs/styles/colors) - [Прочитать вспомогательную спецификацию](https://ix.siemens.io/docs/styles/typography/code) - [Прочитать вспомогательную спецификацию](https://raw.githubusercontent.com/siemens/ix/main/packages/core/component-api.json) - [Прочитать вспомогательную спецификацию](https://ix.siemens.io/docs/guidelines/accessibility/code) - [Прочитать вспомогательную спецификацию](https://ix.siemens.io/docs/home/installation/react) - [Справочник по коду](https://ix.siemens.io/docs/components/event-list/code) - [Справочник по коду](https://raw.githubusercontent.com/siemens/ix/main/packages/core/component-api.json) - [Справочник по коду](https://ix.siemens.io/docs/styles/typography/code) - [Установка React Пакеты, CSS и атрибуты темы.](https://ix.siemens.io/docs/home/installation/react) - [Снимок свойств компонента API Фактические свойства и события Event List.](https://raw.githubusercontent.com/siemens/ix/main/packages/core/component-api.json) - [Основы работы с цветом Роли поверхностей, текста и состояний.](https://ix.siemens.io/docs/styles/colors) - [Типографика Категории текста и их назначение.](https://ix.siemens.io/docs/styles/typography/guide) - [Реализация типографики Формат и точка входа Sass.](https://ix.siemens.io/docs/styles/typography/code) - [Границы Иерархия границ.](https://ix.siemens.io/docs/styles/borders) - [Event List Примеры компонентов и варианты плотности.](https://ix.siemens.io/docs/components/event-list/code)