Меняйте всё так, как нужно именно вашему продукту: как сами дизайнеры Google применяют гайдлайны Material Design Статьи редакции
Перевод статьи дизайн-евангелиста Google Мустафы Куртулду о применении их технологии в разработке приложений Keep и Inbox.
Перевод подготовлен командой онлайн-школы английского Skyeng.
Material Design предоставляет набор инструментов и правил, которые помогают осознанно подойти к UX-дизайну при создании интерфейса приложения.
Но что если для определённого продукта эти принципы не работают? И что делают дизайнеры Google, когда разрабатывают продукт, выходящий за рамки классических гайдлайнов?
Гайдлайны Material адаптивны. В этой статье мы рассмотрим два приложения Google — Keep и Inbox, чтобы понять, каким образом они не только отклоняются от некоторых правил, но и формируют новые принципы Material Design.
Inbox: Модульная сетка
Разработка нового почтового сервиса — очень амбициозная задача для Google, учитывая наличие уже укоренившегося на рынке Gmail. Целью Inbox было сделать дизайн интерфейса более глубоким и создать уникальный пользовательский опыт и фирменный стиль, играя по новым правилам Material Design.
Когда команда Inbox сопоставляла предварительные варианты дизайна, концепция Material Design ещё была в разработке. Это дало Inbox отличную возможность — установить стандарты Material Design, одновременно решая задачу глубины и объёма в UI.
Глубина
Изначальный дизайн Inbox был недостаточно гибким — пространство сетки позволяло уместить только семь писем на 13-дюймовом экране. Этого было слишком мало, особенно по сравнению с Gmail, где помещается 16-20 писем.
Изменив параметры сетки, высоту строк и то, как выглядит шрифт, дизайнеры Inbox смогли добиться оптимальной глубины интерфейса, отображая при этом 12-17 писем, каждое внутри карточки Material Design. Интерфейс приложения адаптируется под устройство пользователя. К примеру, шрифт в строке «Тема письма» меняется в зависимости от размеров экрана.
Цвета, изображения и иконки
Использование контекстных изображений в группах писем — ещё одна отличительная черта сервиса. Например, если пользователь планирует поездку в Нью-Йорк, на карточке с соответствующим письмом он увидит небо Манхэттена.
На панели навигации слева есть много иконок, их цвета соответствуют их функциям в приложении. Когда пользователь нажимает зелёную кнопку «Выполненные», фон верхней панели тоже становится зелёным, показывая, что контекст изменился.
Верхняя панель
Другой важной задачей команды было разработать верхнюю панель приложения. Изначальной идеей было создать трансформируемую панель, которая бы не растягивалась по ширине окна браузера, а менялась в зависимости от содержимого.
Карточки в Inbox расширяются и сжимаются, то есть формат заголовка меняется в зависимости от того, как пользователь взаимодействует с электронной почтой. На верхней панели также отображается строка поиска и меню с другими приложениями Google. Такой подход позволяет Inbox оставаться адаптивным, не усложняя интерфейс.
Keep: образцы адаптивной навигации
Keep — это кросс-платформенное приложение для заметок, которое разворачивает и сворачивает карточки на экране, фокусируя внимание пользователя при добавлении новой заметки. Нижняя панель навигации позволяет быстро создавать новую заметку в один клик.
Вовлечение, пустые экраны и анимация
Обычно пользователь сталкивается с пустым экраном, когда на странице отсутствует какой-либо контент. В Keep такой экран выглядит как чистый холст, где пользователь может быстро записать свои идеи.
Свободное пространство побуждает пользователя исследовать элементы меню на панели, которая расширяется, отображая различные фильтры, представленные в виде иконок; меню разметки, с помощью которого можно переключаться между списком и сеткой, и левую панель навигации, где можно менять основные настройки приложения.
Выбор правильных элементов Material: нижняя навигация или плавающая кнопка действия
Лаконичность и простота использования — ключевые особенности Keep. Во время редизайна приложения разработчики изучили шаблоны Material Design и в итоге выбрали карточки, которые помогают отличать заметки друг от друга, левую панель навигации, которая упрощает настройку приложения, и контекстное меню, меняющееся в зависимости от типа заметки — как заметки с флажками, отображающими меню для проверки и изменения элементов в списке.
В совокупности эти элементы создают понятный и функциональный интерфейс, адаптируясь к конкретной ситуации. Переделывая Keep, создатели провели эксперимент с некоторыми основными элементами навигации приложения — в частности, попробовали заменить существующую навигацию на плавающую кнопку действия.
Изначальная навигация позволяла создавать новую заметку одним касанием, а плавающая кнопка действия требовала два клика: один, чтобы показать опции и второй, чтобы создать заметку.
Многие пользователи, которые раньше использовали приложение и привыкли к навигации в один клик, не одобрили это изменение. Протестировав и в итоге отказавшись от плавающей кнопки, разработчики Keep смогли выбрать решение, которое лучше всего отвечает интересам их продукта.
Руководство, а не набор правил
Команды Keep и Inbox использовали гайдлайны как основу для своих приложений. Когда они столкнулись с пользовательским сценарием, который не работает, то смогли адаптировать свой дизайн под потребности пользователей.
Material Design предлагает руководство, основанное на многолетнем опыте Google, но с помощью него невозможно решить абсолютно любую задачу. Примеры Keep и Inbox показывают, что можно использовать гайдлайны Material Design, меняя их так, как это нужно именно вашему продукту.
Дизайнеры гугола рассказывают за дизайн, ой-вей...
Круче только дизайнеры Фейсбука, которые ездят по конференциям UI/UX. Вот уж где без слёз невозможно их слушать.
а в FB есть дизайнеры?
Понимаю, что это немного пугает. Но они действительно там есть.
Их там более 400 человек даже 🤷♂️
Чем больше, тем хуже. Вон, в Нокии было 5000 программистов, работающих только над UI у Симбиана. И он был ужаснее некуда.
блин, РЖАКА! Сто плюсов бы влепил.
Люди! Не равняйтесь на гигантов! У них гигантские доходы и гигантские проблемы, в том числе и в дизайне!
Material Design уже устарел.
Комментарий недоступен
Так от хипстеров-дизайнеров же все равно никакого толку нет - херачат кучу свистоперделок с хитровыебанными анимациями, а как спросишь - зачем это, какую задачу решает и как это будет смотреться вместе с остальными экранами, отвечают: "Слыш чернь, я дизайнер, я так вижу!"
Потому что считают, что дизайн - это когда самовыражение и зеленые рюшечки с перламутровыми пуговицами.
Комментарий недоступен
Это и называется устарел.
Приложения в апсторе не выглядят как под копирку, хотя тоже сделаны по гайдам. Так что, не в устаревании дело.
Ещё как выглядят под копирку.
гайды гайдам рознь, у Google они более детальные, а у Apple - пространные и философские.
самое веселое для прогеров было в том, что гайдлайны выкатили - а поддержка из коробки в официальном фреймворке долго отсутствовала, и надо было самому сочинять даже эту круглую кнопку с анимацией. Конечно, довольно быстро появились сторонние библиотеки, но не сразу - думаю, пару проектов многим пришлось откатать, самостоятельно сочиняя, как имплементировать материальный дизайн в существующее API. И только спустя чуть ли не годы Google наконец добавил в API ряд классов для поддержки материального дизайна
"половина приложений в маркете выглядит как клоны под копирку" - это замечательно, на самом деле. Людям срать на вариативность, им важно чтобы их задачи выполнялись, и желательно с минимальными когнитивными усилиями - то есть, все элементы интерфейса должны вести себя предсказуемо. Если все приложения в телефоне выглядит одинаково - значит не нужно напрягать мозги.
У гугла пока не получилось сделать дизайн-систему, которая может покрыть все юзкейсы, но в будущем мы к этому придем обязательно.
Лет 15 назад и сами телефонные аппараты выглядели и вели себя по-разному, и ностальгировать по тому периоду можно только из романтических настроений.
Мне одному всегда нравился material design?
В том числе с профессиональной точки зрения.
Наверно так, да.
Комментарий удален модератором
Комментарий недоступен
Админка на Material Design это полное дерьмо.
Комментарий удален модератором
Комментарий удален модератором
Материалка хороша для сложных интерфейсов. И, наверное, только для них. Остальное (в том числе примеры из статьи) - это просто слёзы.
Комментарий недоступен
Так это же хорошо. Не всякому интерфейсу нужен "нормальный" дизайн, далеко не всякому, а многим он строго противопоказан, особенно на ранней стадии.
Комментарий удален модератором