Основы мобильного UX/UI и Figma
Чем UX отличается от UI в мобильном приложении
UX = полный путь пользователя (удобство, логика), UI = визуальные элементы экрана (кнопки, шрифты, цвет).
Перечислите 4 основных принципа WCAG 2.2, применимых к мобильным экранам.
1) Контраст 4.5:1;
2) Размер тач-мишени ≥44×44 px;
3) Отсутствие зависимости только от цвета;
4) Ориентация (нельзя блокировать portrait/landscape).
Какой breakpoint считается стандартным переходом от мобильного к планшетному макету?
600 dp (Material 3) / 744 pt (iOS).
Какой UI-паттерн использует Tinder для основного действия?
Swipe-card (swipe left/right).
Как создать компонент-вариант в Figma для трёх тем и двух размеров?
Использовать Properties: Theme=(Light, Dark, Auto), Size=(Small, Large) → 3×2=6 variants в одном Component Set.
Назовите три ключевых отличия мобильного интерфейса от веб-интерфейса.
1) Экран меньше → иерархия компактнее;
2) Сенсорный ввод → размеры тач-мишеней ≥44×44 pt;
3) Ограниченность ресурсов (батарея, сеть) → лаконичные анимации.
Чем ISO 9241-210 отличается от ISO 9241-220 по акценту на ИИ-взаимодействие?
210 — общее human-centred design; 220 добавляет требования к прозрачности, контролю и доверию при взаимодействии с ИИ.
Как использовать сетку 4-pt/8-pt для создания отзывчивого мобильного интерфейса?
Все размеры, отступы и радиусы кратны 4 или 8 → обеспечивают целочисленный pixel-perfect при любом масштабе.
Назовите три параметра Material 3 Motion и их рекомендуемые длительности.
1) Simple — 100 ms;
2) Emphasized — 300 ms;
3) Exit — 150 ms.
Как подключить REST API к Figma через плагин для динамического контента?
Плагин «DataLab» или «Google Sheets Sync»: endpoint → JSON → map fields to text layers.
Какое преимущество Figma даёт работа «в облаке» над Sketch?
Одновременное реальное редактирование несколькими дизайнерами без сохранения файлов локально.
Как правостороннее письмо влияет на расположение FAB в Android?
FAB смещают в левый нижний угол, чтобы не перекрывал системный жест «назад» справа.
Какой принцип Гештальта лежит в основе группировки карточек в ленте?
Принцип близости (малый межкарточный отступ) и общего региона (фон).
Какое ограничение высоты клавиатуры нужно учесть под iOS 17?
216 pt (портрет) / 162 pt (ландшафт) без SafeArea.
Какие метрики нужно собрать при юзабилити-тесте high-fi прототипа?
Task-success rate, time-on-task, error rate, SUS, NASA-TLX.
Что такое low-fi прототип и зачем он нужен?
Бумажные или каркасные макеты, проверяют архитектуру и потоки до визуализации → экономия времени.
Приведи пример цветового табу в культуре Японии при мобильном дизайне.
Белый цвет = траур, поэтому кнопка «Купить» только белым может восприниматься негативно.
Какие два CSS-подхода (в Figma-экспорте) обеспечивают резиновые картинки?
max-width: 100% + height: auto и object-fit: cover
Как анимация «shared-element transition» реализуется в Figma-прототипе?
Smart Animate + одинаковое имя слоя в двух кадрах + Auto-Layout.
Кимерийская проверка: как выявить «ложное срабатывание» TalkBack при swipe?
Включить «Display speech output» и пройти маршрут: если фокус прыгает через скрытый элемент → лишний importantForAccessibility="yes".
Какой стандартный паттерн навигации использует iOS для возврата назад?
Swipe от левого края экрана (back-swipe) + стрелка в верхнем левом углу NavigationBar.
Что значит «planet-centred design» в контексте выбора цветовой палитры?
Использовать тёмные темы и низкую насыщенность → снижение энергопотребления OLED-экранов и CO₂-выбросов дата-центров.
Как контрастность 4,5:1 влияет на читаемость текста в тёмной теме?
Обеспечивает соответствие WCAG 2.2 уровня AA при любом уровне яркости OLED-экрана.
В чём различие HIG «tab bar» и Material «navigation rail» по количеству пунктов?
HIG: 3–5 пунктов; Material rail: 3–7 пунктов.
Спроектировать систему дизайн-токенов, совместимую с iOS, Android и веб: перечисли 5 ключевых токенов и их роли.
1) color.primary → brand;
2) spacing.md → 16 dp/pt/px;
3) radius.sm → 4 dp/pt/px;
4) typography.body.large → font-size 16, line-height 24;
5) elevation.level1 → shadow/overlay 4 %, z-index 100.