UX-исследователь — практический курс
UX-исследователь — практический курс
Начните карьеру в области UX или структурируйте свои знания с помощью уникального на рынке курса по UX-исследованию
Узнать подробнее

История создания Floating Action Button в Material Design

Как кнопка целевого действия стала символом Material Design

По словам сотрудников Google, создававших Material Design –  это не только дизайн-система, но также язык и философия дизайна. Адаптируемая библиотека цифровых строительных блоков росла и развивалась с момента ее появления в 2014 году, но плавающая кнопка целевого действия (Floating Action Button), также известная, как FAB, во многих отношениях по-прежнему представляет Material в его чистом виде.

«Большая часть Material Design была основана на идее упрощения для пользователей навигации по интерфейсам», – говорит ведущий дизайнер Бетани Фонг. Она работала над дизайном взаимодействия более мелких интерактивных компонентов, что помогло распределить функции на экране.

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

UX-исследователь
UX-исследователь
Станьте UX - исследователем - одним из самых востребованных специалистов в продуктовой команде
Забронировать место

Система, направленная на упрощение

Когда в октябре 2013 года концепция Material начала зарождаться, команда решала сложные фундаментальные вопросы о системе и ее отношениях с пользователями.

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

Николас Джиткофф, дизайнер: Все сводилось к упрощению – попытке упростить систему и уменьшить количество элементов на панелях инструментов. Особенно с мобильными устройствами, нам нужно было предоставить четкое руководство, чтобы пользователь мог понять суть продукта с того момента, как его увидел.

История создания Floating Action Button в Material Design
Обычная кнопка FAB, состоящая из (1) контейнера и (2) иконки

Матиас: Помню, как однажды Рич сказал: «Мы пришли к действительно радикальному, неортодоксальному решению. Мы не уверены, что оно вам понравится, но, думаем, что оно очень эффективно. Мы решили, что нам нужно только одно основное действие; все остальное можно спрятать». И я подумал: «Это безумие. Фантастика. Мне нравится. Давайте постараемся это сделать».

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

История создания Floating Action Button в Material Design
FAB в естественной среде обитания

Важность дискуссии

Сеансы критического анализа проводились с конца 2013 по 2014 год – часто еженедельно, иногда почти ежедневно – чтобы все участники команды Material собрались вместе для поиска исчерпывающего решения проблем. Таким образом они начали формировать принципы, инструменты, рекомендации и лучшие практики, которые будут определять новую систему, включая зарождающуюся FAB.

История создания Floating Action Button в Material Design

Рич Фулчер, UX-директор: Критический анализ был очень важен. Сначала люди отвечали: «Нам это нравится, в этом что-то есть».

Матиас: Все чувствовали, что такая возможность существует. Все отбросили свое эго и оставили заранее сложившиеся ограничения за дверью. Они просто задавались вопросом «как мы можем решить эту проблему».

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

Джонатан Ли, дизайнер: Было специально выбрано несколько особенностей, чтобы отличать фреймворк Material Design от других фреймворков. Одной особенностью стал визуальный стиль. Нечто среднее между скевоморфизмом и плоским дизайном, с тенями и системой высот, чтобы помочь людям понять, где элемент находится в Z-пространстве. Другой особенностью стал FAB.

FAB обретает форму

Как только было установлено, что FAB будет функциональной фокусной точкой дизайна, команда начала изучать, как она может выглядеть и вписаться в систему.

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

История создания Floating Action Button в Material Design

Николас: В самом начале мы рассматривали варианты с квадратными FAB и целым набором различных форм. Затем мы добавили яркость, чтобы привлечь к ней внимание, и поместили ее туда, где она была физически доступна на мобильном телефоне. Это стало основой конечной версии FAB.

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

Бетани: У нас были прекрасные сетки, но с эстетической точки зрения не хватало одной вещи – точки фокуса внутри них. FAB добавил ее. Она хорошо сидит на стыке между двумя листами бумаги и особенно хорошо на Т-образном стыке трех листов. Поэтому было естественно, что она будет располагаться на самом верху стопки бумаги.

Рич: В первых внутренних презентациях для демонстрации FAB, мы использовали небольшой деревянный диск из ремесленной мастерской с диапроектором, прозрачными пленками и небольшими кусочками бумаги для различных частей интерфейса. Нам нужно было точно рассчитать, сколько листов даст нужную глубину и тень.

История создания Floating Action Button в Material Design
Расширенный FAB (слева) и mini FAB (справа)

Подходящая аббревиатура

В конце концов, этой кнопке потребовалось название.

Бетани: Мы пробовали названия: «Основная кнопка», «Основное действие», «Кнопка основного действия», «Продвинутое действие».

Зак: Мы почти назвали ее шаром, что было бы странно.

Рич: Мы знали, что название должно не просто иметь для нас смысл; если мы внедряем этот элемент в остальную часть Google, нам нужно уметь кратко рассказать всю историю. Поэтому мы хотели, чтобы название напоминало, чем эта кнопка отличается от других и как она связана с остальными элементами на экране. Некоторое время мы описывали ее состояние как плавающее, но название закрепилось только тогда, когда мы начали использовать аббревиатуру FAB. Нам всем понравился этот вариант, и команда быстро приняла его.

Мир знакомится с Material

После почти восьми месяцев доработки в июне 2014 года Material был публично представлен на Google I/O, ежегодной конференции разработчиков Google.

Рич: Определенно были моменты, когда мы переходили от мысли «это действительно важно для Android» к «это будет иметь большое значение для Google». А потом нам внезапно сказали: «Вы будете частью основного выступления на I / O». Было здорово, что нам выделили десять минут на рассказ о нашей дизайн-системе, ее происхождении и значении для пользователей.

Бетани: Я думаю, что наибольший фурор произвела комбинация FAB и действительно хорошего моушен-дизайна, который мы построили вокруг нее. FAB хорошо воплощала нашу систему высот, потому что была точкой фокуса, а также потому что отбрасывала самую большую тень. Ее логическое обоснование казалось, нашло отклик как у дизайнеров и разработчиков, так и у пользователей.

История создания Floating Action Button в Material Design
FAB трансформируется в другие поверхности в приложениях (слева направо): меню, медиаплеер и панель набора номера

Дизайн, ориентированный на будущее

Шесть лет спустя, когда Material адаптируется для поддержки технических достижений и изменений платформ, FAB остается символом системы, созданной для простоты.

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

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

История создания Floating Action Button в Material Design

Джонатан: FAB действительно помогла Material Design стать культовым.

Бетани: UX-дизайнеры вечно находятся в противоречии с плохо спроектированными, сбивающими с толку, чрезмерно сложными интерфейсами, которые приводят к тому, что наши пользователи разочаровываются (в лучшем случае) и совершают ужасные ошибки (в худшем). Думаю, что FAB осталась, потому что это демонстрация надежды в программное обеспечение – воплощение философии. Она демонстрирует, как мы можем дать нашим пользователям одно действие, один маленький шаг вперед, который вселит в них уверенность как в приложении, так и в самих себя. Мне кажется совершенно правильным согласовать FAB с творческим действием в приложении, как будто мы можем противостоять всему деструктиву этого мира небольшими актами созидания. Возможно я много приписываю простой круглой кнопке на экране, но у меня было шесть лет, чтобы подумать об этом.

Total
13
Shares
Похожие статьи
Подробнее

О Dribbble и Behance

Dribbble и Behance – это места обитания хипстеров-рисовальщиков, которые называют себя дизайнерами. На этих площадках они публикуют красивые…

Еженедельная рассылка

Одно письмо с лучшими записями за неделю

Total
12
Share