Урок 11.1 · Интерфейсы и сайты с нуля · Модуль 11. Разбери экран: что не так и как починить · Бесплатно
Цель урока: Научиться находить проблему на готовой странице до того, как менять код.
Нужно знать заранее: Модули 8–10 траектории
Зачем это нужно: До сих пор вы собирали страницу с нуля: знали задание и писали код под него. В работе всё наоборот — чаще дают готовый экран и говорят «посмотри, почему это неудобно». Или вы сами открываете свою вчерашнюю страницу и чувствуете, что «что-то не так», но не можете назвать, что именно. Пять вопросов ниже превращают это «что-то» в конкретную правку.
Как это работает: Разбор всегда идёт от общего к частному, и вопросы задаются в одном порядке. Если перескочить к цвету кнопки, можно полчаса красить кнопку на странице, где не видно главного. 1. Что здесь главное? Прищурьтесь до половины. Осталось одно крупное пятно — хорошо. Всё расплылось в ровный серый текст — иерархии нет. 2. Куда глаз смотрит первым и куда вторым? Если оба раза в случайные места — человек не понимает, с чего начать. 3. Где заканчивается одна мысль и начинается другая? Если все промежутки одинаковые, экран читается как один абзац. 4. Что приходится читать дважды? Слишком длинная строка, слишком светлый текст, слишком мелкий шрифт — все три ощущаются как «тяжело», хотя причины разные. 5. Что здесь нужно нажать и легко ли попасть? Мелкая цель, неотличимая от текста, без реакции на наведение — человек промахивается или не догадывается, что это кнопка.
Психология: почему глаз видит одно: Прищур — не лайфхак, а способ отключить обработку деталей. Зрение сначала схватывает крупные пятна и контраст, и только потом читает буквы. Поэтому «прищуренный» взгляд показывает то же, что видит человек в первые полсекунды: где главное, а где ровное полотно. Если после прищура главное не находится, никакой текст ниже уже не спасёт.
Разбор по шагам: 1. Откройте страницу и не читайте её — посмотрите две секунды. Запомните, куда упал взгляд. 2. Прищурьтесь. Найдите главное пятно. Если его нет — это первая проблема, и она важнее остальных. 3. Пройдите по пяти вопросам и запишите ответы словами: «главное не видно», «строка длиннее 100 знаков», «карточки слиплись». 4. Выберите ОДНУ проблему. Исправьте только её и посмотрите снова. 5. Повторите. По одной правке за раз — иначе не понять, что помогло.
Частая ошибка: Чинить всё сразу. Поменяли шрифт, цвет, отступы и кнопку — стало лучше, но непонятно, почему. А если стало хуже, непонятно, что откатывать. Вторая ошибка — начинать с украшений: тени и градиенты не создают иерархию, они её только подчёркивают, когда она уже есть.
Важно: Пять вопросов — это быстрый разбор по видимым признакам, а не полноценное исследование. Настоящая проверка — дать страницу живому человеку и попросить найти, например, цену. Смотрите не на похвалу, а на то, где он остановился и что перечитал. Об этом подробнее — в статье «Почему сайты выглядят дорого».
Итог: Разбор экрана — это пять вопросов в одном порядке: главное → взгляд → группы → читаемость → действие. Дальше в модуле мы по очереди разберём каждую проблему и починим её руками.
Что дальше: Пять вопросов работают только вместе с порядком: сначала главное, потом всё остальное. Дальше в модуле — по одной проблеме на урок. Первая и самая частая жалоба — «текст тяжёлый, читать невозможно». Это длинная строка, урок 11.2.
/* Плохо: все строки одного размера — главное не находится */
.badge, h2, .meta, .price, .note { font-size: 16px; font-weight: 400; }
/* Хорошо: четыре уровня важности */
.badge { font-size: 12px; text-transform: uppercase; }
h2 { font-size: 26px; font-weight: 700; line-height: 1.2; }
.price { font-size: 22px; font-weight: 700; }
.meta { font-size: 14px; }
.note { font-size: 13px; }Перед вами карточка вебинара, в которой метка, заголовок, дата, цена и подпись набраны одинаково — 16 px обычным весом. Поэтому глаз не понимает, что здесь главное. Сделайте четыре уровня, от главного к служебному: Заголовок h2 — крупнее 23 px, жирнее 600 и плотнее по строкам (line-height меньше 1.4). Цена .price — крупнее 19 px и жирнее 600. Дата и место .meta — мельче основного текста (меньше 16 px). Подпись .note — мельче 15 px. Метка .badge — самая мелкая (меньше 13 px) и в верхнем регистре (text-transform: uppercase). Текст и структуру карточки менять не нужно — только оформление.
Критерий успеха: Четыре уровня: заголовок крупнее 23 px, жирнее 600 и плотнее 1.4; цена крупнее 19 px и жирная; дата мельче 16 px; подпись мельче 15 px; метка мельче 13 px в верхнем регистре. Карточка и её текст на месте.