Дизайн Вадим Скворцов
6 969

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

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

В закладки
Аудио

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

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

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

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

Различия в шаблонах навигации

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

Панель навигации Android

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

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

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

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

Различия между шаблонами навигации в приложениях iOS и Android

Гайдлайны 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.

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

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

Слева Android, справа iOS

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

Различия между bottom sheets в Android и action sheets в iOS

В 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 привыкли к «незаметным» анимациям, плавным переходам, быстрым изменениям в ориентации устройства и скроллинге, основанном на законах физики. Пользователи iOS могут чувствовать себя дезориентированными, когда движение не имеет смысла или нарушает законы физики.

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

Android

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

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

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

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

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

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

{ "author_name": "Вадим Скворцов", "author_type": "editor", "tags": [], "comments": 21, "likes": 30, "favorites": 90, "is_advertisement": false, "subsite_label": "design", "id": 50643, "is_wide": true, "is_ugc": false, "date": "Mon, 12 Nov 2018 13:19:41 +0300" }
{ "id": 50643, "author_id": 120027, "diff_limit": 1000, "urls": {"diff":"\/comments\/50643\/get","add":"\/comments\/50643\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/50643"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "possessions": [] }

21 комментарий 21 комм.

Популярные

По порядку

Написать комментарий...
29

Как же надоел этот уродский Material Design, прямо тошнит уже от него.

Ответить
12

Как же надоел этот уродский интерфейс iOS, прямо тошнит уже от него.

Ответить
1

+ за смелый комментарий))

Ответить
0

Это не смелый, а объективный комментарий. Чего стоит хотя бы кнопка "Dismiss", Отменить в переводе, которая возникает после действия. Это же дебилизм. А это уродское меню Share, куда еле влазят 4 значка? Ебана врот, мой телефон по мощности сравним с каким-нибудь Intel i5 230 и GTX560, а интерфейс как в Экселе нарисован.

Ответить
21

Имхо, самое тупое - это как раз барабан выбора даты. Уродливее и неудобнее я не встречала в жизни.
Поди найди следующий четверг, когда на барабане не указаны дни недели, а?? А дату через 15 дней - щелчки отсчитывать? А если 11 ноября хочешь выставить дату 10 февраля, то сначала нужно выставить февраль, а потом вернуться к числам. А если 10 февраля будет среда, то назначить эту дату мне будет неудобно. А как я пойму, что это среда, если п.1?

Почеу нельзя просто использовать календарик? Почему???...

Ответить
9

Люто плюсую, iOS барабан это извращенная фантазия создателя.

Ответить

6

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

Ответить
3

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

Ответить
0

Вы сейчас точно про мобильные приложения? На сайтах да, все так как вы говорите.
Но в приложениях далеко не так, и я согласен с Артемом - долой этот гамбургер в приложениях

Ответить
1

Чтоб не тянуться в угол там из коробки свайп есть, если конечно бургер не захардкоден

Ответить
0

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

Ответить
0

Я б в иОСе никоем случае не ставил бургер это совсем не пояблочному, нижний навбар и если вкладок больше 5 тогда да справа бургер но он снизу тянуться не надо

Ответить
0

У ВК, имхо, идеальный вариант — bottom nav + одна иконка, чтобы открыть экран с тем, что не влезло в навбар.

Ответить
0

У фб слизали, а так вообщем эпл говорит в своем гайде если действительно больше 5 вкладок ставить бургер но не желательно

Ответить
–1

В иОСе можно два раза тапнуть по кнопке хом и экран опуститься

Ответить
4

Сложилось впечатление, что если не хватает ресурсов вести две ветки дизайна приложения, то проще все лупить в материале. Он везде применим.

Ответить
1

Все эти круглые атомы тормозят прогресс! 13,5 миллиардов лет они круглы, вау!!

Ответить
–6

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

Ответить
1

Можете предложить что-то лучше?

Ответить
2

Шар — идеальная форма

Ответить

0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Голосовой помощник выкупил
компанию-создателя
Подписаться на push-уведомления
{ "page_type": "default" }