Дизайн iOS & Android
Руководство по дизайну мобильных приложений под iOS и Android
Алексей ГуржиевМобильные приложения11.02.2022
https://dstglobal.ru/club/609-rukovodstvo-po-dizainu-mobilnyh-prilozhenii-pod-ios-i-android
Если вы проектируете приложения для iOS и Android (Material Design), то это руководство станет вашим новым лучшим другом ?.
Мы рассмотрим наиболее важные для UX / UI дизайнеров различия между iOS и Android. Если вы создали приложение для одной платформы, то из этой статьи вы узнаете, что нужно, чтобы «перевести» его на другую платформу. Но, это всего лишь рекомендации. Речь идет о переводе «iOS-мышления» на «Android-мышление» и наоборот.
Дизайн интерфейса iOS и Android: основные отличия
Ниже представлены наиболее важные различия, которые UX / UI дизайнеры должны учитывать при «переводе» приложения с iOS на Android или наоборот:
Минимальный размер цели нажатия 44×44 pt 48×48 dp
Дополнительная навигация приложений
Кнопка «More» на нижней панели или интерфейс текущей страницы
Панель нижней навигации или боковое гамбургер-меню
Верхняя навигация, с правой стороны
Верхняя навигация, с правой стороны
Список с единственным вариантом выбора
Список с галочкой для выбранного элемента
Список с переключателями или список с галочками для выбранных элементов
Список с галочками или список с переключателями
Подтверждение или отмена деструктивного действия
Модальное диалоговое окно подтверждения выбора
Отмена действия посредством временного уведомления на экране
Да, и прежде чем мы углубимся в эту тему, давайте ответим на один важный вопрос, который определяет все остальное…
Нужно ли делать приложения для Android и iOS разными?
Apple и Google – очень умные компании с миллионами пользователей. Они будут совершать UX-ошибки, как и любая другая компания, но они не совершат вопиющих ошибок, когда будут определять язык дизайна своих систем. Поэтому, хотя, ниже я и представляю два альтернативных подхода (iOS и Android), ни один из них не является неправильным. Если пользователи могут уверенно перемещаться по вашему приложению и использовать его, никто не может запретить вам использовать вкладки на iOS или модальные представления на Android.
Если ваша цель – создать приложение для обеих платформ так, чтобы оно было нативным для той системы, на которой работает, то это руководство для вас.
Навигация в верхней части экрана
Начнем с вершины – буквально. Каждая платформа имеет разные стандарты для того, что отображается в верхней части большинства экранов.
В iOS крайнее левое действие почти всегда является действием «назад» – последовательно к предыдущему экрану («Шаг 2» возвращает к «Шагу 1»), или иерархически к родительскому экрану (переход от «Inbox» к «Mailboxes»). Кроме того, здесь может быть привязан несвязанный пункт назначения. Заголовок страницы практически всегда присутствует, но сжимается по мере прокрутки представления пользователем. Дополнительные действия на странице могут отображаться, как одно текстовое действие или несколько иконок.
На Android заголовок страницы выравнивается по левому краю. Слева от заголовка страницы не должно быть ничего, но (а) если это страница верхнего уровня и в приложении есть кнопка гамбургер-меню, она расположена там, или (б) если эта страница следует другой последовательно, вы можете (по желанию) добавить кнопку назад.
Основная навигация или «пункты назначения» приложений расположены по-разному.
В iOS-приложениях основные пункты назначения перечислены в виде вкладок в нижней части экрана.
Они представляют основные пункты назначения
Многие популярные сторонние iOS-приложения также соответствуют нескольким дополнительным правилам:
Любая вкладка, представляющая основное действие приложения – например, добавление новой фотографии в фото-приложение – центрируется
Любая вкладка профиля или настроек расположена последней
С другой стороны, iOS-приложения по умолчанию (1) не поощряют действия, находящиеся на панели вкладок, (2) не имеют вкладок, связанных с профилем или настройками, и (3) показывают поиск последним.
Самое большое различие в приложениях Android заключается в том, что одни и те же основные пункты назначения распространены по всему интерфейсу – часто между (a) кнопкой гамбургер-меню, (b) панелью поиска, (c) вкладками или (d) floating action button. Мы поговорим обо всех 4 элементах в следующих разделах. Да, и обратите внимание: Android использует нижнюю навигацию совсем недавно, аналогично iOS – так что вы можете вообще не делать разницу между версиями приложений.
В iOS пункты навигации, которые не помещаются в нижней панели вкладок, могут (a) быть перенаправлены на универсальную вкладку «More» или (b) отображаться как действия в верхнем левом или верхнем правом углу других пунктов назначений.
На Android вторичные навигационные пункты назначения перечислены в боковом меню, доступном при нажатии кнопки гамбургер-меню.
Примечание: хотя Apple специально не рекомендует использовать кнопку гамбургер-меню, у многих сторонних iOS-приложений она есть, и вы можете сами выбрать, использовать ее или нет. Лучше всего избегать элементов, скрывающих важные вещи, потому что очевидное всегда побеждает.
В iOS вы можете перемещаться назад 4 различными способами, в зависимости от контекста.
Контекст, в котором используется
Нажать «Назад» в верхнем левом углу экрана
Любой экран, на котором присутствует действие «Назад»
Свайп вправо от левого края экрана
Любой экран, на котором действие назад расположено в верхнем левом углу
Нажать «Готово» в верхнем правом углу экрана
Не редактируемые модальные представления
Модальные или полноэкранные представления
Что такое модальные и полноэкранные представления? Хорошо, что вы спросили.
Модальные окна – это одноэкранные задачи, которые появляются, на переднем плане, заставляя предыдущий экран отступить на задний план. Вы можете отклонить их, проведя пальцем вниз или нажав «Назад» в верхней части модального окна.
Полноэкранные окна – это медиа-файлы, фотографии или видео, которые занимают весь экран. Их можно закрыть на iOS и Android, свайпом вниз.
В Android навигация назад намного проще: для Android 10 и новее просто проведите пальцем с любой стороны экрана – это всегда будет навигация назад. Для Android 9 используйте вездесущую кнопку «Назад» в левом нижнем углу экрана.
Дизайн элементов управления iOS и Android
Основные кнопки призыва к действию
В iOS основная кнопка страницы обычно находится в правом верхнем углу.
В Android, однако, основная кнопка страницы часто отображается в правом нижнем углу, как кнопка floating action button или сокращенно FAB.
Стоит отметить, что у каждой платформы будут исключения. Давайте рассмотрим их.
Иногда в iOS важные действия страницы отображаются на нижней панели инструментов. Apple любит подчеркивать, что она очень отличается от панели вкладок, но мы-то знаем.
В Android, напротив, иногда важные действия будут отображаться в верхней части экрана.
Как на iOS, так и на Android поиск – очень гибкий элемент управления. Иногда это основной пункт приложения, иногда это крайний вариант использования, и большую часть времени он находится между этими двумя вариантами. Как и следовало ожидать, каждая платформа обеспечивает определенную гибкость. Давайте посмотрим на общие парадигмы.
Одно из различий в стиле поиска между iOS и Android:
- Чтобы отменить поиск, в iOS нажмите «Отмена» или «←» в Android
- Чтобы очистить текущий запрос, но остаться на экране поиска, нажмите «X» в iOS или «X» в Android
Когда поиск является очень важной функцией приложения, iOS и Android сразу отобразят панель поиска. Нажатие на строку поиска откроет отдельный экран.
Если поиск не является критически важным, вы можете получить к нему доступ из других мест.
В iOS поиск обычно отображается среди основных вкладок или действий в верхней навигационной панели.
В Android вы также найдете его в контекстных действиях на верхней панели.
В iOS меню действий могут быть вызваны любой кнопкой или попыткой предпринять какое-либо действие. Они скользят снизу-вверх, в легко доступную область экрана.
В Android, однако, нижние листы появляются только при нажатии на иконку с тремя точками (это иконка Android для «дополнительных параметров»). И обычно появляются снизу только тогда, когда есть много вариантов возможных действий.
Обе платформы имеют свои стандарты для меню действий.
В новой версии iOS (iOS 13) функция, называемая «контекстное меню», отображает связанные действия при нажатии и удержании элемента. Когда отображается контекстное меню, фон размыт.
А в Android многие меню будут отображаться прямо на элементе. В более новых версиях Android меню будет закрывать иконку многоточия.
На мобильных устройствах следует по-разному реализовывать выбор одного варианта и выбор нескольких вариантов из множества.
Для выбора среди относительно небольшого числа вариантов в iOS используйте элемент управления выбора. Вы можете отображать его закрепленным внизу (как показано выше) или встроенным в контент (см. «Date Pickers» ниже).
Для выбора из нескольких вариантов на Android обычно используется раскрывающееся меню (которое отображается на месте) или модальное диалоговое окно со списком вариантов (которое отображается по центру и затемняет фон приложения).
Для более длинных списков вариантов или, когда возможен множественный выбор, как на iOS, так и на Android, часто встречается выделенный «экран выбора». Одна из самых больших ошибок начинающего дизайнера в дизайне мобильных приложений – это не выделение полного экрана для выбора одного варианта из большого количества опций.
Средства выбора даты (Date pickers)
В iOS средства выбора даты имеют вид любого другого элемента выбора, но со столбцом для дня, месяца и года (по желанию).
Android имеет свой собственный элемент выбора даты. Вы можете добавить год, не добавлять его или позволить пользователю самому решить, хочет ли он его добавить.
Ресурсы: iOS picker; Android date picker (обратите внимание на различия в спецификации Material Design)
Стоит отметить, что у iOS нет элемента управления, который визуально напоминает «вкладки». Вместо этого Apple призывает вас использовать сегментированную кнопку для перехода между сестринскими представлениями.
В Android вкладка в стиле «плоский дизайн» используется для того же дисплея.
Ресурсы: сегментированные элементы управления iOS; вкладки Material Design
В iOS предупреждения появляются по центру экрана, но вы также увидите, как предупреждения скользят вверх от нижней части экрана (технически называемой «панелью действий» языком iOS). Деструктивные действия (например, удаление чего-либо) имеют красный цвет.
В Android некоторые предупреждения появляются по центру экрана. Однако, когда они не требуют ввода данных пользователем и должны исчезнуть через несколько секунд, вы можете использовать «snackbars». Snackbars – хороший выбор, потому что (а) они дают вам возможность сообщить пользователю, что его действие было успешным, и (б) вы можете добавить к ним одно или два действия, что делает их идеальным местом для размещения действия «Отменить». Я бы предпочел, чтобы мои пользователи имели возможность отменить действие. Дважды спрашивайте пользователя каждый раз, когда он пытается принять важное решение.
Ресурсы: Undo от iOS; snackbars от Material Design
Хотя нет необходимости устанавливать приложение iPhone или Android с системным шрифтом по умолчанию, полезно знать, что такое системные шрифты. На случай, если вы захотите имитировать стиль нативного приложения.
Системный шрифт iOS называется San Francisco (SF). Это компактный шрифт, разработанный для сохранения удобочитаемости при небольших размерах текста. Вы можете скачать SF здесь.
Системный шрифт Android называется Roboto. Хотя он очень похож на SF, его буквы выше, а межбуквенное расстояние немного больше. Вы можете скачать Roboto здесь.
Кроме того, для многих Android систем установлен собственный Google-шрифт под названием Product Sans, который недоступен для стороннего использования.
В другой статье, подробно описано, как стилизовать текст приложения под iPhone и, как стилизовать текст приложения под Android.
Размер и форма иконок приложений
Вы должны проектировать иконки приложений iPhone в следующих размерах:
Экран «Домой» iPhone для размеров @3x (например, 11 Pro, X, Xs, 8+)
Экран «Домой» iPhone для размеров @2x (например, 11, XR, 8)
В конечном счете, ваша иконка может быть сделана и в других размерах, но, если вы сделаете ее в 60px, то убедитесь, что она хорошо смотрится в размерах 120×120, 180×180 и 1024x1024px.
Проектируйте иконки Android-приложений в следующих размерах:
Основной экран (medium DPI телефоны)
Основной экран (high DPI телефоны)
Основной экран (xhdpi телефоны)
Основной экран (xxhdpi телефоны)
Основной экран (xxxhdpi телефоны)
Большая версия для Google Playstore (все устройства)
Поэтому: 1) создайте красивую векторную иконку с разрешением 48×48 px, 2) увеличьте изображение до 400%, чтобы убедиться, что оно по-прежнему выглядит великолепно, и 3) создайте отдельную версию с разрешением 512×512 px.
Когда вы впервые просматриваете таблицы иконок, нужных для iPhone или Android-смартфонов, это может показаться довольно пугающим. Но, если вы знаете базовый размер, умеете проверять изображения и экспортировать их в различных кратных значениях, это вовсе не сложно.
Ресурсы: рекомендации по иконкам приложений iOS; рекомендации по иконкам приложений Material Design (к сожалению, это ничего не говорит о размерах иконок)
Минимальный размер цели нажатия
Минимальный размер цели нажатия
Обратите внимание, что points Apple («pt») и device-independent pixels Android («dp») функционально эквивалентны. Они просто ссылаются на базовый размер (такой же, как CSS-единица «пиксель»), который измеряется независимо от разрешения экрана.
Приложения Android с большим целевым размером экрана и меньшим количеством пикселей на экран, как правило, выглядят более чистыми и воздушными, чем их собратья для iOS.
Пытаясь показать различия между двумя языками дизайна и философиями, лежащими в их основе, я попытался рассказать об основных частях языка iOS и Material Design, которые похожи. Чтобы узнать больше, вам нужно погрузиться в официальную документацию каждой дизайн-системы.
Чтобы узнать больше о проектировании для iOS, прочтите рекомендации Apple «Human Interface Guidelines».
Чтобы узнать больше о проектировании в стиле Material Design, прочтите материалы на сайте Material Design.