UX/UI-дизайн: что это, где применяется и как освоить

Интерфейс обычно ругают словами «неудобно» и «некрасиво», которые мало что объясняют. Неудобно — это когда человек трижды возвращается на предыдущий шаг, не находит кнопку «Далее» под клавиатурой или промахивается пальцем мимо нужного времени в расписании. Некрасиво — обычно значит, что на экране нет иерархии и всё одинаково крупное. Тот, кто владеет навыком, умеет превратить такие жалобы в конкретные причины и исправления.

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

Где кончается UX и начинается UI

UX (user experience, пользовательский опыт) — это путь человека к цели: какие шаги он проходит, где сомневается и уходит. Его результат — сценарии, структура разделов и черновые схемы экранов без цвета и шрифтов. UI (user interface, пользовательский интерфейс) — визуальный и интерактивный слой: сетка, типографика, цвет, состояния кнопок, размеры элементов. Разделять их полезно, чтобы правильно назвать проблему. Если люди не понимают, зачем регистрироваться до выбора услуги, ошибка в сценарии, и перекраска кнопки её не решит. Если сценарий логичен, а кнопку отправки не видят, дело в визуальной иерархии.

Кому навык полезен, если вы не дизайнер

Менеджер продукта. С навыком UX он описывает задачу через сценарий и метрику («половина пользователей не доходит до подтверждения записи»), а не через готовое решение («сделайте кнопку зелёной»). Он может сам собрать кликабельный прототип и показать его нескольким пользователям до того, как команда потратит спринт на разработку.

Разработчик. Он превращает макет в работающий экран и часто сам решает, что делать, если в макете чего-то нет: состояния ошибки, пустого списка, длинного имени, медленной сети. Понимание UI помогает заполнять эти пробелы в логике всего интерфейса, а не наугад.

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

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

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

Учебный пример: запись на техобслуживание с телефона

Условная ситуация. У автосервиса есть сайт с онлайн-записью. Владелец видит в аналитике, что многие открывают форму, но до подтверждения доходит заметно меньше людей. Подрядчик предлагает «освежить дизайн».

Разбор начинается со сценария. Путь пользователя такой: выбрать услугу, выбрать дату и время, ввести номер телефона, подтвердить код из СМС. Владелец просит трёх знакомых записаться с телефона и молча наблюдает. Двое промахиваются по слотам времени: ячейки мелкие, стоят вплотную, и вместо 10:00 выбирается 10:30. Один не понимает, зачем вводить код, и закрывает страницу.

Первая проблема — UI, и у неё есть измеримая граница. Документация Android для разработчиков рекомендует, чтобы у каждого интерактивного элемента на сенсорном экране область касания была не меньше 48 × 48 dp, а лучше больше. Единица dp в той же документации определена как виртуальный пиксель, равный одному физическому пикселю на экране плотностью 160 dpi. Значит, 48 dp — это примерно 0,3 дюйма, около 7,6 мм, на любом телефоне независимо от разрешения. Для мыши и тачпада Google допускает зоны меньше: палец намного грубее курсора.

Важно, что речь об области касания, а не о видимом размере. Значок может быть 24 dp, если вокруг него есть невидимое поле до 48 dp. В Jetpack Compose стандартные компоненты Material — кнопки, кнопки-значки, элементы списка — выдерживают этот минимум сами, а для самодельных элементов размер задаёт разработчик. Модификатор minimumInteractiveComponentSize, как сказано в его описании, резервирует в разметке место под зону 48 dp, но действует, только если стоит в цепочке раньше модификаторов размера. Для менеджера и владельца вывод простой: мелкие ячейки расписания — не вопрос вкуса, а проверяемое требование, которое можно записать в задачу.

Вторая проблема — UX. Человек не понимает, зачем код, потому что экран об этом не говорит. Решение — одна строка пояснения («Пришлём код, чтобы вы не потеряли запись и мы могли напомнить о визите») и возможность отправить код повторно. Это дешевле, чем «освежать дизайн», и проверяется так же — наблюдением.

В каком порядке осваивать навык

Начинать с Figma и красивых экранов — частая ошибка: инструмент осваивается за пару недель, а умение видеть проблему — дольше. Поэтому порядок идёт от наблюдения к картинке: сначала вы учитесь замечать, где человек спотыкается, потом описываете путь без цвета и только затем оформляете экраны. Прототип и проверка на людях замыкают круг и показывают, решена ли исходная проблема.

1. Наблюдение: пройдите в двух знакомых приложениях по одному сценарию и запишите, где остановились или засомневались.
2. Сценарии и структура: опишите путь пользователя по шагам и нарисуйте схему экранов без цвета.
3. Основы UI: сетка, типографика, контраст, состояния элементов, зоны касания; здесь пригодятся руководства Material Design и Apple.
4. Прототип: свяжите экраны так, чтобы сценарий можно было «пройти».
5. Проверка: дайте прототип трём-пяти людям из своей аудитории и попросите выполнить задачу без подсказок.

Если нужна программа с упором на визуальную часть и мобильные интерфейсы, можно посмотреть на онлайн-курс «UX/UI-дизайнер 2.0» ProductStar: в обзоре указаны семь месяцев самостоятельного обучения по 4–5 часов в неделю, блоки по Figma, дизайн-системам, UI и мобильным интерфейсам, итоговый проект. Там же сказано, что программа меньше подходит тем, кто хочет заниматься исследованиями пользователей.

Упражнения и ошибки новичков

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

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

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

Проверить результат можно без специальных программ. Сформулируйте задачу («запишитесь на замену масла в субботу утром»), попросите нескольких человек её выполнить и отметьте, кто справился, сколько времени ушло и где люди останавливались. Если после правок остановок стало меньше, решение работает.

Тем, кому интересна связь внешнего вида экрана с поведением аудитории, стоит обратить внимание на онлайн-курс «Дизайнер интерфейсов» Яндекс Практикума. По данным обзора, обучение длится девять месяцев, практике отведено 284 часа из 444, ранние модули посвящены композиции, сеткам и типографике, поздние — анализу аудитории, гипотезам, карте пути пользователя и исследованиям.

С какими профессиями связан навык

Веб-дизайнер делает сайты целиком, часто вместе с вёрсткой в конструкторе. Продуктовый дизайнер отвечает за интерфейс и его влияние на метрики. UX-исследователь изучает пользователей и проверяет гипотезы, но не рисует экраны.

Менеджеру продукта и владельцу сервиса ближе продуктовая часть: какие метрики показывают, что изменение помогло, как ставить A/B-тест. Если хочется пройти этот путь глубже, вплоть до смены профессии, можно изучить онлайн-курс «Продуктовый дизайнер (UX/UI-дизайнер) Плюс» Bang Bang Education: в обзоре описаны 14 месяцев по 10–12 часов в неделю, семь модулей — от визуального дизайна и Figma до метрик продукта, A/B-тестов и работы с реальным клиентом — и 11 работ в портфолио. Для задачи «лучше понимать дизайнеров в команде» такой объём избыточен.

Как навык влияет на доход

У навыка UX/UI нет отдельной строки в зарплатной статистике, если вы не работаете дизайнером. Он влияет на доход косвенно: через задачи, которые человек может взять на себя, и через то, насколько самостоятельным его считают.

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

Для ориентира можно посмотреть общую динамику. По исследованию «Хабр Карьеры» за первое полугодие 2026 года, построенному на 45 226 зарплатах из калькулятора сервиса, медиана IT-специалистов всех уровней по всей выборке составила 191 000 ₽ в месяц: в Москве — 235 000 ₽, в Санкт-Петербурге — 200 000 ₽, в других регионах — 160 000 ₽. По сравнению со вторым полугодием 2025 года зарплаты дизайнеров выросли на 3 %, маркетологов — на 9 %, а в менеджменте и администрировании не изменились. Это зарплаты по профессиям, а не надбавка за навык.

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

Как выбрать обучение

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

Сравнить школы удобно по сводной таблице: в рейтинге онлайн-школ с обучением UX/UI-дизайну собраны программы разной длины и направленности, от коротких курсов по Figma до профессий с исследованиями. Условия и тарифы уточняйте у школы перед оплатой.

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