Отличия Human Interface Guidelines (HIG) от Apple и Material Design (MD) от Google

Продолжаем серию постов. Обычно этот вопрос задают, если ищут человека в команду, где нужно разрабатывать дизайн под эти платформы.

Платформа
HIG: для устройств Apple (iOS, macOS и др.), глубоко интегрирован с философией Apple

MD: для Android, Web (React, Angular и Vue) и других платформ, универсален, но особенно популярен на Android

Философия дизайна
HIG: принцип «контент прежде всего». Простота, ясность, эстетика, последовательность

MD: метафора «материала» (слои, тени). Интуитивен, как если бы элементы были настоящими предметами с тенями, слоями и анимацией

Цветовая система
HIG: Нейтральная, минималистичная, системные цвета подстраиваются под тему и настройки

MD: Яркие палитры, модульная система Material You (адаптация под обои пользователя)

Навигация
HIG: Navigation Bar (верхняя панель), Toolbar (нижняя панель), вкладки Tab Bar, Sidebars, иногда используют Bottom sheet

MD: Bottom navigation (нижняя навигация), Navigation Drawer (боковое меню), FAB
(большая круглая кнопка)

Анимация
HIG: Выразительная, но ненавязчивая, помогает пониманию интерфейса

MD: Анимация — основа UX, подчиняется законам «материального мира»

Типографика
HIG: Системные шрифты Apple, автоматическое масштабирование

MD: рекомендуемый шрифт: Roboto (или Google Sans для некоторых продуктов Google).
Альтернативы: Noto, Arial, Helvetica

Доступность
HIG: Глубоко интегрирована, поддержка VoiceOver, Dynamic Type и др.

MD: Сильная поддержка Accessibility, рекомендации по контрасту и читаемости

Кастомизация
HIG: Строгие рамки, рекомендуется использовать нативные паттерны

MD: Больше свободы и персонализации (Material You)

Обе системы стремятся к отличному UX, но реализуют это по-разному.

❤️ — полезно
🤚 — знакомо
🔥 — жду следующий пост

⬅️ 4 часть. Атомарный дизайн
6 часть. Токены ➡️