Дизайн Саша Море
9 900

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

#дизайн

{ "author_name": "Саша Море", "author_type": "editor", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 28, "likes": 25, "favorites": 1, "is_advertisement": false, "subsite_label": "design", "id": 35396, "is_wide": false, "is_ugc": false, "date": "Wed, 28 Mar 2018 14:00:33 +0300" }
{ "id": 35396, "author_id": 81289, "diff_limit": 1000, "urls": {"diff":"\/comments\/35396\/get","add":"\/comments\/35396\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/35396"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

28 комментариев 28 комм.

Популярные

По порядку

Написать комментарий...
13

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

Ответить
32

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

Ответить
7

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

Ответить
6

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

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

Ответить
1

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

Ответить
9

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

Ответить
6

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

Ответить
4

Понимаю. Но просто вам не довелось работать с профессионалами.

Ответить
1

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

Ответить
2

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

Ответить
3

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

Ответить
1

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

Ответить
2

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

Ответить
2

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

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

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

Ответить
3

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

Ответить
3

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

Ответить

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

1

Терпеть не перевариваю Material Design. Грязные тени, блевотные цвета в ограниченном количестве, убогий шрифт, а элементы формы вообще какие-то подчеркивания. Сильная ограниченность в туда-сюда. Он даже для админки не подходит. Из хорошего там только эффект нажатия кнопки и игра с прозрачностью текста. Не удивительно, что он не сильно пережил мелкософтовский Метростайл. Уже на ладан дышит. Это чувствуется по тому, что на апворке за последний год-полтора не получал ни одного заказа под Материал.

Ответить
0

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

Ответить

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

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

0

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

Ответить
0

Скорее, для чернового прототипа, когда времени мало и надо быстро слепить рабочий прототип для клиентов и инвесторов. Хуже всего то, что порой клиенты принимают прототип )

Ответить
0

Хуже всего то, что порой клиенты принимают прототип )

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

Ответить

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

0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Хакеры смогли обойти двухфакторную
авторизацию с помощью уговоров
Подписаться на push-уведомления