Немного истории: от HTC Dream до Material Design
23 сентября 2008 года Google и HTC представили первый Android-смартфон — HTC Dream (он же T-Mobile G1). Устройство выглядело странно: экран 3,2 дюйма выезжал вверх, открывая физическую QWERTY-клавиатуру. Виртуальной клавиатуры не было вообще — хочешь печатать, выдвигай экран.
В Android Market (будущий Google Play) было 50 приложений. Все бесплатные — систему оплаты ещё не придумали.
Интерфейс первых версий Android был… функциональным. Не красивым — функциональным. Google в то время не думал о дизайне как о системе. У каждого продукта был свой визуальный язык, единых правил не существовало.
Всё изменилось в 2014 году.
Material Design: как Google придумал дизайн-систему
25 июня 2014 года на конференции Google I/O Матиас Дуарте представил Material Design. Дуарте — чилийско-американский дизайнер, до Google создавший интерфейс легендарного T-Mobile Sidekick.
«В отличие от настоящей бумаги, наш цифровой материал расширяется и трансформируется разумно. У материала есть физические поверхности и края. Швы и тени объясняют, к чему можно прикоснуться», — объяснял Дуарте.
Идея была в том, чтобы создать интерфейс, который ощущается реальным. Команда буквально делала прототипы из бумаги, изучая, как работают слои и тени. Потом переносила эти уроки в код.
Проблема, которую решал Material Design, была масштабной: у Google не было единого визуального языка. Веб выглядел одним образом, Android — другим, каждое приложение — по-своему. Material дал общие правила для всей экосистемы.
За год после запуска больше миллиона приложений в Google Play использовали элементы Material Design. Сегодня это де-факто стандарт для Android.
Что такое проектирование Android-приложения
Проектирование — это этап между идеей и разработкой. Здесь определяется:
- Что приложение делает (и чего не делает)
- Как пользователь решает свои задачи
- Какие экраны нужны и как они связаны
- Как интерфейс ведёт себя в разных ситуациях
Последний пункт часто недооценивают. Хороший прототип показывает не только «идеальный» сценарий, но и граничные случаи:
- Что видит пользователь, пока данные загружаются?
- Что происходит при ошибке сети?
- Как выглядит пустой список?
- Что будет, если текст длиннее, чем ожидалось?
Проектирование — это контракт между продуктом, дизайном и разработкой. Интерфейс — лишь видимая часть этого контракта.
Особенность Android: проектирование для неопределённости
iOS — это несколько устройств с известными характеристиками. Android — тысячи устройств от сотен производителей: разные экраны, разрешения, версии системы, кастомные оболочки.
Фрагментация экранов. От бюджетных смартфонов с экраном 5 дюймов до складных устройств и планшетов. Решение — проектировать не в пикселях, а в относительных единицах (dp), использовать гибкие сетки, тестировать крайние случаи.
Фрагментация версий. Android 8 и Android 14 — разные возможности. Нужно сразу определить минимальную поддерживаемую версию (minSdkVersion) и понимать, какие компоненты Material Design будут доступны.
Кастомные оболочки. Samsung One UI, Xiaomi MIUI, Huawei EMUI — у каждой свои особенности. Главная проблема — системные жесты и области, которые «откусывают» часть экрана. Прототип должен учитывать безопасные зоны.
Тёмная тема. Это не просто инверсия цветов. Нужны отдельные цветовые схемы с правильным контрастом.
Макет для Android — не пиксельно-точная картинка, а система правил, которую разработчик интерпретирует под тысячи конфигураций.
Material Design сегодня: токены, компоненты, динамические цвета
Material Design 3 (2021) — это уже не набор принципов, а полноценная дизайн-система.
Дизайн-токены. Вместо конкретного цвета #6750A4 используется токен color.primary. Меняете значение токена — меняется весь интерфейс. В Figma это реализуется через стили и переменные.
Компонентный подход. Не нужно придумывать кнопку. Выбираете тип из системы (Filled, Outlined, Text, Icon), определяете свойства. Разработчик использует готовый, протестированный Google компонент.
Динамические цвета. Начиная с Android 12, приложение может извлекать палитру из обоев устройства. При проектировании важно проверить, что интерфейс остаётся читаемым при любой сгенерированной палитре.
Анимация. Material строго регламентирует длительность и характер анимаций. Это часть UX, а не украшение. В прототипе важно заложить корректные переходы.
Игнорирование Material Design — не просто «нарушение гайдлайнов». Это увеличение стоимости разработки в разы: каждый компонент придётся создавать с нуля вместо использования готовых решений.
Android vs iOS: принципиальные различия
Скопировать iOS-интерфейс на Android — верный способ создать «чужеродное» приложение.
Навигация. В Android — нижняя панель (Bottom Navigation) для 3–5 разделов, Navigation Drawer для глубоких иерархий, системная кнопка «Назад». В iOS — Tab Bar, свайп от края для возврата, другая логика переходов.
Следствие для проектирования. Для Android критично продумать поведение кнопки «Назад» на каждом экране. Куда она ведёт из модального окна? Из вложенного раздела? Это нужно решить на этапе прототипа.
Жесты. В iOS жесты системны и предсказуемы. В Android они конкурируют с жестами приложения (скрытие Bottom Sheet, перетаскивание элементов). Нужно проектировать, избегая конфликтов.
Компоненты. Switch vs Toggle, AlertDialog vs Action Sheet, FloatingActionButton vs кнопка в тулбаре — это не просто визуальные различия, а разные паттерны взаимодействия.
Этапы проектирования
1. Анализ и постановка задач Что делает приложение? Какую проблему решает? Кто пользователь? Без ответов на эти вопросы дальше двигаться бессмысленно.
На выходе: пользовательские истории в формате «Как [роль], я хочу [действие], чтобы [ценность]».
2. Пользовательские сценарии Как человек проходит путь от открытия приложения до решения задачи? Где может застрять? Где обрадуется?
На выходе: User Flow для ключевых сценариев, карта пути пользователя (User Journey Map).
3. Эскизы и структура Быстрые наброски на бумаге или в Balsamiq. Не дизайн — расстановка приоритетов: что главное на экране, что второстепенное, как переходить между экранами.
На выходе: схема навигации, низкодетализированные wireframes.
4. Прототип Интерактивный прототип в Figma, который можно «потыкать». Важно: использовать реальные данные (разные длины имён, вариативные изображения), чтобы сразу увидеть проблемы.
На выходе: кликабельный прототип с ключевыми сценариями и состояниями (загрузка, ошибка, пусто).
5. UI-дизайн Визуальное оформление: цвета, типографика, иконки, отступы. Всё — в рамках дизайн-системы.
На выходе: UI-библиотека в Figma со всеми компонентами и состояниями, спецификации для разработчиков.
6. Тестирование Показать прототип реальным людям. Пять пользователей находят 85% проблем юзабилити (исследование Якоба Нильсена, 2000). Мы тестируем мобильные приложения в своей лаборатории — с айтрекингом и записью экрана.
На выходе: список проблем, приоритизированный по критичности.
Типичные ошибки
Проектирование только «счастливого пути». Макеты показывают идеальный сценарий, а состояния загрузки, ошибок и пустых списков остаются на откуп разработчику. В итоге — непродуманный UX в половине случаев.
Фиксированные размеры вместо адаптивных правил. Макет сделан для одного разрешения. На другом устройстве — поехавшая вёрстка.
Игнорирование Material Design. «Мы сделаем свой дизайн, уникальный». В итоге — дорогая разработка, незнакомые пользователю паттерны, ощущение «чужого» приложения.
Изоляция дизайнера от разработки. Дизайнер не знает технических ограничений, разработчик видит макет впервые. Результат — переделки и конфликты. Решение — регулярные дизайн-ревью с участием разработчиков.
«Final_v2_правки_последние.fig». Хаос с версиями файлов. Используйте ветки в Figma или чёткую систему именования.
Инструменты
Figma — стандарт индустрии. Совместная работа, автолейаут, компоненты, официальные библиотеки Material Design 3 от Google.
Protopie или Framer — для сложных анимаций и жестов, которые Figma не показывает.
Miro — для карт пути пользователя, User Flow, воркшопов с командой.
Интеграция с Jira/Notion — чтобы макеты не жили отдельной жизнью от задач.
Главное
Android — это не один телефон, а тысячи устройств. Проектировать нужно не макет, а систему правил, которая работает везде.
Material Design — не ограничение, а инструмент. Он экономит время разработки и даёт пользователям знакомые паттерны.
Прототип должен показывать не только идеальный сценарий, но и всё, что может пойти не так: загрузку, ошибки, пустые состояния, длинные тексты.
Матиас Дуарте начинал с прототипов из бумаги, чтобы понять, как работают слои и тени. Иногда самый простой способ — самый правильный. Прежде чем открывать Figma, нарисуйте экран на салфетке.