Дизайн для мобильных: iOS vs Android — в чём отличия и что важно знать UX/UI дизайнеру

Кнопка «Назад» слева или справа? Навигация внизу или вверху? Заливка кнопки или обводка? Если вы проектируете мобильное приложение, эти вопросы встают каждый день. И ответы для iOS и Android будут разными.

Ключевая статистика: 72% пользователей ожидают, что приложение будет вести себя так же, как другие приложения на их устройстве. Игнорирование платформенных конвенций — одна из главных причин низких оценок в сторах и высокого churn.

Эта статья — практическое руководство по различиям между iOS (Human Interface Guidelines) и Android (Material Design 3). Разберём навигацию, типографику, кнопки, жесты, модальные окна и другие ключевые элементы. С примерами, размерами и рекомендациями для кроссплатформенных проектов.

Философия дизайна: HIG vs Material Design

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

Apple Human Interface Guidelines (HIG)

Философия Apple строится на трёх принципах:

• Clarity (Ясность): Текст читаем в любом размере, иконки точны и понятны, декор минимален, фокус на функциональности

• Deference (Уважение к контенту): Интерфейс помогает пользователю понять контент и взаимодействовать с ним, но не конкурирует с ним

• Depth (Глубина): Визуальные слои и реалистичная анимация создают иерархию и помогают понять структуру

HIG делает акцент на минимализме, чистых линиях и читаемости. Интерфейсы iOS часто выглядят «плоскими» — с минимальными тенями и градиентами, но продуманной типографикой и пространством.

Google Material Design 3

Material Design основан на метафоре «материала» — физических поверхностей, которые можно перемещать, складывать, на которые падает свет:

• Material as a metaphor: Интерфейс вдохновлён бумагой и чернилами — поверхности имеют глубину, отбрасывают тени, реагируют на касания

• Bold, graphic, intentional: Яркие цвета, крупная типографика, намеренное использование пустого пространства

• Motion provides meaning: Анимация — не украшение, а инструмент коммуникации, показывающий связи между элементами

Material Design 3 (Material You), выпущенный в 2022 году, добавил персонализацию: динамические цветовые темы на основе обоев пользователя, более округлые формы и улучшенную доступность.

Ключевые различия в философии

Для дизайнера: iOS-приложения должны выглядеть консистентно — это требование App Store Review. Android даёт больше свободы, но пользователи всё равно ожидают знакомых паттернов. Не изобретайте велосипед без веской причины.

Навигация: где размещать и как называть

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

Tab Bar (iOS) vs Navigation Bar (Android)

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

Hamburger Menu и боковая навигация

Боковое меню (Navigation Drawer в Android, Sidebar в iOS) используется по-разному:

Android: Navigation Drawer — классический паттерн. Открывается свайпом от левого края или нажатием на «гамбургер» (три горизонтальные линии). Содержит основные разделы приложения, аккаунт, настройки.

iOS: Apple не рекомендует hamburger menu в iPhone-приложениях — Tab Bar считается более эффективным. Sidebar используется в iPad-приложениях и на Mac, но не на iPhone. Если нужно много разделов — используйте «More» таб с дополнительным списком.

Важно: Hamburger menu на iOS — не нарушение гайдлайнов, но нетипичный паттерн. Пользователи iPhone реже ожидают его увидеть и могут не найти нужные разделы.

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

Одно из самых заметных различий между платформами.

iOS: Кнопка «Назад» в левом верхнем углу Navigation Bar. Обычно это стрелка влево + название предыдущего экрана. Также работает swipe from left edge (свайп от левого края экрана).

Android: Системная кнопка «Назад» — часть навигационной панели устройства (внизу экрана или жест). В Material Design стрелка «Назад» также размещается в Top App Bar слева, но это дополнение к системной кнопке, не замена.

Верхняя панель (App Bar / Navigation Bar)

iOS Navigation Bar: Высота 44 pt (без Safe Area). Содержит заголовок по центру, кнопку «Назад» слева, действия справа (1-2 кнопки). Large Title — увеличенный заголовок, который «схлопывается» при скролле.

Android Top App Bar: Высота 56-64 dp. Заголовок выровнен по левому краю (после кнопки навигации). Действия справа. Может содержать поиск, меню overflow (три точки), табы.

Типографика: шрифты и размеры

Системные шрифты — важная часть «нативного» ощущения приложения.

Системные шрифты

Использование системных шрифтов даёт преимущества: оптимальный рендеринг на экране устройства, поддержка Dynamic Type (iOS) и системных настроек размера текста (Android), быстрая загрузка (шрифты уже на устройстве).

Минимальные размеры текста

• iOS: Минимум 11 pt для читаемого текста, 17 pt — стандартный Body text

• Android: Минимум 12 sp, 14-16 sp — стандартный Body text

Единицы измерения: iOS использует points (pt), Android — scalable pixels (sp) для текста и density-independent pixels (dp) для остальных элементов. По факту 1 pt ≈ 1 dp — это «логические пиксели», которые масштабируются под плотность экрана.

Типографическая шкала Material Design

Material Design 3 определяет систему из 15 типографических стилей:

• Display (Large/Medium/Small): 57/45/36 sp — для крупных заголовков

• Headline (Large/Medium/Small): 32/28/24 sp — заголовки секций

• Title (Large/Medium/Small): 22/16/14 sp — подзаголовки

• Body (Large/Medium/Small): 16/14/12 sp — основной текст

• Label (Large/Medium/Small): 14/12/11 sp — кнопки, подписи

Dynamic Type и доступность

iOS Dynamic Type: Система масштабирования текста, которую пользователь настраивает в Settings. Приложение должно поддерживать размеры от xSmall до xxxLarge (плюс Accessibility sizes). Использование системных стилей (Body, Headline, Caption) автоматически даёт поддержку Dynamic Type.

Android: Аналогично — использование sp вместо dp для текста обеспечивает масштабирование согласно настройкам пользователя.

Ошибка: Фиксированные размеры текста в px/dp вместо pt/sp. Это нарушает доступность и может стать причиной отклонения приложения в App Store.

Кнопки и элементы управления

Floating Action Button (FAB)

FAB — визитная карточка Material Design. Это круглая кнопка, «плавающая» над контентом, обычно в правом нижнем углу.

Android: FAB — стандартный паттерн для главного действия экрана (создать пост, написать сообщение, добавить контакт). Размеры: 56 dp (стандарт), 40 dp (mini), 96 dp (extended с текстом).

iOS: Apple не использует FAB. Главное действие размещается в Navigation Bar справа (кнопка «+», «Compose») или как prominent button в контенте. «Плавающие» кнопки не характерны для iOS.

Для кроссплатформенных приложений: Можно использовать FAB на обеих платформах, но на iOS это будет выглядеть «андроидно». Альтернатива — адаптивный дизайн: FAB на Android, кнопка в Navigation Bar на iOS.

Стили кнопок

Минимальные размеры touch target

• iOS: 44 × 44 pt минимум для любого интерактивного элемента

• Android: 48 × 48 dp минимум, рекомендуется 56 dp для основных действий

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

Feedback при нажатии

iOS: Highlight state — затемнение или осветление кнопки. Haptic feedback (вибрация) для важных действий. Без «волнового» эффекта.

Android: Ripple effect — «волна», расходящаяся от точки касания. Это signature-элемент Material Design, который даёт visual feedback о том, где именно было касание.

Иконки: SF Symbols vs Material Icons

SF Symbols (Apple)

SF Symbols — библиотека из 6900+ иконок, интегрированных с San Francisco. Особенности:

• 9 начертаний (от Ultralight до Black)

• 3 размера (Small, Medium, Large)

• 4 режима рендеринга: Monochrome, Hierarchical, Palette, Multicolor

• Анимации (Bounce, Scale, Pulse, Variable Color)

• Автоматическое выравнивание с текстом

SF Symbols 7 (2024) добавил Draw-анимации, градиенты и улучшенный Variable Color.

Material Symbols (Google)

Material Symbols — 2500+ иконок с переменными параметрами:

• Fill: от 0 (контур) до 1 (заливка)

• Weight: от 100 (тонкий) до 700 (жирный)

• Grade: от -25 до 200 (толщина линий для разных фонов)

• Optical Size: 20, 24, 40, 48 (оптимизация под размер)

Визуальные различия

Для кроссплатформы: Существуют библиотеки (например, roninoss/icons), которые автоматически показывают SF Symbols на iOS и Material Icons на Android. Более 570 иконок имеют точное соответствие между библиотеками.

Модальные окна и диалоги

Терминология различается: на iOS это «Alerts» и «Action Sheets», на Android — «Dialogs».

Alerts / Dialogs

Action Sheets (iOS) vs Bottom Sheets (Android)

iOS Action Sheet: Появляется снизу экрана, содержит список действий. Обязательно имеет кнопку «Cancel». Destructive действия выделяются красным. На iPad может появляться как popover.

Android Bottom Sheet: Более гибкий компонент. Может быть modal (блокирует контент) или standard (persistent, остаётся на экране). Часто содержит сложный контент: формы, списки, карты. Закрывается свайпом вниз или нажатием на backdrop.

Когда что использовать

• Alert/Dialog: Критическая информация, подтверждение необратимых действий, простой выбор (2-3 опции)

• Action Sheet/Bottom Sheet: Выбор из нескольких действий, контекстные опции, share меню

Анти-паттерн: Не используйте модальные окна для справочной информации или несрочных уведомлений. Это прерывает пользователя без необходимости. Для таких случаев подойдут Snackbar (Android) или Toast.

Формы и поля ввода

Text Fields

iOS: Простые поля ввода — прямоугольники с border или без. Placeholder text исчезает при вводе. Label обычно над полем или placeholder используется как label.

Android (Material): Два основных стиля — Filled (с фоновой заливкой и подчёркиванием) и Outlined (с обводкой). Floating label — placeholder, который «всплывает» над полем при фокусе. Helper text и character counter под полем.

Date Pickers

Выбор даты реализован кардинально по-разному:

iOS: «Барабанный» picker (wheel) — три колонки, которые крутятся. Компактный, но не интуитивен для выбора дат в далёком прошлом/будущем. В iOS 14+ добавлен также calendar-style picker.

Android: Calendar picker — полноценный календарь в модальном окне. Можно листать месяцы, выбирать диапазоны. Также доступен text input для ручного ввода.

Клавиатуры и Input Types

Обе платформы показывают разные клавиатуры в зависимости от типа поля:

• type="tel" — цифровая клавиатура с телефонными символами

• type="email" — @ на видном месте

• type="url" — .com, /, : доступны

• type="number" — только цифры

Визуально клавиатуры отличаются (iOS — светлые буквы на тёмных кнопках, Android — тёмные буквы на светлом фоне), но функционально работают одинаково.

Жесты и анимации

Системные жесты

Конфликты жестов

Edge swipe для навигации «назад» конфликтует с боковыми меню (Navigation Drawer). Решения:

• iOS: Отключить edge swipe на экранах с боковым меню

• Android: Использовать peek behavior — лёгкий свайп открывает drawer, полный свайп — «назад»

Анимации

iOS: Плавные, физичные анимации с spring dynamics. Интерактивные переходы — можно прервать анимацию на середине. «Резиновая» прокрутка (bounce) в конце списков.

Android: Более графичные анимации. Ripple effect при касании. Shared element transitions между экранами. Edge glow вместо bounce при достижении края списка.

Dark Mode

Тёмная тема стала стандартом на обеих платформах, но реализация отличается.

Подход платформ

iOS: Строгая система семантических цветов. Вы используете systemBackground, label, secondaryLabel — и они автоматически адаптируются к теме. Также 4 blur-эффекта и 8 vibrancy-эффектов, которые меняются при переключении темы.

Android: Более гибкая система. values-night папка с альтернативными ресурсами. Material Design рекомендует тёмно-серый (#121212) вместо чистого чёрного (#000000) для снижения контрастности.

Рекомендации по цветам

Совет: Не инвертируйте цвета механически. В dark mode акцентные цвета должны быть менее насыщенными, чтобы не «резать» глаза. Elevation в dark mode показывается не тенью, а осветлением поверхности.

Единицы измерения и размеры

Points vs DP

По сути, pt (iOS) и dp (Android) — одно и то же: логические пиксели, независимые от плотности экрана.

iOS: 1 pt = 1 px @ 163 dpi (non-Retina)
iOS: 1 pt = 2 px @ 326 dpi (Retina @2x)
iOS: 1 pt = 3 px @ 401 dpi (Retina @3x)

Android: 1 dp = 1 px @ 160 dpi (mdpi)
Android: 1 dp = 1.5 px @ 240 dpi (hdpi)
Android: 1 dp = 2 px @ 320 dpi (xhdpi)
Android: 1 dp = 3 px @ 480 dpi (xxhdpi)
Android: 1 dp = 4 px @ 640 dpi (xxxhdpi)

Ключевые размеры для запоминания

Экспорт ассетов

iOS: @1x, @2x, @3x. Например, иконка 24×24 pt экспортируется как 24×24 px (@1x), 48×48 px (@2x), 72×72 px (@3x).

Android: mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi. Или векторные drawable (SVG-подобный формат), которые масштабируются без потери качества.

Кроссплатформенный дизайн: советы

Что делать, если приложение должно работать на обеих платформах?

Три подхода

1. Полностью нативный дизайн

Два отдельных дизайн-файла, максимальное соответствие гайдлайнам каждой платформы. Плюсы: пользователи чувствуют себя «дома». Минусы: двойная работа, сложнее поддерживать консистентность бренда.

2. Единый дизайн с адаптациями

Общая визуальная система, но ключевые элементы (навигация, кнопки, модальные окна) адаптируются под платформу. Плюсы: баланс между брендом и нативным ощущением. Минусы: требует чёткого определения, что адаптировать.

3. Единый кроссплатформенный дизайн

Один дизайн для обеих платформ (часто на базе Material Design). Плюсы: быстрее, проще. Минусы: iOS-пользователи могут чувствовать себя «не дома».

Что адаптировать обязательно

• Навигация: Tab Bar внизу на iOS, возможен Navigation Drawer на Android

• Кнопка «Назад»: В Navigation Bar на iOS, системная на Android

• Системные шрифты: SF Pro на iOS, Roboto на Android

• Иконки: SF Symbols на iOS, Material Icons на Android (или нейтральный набор)

Что можно оставить единым

• Цветовая палитра бренда

• Структура экранов и user flows

• Иллюстрации и фотографии

• Копирайтинг

• Базовая сетка и spacing

Правило: Адаптируйте то, что пользователь касается и видит постоянно (навигация, кнопки, системные элементы). Оставляйте единым то, что формирует бренд (цвета, стиль иллюстраций, tone of voice).

Чек-лист для UX/UI дизайнера

Перед началом проекта:

• Определите целевые платформы и подход (нативный / адаптивный / единый)

• Изучите актуальные версии HIG и Material Design

• Выберите инструмент (Figma с iOS и Material Design Kit)

• Определите минимально поддерживаемые версии ОС

Навигация:

• iOS: Tab Bar внизу (3-5 вкладок), Navigation Bar сверху

• Android: Bottom Navigation или Navigation Drawer, Top App Bar

• Кнопка «Назад»: iOS — в Navigation Bar, Android — системная + App Bar

Типографика:

• Используйте системные шрифты (SF Pro / Roboto) или обоснуйте выбор кастомного

• Поддержите Dynamic Type (iOS) и sp-единицы (Android)

• Минимум: 11 pt (iOS), 12 sp (Android)

Кнопки и touch targets:

• Min touch target: 44×44 pt (iOS), 48×48 dp (Android)

• FAB: только Android (или адаптируйте для iOS)

• Feedback: highlight на iOS, ripple на Android

Модальные окна:

• Alerts по центру на обеих платформах

• Action Sheet (iOS) снизу, Bottom Sheet (Android) снизу

• Destructive actions: красный текст/кнопка

Dark Mode:

• Используйте семантические цвета

• Снижайте насыщенность акцентных цветов

• Тестируйте на обеих темах

Экспорт:

• iOS: @1x, @2x, @3x (или PDF/SVG)

• Android: mdpi — xxxhdpi (или vector drawable)

Заключение

Дизайн для iOS и Android — это не просто «перекрасить кнопки». Это понимание разных философий, привычек пользователей и технических ограничений каждой платформы.

Ключевые выводы:

• HIG и Material Design — не просто гайдлайны, а философии дизайна с разными принципами

• Навигация — главное отличие: iOS любит Tab Bar, Android гибче с Drawer и Bottom Navigation

• Системные шрифты (SF Pro, Roboto) и иконки (SF Symbols, Material Icons) создают «нативное» ощущение

• FAB — signature Android, на iOS используйте Navigation Bar actions

• Touch targets: минимум 44 pt (iOS) и 48 dp (Android) — это не обсуждается

• Dark mode требует отдельного внимания к цветам, а не механической инверсии

• Кроссплатформенный дизайн — это баланс между консистентностью бренда и платформенными конвенциями

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

Начните с изучения официальных ресурсов: Apple Human Interface Guidelines (developer.apple.com/design) и Material Design 3 (m3.material.io). Это живые документы, которые обновляются с каждым релизом ОС — и вам нужно обновляться вместе с ними.

А лучшие вакансии для дизайнеров ux/ui и продуктовых ищите на hirehi.ru