Что представляет из себя «интерфейс» — В широком смысле интерфейс — это все инструменты, которые помогают одной системе взаимодействовать с другой. Поскольку чаще всего речь о человеке и какой-то программе (или сайте, приложении), то под интерфейсом понимают инструменты, которые помогают человеку пользоваться софтом и разными устройствами. Интерфейс помогает двум объектам понимать друг друга и обмениваться информацией.

Типы интерфейсов:

  • программный интерфейс или API (взаимодействие программ между собой);
  • аппаратный интерфейс (взаимодействие физических устройств, например, кабель USB, соединяющий компьютер и клавиатуру);
  • аппаратно-программный (взаимодействие между программами и компьютерами или оборудованием, например, приложение на смартфоне);
  • пользовательский интерфейс (взаимодействие человека с компонентами компьютерной системы: клавиатурой, мышью, сенсорным экраном, микрофоном).

Типы пользовательского интерфейса:

Пользовательские интерфейсы бывают жестовые, тактильные, голосовые, графические, командной строки и даже нейронные.

Интерфейс командной строки и текстовый интерфейс (Command Line Interface или CLI)
Командная строка все еще очень популярна среди системных администраторов и программистов. Это один из первых методов взаимодействия с компьютером. Она обладает особым шармом — создает ощущение общения тет-а-тет с машиной без посредников. Командная строка — как бесконечный лист A4, на котором пользователь вводит текст команд и получает результаты работы в виде текста.

Графический пользовательский интерфейс (Graphical User Interface или GUI)
Самый популярный тип UI. Представляет собой окошко с различными элементами управления. Пользователи взаимодействуют с ними с помощью клавиатуры, мыши и голосовых команд: жмут на кнопки, тыкают мышкой, смахивают пальцем.

Жестовый, голосовой, тактильный, нейронный

Жестовый интерфейс. В этом случае человек управляет программой с помощью жестов. Примеры такого интерфейса — сенсорный экран смартфона, игровой джойстик или руль. Жестовый интерфейс может быть контактным и бесконтактным.

Голосовой интерфейс. Всем известные Алиса от Яндекса и «Окей, Гугл» — примеры голосового интерфейса. Они позволяют пользователю бесконтактно общаться с программой через микрофон и распознавание голосовых сообщений.

Тактильный интерфейс -компьютерная технология, основанная на осязании. Эти технологии могут использоваться для создания виртуальных объектов в компьютерном моделировании, для управления виртуальными объектами и для улучшения удаленного управления машинами и устройствами (телероботика). Тактильные устройства могут включать в себя тактильные датчики, которые измеряют силы, прикладываемые пользователем к интерфейсу. Обычны простые тактильные устройства в виде игровых контроллеров, джойстиков и рулей.

Тактильная технология облегчает исследование того, как работает осязание человека, позволяя создавать управляемые тактильные виртуальные объекты. Большинство исследователей выделяют три сенсорные системы, связанные с осязанием человека: кожную, кинестетическую и тактильную. Все восприятия, опосредованные кожной и кинестетической чувствительностью, называются тактическим восприятием. Ощущение прикосновения можно разделить на пассивное и активное а термин «тактильный» часто ассоциируется с активным прикосновением для общения или распознавания объектов.

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

Типы графического интерфейса:

Мобильные интерфейсы
Выделяется в отдельную группу SIMP (Screen, Icon, Menu, Pointer). Подход к дизайну мобильных интерфейсов отличается от подхода к дизайну настольных приложений. Поведение пользователей при взаимодействии со смартфонами отличается от работы на компьютере из-за размера экрана и отсутствия отдельной клавиатуры с мышью/тачпадом. Элементы здесь заполняют экран полностью, а блоки и системы зависят от требований операционной системы.

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

Веб-интерфейсы
Технологии позволяет создавать полноценные веб-приложения, по функциональности не уступающие настольному ПО: Trello, Google Docs, Twitch, Яндекс.Дзен.

Преимущество таких приложений в том, что их не нужно устанавливать на компьютер — все функции доступны в браузере. Создают такие приложения с помощью JavaScript, HTML и CSS.

Игровой и материальный
Связан с механикой геймплея. Именно в нем лучше всего раскрывается сопровождающая роль интерфейса, так как игрок лучше ощущает, что движется к какой-то цели (например, победить босса и пройти уровень). Интерфейс зависит от игры: кнопки, жесты, движения мыши или взаимодействие с сенсором на экране или 3D интерфейс в VR, нажатие клавиш на джойстике.

Текстовый интерфейс. Это способ взаимодействия пользователя и какого-то оборудования через текстовые команды (комбинацию буквенно-цифровых символов). Сейчас все операционные системы работают с человеком через графические интерфейсы, мы взаимодействуем с системой с помощью мышки или через сенсорный экран. Но было время, когда управлять компьютером было можно только клавиатурой, набирая текст в командной строке. Таким интерфейсом могут пользоваться не все, для этого нужны определённые знания.

Каким должен быть интерфейс

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

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

Какой дизайн интерфейса разрабатываем?

  • Мобильный
  • Сервисный
  • Программный
  • Админ панель
  • UI kit
  • Для панелей и больших экранов

Частые вопросы:

Важен ли прототип для интерфейса — нет, потому что интерфейс сразу рисуют в чистую.

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

Можно ли делать интерфейс в векторных редакторах — нет, верстать такой интерфейс будет сложнее. При прорисовки в фигме или фотошопе он уже в векторе. Если только там нет растровых графических элементов, запланированных как элементы визуальной части. Можно графику как раз рисовать в векторе отдельно, но собирать все равно нужно в фигме или фотошопе.

Есть много других редакторов по типу фотошопа, многие компании делают такой софт отдельно для создания интерфейсов, как и Adobe или Figma

ВВЕРХ