Меняйте всё так, как нужно именно вашему продукту: как сами дизайнеры 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 писем.

Если открыть Gmail и Inbox в соседних окнах, можно увидеть большую разницу в визуальном весе. И одной из самых сложных задач было найти нужный баланс между контентом и пустым пространством.

Тим Смит, главный дизайнер Inbox

Изменив параметры сетки, высоту строк и то, как выглядит шрифт, дизайнеры Inbox смогли добиться оптимальной глубины интерфейса, отображая при этом 12-17 писем, каждое внутри карточки Material Design. Интерфейс приложения адаптируется под устройство пользователя. К примеру, шрифт в строке «Тема письма» меняется в зависимости от размеров экрана.

Цвета, изображения и иконки

Использование контекстных изображений в группах писем — ещё одна отличительная черта сервиса. Например, если пользователь планирует поездку в Нью-Йорк, на карточке с соответствующим письмом он увидит небо Манхэттена.

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

Верхняя панель

Другой важной задачей команды было разработать верхнюю панель приложения. Изначальной идеей было создать трансформируемую панель, которая бы не растягивалась по ширине окна браузера, а менялась в зависимости от содержимого.

Мы проработали около десятка различных вариантов этой концепции, пока в конечном итоге не пришли к полноэкранному режиму, который вы видите сейчас. Также мы создали несколько концептов строки поиска, прежде чем выбрать наилучший стиль.

Тим Смит, главный дизайнер Inbox

Карточки в Inbox расширяются и сжимаются, то есть формат заголовка меняется в зависимости от того, как пользователь взаимодействует с электронной почтой. На верхней панели также отображается строка поиска и меню с другими приложениями Google. Такой подход позволяет Inbox оставаться адаптивным, не усложняя интерфейс.

Keep: образцы адаптивной навигации

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

Вовлечение, пустые экраны и анимация

Обычно пользователь сталкивается с пустым экраном, когда на странице отсутствует какой-либо контент. В Keep такой экран выглядит как чистый холст, где пользователь может быстро записать свои идеи.

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

Мы много работали над анимацией — как заметки отображаются в виде потока, как они двигаются, когда вы открываете и закрываете их.

Женевьева Куэвас, инженер-программист Google Keep

Выбор правильных элементов Material: нижняя навигация или плавающая кнопка действия

Лаконичность и простота использования — ключевые особенности Keep. Во время редизайна приложения разработчики изучили шаблоны Material Design и в итоге выбрали карточки, которые помогают отличать заметки друг от друга, левую панель навигации, которая упрощает настройку приложения, и контекстное меню, меняющееся в зависимости от типа заметки — как заметки с флажками, отображающими меню для проверки и изменения элементов в списке.

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

Изначальная навигация позволяла создавать новую заметку одним касанием, а плавающая кнопка действия требовала два клика: один, чтобы показать опции и второй, чтобы создать заметку.

Когда мы внедрили плавающую кнопку, некоторые из наших пользователей пожаловались, что создавать заметку в два клика не так удобно.

Женевьева Куэвас, инженер-программист Google Keep

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

Руководство, а не набор правил

Команды Keep и Inbox использовали гайдлайны как основу для своих приложений. Когда они столкнулись с пользовательским сценарием, который не работает, то смогли адаптировать свой дизайн под потребности пользователей.

Material Design предлагает руководство, основанное на многолетнем опыте Google, но с помощью него невозможно решить абсолютно любую задачу. Примеры Keep и Inbox показывают, что можно использовать гайдлайны Material Design, меняя их так, как это нужно именно вашему продукту.

0
24 комментария
Написать комментарий...
Sam Beckett

Дизайнеры гугола рассказывают за дизайн, ой-вей...

Ответить
Развернуть ветку
sdkfldgfd dfkgjfddfg

Круче только дизайнеры Фейсбука, которые ездят по конференциям UI/UX. Вот уж где без слёз невозможно их слушать.

Ответить
Развернуть ветку
zulus

а в FB есть дизайнеры?

Ответить
Развернуть ветку
sdkfldgfd dfkgjfddfg

Понимаю, что это немного пугает. Но они действительно там есть.

Ответить
Развернуть ветку
SAMURAY

Их там более 400 человек даже 🤷‍♂️

Ответить
Развернуть ветку
Revertron

Чем больше, тем хуже. Вон, в Нокии было 5000 программистов, работающих только над UI у Симбиана. И он был ужаснее некуда.

Ответить
Развернуть ветку
Pixel Lens

блин, РЖАКА! Сто плюсов бы влепил.

Люди! Не равняйтесь на гигантов! У них гигантские доходы и гигантские проблемы, в том числе и в дизайне!

Ответить
Развернуть ветку
Михаил Фомин

Material Design уже устарел.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Андрій Заметалов

Так от хипстеров-дизайнеров же все равно никакого толку нет - херачат кучу свистоперделок с хитровыебанными анимациями, а как спросишь - зачем это, какую задачу решает и как это будет смотреться вместе с остальными экранами, отвечают: "Слыш чернь, я дизайнер, я так вижу!"
Потому что считают, что дизайн - это когда самовыражение и зеленые рюшечки с перламутровыми пуговицами.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Михаил Фомин

Это и называется устарел.

Ответить
Развернуть ветку
sdkfldgfd dfkgjfddfg

Приложения в апсторе не выглядят как под копирку, хотя тоже сделаны по гайдам. Так что, не в устаревании дело.

Ответить
Развернуть ветку
Михаил Фомин

Ещё как выглядят под копирку.

Ответить
Развернуть ветку
Roma Schreibikus

гайды гайдам рознь, у Google они более детальные, а у Apple - пространные и философские.

Ответить
Развернуть ветку
Сергей Токарев

самое веселое для прогеров было в том, что гайдлайны выкатили - а поддержка из коробки в официальном фреймворке долго отсутствовала, и надо было самому сочинять даже эту круглую кнопку с анимацией. Конечно, довольно быстро появились сторонние библиотеки, но не сразу - думаю, пару проектов многим пришлось откатать, самостоятельно сочиняя, как имплементировать материальный дизайн в существующее API. И только спустя чуть ли не годы Google наконец добавил в API ряд классов для поддержки материального дизайна

Ответить
Развернуть ветку
Roma Schreibikus

"половина приложений в маркете выглядит как клоны под копирку" - это замечательно, на самом деле. Людям срать на вариативность, им важно чтобы их задачи выполнялись, и желательно с минимальными когнитивными усилиями - то есть, все элементы интерфейса должны вести себя предсказуемо. Если все приложения в телефоне выглядит одинаково - значит не нужно напрягать мозги.

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

Лет 15 назад и сами телефонные аппараты выглядели и вели себя по-разному, и ностальгировать по тому периоду можно только из романтических настроений.

Ответить
Развернуть ветку
Alexander Nevedovsky

Мне одному всегда нравился material design?
В том числе с профессиональной точки зрения.

Ответить
Развернуть ветку
Revertron

Наверно так, да.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Михаил Фомин

Админка на Material Design это полное дерьмо.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Pixel Lens

Материалка хороша для сложных интерфейсов. И, наверное, только для них. Остальное (в том числе примеры из статьи) - это просто слёзы.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Pixel Lens
Хуже всего то, что порой клиенты принимают прототип )

Так это же хорошо. Не всякому интерфейсу нужен "нормальный" дизайн, далеко не всякому, а многим он строго противопоказан, особенно на ранней стадии.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
21 комментарий
Раскрывать всегда