Ui скрипты что это

UI Kit — что это и зачем он нужен

Дизайнеры продумывают много вещей, когда работают над дизайном: пользовательский путь, контент, UX-тексты и UI-элементы. UI-элементы — это то, что видят и с чем взаимодействуют пользователи приложения, сайта или интерфейса продукта. Обычно их всех собирают в UI Kit — набор готовых элементов, который позволяет экономить время на разработку.

Рассказываем, для чего нужен UI Kit ещё и что в него входит.

Чем полезен UI Kit

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

Помогает поддерживать единообразие

Благодаря UI Kit дизайнеры используют одинаковые элементы на всех страницах продукта и могут внести изменения в макеты парой кликов. Это удобно, потому что не надо проверять, изменился ли шрифт, кнопка или цвет там, где нужно, и все следующие макеты идентичны готовым. А еще такое единообразие экономит время дизайнеров и разработчиков — они могут быстро подсмотреть, как выглядит нужный элемент.

Ускоряет проектирование

В UI Kit элементы переведены в компоненты. Это позволяет быстро собирать макеты и экономить время на дизайн и разработку. Собирать прототипы тоже проще с китом — готовые компоненты делают прототип визуально понятнее, в отличие от простых форм.

Экономит деньги

Без UI Kit нужно с нуля создавать компоненты для каждого нового варианта дизайна. И каждый раз платить команде за дизайн и разработку элементов. Если этим занимаются разные команды, есть шанс, что элементы будут отличаться от предыдущих версий. С китом заплатить нужно один раз, а дизайн и код основных элементов всегда будут одинаковыми.

Что добавляют в UI-кит

Обычно интерфейс состоит из стандартных элементов:

Навигация

На сайте навигация выглядит как выпадающее меню, горизонтальная или вертикальная панель. В мобильных приложениях — меню-гамбургер или панель внизу экрана. А ещё к элементам навигации относят хлебные крошки, по которым пользователи могут понять, в каком разделе они находятся.

Какие состояния навигации отрисовывают:

• активный пункт меню;
• пункт при наведении;
• свернутые элементы навигации;
• скролл.

Кнопки

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

В UI Kit для кнопок добавляют состояния:

• стандартное;
• неактивная кнопка;
• наведение на кнопку;
• нажатие на кнопку.

Иконки

Иконки, которые встречаются на страницах, тоже собирают в кит, чтобы быстро их найти и добавить в дизайн или экспортировать.

Для иконок в UI Kit могут быть добавлены состояния:

• стандартное;
• активная;
• при наведении;
• иконка с информационным элементом, например, значком нового сообщения в личном кабинете.

Карточки

Карточки делают компонентом и обычно собирают в него несколько элементов. Например, текст, картинку и кнопку.

В ките может быть много вариантов состояний карточек, в зависимости от элементов в них.

Формы с полями ввода

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

В UI Kit заносятся все возможные состояния:

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

Шрифты и цвета

Все шрифты и цветовая гамма, которые есть на страницах, собираются в UI кит. Дизайнерам это позволяет быстрее применять нужные, а разработчикам упрощает разработку и помогает заранее прописать стили.

Футеры

Содержат контакты для лендингов или дублируют меню для интернет-магазинов.

В чем отличие UI Kit и дизайн-системы

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

Создавать свой или купить готовый

Проектирование своего кита выгодно, когда нужно:

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

В интернете можно найти готовые UI Kit. Они подойдут, если:

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

UI Kit для мобильного приложения и сайта нужен, чтобы приводить элементы интерфейса к одному виду, упрощать работу, избегать ошибок, экономить время и деньги. Для небольших проектов кит будет удобной библиотекой данных, а для крупных потребуется дизайн-система.

Функциональность UI actions

Чтобы настроить пользовательский интерфейс, сделать его функциональным, интерактивным и удобным, разработчики и администраторы используют UI actions. Когда пользователь взаимодействует с элементами форм — кнопками, контекстным меню, выпадающими списками, списками выбора, чекбоксами и пр., — выполняется определённый код и происходит действие. Настроить обработку таких действий (UI actions) может пользователь с правами администратора. Рассмотрим возможности UI actions, примеры использования и рекомендации по настройке.

Что такое UI actions

В прошлой статье мы рассказывали про виджеты для упрощения разработки корпоративных приложений. UI actions (элементы взаимодействия с пользователем) являются одним из интерактивных элементов виджетов. Когда пользователь нажимает на кнопку или выбирает элемент выпадающего списка, выполняется JavaScript, который обрабатывает данные на стороне сервера или клиента, а также их комбинаций и выводит пользователю результат.

Пример «Открытие закрытого инцидента»

Например, пользователь хочет повторно открыть инцидент и для этого нажимает кнопку «Открыть инцидент заново», которая меняет статус с «Решено» на «Активный». Специалисту технической поддержки надо знать, почему пользователь вновь открывает инцидент, поэтому скрипт, прежде чем изменить статус, проверяет заполнение поля «Комментарий». Оно может не заполняться в обычном процессе решения инцидента, но в случае выполнения UI actions «Открыть инцидент заново» становится обязательным. Причём проверка заполнения поля происходит на стороне клиента, а смена статуса записи — на сервере.

Пример «Назначение на себя»

Ещё один пример одновременного выполнения скрипта на стороне сервера и клиента — проверка принадлежности пользователя к определённой группе доступа. Администратор размещает на форме инцидента кнопку «Назначено мне», для того чтобы специалист технической поддержки мог закрепить за собой выполнение задачи. При нажатии этой кнопки меняется значение поля «Исполнитель» — в нём прописывается имя текущего пользователя. Однако система сначала проверяет, есть ли у него право назначить на себя инцидент. Для этого производится сверка с полем «Группа допуска», которая должна иметь значение «Группа технической поддержки». В противном случае пользователь увидит сообщение «У вас недостаточно прав для решения инцидента». Для того чтобы настраивать UI actions, пользователь должен обладать правами администратора платформы. Настройка параметров осуществляется с помощью графического интерфейса, для описания сложной логики необходимы знания JavaScript. Условия, действия, переменные и другие параметры можно посмотреть в документации к платформе.

Рекомендации по использованию UI actions

• Продумывайте дизайн и размещение UI actions. Элементами форм должно быть удобно пользоваться, они должны быть логично размещены и единообразны. Используйте значения по умолчанию для самых распространённых действий, чтобы пользователю было проще и быстрее взаимодействовать с UI actions.
• Используйте для каждого UI actions уникальное имя. Так проще организовать их использование и не тратить время на поиски нужного.
• Используйте поле «Условие и действия» (Conditions and Actions). Заданные условия определяют, при каких обстоятельствах надо выполнить UI actions.
• Используйте кнопки и списки в разумных пределах. Кнопки на форме только для самых необходимых действий, не загромождайте интерфейс — максимум 4–5 штук. Имена кнопок должны быть короткими и понятными. Чтобы не перегружать форму кнопками, используйте ссылки. Уберите в списки те действия, которые выполняются редко.
• Сделайте интерфейс лаконичным, используйте бизнес-правила. Оставьте на виду только элементы, отвечающие за важные функции, остальные уберите в бэк-энд с помощью бизнес-правил.
• Используйте шаблоны кода. Создайте библиотеку универсальных скриптов или их элементов, чтобы повторно использовать, а не программировать каждый UI actions отдельно.

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

Виды UI actions в SimpleOne

Чтобы сделать интерфейс SimpleOne интерактивным, администратору доступны 10 видов UI actions:

• кнопка формы;
• кнопка заголовка формы;
• нижняя кнопка формы;
• контекстное меню формы;
• ссылка на форму;
• кнопка списка баннеров;
• нижняя кнопка списка;
• контекстное меню списка;
• список;
• контекстное меню карты зависимостей.

Выбор размещения UI actions в SimpleOne производится в разделе «Расположение и стиль» параметров настройки.

Чтобы упростить настройку UI actions и ускорить создание типовых элементов, в SimpleOne реализованы функции наследования и предопределения. Для элементов формы применяются три правила наследования:

1. Действия UI actions наследованы с предыдущего уровня (включен чекбокс «Наследует»), но не предопределены, так как не выбран параметр «Предопределяется».
2. Наследованы действия с предыдущего уровня (включен флажок «Наследует») и предопределены на текущем (выбран параметр «Предопределяется»).
3. Действия не наследованы, не предопределены, а настроены для этого уровня индивидуально.

Администратор может использовать наследование для создания многоуровневых списков и бургер-меню. У родительского UI actions требуется пометить флажком «Контекстное меню формы» или «Бургер-меню списка» на вкладке «Расположение и стиль». Затем создать дочернее действие того же типа, а в качестве родительского для него указать ранее созданное. Установить флажок «Наследует» и сохранить UI actions.

Ещё одна возможность для тонкой настройки UI actions в SimpleOne — задание условий отображения. На вкладке «Условия и действия» в поле «Условие» задаётся ограничение на отображение. По умолчанию предполагается использование серверного API, но в некоторых случаях можно использовать и клиентский API, тогда необходимо установить флажок «Клиент».

Например, параметр «Условия» проверяет запись с sys_id из таблицы getTableName. Если запись существует, функция возвращает «Истину» и, наоборот, возвращает «Ложь», если запись не найдена. В зависимости от возвращаемого значения функции на форме отображаются те ли иные элементы пользовательского интерфейса.

Заключение

UI actions — один из инструментов оптимизации разработки и повышения UX. Так же как и виджеты, они сокращают время создания формы с интерактивными элементами и повышают удобство работы с платформой для пользователя. Функциональные возможности UI actions в ITSM-системе SimpleOne позволяют размещать на формах и страницах портала такие элементы, как кнопки, выпадающие списки, ссылки, контекстные меню и другие. На них администратор назначает серверные или клиентские скрипты, выполняющие определённые действия, в том числе с проверкой заданных условий и ограничений. Активация наследования и предопределения ускоряет создание однотипных UI actions, а также позволяет реализовать многоуровневые списки и бургер-меню. Настройка UI actions делается с помощью инструментов No Code и Low Code.

Ui скрипты что это

Пользовательский Интерфейс (UI) — это всё, что облегчает взаимодействие пользователя с компьютером. В мире компьютеров это может быть что угодно: клавиатура, джойстик, монитор, программа. Если мы рассматриваем компьютерное ПО — это ввод и вывод командной строки, веб-страница, форма ввода или интерфейс любого приложения.

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 12 нояб. 2023 г. by MDN contributors.

Your blueprint for a better internet.

UX/UI-дизайн: что это такое и как ему обучиться

UX/UI-дизайн — это процесс создания инструментов для удобного и привлекательного взаимодействия пользователя с цифровым продуктом или сервисом. Он включает в себя две основные составляющие: UI-дизайн и UX-дизайн, разницу между которыми мы объясним далее.

Что такое UI-дизайн?

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

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

Что такое UX-дизайн?

UX-дизайн (User Experience Design) — это процесс создания удобного и приятного для пользователя взаимодействия с продуктом или сервисом. UX-дизайнеры работают над тем, чтобы пользователь чувствовал себя комфортно и мог легко выполнять задачи.

Задачи UX-дизайнера включают:

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

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

Задачи UX/UI-дизайнеров

UX/UI-дизайнеры работают над созданием продукта, который будет удобен и приятен для пользователя. Они учитывают как внешний вид продукта (UI), так и его функциональность и удобство использования (UX).

Задачи UX/UI-дизайнера включают исследование потребностей и проблем пользователей, создание пользовательских сценариев, проектирование информационной архитектуры, разработку дизайна элементов интерфейса, создание прототипов и тестирование их на пользователях, работу над улучшением процесса взаимодействия пользователя с продуктом.
Принципы хорошего UX/UI-дизайна — это центрирование на пользователе, простота, наглядность, доступность и эмоциональная привлекательность.

Будущая профессия

UX/UI дизайнер
Mobile разработчик
Frontend разработчик
Fullstack разработчик
Разработчик приложений

Как стать UX/UI-дизайнером?

Чтобы стать UX/UI-дизайнером, нужно изучить основы дизайна, включая цветовую гармонию, типографику и композицию, а также основы программирования и веба. Все эти навыки и компетенции вы можете приобрести в Школе дизайна НИУ ВШЭ, на профиле бакалавриата «UX/UI и frontend-разработка».

Обучение начинается с основ проектирования фирменного стиля компании или бренда. Студент осваивает создание абстрактного бренда, над которым он будет работать в течение всего первого года обучения, и проектирует разработку малого фирменного стиля для него. В малый фирменный стиль входят: графические элементы, логотип, подбор типографических решений. Малый фирменный стиль экспонируется на фирменной документации и носителях, соответствующих созданному бренду. Для освоения базовых навыков в рамках технологий дизайна студенты изучают инструменты растровой и векторной графики.

Помимо digital-дизайна, студенты изучают web-разработку и основы языков программирования. В процессе обучения они делают обзор web-технологий, узнают, что такое хостинг, деплой и тестирование, осваивают архитектуру приложений, сервисы для разработки интерфейсов и прототипирования.

«На первом году обучения мы работаем с лонгридами и лэндингами, далее мы начинаем работу со сложными корпоративными системами, включая сложную обработку данных на клиенте, работу с приложениями (как десктопными, так и мобильными). Начинаем с курса HTML и CSS, дальше Type Script, Java и Java Script. Потом — NODE JS , React JS, React Native, Swift, Kotlin. Третий год обучения посвящен мобильным платформам полностью», — рассказывает куратор направления Антон Ларин.

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

Третий курс обучения посвящён разработке казуальной мобильной игры для Android или iOS.

Подробная информация о дисциплинах, которые изучают студенты в каждом модуле на курсе «UX/UI и frontend-разработка», содержится в «Карте креативных компетенций».

Пройдя полный курс обучения, вы создадите портфолио с разработанными проектами, которые помогут вам продемонстрировать свои навыки и опыт при поиске работы в IT-компании. Кураторы Школы дизайна помогут вам присоединиться к сообществу UX/UI-дизайнеров и получить ценные советы и рекомендации от опытных профессионалов.