Как задизайнить MVP UI KIT для мобильного приложения с нуля

С чего начать и от чего отталкиваться? В этой статье расскажу, как сделать MVP UI KIT для мобильного приложения максимально быстро и эффективно.

Цели кита

• Сделать интерфейс единообразным
• Сэкономить время отрисовки новых макетов
• Сэкономить время на аргументацию дизайн-решений

Делать сначала на IOS или Android

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

Какой размер экрана использовать в макетах?

Можно взять минимальный размер экрана платформы, чтобы точно уместить все элементы. Для Android взять 360х640 px, для IOS — IPhone SE 320x568 px. Есть ещё один подход, когда размер экрана выбирают по наибольшему количеству целевых клиентов.

Сетка и расстояния между компонентами

Рекомендую использовать горизонтальные отступы по краям экрана в 16 px в IOS и Android. Больше никаких сеток можно не использовать. Размещать компоненты по принципу «внутреннего и внешнего» и делать кратными 2–4 px.

Выбор шрифтовой гарнитуры

Самый безопасный и проверенный вариант — использовать нативные шрифты платформ: в Android это будет Roboto, а в IOS — San Francisco. Они бесплатные, в них есть большое количество языков и символов, которые корректно отображаются на устройствах, и пользователи к ним привыкли. Использовать ненативные шрифты достаточно рисково: может появиться много нюансов и подводных камней, связанных с лицензией, отображением на разных устройствах и наличием символов.

Шрифтовые стили. Размер и начертание шрифта

• Основной текст. Можно использовать шрифты высотой 14 pt и 16 pt. Эти размеры воспринимаются пользователями наиболее привычно. В шрифте Roboto рекомендую использовать начертание Regular, а в San Francisco — начертание Medium.
• Мелкие сноски, подсказки, статусы. Лучше не использовать шрифты высотой меньше 12 pt. Серые шрифты меньше этого размера не пройдут по международным стандартам доступности.
• Заголовки. Тут нет жестких ограничений по размерам, главное, чтобы был явный контраст относительно основного текста. Важно помнить, что в гарнитуре San Francisco в заголовках лучше использовать шрифт San Francisco Display.

Базовый набор цветов

• Основной чёрный цвет текста. Нужно увести чёрный цвет в холодный оттенок, чтобы он не желтил на экранах.
• Серый цвет для текста. Делаем на базе холодного чёрного, подгоняем контрастность 3:1, чтобы дизайн прошёл по международным стандартам доступности и его можно было использовать в placeholder.
• Серые полутона для элементов. Делаем 7 оттенков серого на базе основного чёрного цвета. Важно, чтобы между ними был очевидный контраст и уход в синий цвет.
• Красный цвет для ошибок. Для текста ошибок красный делаем потемнее, а для красных подложек более светлым.
• Фирменный цвет компании. Если фирменный цвет — синий, фиолетовый, голубой или зелёный, то можно смело использовать его в ссылках или кнопках.

Эти цвета закрывают 80% потребностей. Остальные 20% цветов лучше вводить как дополнительные.

Базовый набор компонентов

• Текстовые поля. Если хотите быть максимально удобными и практичными, то используйте поля c обводкой контейнера, где placeholder при нажатии трансформируется в lable. Если хотите быть модными и минималистичными, то используйте поля в виде текста с подчеркиванием, которые раньше рекомендовал Material Design. У них есть проблема с тем, что поля выглядят в виде списка с разделителем — часть пользователей просто не воспринимают их как кликабельный элемент.
• Чекбокс, радиобаттон, свитчер. Сами иконки можно взять нативные. Здесь важно сделать компонент, где иконка стыкуется с текстом — причём так, чтобы это выглядело и работало консистентно относительно текстовых полей.
• Кнопки. Как минимум сделать 2 кнопки: Primary и Secondary. Отрисовать все их состояния: active, disable, tap.

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

Какие нативные компоненты можно взять без дополнительных изменений:

• Status Bar
• Navigation Bar
• Tabs
• Action Sheet
• Alerts
• Keyboards

Иконки

• В Android можно использовать иконки из Material Design. Если иконок не хватает, то дорисовать в таком же стиле вручную.
• В IOS набор нативных иконок небольшой, поэтому тут нужно найти готовый icon pack (ускоренный вариант) или отрисовать самому. Иконки из Material Design в IOS лучше не использовать, так как они визуально не стыкуются с эстетикой этой платформы.

Где брендинг

Если ваше приложение запускается впервые и у вас ничего нет, то представленный подход по созданию UI KIT решит 80% продуктовых задач. Когда ваше приложение будет стабильно решать клиентские задачи, то следующим шагом развития будет добавление брендинга — то есть внедрение кастомных шрифтов, ненативных элементов, уникальных иконок и сложных анимаций. Как это сделать — расскажу в следующей статье.