Каждый экран, который вы используете, был кем-то разработан: главный экран банковского приложения, окно поиска, страница настроек. Дизайн пользовательского интерфейса — это дисциплина, которая решает, как устроены эти экраны, как выглядит каждый элемент управления и как он реагирует на прикосновения.
Дизайнер пользовательского интерфейса работает с несколькими строительными блоками. Макет и интервал группируют связанные вещи вместе. Визуальная иерархия выделяет самое важное действие. Типографика и цвет несут в себе смысл и бренд. Такие компоненты, как кнопки, входы, карточки и меню, разрабатываются один раз и используются повторно, поэтому продукт выглядит единообразным.
Каждый компонент также имеет состояния. Кнопка имеет состояния по умолчанию, при наведении, нажатии, в фокусе, отключении и загрузке, и для каждого из них требуется дизайн. Отсутствие состояний — одна из наиболее частых причин, по которой дизайн в макете выглядит законченным, но в реальном продукте кажется сломанным.
Взаимодействие и движение также являются частью пользовательского интерфейса. Небольшие ответы, часто называемые микровзаимодействиями, подтверждают, что касание сработало, показывают прогресс или объясняют, куда что-то пошло. Они должны быть быстрыми и целеустремленными и соблюдать настройки системы, ограничивающие движение.
Большая часть дизайна пользовательского интерфейса сегодня выполняется в Figma, а распространенными альтернативами являются Penpot, Sketch и Lunacy. Для интерфейсов, которые должны реагировать на реальные данные и вводимые данные в готовом приложении, дизайнеры также используют интерактивные инструменты. ExodeUI, который мы создаем, является одним из них: он хранит состояния, физику пружин и события в одном открытом файле, который работает в React, Vue, Svelte, Angular, Solid, React Native, SwiftUI и Flutter.