Вы оглянулись, увидели все аргументы о том, почему использовать сетку, как ее настроить, и вы полностью согласны со всем этим, но никто не сказал вам, как ее использовать . Так же.
Технически эта статья может быть применена к сеткам в печати, но для наших целей я специально говорю о сетях, реагирующих на веб-запросы для настольных компьютеров, планшетов и мобильных устройств. Прежде чем мы углубимся в детали, давайте разберемся с нашей терминологией.
Элементы поля - это ваши блоки дизайна, будь то текст, изображение или их комбинация. Цвета фона на самом деле не считаются элементами поля, если они не являются контейнером для вашего текста / изображения. Я видел, как элемент поля имени взаимозаменяем с единицами, элементами, родительскими контейнерами - они все одинаковые.
Столбцы - это толстые цветные блоки, которые составляют ширину содержимого вашего дизайна. Элементы поля должны располагаться на определенном количестве столбцов. Традиционно в системе проектирования ширина столбцов не меняется, но количество столбцов изменяется с 12 на рабочем столе, до 8 на планшете и до 4 на мобильном. Вы можете буквально использовать все, что захотите, но большинство сеток имеют ширину столбца 60–80 пикселей. Выбор ширины столбца, который подходит вам, является наиболее важным, поскольку он является основным фактором, определяющим ширину вашего контента.
Водосточные желоба - это пространство между колоннами. 20px - это обычный размер желоба, и этот интервал будет очень важен, если у вас есть каменная кладка или сетка из карточных элементов, простой пример - фотогалерея. Некоторые системы увеличивают ширину водосточного желоба по мере увеличения ширины устройства, но также хорошо, чтобы он оставался фиксированным.
Боковые поля, также известные как внешние желоба, представляют собой количество пустого пространства за пределами ширины вашего контента. Для более удобного дизайна боковые поля увеличиваются при увеличении ширины устройства. Боковые поля на мобильных устройствах обычно составляют 20–30 пикселей и сильно различаются в зависимости от планшета и настольного компьютера.
Вот несколько основных рекомендаций, в дизайне нет жестких и быстрых правил.
1. Элементы поля должны находиться на некотором количестве столбцов
Идея состоит в том, что элементы поля должны располагаться на некотором количестве столбцов. Вы можете разделить его, как хотите, 6 и 6, 3 на 4, 4 на 3, что угодно. В этом примере я показываю карточку профиля с разным количеством столбцов.
Хорошо, круто, так легко. Будут времена, когда вы захотите разделить секцию на определенное число, и вы обнаружите, что, если вы действительно расположите их идеально на сетке, они окажутся слишком широкими. См. Классическую схему «Как сделать» ниже:
Если бы мы разместили их на сетках, текст растянулся бы слишком долго. Оптимального позиционирования на самом деле нет ни на одной из сеток (см. Ниже). Это тоже хорошо, если вы понимаете, что весь элемент на самом деле является невидимым, большим контейнером.
Вы на самом деле разделили секцию на 3, но вы также дали ей невидимое заполнение внутри. Когда вы передаете свои проекты разработчику, он должен интуитивно это уже знать, так что это больше для вас, чтобы понять, как на самом деле делить вещи поровну.
2. Не оставляйте полевые элементы в желобах
Ваши элементы должны находиться внутри колонн и не кровоточить в канавах. Вы НЕ МОЖЕТЕ оставлять вещи в водостоках, что наносит ущерб цели решетки.
3. Можно размещать элементы внутри полей, которые не выровнены по сетке, если родительское поле находится на столбцах.
Теперь будут моменты, когда вы захотите разделить свой дизайн или карточку ровно пополам с изображением и текстом, в которой вы получите эту неловкую ситуацию, когда изображение не падает на столбец, а текст вынужден размещаться в странный путь. Не бойтесь, это нормально, пока «родительский» контейнер или как большая картина объекта находится внутри столбцов.
4. Не используйте столбец в качестве внешнего дополнения, если только не намеренно.
Весь ваш важный контент должен соответствовать ширине контента, следовательно, ширине контента. Поначалу это будет казаться странным, потому что если вы не привыкли использовать сетку, вы почувствуете, что сетка - это артборд, и вам нужно добавить отступы в свои дизайны. Так что это именно то, для чего нужны боковые поля, они дополняют ваши проекты. «Но когда браузер сжимается, то с шириной контента он просто встанет на дыбы, и это будет выглядеть странно, правда?» Нет, это не то, что происходит. В зависимости от того, как он закодирован, либо ваш контент внутри сетки начнет пропорционально масштабироваться, и боковые поля будут фиксированными, либо боковые поля будут масштабироваться одновременно с контентом.
Поэтому, если кто-то говорит: «Мне нужен дизайн с шириной 1200 пикселей», это не означает, что ваш дизайн буквально имеет ширину 1200 пикселей. Это означает, что ширина вашего контента где-то около 960px, расположенная внутри монтажной области 1200px, так что у вас все еще есть место для боковых полей.
5. Полные элементы кровотечения или текстурная графика должны проходить от края до края артборда и понимается как кровотечение из столбцов
Это исключение из правила 4 - когда у вас есть цвет фона или изображение, которое полностью кровоточит. В этом случае вы захотите вытащить его за пределы сетки в макете, и с помощью сетки и боковых полей разработчики понимают, что это элемент полной ширины.
Если у вас есть изображение, которое предназначено для удаления со страницы, как украшение, и вы согласны с тем, что оно будет обрезано, оно также может исчезнуть с сетки.
Заголовки и иногда нижние колонтитулы также могут иметь свои собственные исключения, они не считаются частью содержимого. Некоторые дизайны привязывают их к краям браузеров, некоторые предпочитают сохранять его в ширине содержимого. Это действительно зависит от вас и вашей ситуации. Преимущество сохранения их в ширине вашего контента состоит в том, что он не сходит с ума, когда пользователь просматривает ваш сайт на сверхшироком мониторе. Преимущество их закрепления в браузере заключается в том, что у вас больше места для элементов навигации.
Как они работают в отзывчивом
В традиционной сетке дизайна ширина и желоба столбцов остаются неизменными, меняется только количество столбцов. Зачем? И как это работает? Это должно было упростить процесс разработки. Если набор из трех карт располагался на четырех столбцах на рабочем столе, на планшете вы бы показали две карты и завернули третью, чтобы она отображалась во втором ряду. Ура! Вам не нужно было делать какие-либо изменения размера, потому что вы уже знали, что он расположен на четырех столбцах. На мобильном телефоне ответ также прост, вы бы просто показали одну карту, а остальные сложили под ней. Если вы хотите, вы также можете проявить творческий подход и выбрать показ одной карты на мобильном телефоне или сделать горизонтальную прокрутку. Эти точки останова являются точкой отсчета в коде.
В действительности, Интернет должен отображаться для любой ширины браузера. Скажем, например, у вас есть большой монитор, который видит вещи шириной 1600 пикселей, дизайн вашего рабочего стола - шириной 1200 пикселей, планшет - шириной 768 пикселей, мобильный - шириной 360 пикселей. Итак, прямо сейчас вы видите дизайн с шириной содержимого менее 1200 пикселей и огромным запасом, потому что вы смотрите на большом мониторе. Но что происходит, когда ваш браузер на один пиксель меньше, на 1199 пикселей?
Фиксированная сетка
Если ваш разработчик кодирует фиксированную сетку, когда вы сжимаетесь от настольного компьютера к планшету, как будто вы используете браузер шириной 900 пикселей, вы не увидите никаких изменений, и ваш дизайн будет выглядеть просто обрезанным. Или вы не увидите никаких изменений, а боковые поля просто уменьшатся. Но подождите, как только вы достигнете 768px точки останова, дизайн встанет на свои места и все будет выглядеть правильно для планшета. Если вы уйдете меньше, произойдет то же самое, ваш дизайн будет выглядеть так же, пока вы не достигнете другой точки останова.
Жидкая Сетка
Теперь приходит красота жидкостных сеток! По мере того как вы уменьшаете окно, все меняется динамически, текст переносится, а элементы сужаются. Однако эти ваши элементы по-прежнему не изменят макет, пока вы не достигнете следующей заданной точки останова.
Поэтому я пытаюсь сказать, что разработанные вами точки останова - это просто ориентиры в конце дня. Вот почему столбцы и желоба не меняются в сетках, потому что мы хотим упростить создание согласованности для дизайнера, когда нам нужно подумать о макете.
Гибридные сетки
Также общепринятой практикой является использование комбинации жидкостных и фиксированных сеток в опыте. Сайты обычно текучие, когда они уменьшаются до размера мобильного устройства из-за множества различных размеров устройства.
Некоторые классные сеточные системы!
Опять же, вам не нужно придерживаться традиционной сетки 12, 8, 4, и это не обязательно должны быть желоба размером 20 пикселей. Ниже приведены некоторые идеи для использования интересных способов использования сетки в ваших проектах!
Геном Проект Инвизион
Мало того, что этот сайт действительно хорошо спроектирован, они на самом деле используют возможность показать свою собственную систему сетки в дизайне, чтобы он выглядел еще круче. В этой системе нет желобов и 8 толстых колонн.
Dropbox Design
У них есть система, в которой нет боковых полей и желобов, и вместо этого страница разделена на две половины. Контент вписывается в эти половины и почти выступает в качестве двух отдельных артбордов.
Wordpress
То, как вы используете сетку, зависит от вас. Вы можете использовать его для основного раздела и оставить на боковой панели. В примере с Wordpress большая часть контента находится в центре страницы, а слева также есть боковая панель.
Клуб Макет
Ваш контент и сетка не всегда должны начинаться с центра! Для Mockup Club контент отключен слева.
Я уверен, что Instagram может сойти с 6 толстых столбцов на рабочем столе.
навынос
Цель здесь состояла в том, чтобы дать некоторое руководство о том, как использовать сетки в адаптивном дизайне. Я знаю, что мне потребовалось много лет и приличное количество кода, чтобы понять, как работают сетки. Я искал видео на YouTube и читал множество статей, но все сосредоточились на том, почему это важно, а не на «правилах» использования сетки.
Лучшее, что вы можете сделать, это начать замечать, как другие сайты выравнивают элементы на своей странице, и вы начнете видеть шаблоны. Чтобы помочь вам понять, вот несколько систем проектирования, которые описывают использование их сетки:
Система материального дизайна Google
... И вот огромный список других систем, которые вы можете просмотреть
После полного понимания того, как работают сетки, я стал лучшим дизайнером, потому что я знал, как мои проекты будут переводиться между точками останова. Я также мог бы оправдать свои проекты больше, и сделать их идеальными пикселями. И то, и другое привело к более последовательному, более чистому дизайну, который действительно поднимает конечный продукт, когда у вас есть поток, который идет от экрана к экрану. Я рекомендую найти сетку, которая работает для вас и вашей команды разработчиков, и убедитесь, что все дизайнеры в одной команде используют сетку одинаково.