Создание интерфейса
Общие принципы создания интерфейса

Общие принципы создания интерфейса

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

В Дизайнере интерфейсов добавление элементов выполняется слоями в следующем порядке:

  • Слой 1 - элемент-контейнер
  • Слой 2 - элемент-разметка
  • Слой 3 - базовый элемент

Схематично этот подход к добавлению элементов можно изобразить таким образом Схема

Контейнеры

Элементы-контейнеры помогают организовать структуру и компоновку интерфейса страницы. С их помощью можно разделить страницу на более мелкие логические части. К таким элементам относятся:

  • Карточка (Card)
  • Форма (Form)
  • Панель (Panel)
  • Панель с прокруткой (ScrollPanel)
  • Диалоговое окно (Dialog-Container)
  • Сайдбар (Sidebar)
  • Фиксированная обертка (StickyWrapper)
  • Aккордеон (Accordion)
  • Вкладки (TabView)
  • Степпер (Stepper)
  • Набор полей (Fieldset)
  • Инфрормационная панель (Dashboard)
  • Разделитель (Splitter)
  • Баннер (Banner)

Правило добавления: Элемент-контейнер добавляется непосредственно на страницу (Viewport). Дочерним элементом в контейнер можно добавить другой элемент-контейнер или элемент-разметку

Исключение: Элементы Сайдбар и Диалоговое окно необходимо добавлять непосредственно на страницу (viewport)

Подсказка: В колонку Разделителя (Splitter) можно добавить дочерние Разделители, а в них поместить нужный контейнер, например, карточку. Таким образом, можно визуально разделить интерфейс страницы на блоки

Разметка

Элементы-разметка определяют, как другие элементы располагаются и отображаются на экране. Они помогают оформить, спозиционировать и расположить вложенные в них элементы. Элементами разметки являются:

  • Боковая панель (SidePanel)
  • Обертка (Wrapper)
  • Сетка (Grid)
  • Динамическая сетки (Qlayout)
  • Заголовок (Header)
  • Группа чек-боксов (Checkboxgroup)
  • Группа кнопок (Buttonsgroup)
  • Группа радиокнопок (Radiogroup)

Правило добавления: Элемент-разметка добавляется в элемент-контейнер. Дочерним элементом в разметку можно добавить базовые элементы

Исключение: В элемент Обертку наряду с базовыми элементами можно добавить контейнер, Таблицу или другую Обертку

Таблица

Таблица, в том числе Древовидная (Table, TreeTable) является составным элементом, который включает в себя:

  • Подпись, состоящую из формы фильтров и кнопок
  • Заголовок
  • Тело
  • Ошибку пустого состояния

Таблицу можно добавить дочерним элементом только к следующим родительским элементам:

  • Карточка (Card)
  • Вкладки (TabView)
  • Панель (Panel)
  • Панель с прокруткой (ScrollPanel)
  • Степпер (Stepper)
  • Aккордеон (Accordion)
  • Набор полей (Fieldset)
  • Обертка (Wrapper)

Базовые элементы

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

Например, Поле ввода текста (InputText), Выпадающий список (Dropdown), Кнопка (Button), Чек-бокс (Checkbox), Календарь (Calendar), Бэйдж (Badge), Переключатель (Switcher), Меню (Menu), Группа полей ввода (InputGroup), Ошибка (QError), Накладная панель (OverlayPanel) и многие другие

Подсказка: Базовые элементы Разделитель (Divider), Текст (Text) и Блок интерфейса (UI block) могут быть добавлены как в разметку, так и в контейнер

ПользователиРедактор интерфейса