2learn

Точки перелома

Что это такое

Точка перелома — ширина, на которой раскладка меняет расположение: колонки схлопываются, боковая панель уходит под содержимое, навигация превращается в меню. Выбрать точки перелома значит решить, где текущее расположение перестаёт работать и чем его заменить.

Почему это важно

Раскладки отказывают постепенно, а не разом: страница на три колонки хороша на 1280 пикселях, тесна на 900 и непригодна на 480. Без продуманных точек перелома браузер сжимает всё, пока текст не начнёт переноситься по четыре слова в строке, а изображения не наедут друг на друга. Точки перелома определяют ещё и то, сколько раскладок надо спроектировать и поддерживать. Слишком много — и каждое изменение делается шесть раз.

Ключевые идеи

Ставьте точки перелома там, где ломается содержимое, а не по размерам устройств

Сужайте окно медленно и отмечайте ширину, на которой что-то становится нечитаемым или тесным. Эти ширины и есть ваши точки перелома. Названия моделей устройств устаревают за год; ширины, выведенные из содержимого, — нет.

Отметка: на 940px боковая панель сжимает текст ниже 45 символов
Отметка: на 620px сетка карточек в три колонки даёт строки в два слова
Точки перелома: 940 и 620, выбраны по содержимому

Меньше точек перелома — крупнее изменения

Три-четыре расположения покрывают большинство продуктов. На каждом меняйте расположение, а не подкручивайте размеры: раскладка, отличающаяся только отступами, могла бы быть текучей.

Широкое    >=940   содержимое и боковая панель рядом
Среднее    620-939 боковая панель уходит под содержимое
Узкое      <620    одна колонка, навигация схлопывается в меню

Проектируйте самое узкое расположение осознанно

Узкая раскладка — не сжатая широкая. Решите, что в ней выживает: главное действие, заголовок, необходимое поле. Всё остальное уходит ниже по странице или во второстепенный вид.

Пусть раскладка будет текучей между точками перелома

Между двумя точками перелома ширины должны растягиваться плавно, а не прыгать. Точка перелома — смена расположения, а не единственное место, где раскладка адаптируется.

Проверяйте на неудобных ширинах, а не на круглых числах

Смотрите чуть выше и чуть ниже каждой точки перелома и на очень широком экране. На круглых числах ошибок почти не бывает, однако большинство из них живёт на границах, где одно расположение закончилось, а следующее ещё не началось.

Практика

Найдите точки перелома, сужая окно

Возьмите самую широкую раскладку и сужайте окно шаг за шагом. Записывайте ширину каждый раз, когда что-то становится неудобным.

Готово, когда: у вас есть две-три ширины, выведенные из содержимого, и вы можете назвать, что меняется на каждой.

Спроектируйте узкое расположение независимо

Набросайте ту же страницу шириной 360 пикселей, не глядя на широкую раскладку: решите, для чего страница нужна, когда колонка одна.

Готово, когда: у узкой раскладки есть ясное главное действие и нет элемента, оставленного только потому, что его было проще сохранить.

Частые ошибки

  • Точки перелома скопированы с названий устройств — ширины не совпадают с содержимым и быстро устаревают; исправить: выбирайте ширины, где раскладка действительно ломается.
  • Слишком много точек перелома — каждое изменение приходится делать пять раз; исправить: три-четыре расположения и текучая раскладка между ними.
  • Между расположениями отличаются только отступы — точка перелома добавляет поддержку без выгоды; исправить: меняйте расположение или оставьте его текучим.
  • Сжатие широкой раскладки — узкий экран получает строки по четыре слова и наезжающие блоки; исправить: проектируйте узкое расположение на его собственных условиях.
  • Проверка только на круглых ширинах — сбои на границах остаются незамеченными; исправить: проверяйте чуть выше и ниже каждой точки перелома.

Что читать дальше

Разобранные примеры

Файлы cookie аналитики ставятся только с вашего согласия. До вашего выбора ничего не загружается и никуда не отправляется.