На десктопе аффорданс адресован глазу и курсору. На мобильном — телу в движении: тёплому, неточному, влажному пальцу. Лекция разбирает анатомию касания, зону досягаемости большого пальца, логику антиаффорданса — и через Хайдеггера объясняет, что происходит, когда интерфейс ломается и показывает своё нутро.
На прошлом занятии вы нарисовали сценарий и wireflow: последовательность шагов от входа до результата. Но wireflow — это логика. Стрелки и прямоугольники. Сегодня мы спускаемся с уровня логики на уровень тела. Потому что мобильный интерфейс — это не схема потоков, а тактильная сцена: палец, стекло, жест, отклик, вибрация, задержка, инерция. Именно здесь ваш сценарий становится или не становится переживаемым.
Что такое аффорданс (и почему это не повтор третьего модуля)
В третьем модуле мы разбирали аффордансы как общую теорию: Гибсон, Норман, принцип перцептивной подсказки. Кнопка выглядит нажимаемой — значит, аффорданс работает. Ссылка подчёркнута — значит, понятно, что она кликабельна. Это важно, и это остаётся в силе.
Но мобильный аффорданс оказывается чем-то другим.
На десктопе аффорданс адресован глазу и курсору. Вы видите кнопку. Наводите курсор — появляется hover-эффект: подтверждение, что кнопка жива. Нажимаете — точно, аккуратно, двумя миллиметрами стрелки.
На мобильном нет курсора. Нет hover. Нет стрелки. Есть палец — влажный, неточный, закрывающий собой то, что он нажимает. Есть ладонь, которая держит устройство и одновременно ограничивает досягаемость. Есть тело, которое идёт, трясётся в вагоне, мёрзнет, потеет.
Мобильный аффорданс адресован телу в движении — тёплому, слабому, усталому. Именно поэтому его нельзя проектировать по тем же правилам, что десктопный: здесь нужен другой, более телесный фокус.
Палец как орган проектирования
Анатомия касания
Когда вы нажимаете на экран, касание происходит не точкой (как курсор), а пятном — площадью подушечки пальца, примерно 7×7 мм. Apple Human Interface Guidelines рекомендует минимальный размер тап-зоны 44×44 pt, Google Material Design — 48×48 dp; оба числа переводят размер человеческого пальца в пиксели.
Если ваша кнопка меньше — пользователь промахнётся: вы спроектировали кнопку для мыши, а дали её пальцу.
Палец закрывает то, что нажимает
На десктопе курсор указывает на объект, не загораживая его. На мобильном палец ложится сверху. В момент нажатия пользователь не видит, куда именно попал. Это фундаментальная проблема тачскрина — и причина, по которой:
● Подтверждение нажатия (отклик) должно быть мгновенным: подсветка, анимация, вибрация. Пользователь не всегда видит то, что он осязает.
● Критические действия (удалить, отправить, оплатить) не должны выполняться одним тапом. Нужен второй шаг — подтверждение.
● Мелкие элементы рядом друг с другом — рецепт катастрофы. Тап-зоны должны иметь зазор.
Thumb zone: география досягаемости
Стивен Хобер (Steven Hoober) провёл исследование того, как люди держат телефон. Результат: 49% — одной рукой, большим пальцем. Это определяет всю географию экрана.
Зелёная зона (изи). Нижняя центральная часть экрана. Большой палец достаёт сюда легко, без напряжения. Здесь должно быть главное действие.
Жёлтая зона (норм). Боковые края и средняя часть. Палец дотягивается, но с усилием. Здесь — вторичные действия и навигация.
Красная зона (неа). Верхние углы, особенно дальний верхний (левый для правшей). Палец не достаёт без перехвата телефона. Здесь не должно быть ничего, что нужно часто.
Почему навигация в современных приложениях переехали вниз. Tab bar внизу; bottom sheet; floating action button в нижнем правом углу; поиск, который раньше жил вверху, теперь опускается; Apple перенесла адресную строку Safari вниз — всё это чистая эргономика: экраны растут, а большой палец остаётся тем же.
Для ваших проектов: откройте свой wireflow и спросите — где находится ключевое действие? Если в верхнем левом углу — вы проектируете для мыши, а не для пальца.
Интерактив 1. Аудит аффордансов
Формат: FigJam, индивидуально → обсуждение. 12 минут.
Задание (8 минут):
Выберите 3 мобильных приложения, которыми пользуетесь каждый день. Для каждого сделайте скриншот одного экрана и разметьте:
🟢 Ясный аффорданс — сразу понятно, что здесь делать и как. Что именно подсказывает? (форма, цвет, размер, положение, текст)
🟡 Скрытый аффорданс — действие возможно, но не очевидно (свайп, долгое нажатие, edge gesture). Как вы о нём узнали?
🔴 Ложный аффорданс — элемент выглядит интерактивным, но не является (или наоборот). В чём ложь?
Обсуждение (4 минуты):
Разбираю 2–3 примера:
● где ясный аффорданс работает потому, что он телесный (размер, положение), а не только визуальный,
● где скрытый аффорданс — осознанный выбор дизайнера (а не ошибка),
● где ложный аффорданс ведёт к реальной ошибке пользователя.
Что это проверяет:
Видите ли вы аффордансы в приложениях, которыми пользуетесь каждый день, — или они для вас прозрачны?
Жесты и их скрытость
Мобильный интерфейс знает десятки жестов. Вот основные:
Парадокс жеста: мощность vs. видимость
Жест — самый мощный и самый скрытый тип аффорданса. Кнопка видна. Текстовая ссылка видна. Свайп — невидим. Долгое нажатие — невидимо. Edge gesture — невидим.
Это создаёт фундаментальную проблему: чем богаче жестовый словарь приложения, тем больше действий скрыто от нового пользователя.
Решается это через два механизма:
Discoverability (обнаружимость) — помогите найти жест в первый раз. Подсказка при первом запуске. Анимация-намёк (элемент слегка выезжает, показывая, что его можно свайпнуть). Текстовая подпись «свайпните для удаления».
Learnability (обучаемость) — помогите запомнить жест навсегда. Если жест консистентен (свайп влево всегда удаляет, везде в приложении), человек выучивает его один раз. Если каждый экран ведёт себя по-своему — жесты не запоминаются.
Когда жест лучше кнопки
● Жест быстрее — свайп для архивации письма быстрее, чем «открыть → найти кнопку → нажать».
● Жест телеснее — pinch-to-zoom ощущается как физическое действие, а не как клик по «+».
● Жест экономит место — на маленьком экране кнопка занимает пространство, а жест — нет.
Когда жест хуже кнопки
● Для критических действий — «удалить аккаунт» не должно быть свайпом. Слишком легко ошибиться.
● Для новых пользователей — если без жеста невозможно выполнить ключевое действие, новичок застрянет.
● При конфликте жестов — если свайп влево на одном экране удаляет, а на другом — открывает меню, пользователь сломается.
Интерактив 2. Thumb zone вашего проекта
Формат: FigJam, индивидуально. 10 минут.
Задание (7 минут):
Возьмите один ключевой экран вашего приложения (из wireflow, который вы рисовали на прошлом занятии). Нарисуйте поверх него карту досягаемости:
🟢 Зелёная зона — естественная для большого пальца.
🟡 Жёлтая зона — растяжка.
🔴 Красная зона — недосягаемость.
Теперь проверьте:
● Где находится главное действие? В какой зоне?
● Где находится навигация? Легко ли до неё дотянуться?
● Есть ли что-то важное в красной зоне? Если да — как переместить?
Запишите одну строку: «Я перенесу [что] из [зоны] в [зону], потому что…»
Разбор (3 минуты):
Смотрю на 2–3 экрана: у кого ключевое действие в правильном месте, у кого — нет, и как это починить.
Что это проверяет:
Проектируете ли вы для пальца или для курсора?
Тактильный отклик: разговор через вибрацию
Мобильный телефон умеет одну вещь, которую не умеет ни один другой экран: вибрировать. Это не декорация. Это канал коммуникации.
Haptics как язык
Современные смартфоны (Taptic Engine у Apple, вибромотор у Android) различают десятки типов вибрации:
● Мягкий тап — подтверждение касания. «Да, я тебя почувствовал».
● Жёсткий тап — подтверждение действия. «Сделано».
● Нотификация — входящее событие. «Обрати внимание».
● Ошибка — что-то пошло не так. «Стоп».
● Инерция — сопротивление при прокрутке до конца списка. «Дальше некуда».
Каждый из этих паттернов — аффорданс. Не визуальный, а тактильный: тело получает информацию через кожу, минуя глаза. Это критически важно в ситуациях, когда пользователь не смотрит на экран: телефон в кармане, уведомление на совещании, навигация в наушниках.
Виртуальная кнопка
Самый радикальный пример тактильного аффорданса — кнопка Home в iPhone 7 и позднее. Физической кнопки нет. Есть плоская стеклянная поверхность. Но когда вы «нажимаете» — Taptic Engine создаёт вибрацию, настолько точно имитирующую щелчок механической кнопки, что вы верите: кнопка есть. Аффорданс создан целиком через haptics — палец чувствует то, чего не существует.
Это по-настоящему странно. И это открывает серьёзный проектный вопрос: если можно создать иллюзию физической кнопки через вибрацию — что ещё можно «ощутить» в интерфейсе, чего нет на самом деле?
Екатерина Никитина. Tact — невербальный мессенджер (2021)
Микровзаимодействия: физика интерфейса
Мобильный интерфейс — не статичная картинка. Он двигается. И движение — это аффорданс.
Инерционный скролл
Когда вы свайпаете список — он не останавливается мгновенно. Он катится по инерции и замедляется, как физический объект. Этот эффект — не украшение. Он сообщает пальцу вес списка: длинный список катится дольше, короткий — быстро останавливается. Вы чувствуете объём контента, не считая строк.
Bounce: стенка в конце
Когда скролл достигает конца — экран пружинит, упруго отскакивает и возвращается. Этот bounce-эффект — аффорданс границы: тело понимает, что дальше некуда. Без bounce экран просто замирает — и пользователь не уверен: это конец списка или зависание?
Pull-to-refresh
Потянуть ленту вниз, чтобы обновить. Функционально это абсолютно избыточно: приложение могло бы обновлять контент автоматически. Но жест существует ради тактильного ритуала: потянул — отпустил — обновилось. Пальцу есть что делать. Ожидание заполняется действием.
Skeleton screens
Когда контент грузится, вместо спиннера показываются серые заготовки: формы того, что скоро появится. Прямоугольники вместо текста, круги вместо аватаров. Это аффорданс ожидания: тело видит форму будущего контента и настраивается. Спиннер говорит: «жди». Skeleton screen говорит: «вот что тут будет — оно уже почти здесь».
Ложные аффордансы: когда интерфейс лжёт
Ложный аффорданс — элемент, который выглядит интерактивным, но таковым не является (или наоборот).
На мобильном устройстве это особенно опасно. Пользователь на ходу, его внимание ограничено, он не может экспериментировать: нажал, не работает, нажал ещё раз, не работает — закрыл. На десктопе можно покрутить курсором, посмотреть hover-состояния, подумать. На мобильном — нет.
Типичные ложные аффордансы
● Текст, похожий на ссылку. Синий подчёркнутый текст, который не кликабелен. Палец тапает — ничего. Раздражение.
● Карточка без действия. Элемент с тенью, скруглёнными углами, визуально «поднятый» — но тап по нему ничего не делает. Тень обещает интерактивность, которой нет.
● Свайп, которого нет. Элемент списка, который выглядит так же, как свайпабельные элементы в других приложениях, — но не свайпается.
● Декоративная иконка. Значок шестерёнки, который не ведёт в настройки. Значок сердца, который не означает «добавить в избранное».
Anti-affordance: «здесь нельзя»
Иногда нужен обратный аффорданс — явное указание на то, что действие невозможно. Неактивная кнопка (серая, полупрозрачная) — anti-affordance: «это кнопка, но сейчас она недоступна». Это лучше, чем невидимая кнопка (пользователь не знает, что она существует) и лучше, чем активная кнопка, которая ведёт к ошибке.
Это нигредо-момент: когда интерфейс показывает своё нутро. Напомню, что у Хайдеггера инструмент, пока он работает, остаётся «подручным» (zuhanden) — прозрачным, невидимым, растворённым в действии. Но стоит ему сломаться — он обнаруживает себя в режиме «наличности» (vorhanden): впервые виден как вещь, чужеродная, сопротивляющаяся. Ложный аффорданс производит именно это: пользователь тапает — ничего не происходит, и интерфейс впервые обнаруживает свою материальность, перестаёт быть «действием» и становится объектом. Это болезненно — и это честно. Нигредо-дизайн начинается ровно здесь: не с красивой кнопки, а с момента, когда инструмент отказывает и материал впервые показывает, кто он на самом деле.
Интерактив 3. Жест vs. кнопка
Формат: FigJam, работа в парах. 12 минут.
Задание (8 минут):
Выберите одно действие из вашего приложения (любое: добавить в избранное, удалить, подтвердить, перейти назад, обновить). Спроектируйте два варианта его выполнения:
Вариант А: кнопка. Нарисуйте экран с видимой кнопкой для этого действия. Укажите: где она расположена, какого размера, как выглядит, что происходит при нажатии.
Вариант Б: жест. Нарисуйте тот же экран, но действие выполняется жестом (свайп, долгое нажатие, pull — что подходит). Укажите: какой жест, как пользователь о нём узнаёт, что происходит.
Под обоими вариантами — одна строка: «Для моего приложения лучше вариант __, потому что…»
Обсуждение в парах (4 минуты):
Покажите оба варианта партнёру. Партнёр выбирает — и объясняет свой выбор. Совпадает ли с вашим?
Что это проверяет:
Понимаете ли вы, что выбор между кнопкой и жестом — это проектное решение, а не вопрос вкуса?
Нативные паттерны: жестовый словарь платформы
Каждая мобильная платформа — iOS, Android — задаёт набор стандартных взаимодействий. Это жестовый словарь, который пользователь уже знает, потому что выучил его в других приложениях.
Ключевые паттерны
● Tab bar (нижняя навигация) — 3–5 разделов, всегда доступны. Большой палец достаёт без усилий. Ключевой навигационный аффорданс.
● Bottom sheet — панель, выезжающая снизу. Свайп вниз — закрыть, свайп вверх — развернуть. Идеальна для вторичных действий и деталей.
● Floating action button (FAB) — круглая кнопка в нижнем правом углу (Material Design). Одно главное действие: создать, добавить, написать. Спорный паттерн: заметен, но перекрывает контент.
● Navigation bar (верхняя панель) — заголовок, кнопка «назад», дополнительные действия. На больших экранах попадает в красную зону — поэтому Apple добавила Reachability (двойной тап по нижнему краю опускает экран).
● Swipe-to-delete / archive — свайп по элементу списка. Стандарт iOS: свайп влево — удалить/архивировать. Настолько привычный, что пользователи ожидают его даже там, где он не реализован.
Когда следовать паттерну
Почти всегда. Стандартный паттерн — это обещание, которое платформа дала пользователю за вас. Если tab bar ведёт себя как tab bar во всех приложениях — пользователю не нужно учиться. Его палец уже знает.
Когда отступать от паттерна
Только если вы понимаете, что делаете и зачем. Tinder заменил кнопки «да / нет» на свайп влево / вправо — и это сработало, потому что жест совпал с эмоциональным действием: отбросить или притянуть. Это не нарушение конвенции ради оригинальности, а создание нового аффорданса, в котором тело участвует в решении.
Подробнее о платформенных системах — в лекции 7, когда мы будем собирать дизайн-систему.
Заглянем в наш философский тринокль
И увидим три способа думать о мобильном аффордансе, которых нет ни в гайдлайнах Apple, ни в Material Design.
Десять минут. Три хода, расширяющих оптику. Для проекта не обязательны — но полезны тем, кто хочет понимать, что делает жест, а не только какой жест выбрать.
Линза 1. Хиазм: палец, который трогает и который трогают
Морис Мерло-Понти, французский феноменолог, описал хиазм (χίασμα, «перекрестие») — взаимопроникновение тела и мира, видящего и видимого, трогающего и трогаемого. Его знаменитый пример: положите правую руку на стол и дотроньтесь до неё левой рукой. Вы одновременно трогаете и чувствуете, как вас трогают. Субъект и объект меняются местами в одном и том же жесте. Граница между «я» и «мир» оказывается не стеной, а перекрёстком.
И вот — перед нами тачскрин.
Когда вы нажимаете на экран, палец трогает стекло. Но стекло отвечает: оно вибрирует (haptic feedback), оно меняет картинку под пальцем (визуальный отклик), оно даже нагревается при долгом использовании. Палец трогает экран — и экран «трогает» палец. Это хиазм: не односторонний ввод (палец → интерфейс), а перекрёстное событие, в котором обе стороны одновременно активны.
Что это значит для понимания аффорданса?
Стандартная теория (Норман) говорит: аффорданс — это свойство объекта, которое подсказывает действие. Кнопка подсказывает нажатие. Слайдер подсказывает перетаскивание. Объект — активный. Субъект — реагирующий.
Но через оптику Мерло-Понти аффорданс — не свойство объекта и не свойство субъекта, а событие между ними. Аффорданс возникает в перекрестье пальца и экрана. Он не «находится» в кнопке — он случается, когда палец встречается с кнопкой. Палец тоже привносит в эту встречу: свой размер, свою влажность, свою температуру, свою неточность, свою усталость. Разный палец — разный аффорданс. Разный контекст — разный аффорданс. Одна и та же кнопка в жару (мокрый палец) и в мороз (палец в перчатке) — это два разных аффорданса.
Вывод для вашего проектирования: перестаньте думать об аффордансе как о свойстве интерфейса. Думайте о нём как о встрече. Вы проектируете не подсказку — вы проектируете условия для события между пальцем и стеклом. И палец в этом событии — не пассивный инструмент, а полноправный участник со своей физикой, своими ограничениями, своим характером.
Жорж Батай
Линза 2. Проклятая часть: жест как растрата
Жорж Батай, французский мыслитель, противопоставил два типа экономики. Ограниченная экономика — привычная нам логика: произвести, сохранить, инвестировать, приумножить. Минимизировать затраты, максимизировать пользу. Всеобщая экономика — радикально другая: любая система производит избыток, и этот избыток невозможно целиком реинвестировать. Его нужно потратить — расточить, принести в жертву, сжечь. Батай назвал этот неинтегрируемый избыток проклятой частью (la part maudite): то, что не поддаётся хозяйственному освоению и должно быть растрачено.
Какое это имеет отношние к нашей мобильной жестикуляции?
Вся классическая теория usability — это ограниченная экономика интерфейса: минимум кликов, минимум когнитивной нагрузки, кратчайший путь к результату. Закон Фиттса: сократите расстояние, увеличьте цель. Закон Хика: уменьшите число вариантов. Оптимизируйте. Экономьте. Не тратьте лишнего.
Но посмотрите на жесты, которые делают мобильный интерфейс живым:
● Pull-to-refresh. Функционально бессмысленный: приложение может обновить контент само, автоматически, без вашего участия. Но жест существует — и он нужен. Потянул вниз, отпустил, увидел обновление. Это ритуал. Это тактильная растрата — избыточное действие, которое создаёт ощущение контроля и причастности.
● Длинный свайп Tinder. Можно было сделать кнопку «нравится / не нравится». Это было бы эффективнее: один тап вместо широкого жеста. Но свайп — это растрата движения, которая совпадает с эмоциональным жестом: отбросить или притянуть. Тело участвует в решении не пальцем, а всей рукой. Это избыточно. И это точно.
● Bounce-эффект. Когда экран пружинит в конце скролла — это чистая растрата. Функционально достаточно остановить прокрутку. Но пружина тратит энергию на обратный ход, и тело получает тактильное удовольствие от упругости.
● Инерционный скролл. Список мог бы прокручиваться ровно на ту дистанцию, на которую свайпнул палец. Вместо этого он катится дальше, расточая движение, как камень, брошенный по льду. Это расточительность — и она создаёт ощущение веса, физики, жизни.
Все эти вещи — проклятая часть мобильного интерфейса. Они не сводятся к пользе. Они не оптимизируют путь к результату. С точки зрения ограниченной экономики usability они — лишние. Но уберите их — и интерфейс станет мёртвым, сухим, механическим. Подобным ресторану, в котором подают калории, но не еду.
Батай понял это про культуру: общество, которое только накапливает и не умеет тратить, задыхается. В мобильном дизайне та же логика: интерфейс, который только оптимизирует и не умеет растрачивать, теряет тело пользователя. Потому что тело — не машина оптимизации. Тело любит ненужное.
Вывод для вашего проектирования: не всё в мобильном аффордансе должно быть «эффективным». Ищите места, где уместна щедрость жеста — избыточное движение, тактильный ритуал, физическая метафора. Это не декорация. Это проклятая часть, без которой ваш интерфейс — склад функций, а не телесный опыт.
Уточнение: аффект — не эмоция. Батай даёт язык для избыточного жеста — но важно понимать, на каком уровне он работает. Психология различает по длительности: аффект (секунды, телесная реакция), эмоция (минуты–часы, осознаётся), чувство (дни–месяцы, накапливается). Pull-to-refresh, bounce, инерционный скролл — это аффекты: мгновенные вспышки, которые не оседают и не строят привязанности. Именно здесь ломается стандартная риторика «эмоционального дизайна»: маскоты, Easter eggs и микроанимации производят аффекты — и принимают их за нечто большее. Ощущение «дружелюбности» складывается из тысяч аффективных вспышек — но само по себе оно не равно чувству и тем более лояльности. Для чувства нужны история, время, практика использования.
Для вашего проектирования: щедрый жест — хорошее решение. Но bounce создаёт хороший аффект, а не лояльность. Второе строится иначе — и не в Figma.
Линза 3. Муга: жест без жестикулирующего
В буддийской философии муга (無我) — отсутствие фиксированного «я», несубстанциальность субъекта. Не «я исчезаю», а «никакого отдельного „я“ никогда и не было»: то, что мы принимаем за устойчивый субъект, — это поток, привычка, иллюзия самотождественности.
Это звучит абстрактно. Но вот конкретная ситуация.
23:47. Вы лежите в кровати. Свет выключен. Телефон в руке. Лента скроллится. Палец движется сам — вверх, вверх, вверх. Вы не принимаете решение «сейчас я проскроллю». Решения нет. Есть ритмичное автоматическое движение подушечки пальца по стеклу. Мысли где-то в стороне. Глаза скользят по контенту, не цепляясь. Сколько времени прошло — неизвестно. Вы не скроллите ленту. Лента скроллится через вас.
Это муга в мобильном интерфейсе: жест без жестикулирующего. Момент, когда граница между пользователем и интерфейсом растворяется настолько, что непонятно, кто кем управляет.
С одной стороны, это — идеал. Весь разговор о подручности (Zuhandenheit) из первой лекции сводится к этому: инструмент должен быть настолько прозрачен, что пользователь не замечает его. Не думает о телефоне — думает через телефон. Палец не «нажимает кнопку» — палец делает то, что нужно, и интерфейс растворяется. Хороший аффорданс ведёт к муга: действие становится настолько естественным, что субъект-«я» исчезает из уравнения.
С другой стороны, это — территория эксплуатации. Бесконечный скролл, дофаминовые петли, autoplay, pull-to-refresh как компульсия — всё это работает именно потому, что достигает муга. Пользователь не решает скроллить — он скроллит. Не решает смотреть следующее видео — оно уже играет. «Я» спит, палец работает. Это дизайн, который не обслуживает человека, а использует его растворённость.
Для проектировщика здесь возникает этический выбор. Вы проектируете аффордансы. Хорошие аффордансы ведут к прозрачности — к состоянию, в котором палец и интерфейс работают «сами». Но для чего они работают? Если муга служит задаче человека (быстро оплатить, записать мысль, найти маршрут) — это хорошая прозрачность. Если муга служит задаче платформы (удержать, заставить листать, не дать закрыть) — это эксплуатация прозрачности.
Ответственный дизайнер, достигнув муга, должен встроить момент пробуждения: точку, в которой интерфейс мягко возвращает пользователю его «я». Показывает: «Вы уже 40 минут здесь». Останавливает autoplay. Закрывает бесконечный скролл конечным списком. Даёт паузу вместо следующей дозы. Это не против usability — это за человека.
Вывод для вашего проектирования: стремитесь к прозрачности жеста — но проектируйте и выход из неё. Лучший мобильный аффорданс — тот, который работает незаметно, но знает, когда пора стать заметным. Когда пора сказать: «Эй, ты ещё здесь?»
Интерактив 4. Wireframe с пометками аффордансов
Формат: FigJam, индивидуально. 12 минут.
Задание (10 минут):
Возьмите 3 ключевых экрана из вашего wireflow (первый вход, ключевое действие, результат). Для каждого нарисуйте wireframe — грубо, без красоты — и добавьте пометки аффордансов:
Для каждого интерактивного элемента укажите:
● Тип аффорданса: тап, свайп, долгое нажатие, скролл, pull-to-refresh, другое.
● Видимость: ясный (видимая кнопка), скрытый (жест), антиаффорданс (неактивный элемент).
● Отклик: что пользователь чувствует после действия — визуально, тактильно, аудиально.
● Зона досягаемости: 🟢 естественная, 🟡 растяжка, 🔴 недосягаемость.
Обязательно отметьте:
🔵 Одно место, где вы используете жест вместо кнопки — и почему.
🟠 Одно место, где есть тактильный отклик (вибрация, bounce, анимация) — и что он сообщает.
Разбор (2 минуты):
Быстро смотрю на 2–3 доски: есть ли пометки, есть ли отклик, лежит ли ключевое действие в зелёной зоне.
Что это проверяет:
Можете ли вы думать об экране не только как о картинке, но и как о тактильной сцене?
Что вы должны вынести из этой лекции
● Понимание того, что мобильный аффорданс — это подсказка для тела, а не для глаза.
● Карту досягаемости вашего ключевого экрана (зелёная, жёлтая, красная зоны).
● Различение ясных, скрытых и ложных аффордансов — и умение находить их в чужих приложениях.
● Осознанный выбор между кнопкой и жестом хотя бы в одном месте вашего проекта.
● Wireframe с пометками аффордансов и откликов.
Домашнее задание
Набор wireframe-экранов с пометками аффордансов и жестов.
Возьмите 5 ключевых экранов вашего приложения (из wireflow). Для каждого:
1. Wireframe — грубая разметка: что где расположено.
2. Карта аффордансов — для каждого интерактивного элемента:
3. Одно проектное решение — опишите одним предложением: «В [экране] я заменил [кнопку / жест] на [жест / кнопку], потому что…»
4. Одна «проклятая часть» — назовите один элемент в вашем интерфейсе, который функционально избыточен (анимация, bounce, тактильный отклик, инерция), но телесно необходим. Объясните, зачем он нужен.
Формат сдачи: FigJam или Figma.
Итоговая формула
Мобильный аффорданс — это не подсказка на экране, а событие между пальцем и стеклом.
Вы проектируете не картинку, а тактильную сцену: где палец ложится, что он чувствует, что ему отвечает, куда он тянется. Ваш интерфейс будет жить не в Figma, а в чьей-то руке — в движении, в спешке, в темноте, в холоде. И если рука не поймёт, что здесь делать, — никакая визуальная красота не спасёт.
На следующем занятии мы поднимемся обратно с уровня тела на уровень времени: ритм, внимание, пространство — мобильный UX как временна́я композиция.
