Красивые кнопки и эффект стекла: как сделать дорогой интерфейс

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

Знакомое чувство? Заходишь на один сайт - и всё хочется потрогать, всё дышит. Открываешь другой - вроде те же кнопки, те же блоки, а ощущение, будто попал на форум по ремонту стиралок. Дело тут не в бюджете и не в секретном плагине. Дело в десятке мелочей. Поодиночке их почти не видно, а вместе они дают тот самый эффект «сделано с любовью».

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

Зачем это знать, если ты вайбкодишь интерфейс

Ты пишешь нейронке «сделай красивую кнопку» - и получаешь что-то среднее. Ни рыба ни мясо. Чтобы поправить результат, надо уметь назвать словами, чего именно не хватает. Иначе застрянешь в роли «ну сделай как-то получше», а это, честно говоря, не команда.

• Сможешь диагностировать, почему чужой (или свой) интерфейс выглядит дёшево, и чинить это точечно, а не наугад.
• Научишься давать внятный бриф: не «красивее», а «добавь мягкую тень, 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 - это половина ощущения «дорого».
• Мгновенные переходы. Состояние меняется рывком. Любая смена должна быть плавной, иначе всё выглядит дёшево.
• Стекло на одноцветном фоне. Размывать нечего, эффекта нет. Стеклу нужен живой фон под ним.
• Перебор со всем сразу. Огромные тени, кислотные градиенты, всё мигает. Дорого читается сдержанность, а не количество эффектов.
• Стеклянная главная кнопка с бледным текстом. Прозрачность убивает контраст. Важные элементы держи плотными и читаемыми.