Друзья, привет!
В мире современного дизайна пользовательских интерфейсов (UI) инструменты играют ключевую роль в обеспечении эффективной работы и коллаборации команды.
В третьей части гайда мы рассмотрим основные UI-инструменты Boringtask и их возможности, которые помогут вам создать удивительные пользовательские интерфейсы.
В Boringtask доступно 12 элементов пользовательского интерфейса (UI): панель, поле ввода, поле для ввода текста, чек-бокс, радио-кнопка, select, ссылка, dropbox, картинка, бадж, линия.
Давайте рассмотрим элементы Панель, Поле ввода и Поле для ввода текста, а также способы их настройки более подробно.
Панель
Панели в Boringtask являются основным инструментом для организации контента на вашем холсте. Они могут быть использованы для группировки элементов интерфейса по разделам, блокам или контейнерам. Панели упрощают процесс макетирования и позволяют легко перемещать и изменять элементы внутри них.
Редактирование (сайдбар редактирования панели, настройки слева направо):
Вкладка Main
- Изменение размера относительно родительского элемента. Если родительского элемента нет, то значение будет 0 px.
- Изменение размера рамки. По умолчанию 120px х 180px.
- Изменение цвета заливки элемента. Доступны любые цвета элемента при нажатии на кнопку "More colors".
- Изменение размера радиуса закругления углов. Диапазон 0 px - 100 px. По умолчанию 12 px.
- Изменение толщины границы элемента. Диапазон 0 px - 100 px. По умолчанию 1 px.
- Изменение цвета границы элемента. Доступны любые цвета элемента при нажатии на кнопку "More colors".
- Прочие настройки:
- Shadows - создание теней для панели.
Настройки для Shadows:
X: и Y: - размещение тени относительно осей
Blur - растушевка тени
Spread - объем тени
Red, Creen, Blue - регулировка цветового баланса тени
Alpha - корректировка прозрачности
"+" и "-" добавление/удаление теней
- Advanced - вызов сайдбара для детальных настроек, которые используются при генерации прототипов.
- Move to front - размещение элемента впереди остальных объектов
- Move to back - размещение элемента позади остальных объектов
- Move forward - размещение элемента на 1 уровень вперед
- Move backward - размещение элемента на 1 уровень позади
- Duplicate - клонирование элемента
- Delete - удаление элемента
Вкладка Hover
Это свойства панели, который применяется к элементу при наведении курсора мыши. Они позволяют создавать интересные визуальные эффекты, выделять определенные элементы на странице и улучшать пользовательский опыт.
Вкладка Action
Настройка позволяет создавать последовательности действий для объекта. Она является важным компонентом при создании workflow.
Вкладка Variables
Настройка используется для создания и записи в переменных таких данных как наименование, размеры и расположение.
Поле ввода
Кнопка «Поле ввода» в Boringtask позволяет добавить на онлайн-доску текстовые поля для заполнения пользователем.
Редактирование (сайдбар редактирования поля ввода, настройки слева направо).
Вкладка Main
Сайдбар аналогичен сайдбару настроек панели. Дополнительно:
1. Изменение стиля шрифта.
Доступные стили:
- Sans-serif (по умолчанию)
- Arial
- Courier
- Helvetica
- Times New Roman
2. Изменение размера шрифта. Диапазон 9 px - 50 px. По умолчанию 15 px.
3. Изменение цвета шрифта. По умолчанию 12 цветов. При нажатии на кнопку "More colors" можно выбрать любой цвет из сайдбара палитры.
4. Применение полужирного начертания к тексту
5. Применение курсивного начертания к тексту
6. Подчеркивание текста
7. Прочие настройки:
- Позиционирование текста: выравнивание по левому краю.
- Позиционирование текста: выравнивание по центру.
- Позиционирование текста: выравнивание по правому краю.
- Border radius (px): изменение размера радиуса закругления углов у поля.
- Border size (px): изменение толщины границы поля.
- Border color: изменение цвета границы поля. Доступны любые цвета элемента при нажатии на кнопку "More colors".
Вкладка Hover
Свойства поля ввода, который применяется к элементу при наведении курсора мыши.
Вкладка Focus
Настройка применяется к элементу, когда он получают фокус ввода (например, при клике мышью или нажатии клавиши Tab).
Вкладка Blur
Настройка активируется при клике мышью на поле ввода. Полезна, когда требуется отследить действия пользователя.
Поле для ввода текста
Эта кнопка создаёт область для ввода текста. В ней можно писать много строк и переносить их. Параметры такие же, как у обычного Поля ввода.
В следующей части статьи мы познакомим вас с UI-инструментами Boringtask: чек-бокс, радио-кнопка, select и ссылка. А также разберём каждый параметр этих инструментов.
До новых встреч!