Лабораторная работа №5: Финальная визуализация и QA (High-fi UI)
Курс: Веб-дизайн и проектирование интерфейсов
Модуль: UI Design & Quality Assurance
Трудоемкость: 4 академических часа
Оценка: Максимум 10 баллов
Тип задания: Индивидуальный сквозной проект (Этап 5)
1. Цель работы
Превратить макеты в «производственные» чертежи, готовые к верстке, обеспечив визуальную целостность и техническую грамотность декоративных решений.
Инженерная задача
Провести проверку консистентности графики, настроить систему декоративных элементов (тени, скругления) и подготовить макет к передаче в разработку.
2. Теоретическая справка: Визуальная гигиена
- Консистентность изображений: В профессиональном интерфейсе графика не должна выглядеть «случайной». Это достигается через единообразие фонов, освещения и строгое соблюдение пропорций.
- Декоративные системы (Shadows & Radius):
- Тени (Elevation): Используются для создания иерархии (глубины). В вебе тени редко бывают чисто черными; они «подкрашиваются» цветом фона или бренда для естественности.
- Скругления (Border Radius): Определяют характер интерфейса. Инженерный подход подразумевает использование системы (например, 4-8-12-16px), а не случайных значений.
3. Задание (Алгоритм выполнения)
Шаг 1. Консистентность графики (Visual QA)
Проверьте все изображения в макете на соответствие следующим критериям:
- Соотношение сторон (Aspect Ratio): Изображения не должны быть деформированы. Используйте режим
Fillв настройках заливки Figma. Проверьте, чтобы лица или ключевые объекты не обрезались неудачно. - Единство фонов: Если вы используете предметные фото (товары), они должны быть либо на одинаковом нейтральном фоне, либо все вырезаны (PNG/Transparent). Не допускайте ситуации, когда один товар снят на сером фоне, а другой — на фоне интерьера.
- Цветовая коррекция: Все фото в рамках одной страницы должны иметь схожую «температуру» и контрастность.
Шаг 2. Система декоративных элементов (Polish)
Доработайте детализацию элементов, используя системный подход.
Шаг 3. Стресс-тестирование и Доступность
- Edge Cases: Проверьте макет на экстремально длинных текстах. Убедитесь, что Auto Layout корректно перестраивает блоки.
- Empty State: Оформите экран «Пустой корзины» или «Ничего не найдено», добавив понятную графику и кнопку призыва к действию (CTA).
- Контраст: С помощью плагина (например, Contrast) проверьте, что текст на кнопках и плашках читается (стандарт WCAG AA).
Шаг 4. Подготовка к Handoff (Ручная передача)
- Экспорт: Для всех иконок в UI Kit настройте экспорт в формате SVG. Для фотографий — WebP или JPG (с учетом 2x для Retina-дисплеев).
- Спецификации: С помощью инструмента Comments (
C) оставьте пояснения для разработчика: укажите, какие элементы фиксированы по высоте, а какие — «резиновые».
4. Технические требования (Engineering Standard)
Категорический запрет
No Detached Instances: Категорически запрещено использование «отвязанных» компонентов. Все изменения должны идти через Master Component или Variants!
- Grid Alignment: Проверьте, чтобы контент карточек и текст не выходили за границы 12-колоночной сетки.
- 8pt Grid: Расстояния между объектами (Gap) должны быть кратны 8 (или 4 в исключительных случаях).
5. Definition of Done (Критерии оценки)
10 баллов ставятся, если:
- Графика: Все изображения качественные, не растянуты, имеют единую стилистику и консистентные фоны.
- Декор: Тени настроены аккуратно (не черные, мягкие), скругления приведены к единой системе.
- Сценарии: Отрисованы финальные макеты (Mobile + Desktop), включая обработку «пустых» состояний.
- Техника: Используются цветовые и текстовые стили; настроены параметры экспорта для ассетов.
- Доступность: Пройден тест на контрастность для всех ключевых элементов управления.
6. Домашнее задание (Подготовка к Лаб №6)
Ваш дизайн готов статично. На следующей паре мы оживим его:
- Посмотрите настройки Smart Animate (переходы по общим именам слоев).
- Подготовьте структуру для навигационного меню (оно должно быть отдельным компонентом для удобной связки экранов).
- Скачайте приложение Figma Mirror, чтобы протестировать свои тени и шрифты на реальном экране смартфона.