Дизайн iOS и Android отличается не цветом кнопок, а поведением: как человек возвращается на предыдущий экран, где ищет главное действие, какие переключатели и списки ему привычны. Apple описывает свои правила в Human Interface Guidelines, Google — в Material Design 3. Если приложение нарушает привычки платформы, пользователю кажется, что перед ним «сайт в оболочке», а ревьюер стора может вернуть сборку на доработку. Ниже — ключевые различия и честный ответ на вопрос, можно ли обойтись одним дизайном на обе платформы.
- Главные различия — навигация, возврат назад, системные контролы, шрифты и жесты.
- Бренд, цвета, иконки и логика экранов могут быть общими.
- Рабочий подход — одна дизайн-система и две платформенные адаптации, а не два разных приложения.
- Гайдлайны регулярно обновляются, поэтому сверяйте актуальную редакцию на дату проектирования.
Human Interface Guidelines и Material Design 3: что это
Human Interface Guidelines — официальное руководство Apple по интерфейсам для iPhone, iPad и других устройств компании. Оно описывает навигацию, элементы управления, типографику, жесты, доступность и поведение системы. Material Design 3 — дизайн-система Google для Android: компоненты, цветовая модель, сетка, анимации и правила их применения.
Это не формальность и не «рекомендации для эстетов». Пользователь каждый день работает с десятками системных приложений и привыкает к их поведению. Когда ваше приложение ведёт себя так же, ему не нужно ничего изучать. Когда иначе — он тратит внимание на интерфейс вместо задачи и чаще бросает сценарий на полпути.
Главные отличия: навигация, контролы, шрифты и жесты
| Элемент | iOS (Human Interface Guidelines) | Android (Material Design 3) |
|---|---|---|
| Возврат назад | Кнопка в левом верхнем углу и свайп от левого края экрана | Системный жест или кнопка «назад», общая для всех приложений |
| Основная навигация | Панель вкладок внизу экрана | Панель навигации внизу, на больших экранах — боковая панель или выдвижное меню |
| Главное действие | Кнопка в панели навигации или в контенте | Часто — плавающая кнопка действия (FAB) |
| Заголовок экрана | Крупный заголовок, который сжимается при прокрутке | Верхняя панель приложения с заголовком и действиями |
| Системный шрифт | SF Pro | Roboto или шрифт, заданный в теме |
| Выбор из вариантов | Сегментированный контрол, всплывающее меню, лист действий снизу | Чипы, выпадающие меню, нижние листы |
| Короткие сообщения | Чаще — встроенные в экран уведомления | Снекбар внизу экрана с возможным действием |
| Минимальная область нажатия | 44 × 44 pt | 48 × 48 dp |
Навигация и кнопка «назад»
Это самое важное различие. Пользователь iPhone возвращается назад свайпом от края или кнопкой со стрелкой слева вверху. Пользователь Android привык к системному «назад», который работает одинаково везде. Если в Android-версии нарисовать только стрелку в углу и не обработать системный жест, человек будет «вылетать» из приложения. Если в iOS-версии перекрыть свайп от края своей анимацией, он не сможет вернуться привычным способом.
Контролы и диалоги
Переключатели, поля ввода, выбор даты, всплывающие окна выглядят и ведут себя по-разному. В iOS выбор даты традиционно сделан колесом или компактным календарём, в Android — календарём в диалоге. Подтверждение действия в iOS часто оформляют листом снизу, в Android — диалогом по центру. Пользователь узнаёт эти элементы мгновенно, и их стоит использовать, а не изобретать заново.
Типографика и иконки
Системные шрифты SF Pro и Roboto отличаются пропорциями и межстрочным расстоянием, поэтому одинаковый текст занимает разное место. Если приложение использует фирменный шрифт, его проверяют на обеих платформах, включая увеличенный системный размер текста. Иконки тоже различаются: у Apple — набор SF Symbols, у Google — Material Symbols. Для пользователей это знакомые знаки «поделиться», «настройки», «ещё», и замена их на свои снижает понятность.
Цвет, поверхности и жесты
Material Design 3 строит цвета на тональной палитре и умеет подстраивать тему под обои пользователя. В iOS больше полупрозрачных материалов и размытия. Жесты тоже отличаются: в iOS привычны свайпы по строке списка для быстрых действий, в Android — длинное нажатие и контекстные меню. Тактильная отдача у платформ своя, и её стоит использовать там, где она подтверждает действие.
Можно ли сделать один дизайн для iOS и Android
Можно, но с оговоркой: общим должен быть бренд и логика, а не поведение системных элементов. Именно так мы работаем в дизайне мобильных приложений: базу — экраны, компоненты, цвета, типографику, иконки — проектируем один раз в дизайн-системе под Flutter, затем адаптируем платформенные элементы: навигацию, возврат назад, шрифты, диалоги и жесты. Это дешевле двух отдельных дизайнов на 40%, а приложение на каждой платформе ощущается своим.
- Быстрее и дешевле на старте.
- Единый вид бренда на всех устройствах.
- Подходит для игр и приложений с полностью своим визуальным языком.
- Половина пользователей сталкивается с непривычной навигацией.
- Ошибки с кнопкой «назад» на Android и жестами на iOS.
- Ощущение «сайта в оболочке» и замечания на ревью.
- Переделка навигации после релиза дороже, чем адаптация на этапе дизайна.
ПРАВИЛОБренд — общий, поведение — платформенное. Пользователь не должен учиться вашему приложению заново.
Когда единый дизайн допустим, а когда нет
Есть случаи, где почти полностью общий интерфейс оправдан. Игры, медиаплееры, приложения с уникальной визуальной концепцией живут по своим правилам, и пользователь это принимает. Внутренние приложения для сотрудников, где у всех одна платформа, тоже можно рисовать под неё одну.
А вот клиентские приложения магазинов, банков, сервисов доставки и программ лояльности лучше адаптировать. Их открывают на бегу, одной рукой, и любое «где тут назад» стоит потерянного заказа. Для финтеха и медицины к этому добавляются требования доступности: контраст, размер области нажатия, поддержка увеличенного шрифта и подписи для скринридеров.
Рисовать приложение только на макете iPhone, потому что «у руководства айфоны», а Android-версию отдавать разработчику «по аналогии». В Казахстане заметная часть ваших клиентов, скорее всего, пользуется Android — посмотрите статистику сайта или текущего приложения, прежде чем решать, какой платформе уделить меньше внимания.
Как гайдлайны влияют на ревью App Store и Google Play
Нарушение гайдлайнов — одна из частых причин, по которым сборку возвращают на доработку. Чаще всего это чужая платформенная навигация, запрос лишних разрешений при первом запуске, недоступные элементы и интерфейс, который выглядит как обёртка над сайтом без собственной ценности. Правила сторов меняются, поэтому их сверяют на дату публикации.
Поэтому учитывать гайдлайны нужно на этапе дизайна, а не перед отправкой сборки. В нашей разработке приложений для iOS и Android дизайн по правилам Apple и Google входит в состав работ, а отвечать на замечания ревью — наша ответственность по договору. Если вы сравниваете бюджеты, разбор цен на дизайн по форматам есть в статье «Сколько стоит дизайн мобильного приложения».
Как устроена адаптация под две платформы на практике
Платформенная адаптация не удваивает проект, если заложить её в процесс с самого начала. Вот как это выглядит в формате приложения на 4–6 недель:
- Карта экранов — общаяСценарии, роли и переходы одинаковы для обеих платформ. На этом этапе различий почти нет.
- Прототип — с жестамиКликабельные схемы тестируем на реальных телефонах людей из аудитории, в том числе на Android-устройствах, а не только на iPhone.
- Дизайн-система — с вариантамиКомпоненты, которые отличаются на платформах, — навигация, диалоги, выбор даты, переключатели — сразу получают два варианта.
- UI-экраны — на базе системыБольшая часть экранов собирается один раз, платформенные элементы подставляются из системы.
- Приёмка сборок — на двух устройствахСверяем экраны с макетами на iPhone и на Android: отступы, шрифты, поведение кнопки «назад» и жестов.
Так объём дизайна растёт не вдвое, а на ту часть, где платформы действительно расходятся. Сколько это стоит в общем бюджете продукта, показано в разборе стоимости мобильного приложения в Казахстане.
Что проверить в макетах до разработки
- Возврат назад работает и кнопкой, и системным жестом на каждой платформе.
- Основная навигация понятна без подсказок: вкладки внизу, не больше пяти пунктов.
- Выбор даты, переключатели и диалоги используют системные паттерны платформы.
- Области нажатия не меньше 44 pt на iOS и 48 dp на Android.
- Текст проверен с увеличенным системным шрифтом и на казахском языке.
- Есть тёмная тема или хотя бы проверка, что интерфейс не ломается в ней.
- Разрешения запрашиваются в момент, когда они нужны, а не все на старте.
- Учтены экраны с вырезами и разные размеры телефонов.
Если большая часть пунктов закрыта, приложение будет ощущаться своим на обеих платформах. Если нет — дешевле поправить это в Figma, чем в коде. Посмотреть, как устроен процесс и сколько займёт адаптация под ваш продукт, можно на странице дизайна приложений по гайдлайнам Apple и Google.
Что такое Human Interface Guidelines?
Официальное руководство Apple по интерфейсам: как должны вести себя навигация, элементы управления, шрифты, жесты и доступность в приложениях для iPhone, iPad и других устройств.
Что изменилось в Material Design 3?
Третья версия дизайн-системы Google сделала упор на персонализацию цвета под обои пользователя, тональные поверхности и обновлённые компоненты. Актуальные детали сверяйте в официальной документации — она обновляется.
Можно ли сделать один дизайн для iOS и Android?
Одну дизайн-систему — да. Но навигацию, возврат назад, системные контролы и шрифты лучше адаптировать под каждую платформу. Так приложение остаётся узнаваемым и при этом привычным.
Влияет ли Flutter на дизайн под разные платформы?
Flutter позволяет держать общий код и общую дизайн-систему, но платформенные элементы в нём тоже адаптируются. Решение, что сделать общим, а что разным, принимается на этапе дизайна.
