Нативные элементы ios android

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

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

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

Вот список тем, о которых мы поговорим. Пропустите его или дотошно изучите. Решение за вами.

1. Обзор основных отличий.
2. Навигация.
3. Элементы управления.
4. Типографика.
5. Другие стандарты платформ.

UI-дизайн для iOS vs. Android: основные различия

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

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

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

Если кратко, то — нет.

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

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

А теперь давайте углубимся в тему.

Сравнение навигации в iOS и Android

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

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

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

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

Основные «пункты назначения»

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

В приложениях для iOS они представлены в виде вкладок/табов в нижней части экрана:

• от 2 до 5 вкладок;
• названия набраны 10-м кеглем;
• вкладки представляют собой основные места назначения.

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

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

2. Любая вкладка, относящаяся к профилю или настройкам, появляется последней.

3. Поиск находится на втором месте.

С другой стороны, в стандартных приложениях для iOS:

1. Не поощряется размещение действий на вкладках.
2. Вкладки не содержат разделы, относящиеся к профилю или настройкам.
3. Поиск идет последним.

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

Источники: iOS панель вкладок, Material Design принципы навигации (здесь больше теории).

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

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

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

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

Источник: Material Design Navigation drawer.

Возврат к предыдущему экрану

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

Что такое модальные и полноэкранные окна? Сейчас расскажу.

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

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

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

iOS vs. Android: дизайн элементов управления

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

В iOS главная кнопка на экране обычно расположена в верхнем правом углу.

В Android главная кнопка на экране в большинстве случаев расположена в нижнем правом углу в виде FAB (англ. floating action button — плавающая кнопка действия. — Прим. пер.).

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

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

Поиск

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

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

• чтобы отменить поиск, нужно нажать Cancel в iOS или ← в Android;
• чтобы очистить поле ввода, нужно нажать на круглую пиктограмму крестика в iOS или на пиктограмму крестика в Android.

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

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

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

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

Источники: iOS search bars, Material Design search pattern.

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

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

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

У обеих платформ есть стандарты для всплывающих меню.

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

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

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

На мобильном устройстве стоит отличать выбор из нескольких вариантов от выбора из большого количества вариантов.

В iOS для реализации выбора из нескольких вариантов используйте элемент управления picker («подборщик» — Прим. пер.). Его можно закрепить внизу на экране (как показано выше) или встроить в контент (см. «Выбор даты»).

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

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

Выбор даты

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

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

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

Вкладки

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

На Android вкладки выполнены в привычном виде.

Источники: iOS segmented controls, Material Design tabs.

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

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

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

Источник: iOS Undo, Material Design snackbars.

IOS vs. Android: типографика

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

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

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

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

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

Источник

Различие в проектировании нативных приложений iOS и Android

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

Нативные мобильные приложения для iOS и Android имеют специальные функции, зависящие от операционной системы. Руководства от Apple и Google рекомендуют по возможности использовать стандартные для платформы средства навигации: элементы управления страницами, панели вкладок, сегментированные элементы управления, представления таблиц, коллекций и разделенные представления. Обычно пользователи знакомы с тем, как эти элементы управления работают на каждой платформе, поэтому, если вы используете стандартные элементы управления, ваши пользователи будут интуитивно знать, как пользоваться вашим приложением. Мы фокусируемся на основных различиях между паттернами дизайна взаимодействия на iOS и Android, чтобы выяснить, почему внешний вид приложений отличается на каждой платформе. Мы также предоставляем шаблоны дизайна приложений и примеры мобильных приложений, которые помогут вам визуализировать то, о чем мы говорим.

Различия в паттернах навигации

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

Глобальная панель навигации (Android)

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

Кнопка «Назад» (iOS)

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

Свайп слева-направо – возврат назад (iOS)

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

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

Свайп слева-направо — переключение между вкладками (Android)

Отличия навигационных паттернов приложений для iOS и Android

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

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

Слева – ящик навигационного меню; справа – вкладки (Material Design)

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

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

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

Вверху слева – сегментированный элемент управления iOS; Внизу справа – панель вкладок iOS (HIG)

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

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

Собственный вид стандартных элементов управления требует дополнительных усилий и времени, и не знаком пользователям

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

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

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

Слева – стандартные элементы управления iOS; справа – стандартные элементы управления Android Слева стандартные элементы выбора iOS; справа – стандартные элементы выбора Android

Стили кнопок в iOS и Android

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

Слева – стандартные кнопки Material Design; справа – стандартные кнопки HIG

Также есть еще один тип кнопок – floating action buttons на Android и кнопки призыва к действию на iOS. Floating action button представляет основное действие в приложении. Например, кнопка «Написать» в почтовом приложении или кнопка написания сообщения в приложении социальной сети могут быть floating action buttons. Аналогичным дизайном для основного действия в приложениях iOS является кнопка призыва к действию, которая расположена в центре панели вкладок.

Слева – стандартная floating action button в iOS; справа – стандартная кнопка призыва к действию в Android

Различия между нативным слоем bottom sheets в Android и слоем action sheets в iOS

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

Слева – стандартные нижние листы Material Design; справа –листы активности в приложении iOS

Различия в сенсорных целях и сетках

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

Различия в типографике

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

Слева – типографика Material Design; Справа – типографика HIG

Микровзаимодействия

Когда дело доходит до дизайна, обычно для пользователей первое впечатление является последним.

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

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

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

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

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

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

iOS

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

Android

В соответствии с Material Design Guidelines, в процессе перехода преобразуемые элементы интерфейса классифицируются как исходящие (outgoing), входящие (incoming) или постоянные (permanent). Категория, к которой относится элемент, влияет на то, как он преобразуется.

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

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

Пример перехода от родительского экрана к дочернему (Material Design Guidelines)

С родительского экрана встроенный дочерний элемент при касании поднимается и раскрывается.

Переход задает фокус на дочернем экране, одновременно укрепляя отношения между дочерним и родительским элементами.

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

Вкладки находятся на одном уровне и перемещаются вместе по горизонтали

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

Выводы

Конечно, есть исключения: некоторые приложения iOS следуют рекомендациям Material Design Guidelines (например, Gmail), а некоторые приложения для Android следуют рекомендациям Human Interface Guidelines (например, Instagram).

Слева – Gmail для iOS; Справа – Gmail для Android Слева – Instagram для iOS; Справа – Instagram для Android

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

SteelKiwi – компания по разработке программного обеспечения и дизайна приложений. Если вы хотите узнать, как создать собственное приложение, свяжитесь с нами! Мы следуем лучшим практикам дизайна Android и придерживаемся Human Interface Guidelines от Apple.

Хотите увидеть примеры дизайна приложений, в которых мы использовали нативные элементы, а также пользовательские интерфейсы с мощным стилем? Посетите наши страницы на Dribbble и Behance, чтобы лучше понять, на что мы способны.

Источник