История кнопок в картинках: текстовые ссылки, скевоморфизм, Flat и Material design. А ещё я собрал все виды кнопок в этом посте.

Как всё начиналось

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

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

Уверен, что всему этому есть технологические объяснения, но я не технический специалист и оцениваю глазами и эмоциями.

Скевоморфизм и кнопки

Дальше было больше! Кнопки становились всё более замысловатыми: им добавляли объём, раскрашивали в разные цвета, чтобы привлекать больше внимание пользователей, делали их «стеклянными», придумывали форму – не только прямоугольник и прямоугольник с круглыми углами, но и с закругленными и овальными, иногда даже форму кнопки было сложно обозвать чем-то конкретным и многое другое. Скевоморфизм и вот это всё довольно долго правили балом в веб-дизайне. Спасибо Apple, которые произвели революцию в мобильных гаджетах и начали перекладывать привычные физические инструменты в мобильный интерфейс, чтобы пользователь не потерялся. За Apple побежали разработчики приложений и игр иии началось — калькулятор, заметки, аудиоплееры, диджейские микшеры и т.п.

Flat

А потом пришёл флет и всё переигралось. Представьте себе, что вы, например, очень любите овсяные печеньки. Едите их и едите, едите и потом, бац! К своему неприятному удивлению, обнаруживаете, что вкус вам приелся, бывает, даже начинаешь различать нюансы, которые раньше не замечал и от них может даже начать мутить. Я вот думаю, что обилие графического многообразия, перенасыщения, сработало и в случае с кнопками – всех стало мутить от пестроты.

Все стали резко всё упрощать. Иконки, интерфейсы, контролы, привычные списки, иллюстрации – всё стало плоским. И даже кнопки. Лично мне тренд не очень нравился, но я понимал, что когда-нибудь это приведёт нас к чему-то большему. К сожалению, достаточно долго этот тренд насыщал всех вокруг своими спорными решениями по выделению кнопки из общей плоскости. Иногда, действительно, было непонятно, где кнопка, а где остальные элементы интерфейса. Все наперебой начали «играть с упрощением», но не у всех получалось хорошо.

Material design

И вот появился Material design, который ввёл дополнительные вспомогательные приёмы, позволяющие выделять кнопку из общего массива элементов. Google разбили кнопки на основные типы: размещение над элементами интерфейса, визуальный эффект приподнятости, плоская кнопка «обратная связь», нажатия и наведения и другие правила. Эти правила распространяются далеко за пределы работы с кнопками и подробно описаны в документациях. Спасибо Google.

Типичные атрибуты современных кнопок

Яркая и контрастная заливка для CTA (Call to Action) кнопок

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

 Призрачные кнопки с инверсией заливки

Призрачная кнопка – это кнопка с прозрачной подложкой, обрамлённая в рамку. Чтобы кнопка не терялась среди контента, её обычно располагают довольно свободно на достаточном расстоянии от прочих элементов интерфейса. При наведении, как правило, в таких кнопках принято использовать яркие и контрастные цвета – происходит эффект инверсии.

Прямоугольные формы с острыми и закругленными углами, кнопки, которые часто не имеют привычные нам формы кнопок

Овальные и круглые кнопки разных форм и пропорций

 «Дышащие» кнопки с вспомогательным анимационным эффектом

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

Градиент и необычная заливка

Заливка фона не сплошным цветом, а с применением градиента создаёт контрастный или лёгкий переход от одного оттенка к другому. Что добавляет глубины.

 

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

Пробуйте, экспериментируйте, предлагайте и придумывайте!
Как менялась кнопка с 2009 года по 2017.

Узнавайте последние новости студии в нашем telegram-канале: Зефир и мир

Хочу подписаться

Получайте последние новости первыми