С чего начать и от чего отталкиваться? В этой статье расскажу, как сделать MVP UI KIT для мобильного приложения максимально быстро и эффективно.
- Сделать интерфейс единообразным
- Сэкономить время отрисовки новых макетов
- Сэкономить время на аргументацию дизайн-решений
Сначала лучше сделать платформу с наибольшим количеством целевых пользователей. Если аналитики по целевым пользователям нет, то можно отталкиваться от ограничений ресурсов разработки.
Можно взять минимальный размер экрана платформы, чтобы точно уместить все элементы. Для Android взять 360х640 px, для IOS — IPhone SE 320×568 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% продуктовых задач. Когда ваше приложение будет стабильно решать клиентские задачи, то следующим шагом развития будет добавление брендинга — то есть внедрение кастомных шрифтов, ненативных элементов, уникальных иконок и сложных анимаций. Как это сделать — расскажу в следующей статье.
Загрузка...
