Команда онлайн-школы английского Skyeng подготовила для vc.ru перевод статьи производителя программного обеспечения SteelKiwi.
В закладки
Они отличаются не только внешним видом, но и структурой. Создавая дизайн для нативных приложений, нужно учитывать различия между платформами iOS и Android.
Гайдлайны от Apple и Google рекомендуют по возможности использовать стандартные для платформы средства навигации: элементы управления страницами, панели вкладок, сегментированные элементы управления, представления таблиц, коллекции видов и разделённый экран. У каждой платформы — свой особенный набор функций.
Если вы используете стандартные элементы управления, пользователи смогут взаимодействовать с приложением на интуитивном уровне. Пользователи знают, как эти элементы управления обычно работают на каждой платформе.
Представим собственные шаблоны дизайна на примерах. Сфокусируемся на основных различиях между шаблонами дизайна взаимодействия на iOS и Android, чтобы выяснить, почему приложения выглядят по-разному и почему это правильно.
Различия в шаблонах навигации
iOS и Android следуют разным гайдлайнам для разработки шаблонов навигации. Перемещение между экранами — общее для всех мобильных приложений действие. Кнопка «Назад» — простой способ вернуться к предыдущему экрану или действию, и он работает почти во всех приложениях Android. В нижней части Android-устройств есть универсальная панель навигации.
Панель навигации Android
Глобальной навигационной панели нет, и мы не можем вернуться назад с помощью универсальной кнопки возврата. У Apple иной подход. Поэтому в приложении iOS внутренние экраны должны иметь собственную навигационную панель с кнопкой «Назад» в левом верхнем углу.
Кнопка «Назад» в iOS
Этот жест работает практически во всех приложениях. Apple также использует свайп вправо для перехода на предыдущий экран.
Эту разницу важно учитывать, чтобы логика взаимодействия не противоречила другим приложениями.
Различия между шаблонами навигации в приложениях iOS и Android
Один из самых известных навигационных шаблонов на Android — комбинация панели навигации (navigation drawer) и вкладок. Гайдлайны Material Design предусматривают несколько вариантов навигации.
Вкладки расположены прямо под заголовком экрана и позволяют удобно организовать контент — пользователь может переключаться между наборами данных и функциями приложения. Панель навигации — это меню, которое появляется слева или справа при нажатии значка гамбургер-меню.
Панель нижней навигации позволяет переключаться между верхними экранами одним нажатием. В Material Design есть другой важный компонент — нижняя навигация. Material Design не рекомендует использовать нижнюю навигацию и вкладки одновременно, поскольку это может запутать пользователя.
Вместо этого Apple рекомендует включать глобальную навигацию в панель вкладок. В гайдлайнах Apple Human Interface нет стандартного навигационного элемента управления, аналогичного меню панели навигации. Панель вкладок отображается в нижней части экрана — с её помощью можно переключаться между основными разделами приложения.
Этот компонент похож на нижнюю навигацию в Material Design, но чаще используется в приложениях iOS. Обычно панель вкладок содержит не более пяти опций.
Существуют как объективные различия, такие как глобальная панель навигации в Android и её отсутствие в iOS, так и различия концепции этих двух систем. Несмотря на наличие элементов, которые выполняют схожие функции в обеих операционных системах (вкладки и сегментированный элемент управления, панель нижней навигации и панель вкладок), навигация по-прежнему остаётся одним из основных различий между iOS и Android.
В приложениях для Android первичная навигация, наоборот, часто скрыта в гамбургер-меню. Согласно гайдлайнам Apple, основные элементы навигации должны быть на переднем плане, а гамбургер-меню нужно использовать только для вторичной навигации — функций, которые важны для пользователя только в определённой ситуации.
Трудности в оформлении стандартных элементов управления
Самые сложные сценарии использования — элементы управления по умолчанию (радиокнопки, флажки и переключатели), для которых требуется специальный вид, чтобы отображать элементы управления, характерные для iOS на Android — и наоборот. Чтобы каждый элемент приложения выглядел одинаково на разных платформах, нужно приложить дополнительные усилия при разработке.
Хороший дизайн — это дизайн, который учитывает привычки пользователей каждой операционной системы и соответствует их ожиданиям. Каждая платформа использует уникальные сценарии взаимодействия.
Пользователи Android не знакомы со стандартным для iOS способом выбора даты при помощи «колёсика». Один из примеров элемента, который обычно выглядит по-разному на двух платформах, — это выбор даты.
Использование этого стиля выбора даты в Android потребует создания собственных компонентов, которые могут увеличить сложность и продолжительность разработки и сделать внешний вид приложения чуждым платформе Android.
Стиль кнопок в iOS и Android
Эти кнопки используются в разных ситуациях. В руководстве Material Design есть два стиля кнопок — плоский и объёмный. Такой вид текста встречается и в нативных приложениях iOS, но чаще всего в них используется верхний регистр первой буквы каждого слова. Текст на кнопках в Material Design обычно имеет верхний регистр.
Слева Android, справа iOS
Всплывающая кнопка действия отвечает за основное действие в приложении. Есть ещё один тип кнопок — всплывающая кнопка действия на Android и CTA-кнопки (call to action) на iOS. Аналогичную роль основного действия в приложениях iOS выполняет CTA-кнопка, которая расположена в центре панели вкладок. Например, кнопка «Создать письмо» в почтовом приложении или кнопка «Новая публикация» в приложении социальной сети.
Различия между bottom sheets в Android и action sheets в iOS
Модальные нижние экраны имеют два типа контента: модальные нижние экраны с различными действиями и список приложений, который появляется после того, как пользователь нажимает иконку «Поделиться». В Android два типа нижних экранов: модальные нижние экраны и постоянные нижние экраны. Но эти компоненты отличаются от экранов Android. Мы можем найти те же типы контента на нативных экранах iOS.
Различия в сенсорном управлении и сетках
(44px @ 1x для iOS и 48dp / 48px @ 1x для Android). Гайдлайны сенсорного управления для iOS и Android тоже отличаются друг от друга. Material Design предлагает согласовать все элементы с квадратной базовой сеткой 8dp.
Различия в типографике
Roboto — стандартный шрифт в Android. San Francisco — системный шрифт в iOS. Noto — стандартный шрифт для всех языков в Chrome и Android, которые не поддерживаются Roboto.
Микровзаимодействия
Обе платформы не приветствуют чрезмерное использование анимации — это отвлекает и нервирует пользователя. Фокус и важность. Взаимодействия фокусируют внимание пользователя на том, что действительно важно в приложении, поэтому необходимо использовать их только тогда, когда это необходимо.
Знакомые, плавные и ненавязчивые переходы с одного экрана на другой поддерживают интерес пользователей. Согласованность и иерархия. Важно помнить о том, что взаимодействие помогает пользователям ориентироваться в приложении, показывая, как элементы связаны друг с другом. Движение направляет пользователя и даёт ему полезные рекомендации.
Пользователи привыкли к этим переходам на платформе и воспринимают их как естественные, поэтому важно использовать знакомые взаимодействия, которые выглядят органично на каждой платформе. Хотя основные советы по использованию микроанимаций весьма схожи в Material Design и Human Interface, существуют чётко определённые различия.
iOS
Пользователи iOS могут чувствовать себя дезориентированными, когда движение не имеет смысла или нарушает законы физики. Пользователи iOS привыкли к «незаметным» анимациям, плавным переходам, быстрым изменениям в ориентации устройства и скроллинге, основанном на законах физики.
Human Interface рекомендует — если вы не создаёте иммерсивный пользовательский опыт (например, игру), делайте настраиваемые переходы сопоставимыми со встроенными анимациями. Например, если пользователь открывает экран, опустив его вниз с верхней части экрана, он ожидает, что сможет убрать его, сдвинув вверх.
Android
Категория, к которой относится элемент, влияет на то, как он преобразуется. Согласно гайдлайнам Material Design, при переходах элементы разделяют на исходящие, входящие или постоянные.
Они помогают пользователям ориентироваться. Навигационные переходы — это важный элемент общего взаимодействия с интерфейсом. Экран, из которого он появился, — его родительский элемент. Например, когда при касании элемент расширяется, чтобы заполнить весь экран, действие расширения показывает, что новый экран является дочерним элементом.
Когда один экран появляется с одной стороны, его «брат» смещается в противоположном направлении. Экраны одного типа (например, фотографии в альбоме, разделы в профиле) двигаются синхронно, это подчёркивает связь между ними.
Переходы между экранами осуществляются с помощью изменения таких параметров, как непрозрачность и масштаб. В верхней части приложения опции часто группируются в основные задачи (которые могут не иметь отношения друг к другу).
Но быстрее разработать мобильное приложение с использованием нативных компонентов для обеих операционных систем. Конечно, есть исключения: некоторые приложения iOS следуют рекомендациям Material Design (например, Gmail), а некоторые приложения для Android — гайдлайнам Human Interface (например, Instagram).
Лучше потратить время на дизайн, чем сделать один макет приложения, сочетающий гайдлайны Human Interface и Material Design, а затем потратить много времени на разработку из-за специальных элементов.
