UI-kit: что это такое?

19 мая 2015

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

Как не бояться слова UI-kit?

Сокращение UI расшифровывается как «User interface» и переводится «пользовательский интерфейс», а kit — «комплект».

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

Пример хорошего UI-kit можно посмотреть здесь. Или здесь.

Что входит в UI-kit

В UI-kit изображены элементы навигации и взаимодействия.

1. Строительные блоки:

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

2. Внутренние иконки приложения и символы для панелей управления.
Особенностью UI-kit есть изображение этих элементов интерфейса во всех возможных состояниях. Например, кнопка может быть в таких состояниях:

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

Как это видят наши клиенты?

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

Как видим мы?

Для нас UI-kit — все элементы пользовательского интерфейса, которые создаются для всех экранов мобильного мобильного приложения. UI-kit выполняется в едином стиле в соответствии с проектированием приложения и стандартами операционной системы.

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

Как используется UI-kit

Кастомизация интерфейса

UI-kit помогает создать индивидуальный и неповторимый пользовательский интерфейс с учётом особенностей клиентской аудитории приложения.

Интеграция приложения в экосистему платформы

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

Обновление текущего дизайна

С выходом новой версии мобильной операционной системы приложению замена устаревших элементов более актуальными без нарушения структуры и паттернов приложения. Для этого разрабатывается UI-kit или несколько его вариантов и затем выпускается обновление.

Эстетика и стиль

Красивый UI-kit создаёт впечатление от приложения и формирует положительный пользовательский опыт.

Презентация дизайна клиенту

Дизайнер упорядочивает свою работу и делает наглядную презентацию для заказчика. UI-kit позволяет сделать первичную оценку и затем выполнить дальнейшую доработку экранов.

UI-kit в спецификациях мобильных платформ

Спецификации — это технические рекомендации производителей операционных систем для дизайнеров и разработчиков мобильных приложений. Они содержат все стандарты по созданию UI-kit. Со всеми спецификациями по Android можно ознакомиться на Android developers, по iOS – на Apple Developer.

Гайдлайны платформ определяют основные параметры UI-kit.

1. Все параметры строительных элементов интерфейса:

  • расположение;
  • построение многоуровневого списка;
  • построение списков для горизонтальной и вертикальной прокрутки;
  • фиксированные элементы;
  • базовые параметры оформления (размер, расположение, заполнение);

2. Спецификации по внутренним иконкам.

Здесь главное требование — не копировать иконки с интерфейса других платформ. Например, если приложение под Android, нельзя использовать стандартные элементы iOS.

Теперь вы знаете, что такое UI-kit

Мы и дальше будем стараться, чтобы количество пугающих дизайнерских терминов для вас уменьшалось. Читайте App2World.