Закон непрерывности: взгляд идёт по линии, пока она не оборвётся
Слайд с планом запуска: шесть строк друг под другом, и каждая начинается на своём месте. Одну подвинули, чтобы влезла иконка. Вторая приехала из другого файла со своим отступом. Третью выровняли по центру, потому что так показалось ровнее. Автор видит шесть аккуратных строк, зал видит шесть разных начал и на каждом притормаживает. Закон непрерывности объясняет, откуда берётся эта усталость, и чинится она без единого нового элемента на слайде.
Пройдите оба слайда по порядку
Нажимайте строки сверху вниз, как читали бы их на встрече. Линия покажет путь взгляда, счётчик измерит его длину.
Края строк не совпадают: у каждой своё начало.
Все шесть строк начинаются с одной линии.
Что такое закон непрерывности
Законом непрерывности называют свойство зрения продолжать начатую линию. Как только несколько элементов встают вдоль одной прямой, глаз перестаёт видеть отдельные предметы и видит путь, по которому можно ехать дальше. Сама линия при этом чаще всего невидима: её задают края блоков, начала строк, центры иконок, верхушки столбцов диаграммы.
Отсюда следствие, ради которого статья и написана. Ровный край даёт взгляду указание: держитесь этой линии и не отвлекайтесь. Сбитый край указывает так же честно, только смысл получается другой: здесь что-то иное, задержитесь и разберитесь. Разбираться обычно не в чем, но долю секунды зритель уже потратил, и так шесть раз подряд.
Двух соседей непрерывности мы уже разбирали. Закон близости собирает группы расстоянием, закон подобия собирает их видом. Непрерывность отвечает не за состав группы, а за маршрут: в какую сторону взгляд поедет, где ускорится и где встанет.
Сдвиньте одну строку с общей линии
Бегунок двигает строку «Бюджет на осень» вправо. Остальные пять стоят на месте.
Взгляд спускается по левому краю и ни разу не ищет, где начинается следующая строка.
Непрерывность экономит залу поиск
Пока у блоков общий край, зритель находит начало один раз. Дальше он ведёт взгляд по прямой и тратит внимание на содержание. Когда края сбиты, начало приходится искать заново на каждой строке, и на слайде из восьми пунктов это восемь мелких поисков вместо одного.
Чаще всего линию рвёт не случайный сдвиг, а выравнивание по центру. У центрированного текста ровных краёв нет вообще: каждая строка начинается там, куда её вынесла собственная длина. Заголовку из двух строк это не вредит, его читают как картинку. Списку из шести пунктов вредит сразу, и тем сильнее, чем длиннее пункты.
Переключите выравнивание списка
Точка показывает, откуда начинается каждый пункт.
Слева от текста пусто, но опереться не на что: у пунктов нет общего края.
Одна колонка, один край
Края элементов одной колонки стоят на одной вертикальной линии. Приговор чужому слайду выносится за две секунды: мысленно приложите к левым краям линейку и посчитайте линии. Их больше двух, и объяснить третью нечем, значит правило нарушено.
Лишние линии почти никогда не бывают решением. Их набивает работа: у двух пунктов иконки шире остальных, один блок подвинули мышкой, чтобы «не липло», текст в таблице получил отступ от границы ячейки, а картинку вставили как есть. Каждая правка сама по себе крошечная, и ни одна не выглядит ошибкой. Ошибка появляется, когда их шесть. На разборах хватает одного движения: кладём поверх слайда вертикальную линию и считаем, сколько краёв её не касаются.
Осей на слайде обычно две: одна держит содержание, вторая колонку с числами или сроками. Иногда добавляется третья, если справа стоит врезка. Дальше начинается разнобой, который читается как неряшливость, даже если зритель не сможет объяснить, что именно ему не нравится. И да, ось никак не связана с экономией места: воздух слева от текста работает только тогда, когда его край ровный.
Приведите строки к одному краю
Бегунок ставит строки на общую линию по одной. Пунктиром показаны края, по которым строки выровнены сейчас.
Слайд собирали по строке, и каждая встала там, где её оставили.
Правый край со сроками не трогается ни разу: две оси на слайде это норма. Шесть это не норма.
Путь через слайд один, и он не разворачивается
Взгляд идёт в одну сторону: слева направо или сверху вниз, без возвратов. Приговор: проведите пальцем по слайду в том порядке, в каком читаются блоки. Палец пересёк свой след, значит путь сломан.
Разворот пути стоит дороже сбитого края, потому что зритель теряет не доли секунды, а место. Он прочитал третий шаг, поехал дальше вправо, упёрся в поле и вернулся искать четвёртый. Пока он его ищет, вы говорите уже про пятый.
Стрелки эту беду не лечат, они её подписывают. Стрелка нужна там, где путь и так очевиден, и только чтобы назвать связь: отсюда следует вот это. Если без стрелок слайд читается в случайном порядке, дело в раскладке, и чинить надо раскладку.
Разложите шесть этапов тремя способами
Линия показывает путь взгляда с первого этапа до шестого.
Змейка кажется компактной, но путь в ней ломается там, где строка кончилась.
Линия обрывается только нарочно
Ряд прерывается там, где вы выделяете, и больше нигде. Приговор: найдите место, где ряд ломается, и скажите вслух, зачем. Сказать нечего, значит линию надо достроить.
Обрыв линии это сильный приём, и стоит он дёшево: строка, вышедшая из ряда, забирает внимание не хуже цвета, а на слайд при этом ничего не добавлено. Работает он по тому же закону, по которому строится иерархия: зритель смотрит туда, где нарушено ожидание.
Губит приём полумера. Сдвиг на восемь пикселей слишком мал, чтобы прочитаться как заявление, и слишком велик, чтобы сойти за ровный край. Зал видит не акцент, а небрежность. Либо строка стоит на линии, либо уходит с неё так, что спорить не о чем.
Выведите строку из ряда
Нажатие уводит строку с общей линии, повторное возвращает её обратно.
Ровный ряд: шесть строк равны, и зал читает их как одну таблицу.
Где непрерывность ломается чаще всего
- Иконки разной ширины: текст рядом с ними начинается на трёх линиях вместо одной
- Список по центру: у шести пунктов шесть начал и шесть концов
- Числа в столбце выровнены по левому краю: разряды не совпали, и сравнивать приходится поштучно
- Заголовок над блоком, сдвинутый на пару пикселей: слишком мало для акцента, достаточно для ощущения небрежности
- Схема, где стрелки идут против чтения: справа налево или снизу вверх
Третий пункт вреднее остальных, хотя выглядит безобиднее всех. Столбец чисел существует ради сравнения, а сравнение держится на том, что разряды стоят друг под другом. Выровняли по левому краю, и у числа 9 800 первая цифра оказалась на месте десятков тысяч соседа. Зал сравнивает не суммы, а длину строк.
Где путь взгляда сломан?
Нажмите макет, в котором линия обрывается без причины.
Выстройте числа в столбец
Перед вами слайд с итогами полугодия. Подписи слева стоят ровно, а числа справа собирали руками, и каждое встало по-своему. Приведите столбец к одной линии и посмотрите, какая из двух линий делает числа сравнимыми.
Один край на весь столбец
Нажатие переключает число: свой край, левый край столбца, правый край столбца.
Числа стоят вразнобой, и столбец приходится читать по одному значению.
Линий здесь две, и обе лучше разнобоя. Но правая ставит разряды друг под друга, и только с ней столбец сравнивается одним движением сверху вниз.
Шесть слайдов, где линия ведёт взгляд
Это слайды из нашей базы, не учебные заготовки. Линия в них то нарисована прямо, то собрана из краёв блоков, и в этом смысл подборки. Любой слайд открывается в базе целиком.
Линия нарисована прямо. Четыре шага нанизаны на одну горизонталь, и взгляд идёт по ней слева направо, ни разу не выбирая, что читать дальше.
Кривая доводит до вывода. График начинается в левом нижнем углу и поднимается ровно к числу, ради которого сделан слайд.
Одно направление на весь слайд. Воронка сужается слева направо, колонки под ней продолжают те же этапы, и возвращаться взгляду некуда.
Путь важнее схемы. Узлов много и стоят они густо, но линии связей ведут от левой рамки к правой, и схема читается как дорога, а не как облако.
Две оси и больше ни одной. Заголовок держит левую линию, три карточки держат правую, и внутри карточек подписи начинаются с одного края.
Столбец чисел на своей линии. Список справа держит два края сразу: названия по левому, числа по правому, поэтому колонка читается сверху вниз без остановок.
Линию видно только на двух слайдах из шести. На остальных её нет вовсе, а путь всё равно один: его задают края блоков.
Три правила непрерывности
Непрерывность отвечает на вопрос, куда взгляд поедет дальше. За состав групп отвечают расстояние и вид, а непрерывность прокладывает между группами дорогу. Если группу нужно объявить прямо, её обводят границей, и это уже закон общей области. Она же самая незаметная из трёх: правильно проложенную дорогу зритель не замечает вообще, он просто дочитывает слайд до конца.
Одна колонка, один край
Края элементов стоят на одной линии. Осей на слайде две, изредка три.
Один путь
Взгляд идёт слева направо или сверху вниз и не возвращается назад.
Обрыв нарочно
Ряд ломается только там, где вы выделяете. Полумеры читаются как небрежность.
Чек-лист самопроверки слайда
Отметьте то, что выполнено на вашем слайде.
Одно правило в неделю
Подпишитесь на рассылку: каждую неделю присылаем разбор одного правила дизайна и материалы, которые можно применить сразу.
Те же разборы выходят в телеграм-канале школы. Другие термины разобраны в Учебнике.