March 29, 2023

iOS vs Android — различия в дизайне приложений

Если вам сложно уловить все нюансы проектирования приложений для iOS и Android, потратьте минуту-другую на прочтение этой статьи.

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

Строки состояния (Status bars)

Как в Android, так и в iOS, строка состояния находится в верхней части экрана и показывает следующую информацию: заряд батареи, сеть и время.

Расположение этих элементов в Android немного отличается от iOS. В приложениях на Android могут также отображаться иконки активных приложений.

Руководство по проектированию — глава iOS vs Android

Верхняя панель навигации

Верхняя панель навигации в iOS обычно сопровождается кнопкой «Назад» («Back»), расположенной в левом верхнем углу. А в Android пункты бокового меню находятся в гамбургер-меню.

iOS, как правило, скрывает дополнительные пункты меню в панели навигации сверху (иконка с тремя точками).

Руководство по проектированию — глава iOS vs Android

Поисковые запросы

В приложении на Android вы можете отменить режим поиска, нажав на кнопку «Назад», и очистить запрос, нажав на «X».

В iOS-приложении можно отменить поиск, нажав на кнопку «Отмена» («Cancel»), и очистить запрос, нажав на «X».

Руководство по проектированию — глава iOS vs Android

Кнопки призыва к действию (CTA)

Основная CTA в iOS-приложении, как правило, располагается в верхней части экрана на панели навигации или является частью меню панели вкладок.

В приложении на Android одними из самых популярных CTA являются плавающие кнопки действий (Floating Action Buttons, FABs), которые находятся над панелью вкладок.

Руководство по проектированию — глава iOS vs Android

Предупреждающие диалоговые окна

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

В iOS отрицательное действие окрашено в красный цвет, а действие отмены, как правило, выделено жирным шрифтом и синим цветом.

Руководство по проектированию — глава iOS vs Android

Действия на странице

Важные действия на странице для приложений на Android обычно скрыты под кебаб-меню (три точки, расположенные по вертикали) в верхней части панели навигации. На устройствах iOS они находятся на панели инструментов в нижней части экрана.

Руководство по проектированию — глава iOS vs Android

Меню действий

В Android меню действий называется «Снэкбаром» («Snackbar»)* и информирует пользователя о процессе, который приложение выполнило или выполнит.

В iOS оно имеет форму «Всплывающей информационной панели» («Bottom sheets»)** и требует подтверждения данных, которые вводит пользователь.

*Примечание переводчика. Snackbar —  всплывающее сообщение, которое появляется в разных частях интерфейса. Его главная задача — сообщить о выполненном действии.

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

Руководство по проектированию — глава iOS vs Android

Элемент выбора времени («Time picker»)

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

Руководство по проектированию — глава iOS vs Android

Надеемся, этот небольшой обзор был вам полезен!

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement — подписывайтесь!