Четвёртая статья из цикла о моём UX-дипломе в Нетологии. Рассказываю о макетах: с чего начал, как собирал и почему они так выглядят.

Если не читали предыдущие части, начните с первой. Там о курсах Нетологии, учебе и дипломном проекте. Остальные ссылки внизу.

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

Для диплома предстояло сделать кучу всего, но макеты предлагали взять из готового проекта, который мы выбирали в начале курса. Один про ресторан с доставкой, другой — каталог квартир застройщика. Мне они не понравились, так что я сделал свой, с тёмной темой и плашками.

Принципиальные макеты

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

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

Регистрация и вход → Главная и разделы → Экстренный звонок и вызов мастера → Чат с оператором

Исходники Storyframes в Миро

Макеты в Фигме

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

Для учебного проекта я предположил, что целевая аудитория «Яркого» в массе своей айтишники и темно-серая гамма будет напоминать им среды разработки и Photoshop с DaVinci Resolve. А ещё тёмный фон помогал мне сберечь глаза, поскольку дипломом я занимался по вечерам после работы.

Главный экран приложения

После цвета я выбрал шрифты. Для основного текста взял системный шрифт iOS San Francisco Pro Text, а для кнопок — San Francisco Pro Display. Системные шрифты отлично выглядят и по-хорошему безлики. Для цифровых полей, напротив, взял IBM Plex Mono, чтобы его выразительная форма привлекала внимание к цифрам. Иконки — из бесплатного набора Font Awesome.

Основные шрифтовые стили

Поскольку я всё же писатель, а не дизайнер, я ограничился макетами для Айфона 8. Его экран удачно масштабировался на мой SE. Я поставил на телефон Figma Mirror и рисовал, регулярно проверяя интерфейс в реальном размере.

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

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

Макеты с переходами по событиям. От запуска и онбординга до звонка диспетчеру

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

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

Главный ⇄ Вызов мастера ⇄ Описание проблемы / Подтверждение

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

Работа над прототипом шла в две итерации. После первой я провел небольшое UX-исследование на живых людях, получил отзывы и комментарии преподавателей. Про исследование читайте в следующей части.

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

Попробуйте «зарегистрироваться», увидите онбординг на главном экране :3

Немного сложностей

Я так гладко рассказываю, потому что прототип давно готов, а диплом сдан. На деле макеты дались тяжелее всего :3

Первый сложный вопрос — сетка. У меня был только Айфон SE, на мокапах он выглядел кирпичом, поэтому я выбрал Айфон 8.

Ширина экрана у SE — 320 пикселей, можно использовать сетку с шагом в 8 пикселей. Получается 40 ячеек-микромодулей, которые бьются на удобное количество столбцов и строк. Можно выровнять шрифт по сетке и навести прочий pixel perfect.

У восьмёрки ширина 375 пикселей. Ни 10, ни 8 пикселей не подходят: базовая сетка обрывается на половине ячейки, колонка с контентом либо слишком узкая, либо с нечётным количеством столбцов, либо ещё что. Приходится добавлять отступы по бокам и терять ценное место.

Путём проб и ошибок подобрал сетку с базовой ячейкой в 5 пикселей, а строки и столбцы сделал с шириной и отступом по 15 пикселей. Строк на экране уместилось нечетное число, но главное — влезло 12 столбцов.

Получилось в меру ровно:

Сетка макета. Всё кратно 5 пикселям

Вторая сложность — новые фичи Фигмы. Дело было в феврале 2021, Фигма обновила библиотеки компонент, настройки Constraints и добавила Auto layout. В роликах на Ютубе всё выглядело здорово: блоки сами выравнивались, можно было сделать типовой компонент, а потом его заполнять текстом и ничего не ломалось. Но с выравниванием я провозился дольше, чем со всем остальным.

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

С экраном звонка оказалась такая же история. Пришлось позвонить и сделать скриншот, а нужное дописать поверх.

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

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

Ссылки

Дипломная работа в гугл-документах

Макеты в Фигме, если хотите посмотреть на бардак в слоях

Все статьи об учебном проекте:

1. Задачи и результат
2. Потребности пользователей
3. Основы ToV
4. Интерактивные макеты — вы находитесь здесь
5. UX-исследование
6. Как ставить задачи UX-писателю