Отзывчивость

Отклик начинается с касания, а не с действия: элемент уменьшается, как только на него лёг палец, остаётся сжатым, пока палец на нём, и возвращается к своему размеру, когда палец убрали. Так видно, что касание попало в нужный элемент, ещё до того, как что-то произошло.

Сжимается только то, что нажимается: чип без действия остаётся неподвижным.

Длительность — 150 мс, кривая — ease-in-out: движение плавно начинается и плавно заканчивается. Нажатие и отпускание анимируются одинаково, отдельных значений для каждого направления нет. Длительность одна на всё приложение — ни один элемент её не меняет.

Один и тот же множитель двигает края большой поверхности сильнее, чем маленькой. Круглая кнопка навбара 40 pt при 0.9 становится меньше на 4 pt. Карточка шириной 302 pt при 0.9 потеряла бы 30 pt, а при 0.97 теряет 9 pt. Поэтому значений три:

• 0.97 — крупные карточки и строки во всю ширину: промо-карточка, карточка защиты, строка предложения, строка истории, поле поиска, кредитная карта, главная кнопка перевода;
• 0.95 — чипы, плитки и небольшие кнопки: плитка категории, контакт перевода, карточка-статья, подсказка-вопрос, кнопка на стеклянной подложке, купон;
• 0.9 — маленькие кнопки-иконки: круглая кнопка навбара, пункт нижнего меню, аватар, микрофон, пилюля бонусов.

Значение по умолчанию — 0.95.

Трёх значений хватает почти везде. Отступают от них четыре элемента:

• 0.94 — миниатюра в ленте недавних фото в чате;
• 0.85 — крестик на вложении в чате, 20×20 pt;
• 0.92 и фон на время нажатия — клавиша цифровой клавиатуры;
• 0.97 и фон на время нажатия — строка в панели вложений.

Фон при нажатии — необязательная часть отклика. У него свой радиус скругления — у клавиши и у строки 16 pt, — а появляется и исчезает он вместе со сжатием. У обоих элементов нет собственной подложки — фон на время нажатия показывает их границы.

Палец ушёл дальше 10 pt по вертикали или горизонтали — элемент возвращается к своему размеру, а действие не срабатывает: жест достаётся прокрутке или карусели. Список можно листать, начав движение прямо с карточки, — она отпустит нажатие и не откроется.

Отменённое нажатие не возобновляется, даже если палец вернулся на место. Порог один для всех элементов.

Сжатие видно глазами, срабатывание чувствуется рукой. Тактильный отклик привязан к действию, а не к касанию: при обычном нажатии он приходит, когда палец убрали. Отменённое нажатие остаётся без отклика.

• light — лёгкий, почти везде: карточки, плитки, кнопки, пункты нижнего меню;
• selection — при переключении опции или режима: «Поиск в интернете» и «Думай усерднее» в панели вложений, режим сканера QR;
• medium — для «тяжёлых» действий: снимок камерой, открытие сканера, долгое нажатие, которое открывает ленту фото или поднимает карточку счёта.

Веб-прототип берёт те же три значения и называет их по смыслу: card — 0.97, control — 0.95, icon — 0.9. Длительность и кривая те же — 150 мс, ease-in-out; сдвиг дальше 10 px снимает сжатие. Отличия такие:

• пробел и Enter дают тот же отклик, что и палец: элемент сжат, пока клавиша нажата;
• тактильного отклика нет;
• при системной настройке «Уменьшить движение» элемент не сжимается, а затемняется — непрозрачность 0.65, без анимации;
• отключённый элемент на нажатие не отзывается.