Гарні кнопки та ефект скла: як зробити дорогий інтерфейс

Простими словами: чому кнопка виглядає дорого

Знайоме відчуття? Заходиш на один сайт - і все хочеться помацати, все дихає. Відкриваєш інший - наче ті самі кнопки, ті самі блоки, а відчуття, ніби потрапив на форум із ремонту пралок. Річ тут не в бюджеті і не в секретному плагіні. Річ у десятку дрібниць. Поодинці їх майже не видно, а разом вони дають той самий ефект «зроблено з любовʼю».

Кнопка - найчесніший індикатор смаку. Маленький прямокутник, на якому ніде сховатися. Одразу видно: автор думав про деталі чи просто залив сірий квадрат кольором і пішов далі.

Навіщо це знати, якщо ти вайбкодиш інтерфейс

Ти пишеш нейромережі «зроби гарну кнопку» - і отримуєш щось середнє. Ні риба ні мʼясо. Щоб виправити результат, треба вміти назвати словами, чого саме бракує. Інакше застрягнеш у ролі «ну зроби якось краще», а це, чесно кажучи, не команда.

• Зможеш діагностувати, чому чужий (або свій) інтерфейс виглядає дешево, і лагодити це точково, а не навмання.
• Навчишся давати зрозумілий бриф: не «гарніше», а «додай мʼяку тінь, hover з легким підйомом і тонкий контур по кромці».
• Зрозумієш модний ефект скла зсередини - і перестанеш ліпити його де треба й не треба. А ліплять його зараз усі поспіль.
• Натренуєш око. Після цього уроку ти почнеш помічати деталі, які раніше проходили повз.

Девʼять із десяти «негарних» кнопок - це не поганий колір. Це різкі тіні, нуль реакції на курсор і мертвий, миттєвий перехід без анімації.

Що робить кнопку «дорогою»: розбираємо по шарах

Кожен шар маленький. Але прибери один - і картинка розсипається. Ідемо по порядку.

Форма кнопки: заокруглення кутів і пропорції

Гострі кути 90 градусів майже завжди виглядають грубо й старомодно. Легке заокруглення робить кнопку дружньою та сучасною. Нюанс один: заокруглення має бути осмисленим - або акуратно-мʼяке, або чесно-кругле (пігулка). А от проміжне «трохи на око» зазвичай виглядає випадковим.

Далі - повітря всередині. Текст не має впиратися в краї. Відступи з боків помітно більші, ніж згори й знизу. Це базова ознака кнопки, зробленої з розумом.

Тінь кнопки: натяк на висоту, а не ляпка

Тінь потрібна не «щоб було». Вона каже оку одну річ: кнопка піднята над фоном, її можна натиснути. І головна помилка новачка тут - жорстка темна тінь впритул до кнопки. Так світло в реальному світі просто не падає, і око це одразу відчуває.

Контур кнопки: тонка лінія, яка вирішує

Контур Контур (border) - тонка лінія по краю елемента. На кнопках її часто роблять напівпрозорою або трохи світлішою за саму кнопку, щоб відділити від фону, але не обважнити. - найбільш недооцінений прийом. Тонка, в один піксель, трохи світла лінія по верхній кромці імітує відблиск світла й додає кнопці обʼєм майже задарма. А напівпрозорий контур по всьому периметру акуратно відділяє кнопку від фону, коли тіні мало. Дрібниця? Так. Але саме з таких дрібниць усе й складається.

Стани hover і active: де кнопка оживає

Статична кнопка мертва. Живою її робить реакція на тебе. Мінімум - два стани:

• Hover Hover (наведення) - стан, коли курсор над елементом, але кнопка ще не натиснута. Зазвичай міняють яскравість або тінь, іноді трохи піднімають елемент. (навів курсор) - кнопка трохи спливає: стає світлішою або тінь злегка росте. Наче потягнулася тобі назустріч.
• Active Active (натискання) - стан у момент кліку, поки кнопка затиснута. Її зазвичай трохи вдавлюють: зменшують тінь і зсувають вниз на пару пікселів. (натиснув) - кнопка провалюється: тінь зменшується, сама вона опускається на пару пікселів. Як справжня фізична клавіша під пальцем.

Liquid glass: ефект скла, який знову в моді

Liquid glass Liquid glass (рідке скло) - стиль інтерфейсу з напівпрозорими розмитими елементами, які виглядають як матове скло поверх фону. Apple розкрутила його у своїх системах, але сама ідея стара - її давно знають під іменем glassmorphism. - це ефект матового скла: елемент напівпрозорий, а все, що під ним, розмивається, наче дивишся крізь запітніле вікно. Після того як цей стиль показали у свіжих системах Apple, його почали ліпити буквально всюди. І часто - зовсім не до місця.

З чого складається ефект скла

Склу потрібні три речі разом, інакше воно не читається:

• Розмиття того, що під ним ( blur Blur (розмиття) - у склі розмивається не сам елемент, а фон під ним. У вебі за це відповідає властивість backdrop-filter. Саме розмиття дає ефект матового скла. фону). Це і є «матовість». Без неї скло перетворюється на звичайний напівпрозорий прямокутник.
• Напівпрозорий шар поверх. Легка заливка, крізь яку просвічує розмитий фон. Не прозора повністю і не щільна - десь посередині.
• Тонкий світлий контур і відблиск по кромці. Це «товщина скла». Саме відблиск по краю відрізняє справжнє скло від каламутної плями.

Де скло доречне, а де лише псує

Скло - прийом для верхніх шарів: плаваючі панелі, меню, спливні картки, навігація поверх контенту. Усюди, де елемент чесно лежить над чимось. А от робити скляними основні кнопки дії - затія ризикована: прозорість знижує контраст, і текст легко стає нечитабельним. Головну кнопку залиш щільною. Скло віддай другорядним елементам - там воно до місця.

Готові брифи для нейромережі: кнопка і скло

Лізти в код руками не обовʼязково. А от тримати в голові чек-лист - корисно: так ти зрозуміло поясниш нейромережі, чого хочеш. Ось два готові брифи. Бери і пробуй.

Зроби кнопку дорогою і сучасною. Легке заокруглення кутів. Бічні відступи помітно більші за вертикальні. Мʼяка, сильно розмита напівпрозора тінь зі зміщенням вниз, не чорна. Тонкий світлий контур по верхній кромці для обʼєму. Стан наведення - кнопка трохи спливає, стає світлішою, тінь росте. Стан натискання - трохи провалюється, тінь зменшується. Усі переходи плавні, у частки секунди, без різких стрибків.

Зроби панель у стилі liquid glass. Під нею має бути живий фон - градієнт або фото, не суцільний колір. Розмиття фону під панеллю - ефект матового скла. Поверх - напівпрозорий шар середньої щільності. Тонкий світлий контур по краю і легкий відблиск по верхній кромці, імітація товщини скла. Мʼяка тінь знизу, щоб панель читалася як піднята. Текст усередині тримай контрастним і читабельним.

Часті помилки під час оформлення кнопок і скла

• Різка чорна тінь впритул до кнопки. Виглядає як наліпка. Розмивай тінь і роби її напівпрозорою.
• Мертві стани. Кнопка взагалі ніяк не реагує на курсор. Додай хоча б легкий hover - це половина відчуття «дорого».
• Миттєві переходи. Стан змінюється ривком. Будь-яка зміна має бути плавною, інакше все виглядає дешево.
• Скло на одноколірному фоні. Розмивати нічого, ефекту немає. Склу потрібен живий фон під ним.
• Перебір з усім одразу. Величезні тіні, кислотні градієнти, все блимає. Дорого читається стриманість, а не кількість ефектів.
• Скляна головна кнопка з блідим текстом. Прозорість убиває контраст. Важливі елементи тримай щільними й читабельними.