Исходный размер 2280x3200

4.5. Мобильные аффордансы — палец, жест, досягаемость, отклик

Купить → постер

На десктопе аффорданс адресован глазу и курсору. На мобильном — телу в движении: тёплому, неточному, влажному пальцу. Лекция разбирает анатомию касания, зону досягаемости большого пальца, логику антиаффорданса — и через Хайдеггера объясняет, что происходит, когда интерфейс ломается и показывает своё нутро.

На прошлом занятии вы нарисовали сценарий и wireflow: последовательность шагов от входа до результата. Но wireflow остаётся логикой — стрелками и прямоугольниками; сегодня мы спускаемся с уровня логики на уровень тела, потому что мобильный интерфейс развёртывается как тактильная сцена: палец, стекло, жест, отклик, вибрация, задержка, инерция. Именно здесь ваш сценарий становится или не становится переживаемым.

Что такое аффорданс (и почему это не повтор третьего модуля)

В третьем модуле мы разбирали аффордансы как общую теорию: Гибсон, Норман, принцип перцептивной подсказки. Кнопка выглядит нажимаемой — значит, аффорданс работает. Ссылка подчёркнута — значит, понятно, что она кликабельна. Это важно, и это остаётся в силе.Но мобильный аффорданс оказывается чем-то другим.

Исходный размер 2304x1296

На десктопе аффорданс адресован глазу и курсору. Вы видите кнопку. Наводите курсор — появляется hover-эффект: подтверждение, что кнопка жива. Нажимаете — точно, аккуратно, двумя миллиметрами стрелки.На мобильном нет курсора. Нет hover. Нет стрелки. Есть палец — тёплый, неточный, закрывающий собой то, что он нажимает. Есть ладонь, которая держит устройство и одновременно ограничивает досягаемость. Есть тело, которое идёт, трясётся в вагоне, мёрзнет, потеет.Мобильный аффорданс адресован телу в движении — тёплому, неточному, усталому. Именно поэтому его нельзя проектировать по тем же правилам, что десктопный: здесь нужен другой, более телесный фокус.

Палец как орган проектирования

Анатомия касания

Когда вы нажимаете на экран, касание происходит не точкой (как курсор), а пятном — площадью подушечки пальца, примерно 7×7 мм. Apple рекомендует область касания не меньше 44×44 pt, Android — 48×48 dp; оба числа переводят размер человеческого пальца в единицы интерфейсной системы.

Исходный размер 1152x778

Если ваша кнопка меньше — пользователь промахнётся: вы спроектировали кнопку для мыши, а дали её пальцу.

Исходный размер 2304x1296

Палец закрывает то, что нажимает

На десктопе курсор указывает на объект, не загораживая его. На мобильном палец ложится сверху. В момент нажатия пользователь не видит, куда именно попал. Это фундаментальная проблема тачскрина — и причина, по которой:● Подтверждение нажатия (отклик) должно быть мгновенным: подсветка, анимация, вибрация. Пользователь не всегда видит то, что он осязает.● Критические действия (удалить, отправить, оплатить) не должны выполняться одним тапом. Нужен второй шаг — подтверждение.● Мелкие элементы рядом друг с другом — рецепт катастрофы. Тап-зоны должны иметь зазор.

Thumb zone: география досягаемости

Исходный размер 2304x1296
Исходный размер 1152x778

В полевом наблюдении Стивена Хобера 2013 года из 1333 эпизодов 49% приходились на удержание одной рукой; люди при этом меняли хват в зависимости от действия и среды (сводка исследования). Это исторический ориентир, а не вечная антропологическая константа: экраны выросли, жесты и устройства изменились. Поэтому географию своего интерфейса вы проверяете на современных телефонах и реальных руках.Зелёная зона (изи). Нижняя центральная часть экрана. Большой палец достаёт сюда легко, без напряжения. Здесь должно быть главное действие.Жёлтая зона (норм). Боковые края и средняя часть. Палец дотягивается, но с усилием. Здесь — вторичные действия и навигация.Красная зона (неа). Верхние углы, особенно дальний верхний (левый для правшей). Палец не достаёт без перехвата телефона. Здесь не должно быть ничего, что нужно часто.Почему навигация в современных приложениях переехала вниз. Tab bar внизу; bottom sheet; floating action button в нижнем правом углу; поиск, который раньше жил вверху, теперь опускается; Apple перенесла адресную строку Safari вниз — всё это чистая эргономика: экраны растут, а большой палец остаётся тем же.Для ваших проектов: откройте свой wireflow и спросите — где находится ключевое действие? Если в верхнем левом углу — вы проектируете для мыши, а не для пальца.

Интерактив 1. Аудит аффордансов

Формат: FigJam, индивидуально → обсуждение. 12 минут.Задание (8 минут):Выберите 3 мобильных приложения, которыми пользуетесь каждый день. Для каждого сделайте скриншот одного экрана и разметьте:🟢 Ясный аффорданс — сразу понятно, что здесь делать и как. Что именно подсказывает? (форма, цвет, размер, положение, текст)🟡 Скрытый аффорданс — действие возможно, но не очевидно (свайп, долгое нажатие, edge gesture). Как вы о нём узнали?🔴 Ложный аффорданс — элемент выглядит интерактивным, но не является (или наоборот). В чём ложь?Обсуждение (4 минуты):Разбираю 2–3 примера:● где ясный аффорданс работает потому, что он телесный (размер, положение), а не только визуальный,● где скрытый аффорданс — осознанный выбор дизайнера (а не ошибка),● где ложный аффорданс ведёт к реальной ошибке пользователя.Что это проверяет:Видите ли вы аффордансы в приложениях, которыми пользуетесь каждый день, — или они для вас прозрачны?

Жесты и их скрытость

Мобильный интерфейс знает десятки жестов. Вот основные:

Исходный размер 2304x764

Парадокс жеста: мощность и видимость

Жест — самый мощный и самый скрытый тип аффорданса. Кнопка видна. Текстовая ссылка видна. Свайп — невидим. Долгое нажатие — невидимо. Edge gesture — невидим.Это создаёт фундаментальную проблему: чем богаче жестовый словарь приложения, тем больше действий скрыто от нового пользователя.Решается это через два механизма:Discoverability (обнаружимость) — помогите найти жест в первый раз. Подсказка при первом запуске. Анимация-намёк (элемент слегка выезжает, показывая, что его можно свайпнуть). Текстовая подпись «свайпните для удаления».Learnability (обучаемость) — помогите запомнить жест навсегда. Если жест консистентен (свайп влево всегда удаляет, везде в приложении), человек выучивает его один раз. Если каждый экран ведёт себя по-своему — жесты не запоминаются.

Исходный размер 2304x1296

Когда жест лучше кнопки

Жест быстрее — свайп для архивации письма быстрее, чем «открыть → найти кнопку → нажать».Жест телеснее — pinch-to-zoom ощущается как физическое действие, а не как клик по «+».Жест экономит место — на маленьком экране кнопка занимает пространство, а жест — нет.

Когда жест хуже кнопки

Для критических действий — «удалить аккаунт» не должно быть свайпом. Слишком легко ошибиться.Для новых пользователей — если без жеста невозможно выполнить ключевое действие, новичок застрянет.При конфликте жестов — если свайп влево на одном экране удаляет, а на другом — открывает меню, пользователь сломается.

Интерактив 2. Thumb zone вашего проекта

Формат: FigJam, индивидуально. 10 минут.Задание (7 минут):Возьмите один ключевой экран вашего приложения (из wireflow, который вы рисовали на прошлом занятии). Нарисуйте поверх него карту досягаемости:🟢 Зелёная зона — естественная для большого пальца.🟡 Жёлтая зона — растяжка.🔴 Красная зона — недосягаемость.Теперь проверьте:● Где находится главное действие? В какой зоне?● Где находится навигация? Легко ли до неё дотянуться?● Есть ли что-то важное в красной зоне? Если да — как переместить?Запишите одну строку: «Я перенесу [что] из [зоны] в [зону], потому что…»Разбор (3 минуты):Смотрю на 2–3 экрана: у кого ключевое действие в правильном месте, у кого — нет, и как это починить.Что это проверяет:Проектируете ли вы для пальца или для курсора?

Тактильный отклик: разговор через вибрацию

Мобильный телефон умеет одну вещь, которую не умеет ни один другой экран: вибрировать. Это не декорация. Это канал коммуникации.

Haptics как язык

Современные смартфоны (Taptic Engine у Apple, вибромотор у Android) различают десятки типов вибрации:Мягкий тап — подтверждение касания. «Да, я тебя почувствовал».Жёсткий тап — подтверждение действия. «Сделано».Нотификация — входящее событие. «Обрати внимание».Ошибка — что-то пошло не так. «Стоп».Инерция — сопротивление при прокрутке до конца списка. «Дальше некуда».Каждый из этих паттернов — аффорданс. Не визуальный, а тактильный: тело получает информацию через кожу, минуя глаза. Это критически важно в ситуациях, когда пользователь не смотрит на экран: телефон в кармане, уведомление на совещании, навигация в наушниках.

Виртуальная кнопка

Самый радикальный пример тактильного аффорданса — кнопка Home в iPhone 7 и позднее. Физической кнопки нет. Есть плоская стеклянная поверхность. Но когда вы «нажимаете» — Taptic Engine создаёт вибрацию, настолько точно имитирующую щелчок механической кнопки, что вы верите: кнопка есть. Аффорданс создан целиком через haptics — палец чувствует то, чего не существует.Это по-настоящему странно. И это открывает серьёзный проектный вопрос: если можно создать иллюзию физической кнопки через вибрацию — что ещё можно «ощутить» в интерфейсе, чего нет на самом деле?

Микровзаимодействия: физика интерфейса

Мобильный интерфейс — не статичная картинка; он двигается, и движение само по себе становится аффордансом.

Инерционный скролл

Когда вы свайпаете список — он не останавливается мгновенно, а катится по инерции и замедляется, как физический объект; эффект сообщает пальцу вес списка: длинный катится дольше, короткий — быстро останавливается, и вы чувствуете объём контента, не считая строк.

Bounce: стенка в конце

Когда скролл достигает конца — экран пружинит, упруго отскакивает и возвращается. Этот bounce-эффект — аффорданс границы: тело понимает, что дальше некуда. Без bounce экран просто замирает — и пользователь не уверен: это конец списка или зависание?

Pull-to-refresh

Потянуть ленту вниз, чтобы обновить. Функционально это абсолютно избыточно: приложение могло бы обновлять контент автоматически. Но жест существует ради тактильного ритуала: потянул — отпустил — обновилось; пальцу есть что делать, ожидание заполняется действием.

Skeleton screens

Когда контент грузится, вместо спиннера показываются серые заготовки: формы того, что скоро появится. Прямоугольники вместо текста, круги вместо аватаров. Это аффорданс ожидания: тело видит форму будущего контента и настраивается. Спиннер говорит: «жди». Skeleton screen говорит: «вот что тут будет — оно уже почти здесь».

Исходный размер 2304x1296

Ложные аффордансы: когда интерфейс лжёт

Ложный аффорданс разворачивается там, где элемент выглядит интерактивным, но не является таковым — или, напротив, скрывает интерактивность за нейтральной внешностью.На мобильном устройстве это особенно опасно. Пользователь на ходу, его внимание ограничено, он не может экспериментировать: нажал, не работает, нажал ещё раз, не работает — закрыл. На десктопе можно покрутить курсором, посмотреть hover-состояния, подумать. На мобильном — нет.

Типичные ложные аффордансы

Текст, похожий на ссылку. Синий подчёркнутый текст, который не кликабелен. Палец тапает — ничего. Раздражение.Карточка без действия. Элемент с тенью, скруглёнными углами, визуально «поднятый» — но тап по нему ничего не делает. Тень обещает интерактивность, которой нет.Свайп, которого нет. Элемент списка, который выглядит так же, как свайпабельные элементы в других приложениях, — но не свайпается.Декоративная иконка. Значок шестерёнки, который не ведёт в настройки. Значок сердца, который не означает «добавить в избранное».

Anti-affordance: «здесь нельзя»

Иногда нужен обратный аффорданс — явное указание на то, что действие невозможно. Неактивная кнопка (серая, полупрозрачная) — anti-affordance: «это кнопка, но сейчас она недоступна». Это лучше, чем невидимая кнопка (пользователь не знает, что она существует) и лучше, чем активная кнопка, которая ведёт к ошибке.

Исходный размер 2304x1296

Нигредо-момент: когда интерфейс показывает своё нутро. У Хайдеггера инструмент, пока он работает, остаётся «подручным» (zuhanden) — прозрачным, невидимым, растворённым в действии. Но стоит ему сломаться — он обнаруживает себя в режиме «наличности» (vorhanden): впервые виден как вещь, чужеродная, сопротивляющаяся. Ложный аффорданс производит именно это: пользователь тапает — ничего не происходит, и интерфейс впервые обнаруживает свою материальность, перестаёт быть «действием» и становится объектом. Это болезненно — и это честно. Нигредо-дизайн начинается ровно здесь: не с красивой кнопки, а с момента, когда инструмент отказывает и материал впервые показывает, кто он на самом деле.

Интерактив 3. Жест или кнопка

Формат: 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, когда мы будем собирать дизайн-систему.

Исходный размер 2304x941

Три линзы, которые меняют оптику аффордансов

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

И увидим три способа думать о мобильном аффордансе, которых нет ни в гайдлайнах Apple, ни в Material Design.

Линза 1. Хиазм: палец, который трогает и который трогают

Исходный размер 2304x1296

Морис Мерло-Понти развивает понятие хиазма (χίασμα, «перекрестие») в поздней, оставшейся незавершённой книге «Видимое и невидимое». Видящий принадлежит видимому миру, трогающее тело само доступно прикосновению; отношения пересекаются, но не сливаются в идеальную симметрию. Его пример с двумя руками особенно точен: левая касается правой, правая чувствует прикосновение, а затем роли способны поменяться. Совпасть в один миг до конца они не могут — между трогающим и трогаемым остаётся крошечное расхождение. Хиазм держится на обратимости вместе с её пределом.И вот — перед нами тачскрин.Когда вы нажимаете на экран, палец трогает стекло. Но стекло отвечает: оно вибрирует (haptic feedback), оно меняет картинку под пальцем (визуальный отклик), оно даже нагревается при долгом использовании. Палец трогает экран — и экран «трогает» палец. Это хиазм: не односторонний ввод (палец → интерфейс), а перекрёстное событие, в котором обе стороны одновременно активны.Что это значит для понимания аффорданса?Термин аффорданс ввёл экологический психолог Джеймс Гибсон: возможность действия возникает в отношении свойств среды и способностей животного — лестница доступна восхождению для одного тела и недоступна для другого. Дон Норман перенёс понятие в дизайн и позднее подчёркивал различие между аффордансами и signifiers, воспринимаемыми знаками возможного действия. Поэтому кнопка не хранит «нажимаемость» внутри изображения: её размер, контраст и положение встречаются со зрением, пальцем, навыком и контекстом.Но через оптику Мерло-Понти аффорданс разворачивается как событие между объектом и субъектом — не локализованное ни в одном из них. Аффорданс возникает в перекрестье пальца и экрана. Он не «находится» в кнопке — он случается, когда палец встречается с кнопкой. Палец тоже привносит в эту встречу: свой размер, свою влажность, свою температуру, свою неточность, свою усталость. Разный палец — разный аффорданс. Разный контекст — разный аффорданс. Одна и та же кнопка в жару (мокрый палец) и в мороз (палец в перчатке) — это два разных аффорданса.

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

Линза 2. Проклятая часть: жест как растрата

В «Проклятой части» (1949) Жорж Батай противопоставляет ограниченную экономику предприятия всеобщей экономике потоков энергии. Живые системы получают избыток, который невозможно бесконечно направлять в рост; он уходит в роскошь, праздник, жертву, войну или иной расход без производительной отдачи. Батай начинает почти космически — с солнечной энергии, щедро растрачиваемой на Землю, — а затем рассматривает потлач и исторические режимы расхода. Его теория не является руководством по микроанимации. Проектная линза переносит вопрос об избытке в телесную экономику интерфейса: что происходит с жестом, который превышает кратчайшее функциональное действие?

Исходный размер 2304x1296

Какое это имеет отношение к нашей мобильной жестикуляции?Вся классическая теория usability — это ограниченная экономика интерфейса: минимум кликов, минимум когнитивной нагрузки, кратчайший путь к результату. Закон Фиттса: сократите расстояние, увеличьте цель. Закон Хика: уменьшите число вариантов. Оптимизируйте. Экономьте. Не тратьте лишнего.Но посмотрите на жесты, которые делают мобильный интерфейс живым:Pull-to-refresh. Автоматическое обновление могло бы сократить действие, однако ручной жест сообщает момент запроса и возвращает ощущение контроля. Потянул вниз, отпустил, увидел обновление: тактильная растрата одновременно оказывается ритуалом проверки.Длинный свайп Tinder. Можно было сделать кнопку «нравится / не нравится». Это было бы эффективнее: один тап вместо широкого жеста. Но свайп — это растрата движения, которая совпадает с эмоциональным жестом: отбросить или притянуть. Тело участвует в решении не пальцем, а всей рукой. Это избыточно. И это точно.Bounce-эффект. Когда экран пружинит в конце скролла — это чистая растрата. Функционально достаточно остановить прокрутку. Но пружина тратит энергию на обратный ход, и тело получает тактильное удовольствие от упругости.Инерционный скролл. Список мог бы прокручиваться ровно на ту дистанцию, на которую свайпнул палец. Вместо этого он катится дальше, расточая движение, как камень, брошенный по льду. Это расточительность — и она создаёт ощущение веса, физики, жизни.Все эти вещи — проклятая часть мобильного интерфейса. Они не сводятся к пользе. Они не оптимизируют путь к результату. С точки зрения ограниченной экономики usability они — лишние. Но уберите их — и интерфейс станет мёртвым, сухим, механическим. Подобным ресторану, в котором подают калории, но не еду.Батай понял это про культуру: общество, которое только накапливает и не умеет тратить, задыхается. В мобильном дизайне та же логика: интерфейс, который только оптимизирует и не умеет растрачивать, теряет тело пользователя. Потому что тело — не машина оптимизации. Тело любит ненужное.

Вывод для вашего проектирования: не всё в мобильном аффордансе должно быть «эффективным». Ищите места, где уместна щедрость жеста — избыточное движение, тактильный ритуал, физическая метафора. Это не декорация. Это проклятая часть, без которой ваш интерфейс — склад функций, а не телесный опыт.Уточнение: аффект — не готовая эмоция. В аффективной теории, например у Брайана Массуми, аффект описывает интенсивность, которая проходит через тело раньше устойчивого именования: вздрагивание, удовольствие от упругости, телесное предвосхищение отклика. Это поле спорно, и простой секундомер не разделит аффект, эмоцию и чувство. Для проекта достаточно более скромного различия: pull-to-refresh, bounce и инерционный скролл создают мгновенную телесную интенсивность, но сами по себе не строят доверия или лояльности. Для последних требуются история использования и опыт последствий.Для вашего проектирования: щедрый жест — хорошее решение. Но bounce создаёт хороший аффект, а не лояльность. Второе строится иначе — и не в Figma.Вопрос к проекту: где телесная избыточность поддерживает смысл действия, а где служит лишь украшением?Вмешательство: сохраните один полезный ритуал — протяжный свайп, паузу, упругость, вибрацию — и удалите один эффект, который тратит время и внимание без телесного смысла.

Исходный размер 2304x1296

Линза 3. Муга: жест без жестикулирующего

Японское муга (無我) переводит буддийское учение об анатмане, отсутствии неизменного самостоятельного «я». Это не специальное название транса у экрана и не романтическое растворение личности: буддийский анализ направлен против привязанности к постоянной субстанции субъекта. В японских искусствах рядом возникают практические идеалы безыскусного действия, чаще обозначаемые словом мусин — «не-ум», состояние без цепляющейся рефлексии. В этой линзе мы сознательно сближаем разные контексты, чтобы исследовать жест, временно утративший явного хозяина; за буддийскую доктрину такой перенос выдавать нельзя.Это звучит абстрактно. Но вот конкретная ситуация.23:47. Вы лежите в кровати. Свет выключен. Телефон в руке. Лента скроллится. Палец движется сам — вверх, вверх, вверх. Вы не принимаете решение «сейчас я проскроллю». Решения нет. Есть ритмичное автоматическое движение подушечки пальца по стеклу. Мысли где-то в стороне. Глаза скользят по контенту, не цепляясь. Сколько времени прошло — неизвестно. Вы не скроллите ленту. Лента скроллится через вас.«Жест без жестикулирующего» — авторская проектная формула. Она обозначает момент, когда привычка, лента, палец и рекомендательная система образуют цикл, а отдельное решение перестаёт быть заметным. Граница не исчезает метафизически; распределение действия становится непрозрачным.Прозрачность может быть полезной: инструмент не требует внимания к себе, палец выполняет знакомое действие, человек занимается своей задачей. Но хайдеггеровская подручность и буддийское не-я принадлежат разным философским системам; одно не является следующей ступенью другого. Их встреча здесь работает как напряжённая аналогия, позволяющая спросить, кому служит исчезновение интерфейса из внимания.С другой стороны, это — территория эксплуатации. Бесконечный скролл, дофаминовые петли, 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. Карта аффордансов — для каждого интерактивного элемента:

Исходный размер 2304x279

3. Одно проектное решение — опишите одним предложением: «В [экране] я заменил [кнопку / жест] на [жест / кнопку], потому что…»4. Одна «проклятая часть» — назовите один элемент в вашем интерфейсе, который функционально избыточен (анимация, bounce, тактильный отклик, инерция), но телесно необходим. Объясните, зачем он нужен.5. Двойной аудит — приложите машинную проверку и результаты теста на физическом телефоне. Отдельно отметьте одно расхождение и принятое после него решение.Формат сдачи: FigJam или Figma.

Итоговая формула

Мобильный аффорданс случается как событие между пальцем и стеклом.Вы проектируете тактильную сцену: где палец ложится, что он чувствует, что ему отвечает, куда он тянется. Ваш интерфейс будет жить в чьей-то руке — в движении, в спешке, в темноте, в холоде; и если рука не поймёт, что здесь делать, никакая визуальная красота не спасёт.На следующем занятии мы поднимемся обратно с уровня тела на уровень времени: ритм, внимание, пространство — мобильный UX как временна́я композиция.

Исходный размер 2304x1296
4.5. Мобильные аффордансы — палец, жест, досягаемость, отклик
Проект создан 28.07.2026
Глава:
28
29
30
31
32