Дизайн мобильных приложений: лучшие практики для начинающих

Что такое дизайн мобильных приложений

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

Зачем разрабатывают мобильные приложения

Мобильные приложения разрабатывают по нескольким причинам:

1. Доступность. Мобильные приложения обеспечивают доступ к сервисам или информации в любом месте в любое время. Приложения быстрее решают задачу пользователей без использования версии для компьютера.
2. Удобство. Пользователи тратят 88% времени в мобильных приложениях, потому что они быстрее, автономнее и технологичнее, чем мобильные веб-версии. Например, мобильные приложения точно используют GPS и акселерометр, когда браузеры могут ошибаться. 
3. Взаимодействие с пользователями. Мобильные приложения отправляют уведомления, собирают персонализированные рекомендации и обратную связь. Например, можно прислать пуш или уведомление с подборкой похожих товаров — и вы, скорее всего, купите что-то из предложенного. 
4. Увеличение лояльности. Мобильными приложениями удобнее пользоваться. А это значит, что проще и быстрее получить доступ к нужным услугам и продуктам. А чем легче такой доступ, тем позитивнее пользовательский опыт и выше лояльность пользователей.

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

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

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

Поймите контекст использования приложения

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

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

Еще один пример. В Google Meet есть функция On-the-Go: вы можете созваниваться во время прогулки, в машине, общественном транспорте и так далее. Такая функция нужна, когда нет возможности созвониться в спокойной обстановке: все элементы интерфейса крупные, чтобы проще и быстрее нажать.

Упростите UI приложения

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

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

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

Создайте понятную навигацию

Навигация в мобильном приложении должна быть интуитивно понятной. Каждый элемент управления — кнопка или ссылка — должен четко говорить о своем назначении. Иконки должны быть узнаваемы и стандартизированы. 

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

Следуйте гайдлайнам iOS и Android

Изучите гайдлайны операционных систем iOS и Android. Гайдлайны — это набор правил, по которым проектируют мобильные приложения внутри операционной системы. 

У Apple гайдлайны называются Human Interface Guidelines (HIG), а у Android — Material Design Guidelines (MDG). 

Почему важно следовать гайдлайнам iOS и Android и создавать мобильные приложения с использованием правил мобильных платформ:

1. Чтобы создавать оптимальные UX и UI. Системы iOS и Android имеют собственные узнаваемые элементы, которые пользователи ожидают увидеть. 
2. Чтобы повышать уровень доступности интерфейсов. Гайдлайны уделяют внимание вопросам доступности: контрастности цветов, размеру и типам шрифтов, а еще способам навигации. Гайдлайны делают приложение доступным для всех пользователей, включая людей с ограниченными возможностями.
3. Чтобы сохранять консистентность. Приложения, которые следуют гайдлайнам, имеют более единообразный внешний вид и поведение. Так пользователи лучше воспринимают навигацию мобильного приложения: ведь все элементы на своих местах, а значит, все понятно. 
4. Чтобы ускорять процесс разработки и уменьшать количество багов. Когда в дизайне приложения используют стандартные компоненты, процесс разработки проходит быстрее, потому что разработчики пользуются готовыми и протестированными компонентами, в которых нет багов.

Создайте адаптивный дизайн

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

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

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

Создайте доступный дизайн

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

Читайте также

Инклюзивный дизайн: кому и для чего нужен

В России 11 000 000 человек с инвалидностью и 37 000 000 пожилых. Когда разрабатываете дизайн приложения, учитывайте все слои населения и делайте дизайн доступным для каждой группы. 

Три совета, как создать доступный дизайн:

1. Используйте специальные плагины в Figma, которые проверяют контрастность по правилам Web Content Accessibility Guidelines (WCAG) — общим рекомендациям, разработанным WC3, чтобы сделать интернет удобным для всех. Плагины в Figma, которые помогут вам адаптировать дизайн под принципы WCAG: Contrast или Color Contrast Checker.

2. Помните: пользователи — не дизайнеры. Они пользуются стандартными дисплеями и экранами смартфонов. Учитывайте это, когда разрабатываете дизайн: на стандартном экране элементы с дробными значениями будут нечеткими и размытыми.

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

Сделайте читаемый текст

Важно учитывать размер шрифта и интерлиньяжа, потому что текст должен хорошо читаться на маленьких экранах. Я рекомендую использовать шрифты размеров больше 11pt в мобильных приложениях — шрифт ниже 11pt сложно увидеть пользователям с нарушениями зрения или тем, кто пользуется приложением в нестандартных условиях, например во время бега. Старайтесь с аккуратностью использовать маленькие размеры шрифтов, чтобы не нарушать доступность мобильных интерфейсов.

Поработайте со взаимодействием и обратной связью

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

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

Главное о том, как создать мобильный дизайн

1. Создайте чистый и минималистичный интерфейс. Не переборщите с яркими и броскими цветами и компонентами.
2. Не перегружайте UX. Используйте уже знакомые и популярные практики приложений на iOS или Android. Гайдлайны систем могут помочь в этом. Следите, чтобы непонятные иконки были подписаны.
3. Следуйте гайдлайнам iOS и Android. Гайдлайны помогут создать дизайн мобильного приложения, который будет привычен и удобен для пользователей. А еще гайдлайны ускорят разработку и уменьшат количество ошибок.
4. Сделайте адаптивный дизайн. Не забудьте, что некоторые люди пользуются старыми моделями с шириной экранов 320px. Это маленькие экраны, которые вызывают трудности при адаптировании дизайна под них.
5. Проверьте контрастность дизайна. Представьте, как вашим интерфейсом будут пользоваться люди с нарушениями зрения. Это можно проверить с помощью плагина Contrast или Color Contrast Checker в Figma.
6. Проверьте размер текста в интерфейсе. Не стоит использовать размер шрифта ниже 11pt на мобильных устройствах, такой размер будет трудно прочитать. Старайтесь использовать размеры шрифтов, которые обозначены гайдлайнами HIG от Apple и Material от Android.
7. Добавьте обратную связь от приложения на действия пользователя там, где это нужно. Такой обратной связью станут Snackbar, Popup, бейджи и другие компоненты. Обратная связь нужна в тех местах, где хочется убедить пользователя, что все в порядке и работает хорошо.