В последних нескольких частях серии адаптивного дизайна я представил характеристики макетов с текучей средой и описал, как использовать шрифты быстро . В этой статье я хочу представить сеточные макеты, широко распространенную и популярную практику проектирования. В то время как грид-системы стали широко использоваться в печатных СМИ, интерес со стороны веб-разработчиков и разработчиков мобильных устройств возник совсем недавно.
Сетка — это двумерная структура, состоящая из пересекающихся вертикальных и горизонтальных делений, используемых для структурирования контента. Сетки служат основой, на которой дизайнер может организовать текст и изображения в рациональный, удобный для восприятия интерфейс. Хорошо построенная и правильно реализованная сеточная система повышает масштабируемость и улучшает читаемость контента на веб-сайте или в мобильном приложении.
Преимущества макетов сетки многочисленны; структура сетки …
- дает порядок, оригинальность и гармонию в представлении контента;
- позволяет пользователям прогнозировать, где найти нужную им информацию;
- облегчает добавление нового контента, не делая его изолированным или маргинальным.
Чтобы разработать хорошо построенную сетку, первым шагом является создание самой структуры холста. Именно размер холста определяет каркас сетки: он делится на количество столбцов, которое хочет дизайнер (3,5,9,12), и это отправная точка для работы над вашим интерфейсом или макетом.
Размер сетки не должен быть определен с фиксированными параметрами. Обычная и правильная практика проектирования для этого типа макета — позволить контенту определять пространство, занимаемое сеткой, а не наоборот. В этом случае «содержание» относится не только к тексту; это также относится ко всему, что имеет значение в интерфейсе, включая изображения, видео, текст, рекламу, ссылки и многое другое. Вместо того, чтобы пытаться вбить различные размеры и типы контента в заранее определенную сетку, вы должны создать свою сетку вокруг размера и характера вашего контента. В вашей индивидуальной структуре сетки макет разделен вертикальными и / или горизонтальными направляющими, которые обеспечивают согласованную организацию пространства. Как только вы определите поля и интервалы для столбцов, ваша сетка станет четкой, логичной и полезной организационной схемой для вашего многогранного мобильного контента.
Интернет Инструменты
Фреймворки веб-дизайна, основанные на HTML и CSS, стали довольно популярными, прежде чем новые, более надежные фреймворки популяризировали использование макетов на основе сетки. Интернет полон полезных моделей и фреймворков с правилами CSS, которые помогают дизайнерам создавать простой, быстрый и эффективный макет сетки практически для любых целей. Некоторые макеты являются гибкими, другие довольно жесткими (в конце концов, они предназначены для ограничения содержимого). Некоторые из них имеют максимум от трех до пяти столбцов, в то время как другие имеют от 12 до 16 столбцов. Я привожу множество сеточных структур, чтобы подчеркнуть, что они не все одинаковые, и, кроме того, есть сетки, которые по своей природе лучше, чем другие. Однако, чтобы полностью понять преимущества подхода, основанного на сетке, вы должны рассмотреть уникальный шаблон и цель для каждого проекта, который вы должны разработать. Вы не должны бояться пробовать разнообразие; помните, простота часто выигрывает дизайн.
В Интернете есть много полезных ресурсов гридов, которые помогут вам создать правильные пропорции макета или интерфейса для ваших проектов.
- Grid System 960 : инструмент, позволяющий создавать веб-сайты с использованием сетки 960 пикселей. Это число было выбрано потому, что оно позволяет легко делиться на множество столбцов и строк.
- Gridr Buildrrr : инструмент, который предлагает точный контроль над границами, полями и содержимым блоков для пользовательских проектов.
- Design by Grid : журнал, который публикует статьи и учебные пособия по созданию грид-дизайнов.
Разметка макета сетки
Если вы хотите попытаться разработать структуру сетки с вашим собственным рукописным кодом, определите ширину интерфейса и размер промежутка между различными столбцами. Помните, что для получения сбалансированного эффекта важно, чтобы различные горизонтальные интервалы были одинакового размера. Как уже говорилось ранее, сначала изучите ваш контент , подумайте о том, как он должен быть расположен и размещен, и придерживайтесь этих идей на практике в течение всего процесса разработки вашей сетки.
Добавьте основные элементы вашего приложения или мобильного веб-сайта (верхний колонтитул, основной контент, боковую панель и нижний колонтитул) в оболочку, например:
<div id="wrapper">
<div id="header">Header</div>
<div id="content">Content</div>
<div id="sidebar">Sidebar</div>
<div id="footer">Footer</div>
</div>На этом этапе ваш контент и ваша боковая панель будут разделены на разделы, каждому из которых будет присвоен класс с именами Grid1, Grid2, Grid3 и т. Д. (Это зависит от количества сеток, которые вы решили построить). В каждой ячейке сетки может быть столько подразделов, сколько вы хотели бы включить.
<div class="griglia1">
<div>Subsection 1</div>
<div>Subsection 2</div>
<div>Subsection 3</div>
</div>
Что касается CSS, почти все основано на правильном применении свойства CSS с плавающей точкой . Для правильного позиционирования наиболее заметной области вашего дизайна сетки (то есть основных контейнеров сетки, которые, в свою очередь, содержат подразделы) вы используете так называемую технику «противоположного плавания». Для сеток и горизонтальных расстояний между ними вы должны сначала создать несколько отдельных секций столбцов, а во-вторых, вы должны назначить каждому плавающее и фиксированную ширину. Я применил эту технику, используя следующий CSS:
div.grid1
{
float: left;
width: 290px;
}
После этого вы примените одно и то же правило с плавающей точкой к разделам в нескольких столбцах, указав конкретный размер ширины и правого поля (в данном случае 10 пикселей), чтобы разделить их следующим образом:
div.grid2 div
{
float: left;
width: 250px;
margin-right: 10px;
}
Чтобы добавить дополнительный уровень модульности, позволяющий разделу занимать пространство двух или более столбцов, давайте использовать так называемые объединенные столбцы: вам просто нужно присвоить элементу класс ext2, ext3, ext4 или ext5, чтобы иметь раздел, который занимает 2, 3, 4 или 5 столбцов вместо того, чтобы иметь унитарную ширину.
Вывод
Эта статья была призвана указать на другую возможную технику для проектирования и разработки адаптивного макета или интерфейса. Если есть один принцип, который нужно помнить о сетках, таков: не пытайтесь втиснуть свой контент в плохо подходящую сетку. Если популярные решения не соответствуют вашим потребностям, создайте собственную сетку, идеально подходящую для вашего контента. Это можно сделать быстро и легко, используя несколько столбцов, строк и CSS-объявлений.
Хотите узнать больше о адаптивном веб-дизайне? Ознакомьтесь с новой книгой SitePoint « Адаптивный веб-дизайн Jump Start» !