Ui-element-structure-and-responsive-layout

PRO версия XIOT-EDITOR основана на принципах современной веб-разработки и использует вложенную структуру элементов. Такой подход позволяет проектировать интерфейсы, которые корректно масштабируются, адаптируются под разные устройства и сохраняют стабильный внешний вид при изменении разрешения экрана.

Редактор поддерживает как адаптивные, так и позиционные интерфейсы, а также их комбинирование в рамках одного проекта.

---

🧱 Вложенная структура элементов

Базовым элементом интерфейса является блок. Каждый блок может содержать внутри себя другие блоки и элементы, формируя иерархическую структуру.

Типовой пример:

• Страница
  • Основной контейнер
    • Виджет устройства
      • Иконка
      • Название
      • Элементы управления
    • Другой виджет
  • Панель навигации
    • Кнопка «Назад»

Подобная структура полностью аналогична HTML-разметке, где один контейнер (div) может содержать вложенные элементы.

Вложенность элементов является основой адаптивного интерфейса и не зависит от разрешения экрана.

---

📐 Единицы измерения и масштабирование

В PRO версии используются относительные единицы измерения, рекомендованные для построения адаптивных интерфейсов.

Проценты (%)

Проценты применяются для формирования общей структуры страницы и контейнеров.

Пример:

• создаются два блока;
• каждому задаётся высота 50%.

Независимо от устройства:

• смартфон,
• планшет,
• настенная сенсорная панель,

блоки всегда занимают одинаковую долю пространства страницы.

Это базовый принцип адаптивного макета.

Единицы em

Единицы em применяются для размеров виджетов и элементов управления.

Особенности:

• размеры элементов зависят от значения font-size;
• при изменении масштаба интерфейса все элементы изменяются пропорционально;
• сохраняются пропорции, отступы и читаемость интерфейса.

Изменение font-size приводит к масштабированию всего приложения без нарушения структуры.

---

🧩 Подходы к построению интерфейса

PRO версия XIOT-EDITOR поддерживает два основных подхода к компоновке интерфейса.

🔄 Адаптивный (резиновый) интерфейс

Адаптивный интерфейс строится на:

• вложенной структуре блоков;
• использовании % и em;
• отсутствии абсолютного позиционирования.

Характеристики:

• автоматическая адаптация под любое разрешение;
• корректная работа при смене ориентации экрана;
• единый интерфейс для всех типов устройств.

Данный подход рекомендуется использовать по умолчанию для пользовательских интерфейсов.

---

📌 Позиционный интерфейс

Позиционный интерфейс применяется в случаях, когда заранее известно разрешение экрана.

Для этого:

• элементу задаётся CSS-свойство position: absolute;
• после этого элемент можно свободно перемещать мышью в рабочей области;
• положение фиксируется относительно страницы.

Такой подход используется для:

• специализированных экранов;
• панелей с фиксированной компоновкой;
• визуальных схем.

---

🔀 Комбинированный подход

На практике чаще всего используется комбинирование двух подходов.

Рекомендуемая схема:

• виджет проектируется адаптивным —

 размеры в em,  
 вложенные элементы в % и em,  
 без абсолютного позиционирования;

• сам виджет размещается на странице с помощью position: absolute.

Преимущества:

• виджет сохраняет единый внешний вид на любых устройствах;
• положение на странице задаётся вручную;
• удобно реализовывать планы этажей, участков и схем помещений.

---

🎨 CSS-стили и стандарт веб-разработки

PRO версия XIOT-EDITOR использует полноценные CSS-стили, соответствующие стандартам веб-разработки.

Поддерживаются основные группы свойств:

• размеры и ограничения (width, height, min/max);
• отступы и поля (margin, padding);
• шрифты и типографика;
• позиционирование;
• фон и цвета;
• рамки и скругления;
• тени и прозрачность;
• анимации и переходы;
• flex- и grid-компоновка.

Это обеспечивает:

• предсказуемое поведение интерфейса;
• высокий уровень гибкости;
• возможность использовать знания HTML/CSS без переобучения.

---

🧩 Виджеты как переиспользуемые компоненты

Виджет представляет собой самостоятельный компонент, включающий:

• структуру элементов;
• стили;
• логику;
• привязки к характеристикам и тэгам.

Виджеты можно:

• клонировать;
• переносить между страницами;
• сохранять в файл;
• использовать в других проектах.

Один раз созданный виджет может применяться многократно без изменения структуры.

---

🎯 Итог

PRO версия XIOT-EDITOR предоставляет профессиональные инструменты построения интерфейсов:

• вложенная иерархия элементов;
• использование % и em для масштабирования;
• поддержка адаптивного и позиционного подходов;
• комбинирование методов в одном проекте;
• полноценные CSS-стили;
• переиспользуемые виджеты.

Это позволяет создавать как универсальные пользовательские интерфейсы, так и специализированные инженерные панели без ограничений по устройствам и разрешениям.