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 (Material Design), то это руководство станет вашим новым лучшим другом ?.

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

Дизайн интерфейса iOS и Android: основные отличия

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

Элемент дизайна	iOS	Android
Минимальный размер цели нажатия	44×44 pt	48×48 dp (Что такое dp?)
Основная навигация приложений	Панель нижней навигации	Вкладки вверху экрана
Дополнительная навигация приложений	Кнопка «More» на нижней панели или интерфейс текущей страницы	Панель нижней навигации или боковое гамбургер-меню
Главная кнопка/действие	Верхняя навигация, с правой стороны	Floating action button
Вторичные действия	Интерфейс текущей страницы	Верхняя навигация, с правой стороны
Список с единственным вариантом выбора	Список с галочкой для выбранного элемента	Список Radio button
Списки множественного выбора	Список с переключателями или список с галочками для выбранных элементов	Список с галочками или список с переключателями
Подтверждение или отмена деструктивного действия	Модальное диалоговое окно подтверждения выбора	Отмена действия посредством временного уведомления на экране

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

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

Если коротко, то «нет».

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

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

Навигация iOS и Android

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

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

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

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

Основная навигация

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

В iOS-приложениях основные пункты назначения перечислены в виде вкладок в нижней части экрана.

1. Всего 2-5 вкладок
2. Они имеют размер шрифта 10
3. Они представляют основные пункты назначения

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

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

С другой стороны, iOS-приложения по умолчанию (1) не поощряют действия, находящиеся на панели вкладок, (2) не имеют вкладок, связанных с профилем или настройками, и (3) показывают поиск последним.

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

Вторичное навигационное меню

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

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

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

Ресурсы: Material Design nav drawer

Действие «Назад»

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

Метод навигации назад (IOS)	Контекст, в котором используется
Нажать «Назад» в верхнем левом углу экрана	Любой экран, на котором присутствует действие «Назад»
Свайп вправо от левого края экрана	Любой экран, на котором действие назад расположено в верхнем левом углу
Нажать «Готово» в верхнем правом углу экрана	Не редактируемые модальные представления
Свайп вниз по контенту	Модальные или полноэкранные представления

Что такое модальные и полноэкранные представления? Хорошо, что вы спросили.

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

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

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

Ресурсы: Undo от iOS; snackbars от Material Design

Типографика iOS и Android

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

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

Системный шрифт iOS называется San Francisco (SF). Это компактный шрифт, разработанный для сохранения удобочитаемости при небольших размерах текста. Вы можете скачать SF здесь.

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

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

Стили текста

Другие стандарты платформ iOS vs. Android

Размер и форма иконок приложений

Вы должны проектировать иконки приложений iPhone в следующих размерах:

Размер иконки	Где используется
180×180 px	Экран «Домой» iPhone для размеров @3x (например, 11 Pro, X, Xs, 8+)
120×120 px	Экран «Домой» iPhone для размеров @2x (например, 11, XR, 8)
1024×1024 px	App Store

В конечном счете, ваша иконка может быть сделана и в других размерах, но, если вы сделаете ее в 60px, то убедитесь, что она хорошо смотрится в размерах 120×120, 180×180 и 1024x1024px.

Проектируйте иконки Android-приложений в следующих размерах:

Размериконки	Где используется	Кратность 48×48 px
48×48 px	Основной экран (medium DPI телефоны)	1x
72×72 px	Основной экран (high DPI телефоны)	1.5x
96×96 px	Основной экран (xhdpi телефоны)	2x
144×144 px	Основной экран (xxhdpi телефоны)	3x
192×192 px	Основной экран (xxxhdpi телефоны)	4x
512×512 px	Большая версия для Google Play store (все устройства)	N/A

Поэтому: 1) создайте красивую векторную иконку с разрешением 48×48 px, 2) увеличьте изображение до 400%, чтобы убедиться, что оно по-прежнему выглядит великолепно, и 3) создайте отдельную версию с разрешением 512×512 px.

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

Ресурсы: рекомендации по иконкам приложений iOS; рекомендации по иконкам приложений Material Design (к сожалению, это ничего не говорит о размерах иконок)

Минимальный размер цели нажатия

Платформа	Минимальный размер цели нажатия
iOS	44x44pt
Android	48x48dp

Обратите внимание, что points Apple («pt») и device-independent pixels Android («dp») функционально эквивалентны. Они просто ссылаются на базовый размер (такой же, как CSS-единица «пиксель»), который измеряется независимо от разрешения экрана.

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

Язык дизайна

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

Чтобы узнать больше о проектировании для iOS, прочтите рекомендации Apple «Human Interface Guidelines».

Чтобы узнать больше о проектировании в стиле Material Design, прочтите материалы на сайте Material Design.

Заключение

Я что-то упустил? Что-то устарело? Пишите на почту [email protected] . Я буду постоянно обновлять это руководство, чтобы оно было наиболее точным и актуальным для перевода мобильных приложений для iPhone и Android.

Источник