Бесплатный аудит вашего сайта!

  • Получите 3 бесплатных совета по улучшению продаж вашего сайта.
  • Посмотрим сайт и дадим четкие рекомендации по росту конверсии.

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

  • Если вы не имеете приложение для iOS и Android, то с помощью этого руководства вы узнаете, как правильно разработать приложение.
  • Если уже имеете приложение на одной из платформ iOS или Android, то сможете легко перевести приложение на другую платформу. А именно, iOS в Android или Android в iOS.

Читать статью: Тренды мобильных приложений 2020

Навигация в верхней части экрана

iOS и Android имеет разные стандарты отображения верхней части экрана.

В iOS действие «Назад» размещается слева. Заголовок страницы всегда присутствует, имеет большой шрифт и размещается слева. Когда пользователи прокручивают, то шрифт уменьшается и заголовок смещается к центру.

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

Для Android заголовок страницы и кнопка «Назад» размещается слева. Справа размещаются действия или иконки.

Основная навигация

Основная навигация в приложениях iOS и Android расположена по-разному. В iOS навигация размещена в нижней части экрана и представлена в виде 2-5 вкладок. Размер шрифта – 10px. Во вкладках представлены популярные разделы.

Многие популярные сторонние приложения для iOS следуют правилам:

  • Если вкладка представляет основное действие — например, добавление новой фотографии — то располагается по центру.
  • Вкладка профиля или настроек размещается последней.
  • Поиск размещается вторым.

Провести юзабилити-аудит приложения

Но в приложениях для iOS по умолчанию:

  • Действия на вкладках не размещаются.
  • Нет вкладок, связанных с профилем или настройками.
  • Поиск размещается последним.

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

Вторичная навигация

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

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

Навигация «Назад» для iOS и Android

Для iOS вы можете перемещаться назад 4 различными способами, в зависимости от контекста.

Способ навигации «Назад» (iOS) Контекст, в котором работает
Нажмите «Назад» в левом верхнем углу экрана Любой экран, на котором появляется действие «Назад»
Проведите вправо от левого края экрана Любой экран, на котором в левом верхнем углу отображается действие «Назад»
Нажмите «Готово» в правом верхнем углу экрана Нередактируемые модальные окна
Проведите пальцем вниз по экрану Модальные или полноэкранные окна

Что такое модальные и полноэкранные окна?

Модальные окна — это одноэкранные задачи — появляются, скользя пальцем вверх, и располагаются поверх предыдущего экрана, который немного виден на заднем плане. Вы можете закрыть модальное окно, проведя пальцем вниз или нажав кнопку «Назад» вверху.

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

В Android навигация «Назад» проще. Для Android 10 и выше просто проведите пальцем с любой стороны экрана. Для Android 9 используется кнопка «Назад» в левом нижнем углу экрана.

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

В iOS кнопка находится в правом верхнем углу. В Android часто отображается в правом нижнем углу, как кнопка с плавающим действием.

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

Поиск на iOS и Android

Различия между поиском iOS и Android:

  • Чтобы отменить поиск, нажмите «Отмена» на iOS или «←» на Android.
  • Чтобы очистить текущий запрос, но остаться на экране поиска, нажмите «X» на iOS или «X» на Android.

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

В iOS поиск отображается, как одна из вкладок в основной навигации или действие в верхней навигационной панели. На Android — в верхней панели.

Меню действий для iOS и Android

На iOS меню действий могут быть вызваны любой кнопкой или попыткой предпринять какое-либо действие. Меню появляется снизу вверх.

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

В iOS 13 контекстное меню отображает связанные действия при нажатии и удерживании элемента. Когда отображается контекстное меню, фон размыт.

В Android меню отображается прямо на элементе. В более новых версиях Android меню закрывает иконку «Кебаб-меню» (три точки).

Элементы управления выбором

В iOS для выбора из небольшого числа вариантов используйте элемент «Picker». Сборщики могут отображаться закрепленными внизу (как показано на картинке) или встроенными в содержимое (например, «Сборщики дат» смотрите дальше).

В Android для выбора из нескольких опций используется выпадающее меню (которое отображается на месте) или модальное окно (которое отображается по центру и затемняет фон приложения).

Для более длинных списков часто встречается выделенный экран выбора как на iOS, так и на Android. Частая ошибка в мобильном дизайне — не выделение полного экрана для выбора варианта с большим количеством опций.

Даты на iOS и Android

В iOS выбор даты имеет вид, как на картинке — со столбцом для дня, месяца и, необязательно, года.

В Android вы можете включить год, не включать его или позволить пользователю выбирать, хотят ли они включить его.

Вкладки для iOS и Android

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

Действие «Отменить» для iOS и Android

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

Для Android некоторые предупреждения появляются в центре экрана. Однако для оповещений, которые не требуют ввода пользователя и исчезнут через несколько секунд, используются «Снэк-бары».

Они сообщают пользователю, что действие было успешным. Вы можете добавить одно или два действия — что делает «Снэк-бары» отличным решением для «Отменить». Дайте пользователям возможность исправить ошибку. А когда они принимают важное решение, дважды спросите их.

Типография для iOS и Android

По умолчанию iOS использует шрифт — San Francisco. Отличный шрифт для удобочитаемости при небольших размерах.

Для Android шрифт по умолчанию — Roboto. Очень похож на шрифт San Francisco. Также в Android часто используется шрифт Product Sans от Google, который недоступен для стороннего использования.

Стили текста

Стандарты для iOS: шрифт текста и навигации — 17pt, заголовок — 34pt, вторичный текст — 15pt и минимальный размер шрифта — 10pt.

Стандарты для Android: шрифт текста — 16sp, заголовок, текст кнопок и навигация — 14sp, надписи, текст ошибок и вторичный текст — 12sp.

Размер иконок

Размер иконок для приложений iPhone:

Размер иконки Где используется
180×180 px Главный экран iPhone для телефонов (11 Pro, X, Xs, 8+)
120×120 px Главный экран iPhone для телефонов (11, XR, 8)
1024×1024 px Магазин приложений — App Store

Иконка может быть и других размеров, но если вы нарисуете ее в 60px, то убедитесь, что она хорошо выглядит в 120×120, 180×180 и 1024×1024 px.

Размер иконок для приложений Android:

Размер иконки Где используется
48×48 px Главный экран (телефоны со средним разрешением)
48×48 px Главный экран (телефоны со средним разрешением)
72×72 px Главный экран (телефоны с высоким разрешением)
96×96 px Главный экран (телефоны xhdpi)
144х144 px Главный экран (телефоны xxhdpi)
192×192 px Главный экран (телефоны xxxhdpi)
512×512 px Google Play store (все устройства)

Если вы создали красивую иконку с разрешением 48×48 px, то увеличьте изображение до 400% и убедитесь, что она отлично выглядит. И затем создайте отдельную версию с разрешением 512×512 px.

Минимальный размер области нажатия

iOS 44×44 pt
Android 48×48 dp

Точки Apple (pt) и независимые от устройства пиксели Android (dp) функционально эквивалентны. Они просто ссылаются на базовый размер (как и пиксели в CSS), который определяет разрешение экрана (нормальное, высокое, сверхвысокое и т.д.)

Android приложения имеют больший размер целевой области и меньшее количество пикселей на экране, чем iOS.

Заключение

Теперь вы знаете основные различия iOS и Android. Данное руководство поможет вам при разработке приложений на данных платформах.

Понравилась статья? Поделитесь с друзьями!

Популярные статьи

 


Смотреть видео: Где размещать кнопку в форме?