Ревью карточки товара

Question

Описана карточка товара в мобильном каталоге. Найдите проблемы композиции и типографики. 1. Фото товара 1:1 на всю ширину карточки 2. Название: 16 px, обычное начертание, до 4 строк, обрезается без многоточия 3. Цена: 14 px, серый 999999 на белом, стоит после описания 4. Старая цена и новая цена одного размера и цвета, обе без зачёркивания 5. Отступы внутри карточки: 13 px сверху, 7 px слева, 19 px снизу 6. Кнопка «В корзину» 32 px высотой, справа внизу, текст 12 px

Техпрогон · Accepted Answer

В карточке каталога иерархия задаётся задачей: фото и цена помогают выбрать, название уточняет, кнопка действует. Здесь сломаны и иерархия (цена спрятана), и система (случайные отступы), и доступность (контраст, размер цели). строка 2: Длинное название без ограничения и многоточия ломает ритм сетки. Обычно 2 строки с многоточием, полное название в карточке.; строка 3: Цена главная информация для решения, но она мельче названия, внизу и серым 999 на белом (контраст около 2.85:1 при норме 4.5:1). Цену делают крупнее и контрастнее.; строка 4: Старая и новая цена неразличимы: пользователь не поймёт скидку. Старую зачёркивают и приглушают, новую выделяют.; строка 5: Отступы случайные, вне сетки 4/8. Нужны системные значения, например 12 или 16 со всех сторон.; строка 6: Высота 32 px и текст 12 px слишком малы для пальца: рекомендации платформ 44 pt (iOS) и 48 dp (Android).. В карточке каталога иерархия задаётся задачей: фото и цена помогают выбрать, название уточняет, кнопка действует. Здесь сломаны и иерархия (цена спрятана), и система (случайные отступы), и доступность (контраст, размер цели).

Ревью карточки товара

Вопрос

Коротко

Что должен найти ревьюер

Разбор

Термины по теме

Ещё по теме «Композиция, сетки, типографика»