neZabanen.Online — восемь прототипов

все живые, каждый в своём телефоне 375 × 812 эффекты кнопок ↓ знак и иконка ↓
масштаб

Эффекты кнопок — можно потрогать

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

01Вдавливание

Кнопка слегка уменьшается под пальцем. Самый дешёвый способ дать понять, что нажатие поймано.

02Волна от касания

Круг расходится из точки, где именно вы нажали. На тач-экране это заметно — палец видит свой след.

03Свечение

Ореол вокруг кнопки разгорается при нажатии. Хорошо смотрится на тёмной теме, на светлой почти не читается.

04Заливка слева

Контурная кнопка наливается цветом, текст перекрашивается. Для второстепенного действия рядом с главным.

05Обводка обегает

Рамка прочерчивается по периметру. Спокойный вариант — ничего не двигается и не мигает.

06Подъём и тень

На курсоре приподнимается, под пальцем — проваливается. Физика: кнопку действительно продавили.

07Блик за пальцем

Светлое пятно едет за курсором, а на телефоне — за точкой касания. Живо, но требует постоянной перерисовки.

08Стрелка уезжает

Двигается не кнопка, а иконка внутри. Подсказывает направление: дальше будет переход.

09Ожидание и результат

Кнопка сама становится индикатором: крутилка, затем галочка. Нужна там, где ответ приходит не мгновенно, — оплата, промокод.

10Удержание

Держите палец, пока полоса не дойдёт до конца. Защита от случайного нажатия — для отключения устройства или отмены подписки.

11Переключатель

Пилюля переезжает между вариантами. Для выбора из двух — например, срока подписки или темы.

12Виброотклик

Короткая вибрация в ответ на тап. Работает на Android; iOS из браузера вибрацию не даёт — там это доступно только через Telegram.

Знак и иконка бота

Пять вариантов: два образных и три буквенных. Главная проверка — не крупный размер, а 48 px в списке чатов и иконка на домашнем экране: там от логотипа остаётся силуэт. Знак берёт акцент палитры — переключите цвет и посмотрите, как он держится в каждой из восьми тем.