Лого vc.ru

Новый тренд веб-дизайна: контурные кнопки

Новый тренд веб-дизайна: контурные кнопки

Одним из трендов веб-дизайна последнего времени стали призрачные или, как их еще называют, контурные кнопки (ghost buttons). Они имеют привычную форму, обычно содержат надпись или призыв к действию, а единственное их отличие заключается в прозрачности фона. Именно о призрачных кнопках пойдет речь в очередном выпуске рубрики «Интерфейсы».

Поделиться

Главная задача призрачных кнопок, которые эксперты считают частью общей «революции плоского дизайна», заключается в привлечении внимания.

Зачем они нужны

Всё больше дизайнеров прибегает к использованию таких визуальных элементов, соответственно, растет число сайтов с прозрачными кнопками. Этому способствует и простота реализации данного решения средствами HTML5 и CSS3.

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

Призрачные кнопки используются далеко не только на зарубежных сайтах, их все чаще можно встретить и в Рунете:

Редакция ЦП поинтересовалась у отечественных профессионалов, используют ли они призрачные кнопки в своих проектах, и как относятся к данному визуальному решению.

Владимир Кудиновдизайнер Designmodo

Каждый раз, когда Flat UI начинает тухлеть, ему кто-нибудь дает пинка под зад. Так и здесь ребята решили подумать, как еще упростить форму кнопок и инпутов, и решили практически убрать эту самую форму. Дизайн интерфейсов быстро приближается к своему отсутствию, оголяя UX, который долго время прятался за рюшечками UI. Flat всем доказал, что главное — это контекст, который подсказывает, где какой элемент должен быть. Не всегда важно, чтобы кнопка выглядела так, как будто снова вернулась из конца девяностых. Поэтому я считаю, что ghost elements вполне себе интересное решение, если правильно его сочетать и сильно не увлекаться. Например, в сложных интерфейсах такие элементы лучше сочетать с обычными флэтовыми кнопками.

Мне кажется, появление ghost buttons как-то связано с увлечением делать full screen backgrounds с 50% затемненностью и создавать поверх них интерфейсы и формы. Тут появляется возможность разделить внимание человека на бэкграунд-фотографию, отражающий стиль продукта, и одновременно на форму с ghost элементами, которая не сильно кричит о своем присутствии, но тем не менее заметна.

Я думаю, можно с умом использовать абсолютно любой тренд, который рождается в дизайне. Главное — сильно не увлекаться им и выбрать для себя золотую середину.

Никита ЕфимовUX-партизан в UXpresso

Как и у любого визуального элемента или паттерна, у призрачных кнопок есть свой контекст использования. Они отлично работают как элемент эмоционального дизайна. Ведь правда, выглядят они гармонично (при грамотном визуальном дизайне), как сказали бы лет 5 назад: «сексуально». Я часто предлагаю нашим дизайнерам использовать такой подход при создании лэндигов или промо-страниц. Мы для своего учебного центра IT Mine тоже использовали такие кнопки, но лишь как вспомогательные элементы

Я не верю в эффективность таких кнопок в качестве CTA среди прочего визуального «шума» на странице. Можете ли вы себе представить такую призрачную кнопку у Амазона? Вряд ли компания пойдет на такой шаг.


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

P.S. Предвижу новый виток борьбы с заказчиками в своей работе, связанной с необходимостью отклонять хотелки типа «хочу такие кнопочки в приложении/на сайте» или «ну ведь это сейчас популярно».

Азамат ИвановUI/UX-дизайнер «Билайн»

Спорить о том, что удобны ли «гост баттоны» или нет, всё равно, что спорить на тему «нужно подчеркивать ссылки или не нужно?». Однозначно, данные кнопки выглядят отлично и подходят для сайтов, которые спроектированы с упором на внешний стиль, где минимальное количество элементов, спокойный фон и призрачная кнопка распознаётся без проблем. Важно знать, когда стоит использовать контурные кнопки, а когда нет. В тот момент, когда пользователь задумался «А где кнопка? И кнопка ли это вообще?», ну да, наверное, лучше прибегнуть к более понятным элементам.

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

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

Владимир Шрейдероснователь Glitché

Кто придумывает нарицательные имена для таких очевидных вещей? Кнопка, она и в Африке кнопка, и если завтра Apple пожелает вернуться к оформлению кнопок iOS в стиле «Аква», то всем придется переделывать их сайты, потому что они будут выглядеть несовременно. 

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

Статьи по теме
Стоит ли использовать в проекте бесплатные шрифты23 апреля 2014, 11:47
Почему сообщения об ошибках — зло14 мая 2014, 17:09
Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

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

0

Это касается не только сексуальных кнопок.

0

A/B тест вам в помощь, для анализа

0

Никита Ефимов - вообще бред написал

Олег, а почему вы считаете это бредом?

Простите, не хотел вас обидеть.
1. На вашем сайте для учебного центра - гоуст кнопка на очень неоднородном фоне выглядит как минимум не заметно, а то и странно
2. Пример амазона вообще ни о чем. Это ж нужно представить такое - прозрачная кнопка на полностью белом сайте. Как вы до этого додумались? Она же просто становится белой, но не прозрачной

Не, совершенно без обид :)

2) Про Амазон: так я и хотел проиллюстрировать, что она бесполезна в данном случае. Ну и в статье написано "Одним из главных плюсов кнопок-призраков является тот факт, что благодаря своей прозрачности они легко вписываются в интерфейс практически любого сайта.". На примере Амазона я и показал, что это не совсем так.

1) Это тоже иллюстрация того, что она используется совместно с CTA-кнопкой "Зарегистрироваться" (которая совсем не прозрачная), а не вместо нее (т.к. является менее значимой в данном случае). Вот пример с того же сайта, где она более уместна и более заметна

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

0

"Этому способствует и простота реализации данного решения средствами HTML5 и CSS3..." - а какие сложности были при создании таких кнопок в CSS2?

Эх, опередили)) Более того, сложностей и во времена CSS 1 не возникало бы. Видимо, в статье про новые тренды в веб-дизайне обязаны присутствовать HTML5 и CSS3, иначе читатели могут усомниться в трендовости ;)

Как ключевики что ли? Это как совсем не давно помнится было про responsive, ajax, а ещё несколько лет, в старые-добрые времена про flash. "У тебя что, сайт не работает на ajax/flash и хуёво отображается на мобильном телефоне? Фу, кому нужен такой безликий отстой? Ты быдло-дизайнер!"

Something strange in your web design...
What do you call?
Ghost buttons!
Тара-тара-та-та!

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

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Izobretatel

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

Почему в Санкт-Петербурге сложно найти дизайнера интерфейсов
0
Egor Voinov

Недавно было здесь интервью с их основателем. У них трафик-трекер и биржа трафика.

Avito оказалась единственным российским представителем в рейтинге Deloitte Technology Fast 500
0
Ефим Дутый

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

Почему в Санкт-Петербурге сложно найти дизайнера интерфейсов
0
Дмитрий Трипалюк
hyper weapon

Собственно, так и не нашел ответ на вопрос из заголовка ))

Почему бизнес-издание Inc назвало Riot Games лучшей компанией 2016 года
0
Salawat Waliullin

(экологии)

«Добро пожаловать в 2030 год»: член датского парламента о счастливой жизни без приватности и личных вещей
0
Показать еще