Дизайн мобильного приложения Android и iOS: основные подходы

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

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

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

Human Interface Guidelines

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

Интерфейсы HIG используют подложки, размытость и градиенты, однако они не мешают пользоваться приложениями и не отвлекают от сути. Особое внимание Apple уделили микровзаимодействиям – реакциям интерфейса, которые помогают пользователям ориентироваться в приложениях (например, направляют к нужному действию или сообщают об ошибке). Микровзаимодействия на устройствах с iOS реализованы в виде цветовых индикаторов, звуков и вибрации.

Основные принципы Human Interface Guidlines:

• Элементы интерфейса должны помочь пользователю отделить важное от второстепенного;
• Управление не только с помощью кнопок меню, но и жестов: свайп (смахивание) вверх сворачивает приложение, свайп влево – позволяет перейти в предыдущее меню;
• Анимация не должна отвлекать пользователя от основного взаимодействия.

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

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

Material Design для Android

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

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

Хороший пример скевоморфизма – приложение-читалка iBook. Разработчики не стали придумывать ничего нового, и просто нарисовали «цифровые» книжные полки с текстурой, имитирующей дерево, а на полках разместили объемные книги.

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

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

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

Есть у него и ограничения. Материал не может вести себя как газ, резина или жидкость. И, несмотря на то, что он похож на бумагу, материал не может сворачиваться в трубочку. Объясняется это тем, что все это – свойства из реального мира, а не цифрового.

Философия Material Design в том, что разработчик может играться с материалом как ему угодно – конечно, в рамках установленных Google правилам.

Основные принципы Material Design:

• Иерархия элементов демонстрируется за счет расположения объектов на разных слоях и отделяющих их друг от друга теней;
• В основе типографики Material Design – принципы печатного дизайна;
• Анимация элементов подчиняется законам физики;
• Поверхности двигаются в трех измерениях и подчиняются реальным законам физики.

Интерфейс, созданный в соответствии с принципами Material Design, похож на непрозрачные карточки, их можно легко двигать и менять размер. Анимация подсказывает, как пользователь может взаимодействовать с интерфейсом.

В гайдлайне Material Design даются четкие рекомендации по дизайну – от размера кнопок до внешнего вида иконок.

Операционные отличия Material Design и HIG

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

Нейминг

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

Так, панель верхнеуровневой навигации называется Tab Bar и Bottom Navigation Bar на iOS и Android соответственно, при этом они также отличаются в поведении. Tab bar позволяют переключаться между разделами приложения, при этом положение в каждом разделе останется на том же месте. Bottom Navigation, в свою очередь, отображает от трех до пяти иконок (опционально с текстом). По клику на каждую иконку пользователь попадает на верхнюю часть страницы раздела, ассоциирующегося с этой иконкой.

Navigation Bar и Top App Bar сообщает пользователю, на каком экране приложения он находится, и позволяет вернуться на предыдущий.

Segmented Controls и Tabs. Горизонтальные элементы управления из двух и более сегментов, представленных кнопками. Segmented Controls управляют контентом страницы, а Tabs – инструмент навигации.

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

Эти два элемента не заменяют друг друга, поэтому при адаптации дизайна следует проконсультироваться с разработчиками – возможно, будет логичнее заменить Tabs на другой элемент, например, Page Control.

Отдельно стоит поговорить об элементах предупреждения пользователя. Изначально их можно разделить на два вида:

Alerts – предупреждают пользователя о том, что что-то произошло, и пользователю нужно предпринять какое-то действие. Появляются в контексте действия, совершаемого пользователем в настоящее время.

Notifications – уведомляет пользователя о том, что что-то произошло, и как правило дает сопроводительную информацию. Не требует мгновенного действия и может не относиться к совершаемому в настоящее время действию. Они также называются push-уведомления или «пуши».

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

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

На Android этот компонент называется представлен в трех формах: Snackbars, Banners и Dialogs.

• Snackbars – короткое сообщение о совершенном в приложении действии, может содержать действие (например, Retry или Undo);
• Dialogs – элемент, который сообщает пользователю о действии;
• Banners – требуют совершить действие, но не блокируют интерфейс.

Touch ID, Face ID и Android Fingerprints. Технологии, которые используются для разблокировки смартфонов, подтверждения оплаты и т.д. Отличаются не только названием, но и реализацией и техническими особенностями.

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

Верхнеуровневая навигация

На Android есть три способа верхнеуровневой навигации, которые используются в зависимости от количества страниц.

• Navigation Drawer – более 5 верхнеуровневых страниц;
• Bottom Navigation Bar – до 5 верхнеуровневых страниц;
• Tabs – больше 2 страниц.

Tabs реже применяется для этого уровня навигации. Также не рекомендуется совмещать Bottom Navigation Bar и Tabs, это может запутать пользователя.

На iOS всего один способ такой навигации – Tab bar.

Tab Bar и Bottom Navigation Bar

В iOS пользователь может переходить от родительской страницы к дочерней, а потом через Tab bar переключиться на другую материнскую страницу. Для примера опишем навигацию в App Store:

1. Зайдя в приложение, оказываемся на главной странице – «Сегодня»;
2. Пролистаем ее и остановимся на подборке интересных игр;
3. По Tab Bar перейдем на материнскую страницу с играми – откроем заинтересовавшую и перейдем на дочернюю страницу;
4. Снова переключимся на главную – окажется, навигация осталась на том же месте, где мы покинули страницу во втором пункте;
5. Вернемся на вкладку игр – увидим, что на ней все еще открыта дочерняя страница из третьего.

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

Bottom Navigation Bar на Android, в свою очередь, позволяет переключаться только между материнскими страницами – дочерние сбросятся.

Дочерний экран

Дочерний экран в HIG появляется поверх материнского, справа налево, с эффектом slide in. Возвращение на материнский экран – слева направо с эффектом slide out.

Material Design демонстрирует связь материнской и дочерней страницы с помощью анимации раскрытия компонента, с которым взаимодействовал пользователь. Так пользователь понимает, откуда он пришел, куда – и куда сможет вернуться, нажав на кнопку «Назад».

Navigation Drawer и Edge Swipe

Edge Swipe – жест, который «начинается» под краем экрана. В Material компонент Navigation Drawer может быть вызван нажатием на кнопку в верхней левой части экрана, однако он также забирает себе edge swipe слева направо. Поэтому при проектировании приложения следует позаботиться о том, чтобы к этому жесту не было привязано другой логики.

На приложениях для iOS жест Edge Swipe, как правило, ведет с дочерней на материнскую страницу, однако найти этот жест можно и в некоторых приложениях на Android.

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

Human Interface Guidelines предполагает уменьшение Navigation Bar и исчезновение Tool Bar при прокрутке. Однако это не обязательное условие, поэтому разработчики могут настроить любое поведение компонентов.

Material Design предлагает больший простор:

• Bottom Navigation Bar, Bottom App Bar и Search могут исчезать;
• Top App Bar может подниматься выше основного контента или исчезать.

Поиск

Search Bar в HIG рассматривается как один из баров, а Material Design рассматривает поиск как один из способов навигации.

Search может быть представлен в двух видах:

• Статичная часть Navigation Bar или Top App Bar;
• Иконка, раскрывающаяся внутри Top App Bar или как самостоятельный компонент Seach Bar.

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

Компоненты UI

Нет в iOS, но есть в Android:

• Backdrop – появляется позади остальных экранов приложения, отображает контекстную информацию и действия; на момент написания статьи – на стадии beta-тестирования;
• Banner – сообщает пользователю важную информацию, например, об ошибках, и предлагает связанные с ней действия;
• Snackbar – сообщает короткие сообщения о результатах действия пользователя;
• Chips – используется для ввода информации, описаний и действий;
• Bottom App Bar – перемещенный вниз Top App Bar, в котором доступны действия верхнего уровня;
• FAB – кнопка основного действия на экране – создание нового письма в приложении email;
• Bottom Navigation Drawer – бургер-меню, расположенное в Bottom App Bar;
• Side Sheet – дополнительный контент и действия, привязана к правой или левой части экрана;
• Expanding Bottom Sheet – при нажатии расширяется и дает доступ к ключевому действию или фиче;
• Standard Bottom Sheet – дополнительный контент.

Компоненты, которых нет в Android, но есть в iOS:

• Page Controls – показывает, на какой странице находится пользователь;
• Toolbar – быстрый доступ к часто используемым командам (добавление в избранное, поделиться, редактировать;
• Steppers – используется для ввода небольших значений;
• Popover – всплывающая панель, например, для настройки текста (чаще используется на iPad).

Тени и Elevation

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

А вот в Material Deisgn это важный элемент интерфейса. Тени добавляют третье пространство – ось Z, – таким образом «углубляя» экран. Так у каждого компонента на экране появляется свое место на этой оси (от 0 до 24 dp). При этом это пространство существует не на идейном уровне – разработчикам доступен параметр elevation, с помощью которого можно задать положение компонента на оси Z.

Параметр Elevation есть у всех поверхностей и компонентов. Это позволяет:

• позволяет поверхностям перемещаться на передний и задний план других поверхностей, например – контент скроллится позади bars;
• отражает пространственные взаимоотношения – например, «парящая» кнопка действия отделяется от карточек;
• фокусирует внимание на самом возвышенном элементе, так, например, диалоговые окна появляются поверх других поверхностей, которые полностью уходят в тень.

Компоненты могут менять уровень возвышения в зависимости от действий пользователя или системных событий. Например, при нажатии на кнопку, ее elevation увеличивается с 2 до 8 dp.

Одинаковые компоненты

Status Bar

Информирует о времени, уровне заряда, качестве связи и WiFi. На iOS и Android различается визуальным оформлением и расположением иконок-индикаторов.

На Android статусная панель также уведомляет о новых событиях.

Refresh Content Contols / Swipe to Refresh

Чтобы обновить страницу, на обеих страницах нужно сделать свайп вниз. Однако, оформлено это действие по-разному.

На iOS свайп вниз «толкает» контент вниз, а на Android поверх контента появляется иконка Swipe to Refresh.

Еще одно отличие состоит в том, что при скролле страницы на iOS Refresh исчезает, на Android остается видимым.

Selection controls/Checkboxes

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

В Material чекбоксы выполнены в трех видах:

• checkboxes – квадратные с галочками, используются в списках с возможностью выбора нескольких вариантов;
• radio button – круглые, используются в списках с возможностью выбора только одного варианта;
• switches – переключатели между противоположными опциями (включить/выключить).

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

Положение заголовков и стрелки «Назад»

Так как в iOS стрелка «Назад» подписывается названием предыдущего экрана, у нее нет черточки посередине.

Если заголовок на предыдущем экране был стандартным, то заголовок переходит влево к стрелке, а в центре появляется название нового окна. Слишком длинное название страницы заменяется на слово «Назад» или Back, а широкие заголовки переезжают вверх.

Три точки

Эту иконку называют «кебаб-меню», потому что она напоминает одноименное блюдо. На обеих платформах под эту иконку скрывают малоиспользуемые действия и ссылки, но отличаются расположением: горизонтально в HIG и вертикально – в Material.

Picker

В iOS для выбора времени или даты используются барабан и календарь (для будильника или напоминаний, например). В Android для выбора даты используется календарь. Также на обеих платформах прямой ввод значений с помощью Input Field.

Text Field

В Material Design:

• label поднимается при вводе текста;
• label и полоса под text field выделяются основным текстом, чтобы показать пользователю, что поле активно;
• при ошибке ввода Material выделяет label и линию под полем красным.

В iOS:

• label расположен внутри поля ввода и исчезает при наборе текста.

При необходимости на обеих платформах можно использовать Cleat Button.

Context Menus / Menus

Впервые компонент Context Menus появился в iOS 13. Под него «прячут» несколько дополнительных контекстных действий, связанных с выбранным элементом.

В Android есть похожий компонент – Menus, который может применяться как к конкретным элементам, так и для всей страницы. Применять Menu можно как для редактирования текста, так и для dropdown menu, ввода с несколькими вариантами на выбор.

Action View, Activity View / Modal Bottom Sheet

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

Edit Menus / Text Selection Tool Bar

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

В Android после долгого нажатия пользователь может продолжить выделение текста, просто проведя по необходимой части текста. Дополнительные действия в Text Selection Tool Bar открываются через кебаб-меню.

Dividers

Разделители отличаются размером. На iOS – 0,5 pt, а на Android – 1 dp.

Другие отличия

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

Если перед разработкой стоит внимательно изучить гайдлайны, то перед публикацией – требования сторов (магазинов приложений). Приложения на iOS будут скачиваться из App Store, приложение для Android – из Google Play. У каждого стора свои особенности, которые следует учесть перед размещением приложения.

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

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

У операционных систем также разный подход к Launch Screen. Ни HIG, ни Material, не запрещают их, однако приводят некоторые правила их отображения. Так, HIG рекомендует «пустить» пользователя на первый рабочий экран, как только запустится приложение – поэтому брендированный экран запуска отображается всего на секунду.

Есть и ограничения для платформ. Launch Screen можно использовать только на iOS, iPadOS и tvOS, а на watchOS и macOS они не рекомендуются.

Material выделяет два вида Launch Screen.

• Branded launch – на этой странице отражается логотип бренда или другие элементы, по которым бренд можно узнать. Гайдлайн не рекомендует использовать текст или слоганы этом экране;
• Placeholder UI – показывает превью интерфейса приложения без возможности взаимодействовать с ним. Используется для приложений с коротким загрузочным временем и для приложений, не нуждающихся в промо.

Заключение

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