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

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

Головне завдання примарних кнопок, які експерти вважають частиною загальної «революції плоского дизайну», полягає в залученні уваги.

Все більше дизайнерів вдається до використання таких візуальних елементів, відповідно, зростає число сайтів з прозорими кнопками. Цьому сприяє і простота реалізації даного рішення засобами HTML5 та CSS3.

Одним з головних плюсів кнопок-привидів є той факт, що завдяки своїй прозорості вони легко вписуються в інтерфейс практично будь-якого сайту. Це рішення, внаслідок своєї відносної новизни, виглядає свіжим і незаяложені, що подобається відвідувачам.

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

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

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

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

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

Микита ЄфімовUX-партизан в UXpresso

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

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

Тому, в першу чергу проектувальник або дизайнер повинен задуматися про розв'язуваних користувачем завдання і обов'язково пам'ятати про візуальну ієрархію : Фокус + потік + угрупування + акцент + вирівнювання. Якщо на екрані багато інформації або вона не впорядкована, то людина навряд чи помітить вашу красиву кнопку.

PS Передбачаю новий виток боротьби з замовниками в своїй роботі, пов'язаної з необхідністю відхиляти забаганки типу «хочу такі кнопочки в додатку / на сайті» або «ну адже це зараз популярно».

Сперечатися про те, що чи зручні «гост Баттона» чи ні, все одно, що сперечатися на тему «потрібно підкреслювати посилання або не потрібно?». Однозначно, дані кнопки виглядають відмінно і підходять для сайтів, які спроектовані з упором на зовнішній стиль, де мінімальна кількість елементів, спокійний фон і примарна кнопка розпізнається без проблем. Важливо знати, коли варто використовувати контурні кнопки, а коли ні. У той момент, коли користувач задумався «А де кнопка? І кнопка чи це взагалі? », Ну да, напевно, краще вдатися до більш зрозумілим елементам.

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

Красиво це чи ні - кожен вирішує для себе сам, в міру розвиненості свого смаку. Особисто мені контурні кнопки дуже подобаються.

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

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

Якщо на сторінці така кнопка привертає недостатньо уваги, але виглядає стильно, я, скоріше, підкреслю її наявність яскравої заливкою, адже це безпосередньо пов'язано з простотою використання продукту, яким багато дизайнерів нехтують на користь візуального досвіду. Їм здається, що тоненька лінія, відсутність заливки і легкий шрифт - це минималистично, а значить за заповітом Джобса. Це велика помилка, особливо непрофесійно виглядає ряд таких кнопок. Але якщо у вас в розпорядженні багато місця і мало елементів, така кнопка цілком може бути доречна. У будь-якому випадку, напис, оточена контрастним фону кольором, сприймається краще. Погляньте на екран виклику в iPhone - відразу очевидно, який з елементів там головний.

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

Матеріал опублікований користувачем. Натисніть кнопку «Написати», щоб поділитися думкою або розповісти про свій проект.