[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "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", "tablet" ], "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", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "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-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } } ]
{ "author_name": "Alexander Lashkov", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","ghost_buttons","\u043f\u0440\u0438\u0437\u0440\u0430\u0447\u043d\u044b\u0435_\u043a\u043d\u043e\u043f\u043a\u0438","\u043a\u043e\u043d\u0442\u0443\u0440\u043d\u044b\u0435_\u043a\u043d\u043e\u043f\u043a\u0438","\u043f\u043b\u043e\u0441\u043a\u0438\u0439_\u0432\u0435\u0431_\u0434\u0438\u0437\u0430\u0439\u043d","flat_design","\u0432\u043b\u0430\u0434\u0438\u043c\u0438\u0440_\u043a\u0443\u0434\u0438\u043d\u043e\u0432","\u0430\u0437\u0430\u043c\u0430\u0442_\u0438\u0432\u0430\u043d\u043e\u0432","\u043d\u0438\u043a\u0438\u0442\u0430_\u0435\u0444\u0438\u043c\u043e\u0432"], "comments": 22, "likes": 29, "favorites": 1, "is_advertisement": false, "section_name": "default", "id": "3940", "is_wide": "1" }
Alexander Lashkov
20 943

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

Одним из трендов веб-дизайна последнего времени стали призрачные или, как их еще называют, контурные кнопки (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  — сразу очевидно, какой из элементов там главный.

#Интерфейсы #ghost_buttons #призрачные_кнопки #контурные_кнопки #плоский_веб_дизайн #flat_design #владимир_кудинов #азамат_иванов #никита_ефимов

Статьи по теме
Стоит ли использовать в проекте бесплатные шрифты
Почему сообщения об ошибках — зло
Популярные материалы
Показать еще
{ "is_needs_advanced_access": false }

Комментарии Комм.

Популярные

По порядку

0

Прямой эфир

Приложение-плацебо скачали
больше миллиона раз
Подписаться на push-уведомления