iphone 11 pro max vs pixel 4 xl design 1160x620 - Руководство по дизайну мобильных приложений под iOS и Android. Основные различия платформ

Если вы проектируете приложения для iOS и Android (Material Design), то это руководство станет вашим новым лучшим другом 😎.

Мы рассмотрим наиболее важные для UX / UI дизайнеров различия между iOS и Android. Если вы создали приложение для одной платформы, то из этой статьи вы узнаете, что нужно, чтобы «перевести» его на другую платформу. Но, это всего лишь рекомендации. Речь идет о переводе «iOS-мышления» на «Android-мышление» и наоборот.

Дизайн интерфейса iOS и Android: основные отличия

Ниже представлены наиболее важные различия, которые UX / UI дизайнеры должны учитывать при «переводе» приложения с iOS на Android или наоборот:

Элемент дизайнаiOSAndroid
Минимальный размер цели нажатия44×44 pt48×48 dp (Что такое dp?)
Основная навигация приложенийПанель нижней навигацииВкладки вверху экрана
Дополнительная навигация приложенийКнопка «More» на нижней панели или интерфейс текущей страницыПанель нижней навигации или боковое гамбургер-меню
Главная кнопка/действиеВерхняя навигация, с правой стороныFloating action button
Вторичные действияИнтерфейс текущей страницыВерхняя навигация, с правой стороны
Список с единственным вариантом выбораСписок с галочкой для выбранного элементаСписок Radio button
Списки множественного выбораСписок с переключателями или список с галочками для выбранных элементовСписок с галочками или список с переключателями
Подтверждение или отмена деструктивного действияМодальное диалоговое окно подтверждения выбораОтмена действия посредством временного уведомления на экране

Да, и прежде чем мы углубимся в эту тему, давайте ответим на один важный вопрос, который определяет все остальное…

Нужно ли делать приложения для Android и iOS разными?

Если коротко, то «нет».

Apple и Google – очень умные компании с миллионами пользователей. Они будут совершать UX-ошибки, как и любая другая компания, но они не совершат вопиющих ошибок, когда будут определять язык дизайна своих систем. Поэтому, хотя, ниже я и представляю два альтернативных подхода (iOS и Android), ни один из них не является неправильным. Если пользователи могут уверенно перемещаться по вашему приложению и использовать его, никто не может запретить вам использовать вкладки на iOS или модальные представления на Android.

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

Навигация iOS и Android

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

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

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

В iOS крайнее левое действие почти всегда является действием «назад» – последовательно к предыдущему экрану («Шаг 2» возвращает к «Шагу 1»), или иерархически к родительскому экрану (переход от «Inbox» к «Mailboxes»). Кроме того, здесь может быть привязан несвязанный пункт назначения. Заголовок страницы практически всегда присутствует, но сжимается по мере прокрутки представления пользователем. Дополнительные действия на странице могут отображаться, как одно текстовое действие или несколько иконок.

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

Ресурсы: панель навигации iOS; верхняя панель Material Design.

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

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

Основная навигация или «пункты назначения» приложений расположены по-разному.

В iOS-приложениях основные пункты назначения перечислены в виде вкладок в нижней части экрана.

  1. Всего 2-5 вкладок
  2. Они имеют размер шрифта 10
  3. Они представляют основные пункты назначения

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

  1. Любая вкладка, представляющая основное действие приложения – например, добавление новой фотографии в фото-приложение – центрируется
  2. Любая вкладка профиля или настроек расположена последней
  3. Поиск идет вторым

С другой стороны, iOS-приложения по умолчанию (1) не поощряют действия, находящиеся на панели вкладок, (2) не имеют вкладок, связанных с профилем или настройками, и (3) показывают поиск последним.

Самое большое различие в приложениях Android заключается в том, что одни и те же основные пункты назначения распространены по всему интерфейсу – часто между (a)  кнопкой гамбургер-меню, (b)  панелью поиска, (c) вкладками или (d) floating action button. Мы поговорим обо всех 4 элементах в следующих разделах. Да, и обратите внимание: Android использует нижнюю навигацию совсем недавно, аналогично iOS – так что вы можете вообще не делать разницу между версиями приложений.

Ресурсы: панели вкладок iOS; понимание навигации Material Design

Вторичное навигационное меню

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

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

На Android вторичные навигационные пункты назначения перечислены в боковом меню, доступном при нажатии кнопки гамбургер-меню.

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

Ресурсы: Material Design nav drawer

Действие «Назад»

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

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

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

Что такое модальные и полноэкранные представления? Хорошо, что вы спросили.

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

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

Полноэкранные окна – это медиа-файлы, фотографии или видео, которые занимают весь экран. Их можно закрыть на iOS и Android, свайпом вниз.

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

Дизайн элементов управления iOS и Android

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

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

В iOS основная кнопка страницы обычно находится в правом верхнем углу.

В Android, однако, основная кнопка страницы часто отображается в правом нижнем углу, как кнопка floating action button или сокращенно FAB.

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

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

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

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

Ресурсы: кнопки iOS; floating action button Material Design

Поиск

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

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

Одно из различий в стиле поиска между iOS и Android:

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

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

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

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

В iOS поиск обычно отображается среди основных вкладок или действий в верхней навигационной панели.

В Android вы также найдете его в контекстных действиях на верхней панели.

Ресурсы: строка поиска iOS; паттерн поиска Material Design.

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

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

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

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

Обе платформы имеют свои стандарты для меню действий.

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

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

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

Ресурсы: action sheets iOS, контекстные менюменюbottom sheets Android

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

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

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

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

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

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

Для более длинных списков вариантов или, когда возможен множественный выбор, как на iOS, так и на Android, часто встречается выделенный «экран выбора». Одна из самых больших ошибок начинающего дизайнера в дизайне мобильных приложений – это не выделение полного экрана для выбора одного варианта из большого количества опций.

Ресурсы: pickers iOS; раскрывающиеся спискидиалоговые окна Android

Средства выбора даты (Date pickers)

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

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

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

Ресурсы: iOS picker; Android date picker (обратите внимание на различия в спецификации Material Design)

Вкладки

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

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

В Android вкладка в стиле «плоский дизайн» используется для того же дисплея.

Ресурсы: сегментированные элементы управления iOS; вкладки Material Design

Отмена действия

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

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

В Android некоторые предупреждения появляются по центру экрана. Однако, когда они не требуют ввода данных пользователем и должны исчезнуть через несколько секунд, вы можете использовать «snackbars». Snackbars – хороший выбор, потому что (а) они дают вам возможность сообщить  пользователю, что его действие было успешным, и (б) вы можете добавить к ним одно или два действия, что делает их идеальным местом для размещения действия «Отменить». Я бы предпочел, чтобы мои пользователи имели возможность отменить действие. Дважды спрашивайте пользователя каждый раз, когда он пытается принять важное решение.

Ресурсы: Undo от iOS; snackbars от Material Design

Типографика iOS и Android

Шрифт по умолчанию

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

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

Системный шрифт iOS называется San Francisco (SF). Это компактный шрифт, разработанный для сохранения удобочитаемости при небольших размерах текста. Вы можете скачать SF здесь.

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

Кроме того, для многих Android систем установлен собственный Google-шрифт под названием Product Sans, который недоступен для стороннего использования.

Стили текста

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

В другой статье, я подробно описал,  как стилизовать текст приложения под iPhone и, как стилизовать текст приложения под Android.

Ресурсы: Руководство по типографике iOS; Руководство по типографике Material Design.

Другие стандарты платформ iOS vs. Android

Размер и форма иконок приложений

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

Вы должны проектировать иконки приложений iPhone в следующих размерах:

Размер иконкиГде используется
180×180 pxЭкран «Домой» iPhone для размеров @3x (например, 11 Pro, X, Xs, 8+)
120×120 pxЭкран «Домой» iPhone для размеров @2x (например, 11, XR, 8)
1024×1024 pxApp Store

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

Проектируйте иконки Android-приложений в следующих размерах:

РазмериконкиГде используетсяКратность 48×48 px
48×48 pxОсновной экран (medium DPI телефоны)1x
72×72 pxОсновной экран (high DPI телефоны)1.5x
96×96 pxОсновной экран (xhdpi телефоны)2x
144×144 pxОсновной экран (xxhdpi телефоны)3x
192×192 pxОсновной экран (xxxhdpi телефоны)4x
512×512 pxБольшая версия для Google Play store (все устройства)N/A

Поэтому: 1) создайте красивую векторную иконку с разрешением 48×48 px, 2) увеличьте изображение до 400%, чтобы убедиться, что оно по-прежнему выглядит великолепно, и 3) создайте отдельную версию с разрешением 512×512 px.

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

Ресурсы: рекомендации по иконкам приложений iOS; рекомендации по иконкам приложений Material Design (к сожалению, это ничего не говорит о размерах иконок)

Минимальный размер цели нажатия

ПлатформаМинимальный размер цели нажатия
iOS44x44pt
Android48x48dp

Обратите внимание, что points Apple («pt») и device-independent pixels Android («dp») функционально эквивалентны. Они просто ссылаются на базовый размер (такой же, как CSS-единица «пиксель»), который измеряется независимо от разрешения экрана.

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

Язык дизайна

Пытаясь показать различия между двумя языками дизайна и философиями, лежащими в их основе, я попытался рассказать об основных частях языка iOS и Material Design, которые похожи. Чтобы узнать больше, вам нужно погрузиться в официальную документацию каждой дизайн-системы.

Чтобы узнать больше о проектировании для iOS, прочтите рекомендации Apple «Human Interface Guidelines».

Чтобы узнать больше о проектировании в стиле Material Design, прочтите материалы на сайте Material Design.

Заключение

Я что-то упустил? Что-то устарело? Пишите на почту erik@learnui.design. Я буду постоянно обновлять это руководство, чтобы оно было наиболее точным и актуальным для перевода мобильных приложений для iPhone и Android.

Оригинал: Erik D. Kennedy

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

Как создать качественный логотип для интернет-магазина

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