Ios and android app design

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, который недоступен для использования сторонними разработчиками.

Источник

32 отличия дизайна мобильного приложения под iOS и Android

Железный дизайнер из Redmadrobot Design Lab Артур Абраров делится наблюдениями.

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

Чтобы адаптировать дизайн правильно, нужно соблюдать гайдлайны платформ: Human Interface Guidelines (HIG) у iOS и Material Design у Android. И общаться с разработчиками, в идеале подключать их к дизайну как можно раньше, чтобы они могли сразу задать технические ограничения.

Но в чём именно отличается дизайн под iOS от дизайна под Android? В этой статье я разберу 32 конкретных отличия дизайна под iOS и Android. Они поделены на четыре группы:

1. Базовые отличия.
2. Отличия в навигации и паттернах (UX).
3. Отличия в компонентах (UI).
4. Прочие отличия.

Особенности iOS будут слева, а Android — справа или сверху/снизу.

Базовые отличия

Human Interface Guidelines vs Material Design

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

Material же имеет несколько основополагающих принципов: материал как метафора; смелый, графический, сознательный; осмысленная анимация; гибкая основа и кроссплатформенность. Если вы не знакомы с гайдлайнами, лучше их прочесть до того, как ознакомитесь со статьёй.

2. Единицы измерения: pt vs dp

Дизайн iOS-приложения создаётся в pt, а Android-приложения — в dp. Мы, как правило, создаём дизайн в 1x (или mdpi) и выгружаем в Zeplin. Zeplin отображает для iOS дизайн в pt и генерирует иконки и иллюстрации в 2х и 3х. Под Android отображает дизайн в dp и генерирует графику в hdpi, xhpdi, xxhdpi и xxxhdpi.

3. Размер экрана: 320 pt x 568 pt vs 360 dp x 640 dp

Предпочитаю проектировать iOS-приложение под наименьший размер — iPhone 5 с размером экрана 320pt х 568pt. Делаю это, чтобы избежать некорректного отображения контента на маленьких экранах. Некоторые предпочитают проектировать под iPhone 8.

Под Android есть общепринятый размер экрана — 360dp х 640dp.

При дизайне под iOS иногда создаю дизайн и под iPhone X (375pt х 812 pt). Это нужно, чтобы разработчик понимал, как правильно расставить отступы у экрана этого размера. Ещё при дизайне под iPhone X нужно помнить про Safe area — зону, вне которой не стоит размещать контент.

4. Системный шрифт: San Francisco vs Roboto

5. Android Navigation Bar

В отличие от iOS, у Android есть встроенный инструмент навигации назад. Это Android Navigation Bar.

Он либо физически встроен в смартфон, либо является частью интерфейса. С помощью стрелки пользователь перемещается на один шаг назад в хронологической последовательности (reverse chronological navigation). Навигация происходит как внутри приложения, так и между ними.

В начале профессионального пути в качестве дизайнера мобильных приложений я долго мучил Android-разработчиков вопросом: зачем нужны две кнопки назад? Одна есть внизу в Navigation Bar, вторая появляется в Top App Bar при переходе на дочернюю страницу.

Ответ такой. Есть два вида навигации назад: reverse chronological navigation (её осуществляем с помощью стрелки назад в Navigation Bar, зовем её Back).

И upward navigation (её осуществляем с помощью верхней стрелки, зовем её Up).

Представим, что у нас есть путь A-B-C, где A — это материнская страница, а B и С — дочерние. Представим, что пользователь попал напрямую из A в С. Если он нажмёт на кнопку Back, то вернётся на A. Но если нажмёт Up, то сначала попадёт на B — и уже по второму нажатию попадёт на A.

Это сложно реализовать и путанно для пользователя, поэтому сейчас эти две кнопки назад осуществляют одинаковое действие back, как в iOS. То есть если пришли из A в С, то из С вернёмся обратно в А.

6. Важность Elevation в Material

В iOS принципиально нет теней. Как исключение, тени можно обнаружить на главном экране App Store и в Health. Но в целом HIG никак не прописывает использование теней.

В Material тени играют большую роль. Они добавляют интерфейсу третье пространство (ось Z), за счёт чего у каждого компонента появляется своё строгое место на этой оси (от 0 dp до 24 dp). Причём эта ось Z существует не просто на идейном уровне: у разработчиков есть параметр elevation, в котором они задают положение компонента по этой оси.

Навигация и смена состояний сопровождается изменением elevation компонентов. Поэтому при дизайне под Android нам стоит осознанно подходить к созданию теней.

7. Отличия в нейминге

Отличий в нейминге много. Предлагаю рассмотреть эти пять.

a. Tab Bar vs Bottom Navigation Bar

b. Navigation Bar vs Top App Bar

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

c. Segmented Controls vs Tabs

d. Alerts vs Dialogs

Интересно, что в iOS описан только один инструмент предупреждения пользователя — Alerts. В Android их три: Snackbars, Banners и Dialogs.

Snackbar предназначен для сообщений низкой приоритетности и не требует действий. Dialogs блокирует взаимодействие с интерфейсом и требует совершить действие. Banners находятся между ними: не блокирует взаимодействие, но требует совершить действие.

e. Touch ID vs Android Fingerprint

Отличия в навигации и паттернах (UX)

8. Способы верхнеуровневой навигации

Начнём с самого верха. iOS рекомендует только один способ верхнеуровневой навигации — через Tab bar. У Android в ответ есть три способа: Navigation Drawer, Bottom Navigation Bar и Tabs.

Если количество верхнеуровневых страниц больше пяти, используем Navigation Drawer. Если меньше — Bottom Navigation Bar. Tabs нечасто применяют для этой навигации, но способ нам доступен. Однако Material рекомендует не совмещать Tabs и Bottom Navigation Bar, так как взаимодействие с данными компонентами влияет на контент страницы и пользователь может запутаться.

9. Отличия в поведении Tab Bar и Bottom Navigation Bar

Это отличие предлагает Material.

Если вы в iOS перейдёте от материнской страницы к дочерней, потом через Tab Bar переключитесь на другую материнскую страницу, то по возвращении на первую материнскую страницу вы всё также будете находиться на дочерней.

В Android всё строже — при переключении через Bottom Navigation Bar вы всегда переключаетесь между материнскими страницами. Если до этого вы были на дочерней, она сбросится.

Наши разработчики Android уверены, что такое поведение системы неверное. В случае переключения по Bottom Navigation стоит сохранять открытые дочерние страницы, как на iOS.

10. Особое поведение Tabs у Android

Это потому, что страницы табов находятся на одной высоте (elevation).

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

В целом эти два компонента не заменяют друг друга полностью. Segmented control — это control, который управляет контентом страницы. А Tabs — инструмент навигации.

Поэтому стоит советоваться с разработчиками перед тем, как при адаптации рассматривать их как равноценные компоненты. Иногда корректнее заменять андроидовские Tabs на Page Control. Всё зависит от контекста.

11. Отличия в появлении дочернего экрана

В iOS появление дочернего экрана (не считая модалок) происходит только одним образом: дочерняя страница появляется справа поверх материнской с эффектом slide in. Возвращение на материнский экран происходит с эффектом slide out.

Material рекомендует показывать пользователю иерархическую взаимосвязь материнской и дочерней страницы с помощью осмысленной анимации.

Компонент, при взаимодействии с которым пользователь переходит к дочерней странице, раскрывается и покрывает собой материнскую страницу. Так пользователь понимает, откуда и куда он перешёл, почему это произошло и куда он вернётся при нажатии на кнопку «Назад».

Переход происходит с помощью Standard Easing.

12. Особый паттерн вызова Navigation Drawer

При проектировании приложения с Navigation Drawer важно помнить, что этот компонент «забирает» себе жест edge swipe слева вправо. Поэтому не стоит добавлять этому жесту другую логику.

В iOS у этого жеста есть устоявшийся паттерн перехода с дочерней на материнскую страницу. Этот паттерн постепенно перекочевал и во многие андроидовские приложения.

13. Поведение контента при скролле

По HIG контент в iOS при скролле ведёт себя так: Navigation Bar уменьшается в ширине, исчезает Tool Bar. Но в целом iOS-разработчики могут настроить любое поведение контента и баров при скролле.

Material предлагает больше вариантов поведения при скролле. Например, Bottom Navigation Bar, Search и Bottom App Bar при скролле могут исчезать.

Top App Bar может либо исчезать, либо подниматься выше основного контента.

Разное поведение поиска

Интересно, что HIG относит поиск к барам и называет его Search Bar. В Material мы находим поиск в разделе Navigation, не в Components. То есть для Material поиск — это ещё один способ навигации.

Как в iOS, так и в Android поиск может статично присутствовать на экране и, как правило, прибит к Navigation Bar или Top App Bar.

На обеих платформах поиск может быть в виде иконки, только в iOS иконка раскрывается в самостоятельный компонент Search Bar, а в Android поиск раскрывается внутри Top App Bar.

Особенность поиска в iOS — его можно «спрятать» под Navigation Bar и вызывать по жесту Swipe down. Такой же жест типичен и для рефреша (pull to refresh), поэтому не стоит вызывать поиск и рефреш по этому одному действию.

Отличия в компонентах (UI)

15. Каких компонентов нет в iOS

В iOS нет многих нативных компонентов Android. Пробежимся по ним.

a. Navigation Drawer

iOS в принципе не признаёт бургер-меню. Как говорили раньше, в iOS верхнеуровневая навигация только по Tab Bar.

b. Backdrop

Backdrop — самый удивительный для меня компонент в Material. На момент написания статьи Android ещё только планирует реализовать его как нативный. В целом при изучении компонентов Material стоит проверять, доступны ли они уже для использования.

Сам Material любит этот компонент. Посмотрите, например, на победителей Material Design Award 2019.

c. Banner

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

d. Snackbar

Как и Banner, Snackbar — не нативный для iOS. Snackbar применяют, чтобы донести до пользователя короткое сообщение о результате его действия.

e. Chips

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

f. Bottom App Bar

Тут можно поспорить, что у iOS есть похожий компонент — Tool Bar. Но они разные, вот почему: Toolbar — это бар для контекстных действий. Например, при редактировании списка сообщений в Messages появляется Tool Bar с действиями Read All и Delete.

Bottom App Bar — это перемещение Top App Bar вниз с теми же действиями верхнего уровня: открытие Navigation Drawer, вызов поиска и так далее. Ещё в Bottom App Bar мы размещаем FAB.

g. FAB

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

Если вы используете в Android FAB для основного действия на экране, то в iOS это основное действие стоит разместить наверху в Navigation Bar справа (смотри пример: iMessages).

h. Bottom Navigation Drawer

Разновидность Navigation Drawer, типичная только для Android. Вызывается нажатием кнопки бургер-меню в Bottom App Bar.

i. Side Sheet

Хоть Material и разрешает использовать этот компонент в мобильном приложении, я бы рекомендовал заменить его на более привычный Bottom Sheet.

j. Expanding Bottom Sheet

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

k. Standard Bottom Sheet

Standard Bottom Sheet — разновидность Bottom Sheet, и его нет среди компонентов iOS.

16. Каких компонентов нет в Android

Теперь рассмотрим, каких компонентов не найти в библиотеке Android.

a. Page Controls

Page Control показывает, на какой из страниц находится пользователь. Его нет среди нативных компонентов Android.

b. Toolbar

Toolbar привычен только для iOS.

c. Steppers

Steppers — стандартный control iOS, не описан в Material. Используем его для ввода небольших значений. Пример: количество копий при печати.

d. Popover

Popover — всплывающая панель, которая в основном используется на iPad.

В iOS есть одно стандартное применение Popover — настройка текста в ридерах или браузерах.

17. Разные Status Bar

Ещё у Status Bar Android есть такая особенность, когда приходит уведомление из приложения, в Status Bar появляется иконка этого приложения. В iOS такого нет.

18. Refresh Content Controls vs Swipe to refresh

Рефрешеры вызываются одним и тем же жестом swipe down на обеих платформах. Но в iOS Refresh Content Control «толкает» остальной контент вниз, в то время как Swipe to refresh у Android появляется поверх контента. Кроме того, рефреш iOS при скроле контента исчезает, а у Android остаётся видимым.

19. Разные Control

Ещё Material предлагает использовать родительский чекбокс, когда нужно дать пользователю возможность быстро выбрать все варианты.

20. Разный вид стрелки «Назад» и положение заголовка

21. Разный вид иконки трёх точек

22. Разный вид Picker

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

Material также рекомендует давать пользователям возможность вводить дату с помощью Input Field-а.

23. Разные Text Fields

HIG куда менее требователен к Text Fields, по сравнению с Material.

Отличия

В iOS Label находится внутри поля ввода и исчезает во время ввода текста. Material рекомендует поднимать Label при вводе текста.

Схожее

Обе платформы советуют при необходимости добавлять Clear Button.

Что ещё просит Material

Material также рекомендует выделять Label и полосу под Text Field основным цветом — это помогает понять, что поле выделено. Material описывает поведение поля при ошибке ввода. В Material на выбор есть две формы: Filled и Outlined.

24. Context Menus vs Menus

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

Menus Android применяется в большем числе кейсов: оно предлагает контекстные действия как для выбранного элемента, так и для всей страницы в целом; используется как инпут с несколькими вариантами на выбор (дропдаун меню); применяется для редактирования текста. Context Menus — компонент только iOS. А Menus Android можно использовать как в мобильном приложении, так и на десктопе.

25. Action View/Activity View vs Modal Bottom Sheet

26. Edit Menus vs Text Selection Tool Bar

Помимо визуального отличия Edit Menus и Text Selection Tool Bar отличаются следующим: при долгом нажатии в Android пользователь может продолжить выделение текста. В iOS после долго нажатия возникает лупа для точного выбора места в слове.

Также Android отличается от iOS тем, что при вызове дополнительных действий Text Selection Tool Bar принимает форму Menus.

27. Разный размер divider

В iOS это 0,5 pt, в Android — 1 dp.

Прочие отличия

28. Разные требования к размеру зоны нажатия

По гайдлайнам минимальная зона нажатия в iOS — 44 x 44 pt, а в Android — 48 x 48 dp.

29. App Store vs Google Play

Ваше приложение для iOS будут скачивать из App Store. Приложение для Android — из Google Play. Чтобы разместить приложение в сторах правильно, нужно соблюдать их требования. Требования App Store стоит прочесть здесь, а Google Play — здесь. Там много особенностей, поэтому рекомендую изучить перед публикацией.

30. Особый паттерн в iOS — Undo and Redo

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

31. Отношение к Branded Launch

32. Дополнительные темы Material Design

На сайте Material раскрыты ещё и такие темы, как: Data Formats (разные форматы данных), Data Visualization (правильная инфографика), Empty States (дизайн пустых состояний), Offline States (интерфейс при отсутствии интернета), Accessibility (доступный дизайн) и Bidirectionality (дизайн для читающих справа налево).

Заключение

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

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

А если мы хотим внедрить новое, кастомное решение, знание гайдлайнов помогает аргументировать это нововведение.

Итого: знание гайдлайнов и их отличий — важный навык дизайнера мобильных приложений.

Какие ещё отличия вы знаете? Поделитесь ими в комментариях.

Источник