История кнопок в картинках от head of design Дмитрия Уколова: текстовые ссылки, скевоморфизм, Flat и Material design.
Как всё начиналось
Во времена зарождения интернета весь контент был в текстовых цветных ссылках. Уже потом появились кнопки для обозначения перехода или запуска какого-либо действия, рекламные кликабельные баннеры размером с современные кнопки и т.п. Раньше кнопки привлекали к себе внимание с помощью анимации бликов, гиф картинок, переливаний и радужных паттернов, но это в основном касалось веб-сайтов.
В интерфейсах разработчики применяли другие приёмы для отделения кнопки от всего остального содержимого экрана. Делалось это за счёт теней или обводок, когда сами кнопки оставались нейтральными и уж точно не кричащими. А если всё-таки использовали цвета, то, казалось, что рандомно тыкали пипеткой в цвет.
Уверен, что всему этому есть технологические объяснения, но я не технический специалист и оцениваю глазами и эмоциями.
Скевоморфизм и кнопки
Дальше было больше! Кнопки становились всё более замысловатыми: им добавляли объём, раскрашивали в разные цвета, чтобы привлекать больше внимание пользователей, делали их «стеклянными», придумывали форму – не только прямоугольник и прямоугольник с круглыми углами, но и с закругленными и овальными, иногда даже форму кнопки было сложно обозвать чем-то конкретным и многое другое. Скевоморфизм и вот это всё довольно долго правили балом в веб-дизайне. Спасибо Apple, которые произвели революцию в мобильных гаджетах и начали перекладывать привычные физические инструменты в мобильный интерфейс, чтобы пользователь не потерялся. За Apple побежали разработчики приложений и игр иии началось — калькулятор, заметки, аудиоплееры, диджейские микшеры и т.п.
Flat
А потом пришёл флет и всё переигралось. Представьте себе, что вы, например, очень любите овсяные печеньки. Едите их и едите, едите и потом, бац! К своему неприятному удивлению, обнаруживаете, что вкус вам приелся, бывает, даже начинаешь различать нюансы, которые раньше не замечал и от них может даже начать мутить. Я вот думаю, что обилие графического многообразия, перенасыщения, сработало и в случае с кнопками – всех стало мутить от пестроты.
Все стали резко всё упрощать. Иконки, интерфейсы, контролы, привычные списки, иллюстрации – всё стало плоским. И даже кнопки. Лично мне тренд не очень нравился, но я понимал, что когда-нибудь это приведёт нас к чему-то большему. К сожалению, достаточно долго этот тренд насыщал всех вокруг своими спорными решениями по выделению кнопки из общей плоскости. Иногда, действительно, было непонятно, где кнопка, а где остальные элементы интерфейса. Все наперебой начали «играть с упрощением», но не у всех получалось хорошо.
Material design
И вот появился Material design, который ввёл дополнительные вспомогательные приёмы, позволяющие выделять кнопку из общего массива элементов. Google разбили кнопки на основные типы: размещение над элементами интерфейса, визуальный эффект приподнятости, плоская кнопка «обратная связь», нажатия и наведения и другие правила. Эти правила распространяются далеко за пределы работы с кнопками и подробно описаны в документациях. Спасибо Google.
Плоская
«Летающая» кнопка
Приподнятая копка
Material design
Типичные атрибуты современных кнопок
Яркая и контрастная заливка для CTA (Call to Action) кнопок
Самые привычные для нас кнопки: «подписаться», «купить», «позвонить» и т.д. В настоящее время концепция и конечная цель диктует форму и стиль. Одинаково хорошо смотрятся кнопки с тенями и без, кнопки с ярким свечением, кнопки необычных форм, анимированные кнопки, которые реагируют на наведение и т.п.
кнопка «подписаться» на Youtube
Призрачные кнопки с инверсией заливки
Призрачная кнопка – это кнопка с прозрачной подложкой, обрамлённая в рамку. Чтобы кнопка не терялась среди контента, её обычно располагают довольно свободно на достаточном расстоянии от прочих элементов интерфейса. При наведении, как правило, в таких кнопках принято использовать яркие и контрастные цвета – происходит эффект инверсии.
Прямоугольные формы с острыми и закругленными углами, кнопки, которые часто не имеют привычные нам формы кнопок
Овальные и круглые кнопки разных форм и пропорций
«Дышащие» кнопки с вспомогательным анимационным эффектом
Кнопки могут менять свою форму при нажатии или трансформироваться в другое состояние или вообще перестают быть кнопками. Уже таким эффектом не удивить пользователей, но выглядит он всегда классно и необычно. Плюс добавляются дополнительные функции за счёт спрятанных в них других кнопок.
Градиент и необычная заливка
Заливка фона не сплошным цветом, а с применением градиента создаёт контрастный или лёгкий переход от одного оттенка к другому. Что добавляет глубины.
Старайтесь в работе прибегать к нестандартным подходам, где это уместно, придумывайте дополнительные назначения на кнопки, если это не создаёт трудности для пользователя. Подумайте, может ли кнопка ещё нести какую-то дополнительную функцию?
Пробуйте, экспериментируйте, предлагайте и придумывайте!
Как менялась кнопка с 2009 года по 2017.
