От кнопки «Назад» до шрифта: различия в проектировании приложений для iOS и Android

Команда онлайн-школы английского Skyeng подготовила для vc.ru перевод статьи производителя программного обеспечения SteelKiwi.

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

У каждой платформы — свой особенный набор функций. Гайдлайны от Apple и Google рекомендуют по возможности использовать стандартные для платформы средства навигации: элементы управления страницами, панели вкладок, сегментированные элементы управления, представления таблиц, коллекции видов и разделённый экран.

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

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

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

У Apple иной подход. Глобальной навигационной панели нет, и мы не можем вернуться назад с помощью универсальной кнопки возврата. Поэтому в приложении iOS внутренние экраны должны иметь собственную навигационную панель с кнопкой «Назад» в левом верхнем углу.

Apple также использует свайп вправо для перехода на предыдущий экран. Этот жест работает практически во всех приложениях.

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

Гайдлайны Material Design предусматривают несколько вариантов навигации. Один из самых известных навигационных шаблонов на Android — комбинация панели навигации (navigation drawer) и вкладок.

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

В Material Design есть другой важный компонент — нижняя навигация. Панель нижней навигации позволяет переключаться между верхними экранами одним нажатием. Material Design не рекомендует использовать нижнюю навигацию и вкладки одновременно, поскольку это может запутать пользователя.

В гайдлайнах Apple Human Interface нет стандартного навигационного элемента управления, аналогичного меню панели навигации. Вместо этого Apple рекомендует включать глобальную навигацию в панель вкладок. Панель вкладок отображается в нижней части экрана — с её помощью можно переключаться между основными разделами приложения.

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

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

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

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

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

Один из примеров элемента, который обычно выглядит по-разному на двух платформах, — это выбор даты. Пользователи Android не знакомы со стандартным для iOS способом выбора даты при помощи «колёсика».

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

В руководстве Material Design есть два стиля кнопок — плоский и объёмный. Эти кнопки используются в разных ситуациях. Текст на кнопках в Material Design обычно имеет верхний регистр. Такой вид текста встречается и в нативных приложениях iOS, но чаще всего в них используется верхний регистр первой буквы каждого слова.

Есть ещё один тип кнопок — всплывающая кнопка действия на Android и CTA-кнопки (call to action) на iOS. Всплывающая кнопка действия отвечает за основное действие в приложении. Например, кнопка «Создать письмо» в почтовом приложении или кнопка «Новая публикация» в приложении социальной сети. Аналогичную роль основного действия в приложениях iOS выполняет CTA-кнопка, которая расположена в центре панели вкладок.

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

Гайдлайны сенсорного управления для iOS и Android тоже отличаются друг от друга. (44px @ 1x для iOS и 48dp / 48px @ 1x для Android). Material Design предлагает согласовать все элементы с квадратной базовой сеткой 8dp.

San Francisco — системный шрифт в iOS. Roboto — стандартный шрифт в Android. Noto — стандартный шрифт для всех языков в Chrome и Android, которые не поддерживаются Roboto.

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

Согласованность и иерархия. Важно помнить о том, что взаимодействие помогает пользователям ориентироваться в приложении, показывая, как элементы связаны друг с другом. Знакомые, плавные и ненавязчивые переходы с одного экрана на другой поддерживают интерес пользователей. Движение направляет пользователя и даёт ему полезные рекомендации.

Хотя основные советы по использованию микроанимаций весьма схожи в Material Design и Human Interface, существуют чётко определённые различия. Пользователи привыкли к этим переходам на платформе и воспринимают их как естественные, поэтому важно использовать знакомые взаимодействия, которые выглядят органично на каждой платформе.

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

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

Согласно гайдлайнам Material Design, при переходах элементы разделяют на исходящие, входящие или постоянные. Категория, к которой относится элемент, влияет на то, как он преобразуется.

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

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

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

Конечно, есть исключения: некоторые приложения iOS следуют рекомендациям Material Design (например, Gmail), а некоторые приложения для Android — гайдлайнам Human Interface (например, Instagram). Но быстрее разработать мобильное приложение с использованием нативных компонентов для обеих операционных систем.

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