Как работать в приложении сетка
Обновлено: 19.09.2024
В статье мы рассмотрим виды таких сеток, их реализацию на примере известных приложений, а также несколько важных советов при использовании данного инструмента в дизайне.
Итак, предположим, что у вас есть общее представление о том, как использовать сетки, но вы хотите узнать, как применять их к макетам, которые есть в интернете.
Адаптивные сетки — это метод систематической корректировки, наведения порядка, установления иерархии и «логики» ваших проектов. Они делают вещи менее плавными, и, набравшись опыта, вы с лёгкостью сможете сказать, кто использует сетки, а кто нет.
Когда люди становятся лучшими дизайнерами, их глаза постоянно рисуют горизонтальные и вертикальные линии, чтобы создать такой же порядок только у себя в голове.
Мы рассмотрим некоторые приложения адаптивной сетки, а также их масштабирование к мобильным устройствам. Что ещё важно, я хочу научить вас объединять и подбирать макеты так, чтобы удовлетворить потребности в дизайне.
Aka макет всей страницы. Это самый простой макет, который используется для лендингов. У вас есть место для больших изображений, которые могут рекламировать ваш продукт или бренд.
Элементы, находящиеся внутри вашей одностолбцовой разметки действуют как отдельные модули, из-за чего их можно легко масштабировать на мобильных устройствах, потому что всё что нужно уже расставлено в необходимом для вас порядке.
Поскольку такой макет мощен для провоцирования эмоций, он является обобщённым вариантом для домашних страниц, страниц «О нас», практических рекомендациях, новых продуктов и т.д. В общем и целом макет состоит из 12 столбцов для основного контента.
Отчётливо видно, что WeWork использует сетки в своих проектах, потому что все элементы выстраиваются в линию, несмотря на то, что они разделены пустыми строками. Лёгкая подача заключается в том, что количество отступов между элементами одинаково, а внешние края имеют одинаковую ширину, что делает этот дизайн очень приятным для глаз.
Вот несколько примеров разметки одной колонки. Обратите внимание, как дочерние элементы внутри родительского могут быть разделены на разные столбцы, но родительский всё так же находится в одном основном контейнере.
Один из самых распространённых макетов просто потому, что вам не нужен текст шириной более 6–8 столбцов. Другое преимущество заключается в том, что можно разместить другие элементы гораздо выше сгиба и использовать боковой столбец для навигации, рекламы, призыва к действиям и т.д. Вы должны использовать 8 столбцов для основного контента и 4 столбца для второстепенного.
«8 столбцов? Но ведь тогда у меня будет гораздо меньше места для дизайна», — могли бы сказать вы. В интернете нельзя позволять тексту занимать все 12 столбцов. Это основной типографский принцип, при котором удобная ширина чтения составляет около 60–80 символов при 16 пикселях, а на десктопе — не более 8 столбцов. Даже в одностолбцовых лендингах объекты располагаются по центру и имеют максимальную ширину. Так что на самом деле «мало места» не является проблемой и даже сделает ваш дизайн лучше.
Эта разметка очень универсальна и подходит для внутренних страниц сайта, например, когда у вас есть много текста для чтения. Примерами являются блоги, инструкции, часто задаваемые вопросы, гайды, или другие полезные вещи для пользователя.
Сетки — основа современного веб-дизайна. Они помогают читателю воспринимать текстовую и визуальную информацию и выделяют медиа или блог среди аналогов. Рассказываем, как использовать сетки, — эти советы помогут вам создавать дизайн статей в Setka Editor и других сервисах для верстки.
Мы сформулировали несколько общих правил, которые будут полезны, если вы только начинаете использовать сетки:
Учитывайте отличия онлайн-медиа от «бумаги». В Интернете дизайнеру следует учитывать множество труднопредсказуемых факторов. Например, никогда неизвестно, какая часть лонгрида будет находиться на экране у пользователя в тот или иной момент времени, поскольку вертикальная перемотка зависит только от него. Именно поэтому на первое место в проектировании модулей для web-среды выходит работа с вертикальными линиями сетки, а горизонтали играют заметную роль лишь в верхних и нижних частях сайта и на страницах списков.
Разберитесь, с какого устройства и в каком разрешении читатель будет просматривать статьи. Используйте адаптивный дизайн, создайте несколько разных сеток для разных разрешений экрана и старайтесь сделать так, чтобы между этими модульными сетками сохранялась логическая преемственность.
Ориентируйтесь на контент. При создании сеток нужно предусмотреть все доступные варианты заголовков, виды списков, врезок, цитат и форматы изображений, видео и других мультимедийных форм, которые могут использоваться в вашем издании или блоге.
Не бойтесь нарушать правила. Не переусердствуйте: страницы не должны быть загнаны в рамки одной сетки. Дизайнер и типограф Аллен Херлберт писал: «Так как материалы бывают самого разного характера, то подчас одной сетки для оформления бывает недостаточно. В таких случаях прибегают к помощи отдельных макетных листов или, где это возможно, накладывают различные сетки друг на друга или объединяют в одну — более сложную».
Олег Уппит
Полезные неочевидности
Соблюдайте пропорции. Или не соблюдайте, но очень сознательно и там, где это уместно.
Выбирая ширину полосы набора, ориентируйтесь на кегль (размер высоты букв) шрифта, который используется на странице чаще всего. Выберите такую ширину текста, чтобы в строке почти всегда было 7–10 слов. Ради этого можно переносить заголовок, разбивая его на строки, а вставки, набранные меньшим кеглем, пускать в несколько колонок. Интерлиньяж (расстояние между строками по вертикали) тоже нужно выбирать в соответствии с кеглем шрифта.
Кегль и интерлиньяж так же важны, как и правильно построенные поля. Йозеф Мюллер-Брокманн пишет об этом:«Поле набора может сливаться в темный ком, если верхняя и нижняя строчки оптически сливаются и читаются вместе, но и большой разброс превращает поле в набор строк, а не текст».
Обязательно оцените, как разработанные вами страницы будут выглядеть при столкновении с реальным контентом. Например, представьте, как будет смотреться длинное интервью, состоящее из обмена короткими репликами. Во многих изданиях и блогах оно повисает в воздухе, прижавшись к краю экрана, большая часть которого ничем не заполнена. Выглядит неряшливо, а читателю некомфортно.
Помните, что изображение или блок текста могут занимать один или несколько модулей, как по вертикали, так и по горизонтали. Это кажется очевидным, но для начала стоит держать это в голове, чтобы не переусложнить проектируемую сетку.
Комбинируйте модули в нужном вам порядке. Так, сетка из шести вертикальных модулей может во всем издании использоваться только для создания двух- или трехколоночной верстки, строящейся из сочетаний базовых шести.
Не гонитесь за строгостью и геометричностью. Многие дизайнеры пользуются сеткой с такой свободой, что человеку со стороны никогда и в голову не придет, что в основе решения лежит какая-то система. Главное не сложность рисунка сетки, а полученный результат.
Помните о совете Ле Корбюзье. Великий архитектор писал: «Я всегда оставляю за собой право сомневаться в бесспорности решений, подсказываемых мне „модулором“, сохраняя полную свободу действий, подчиняя их моему чувству вещей, но отнюдь не моему рассудку».
Работа с сетками
в Setka Editor
В Setka Editor мы используем колоночные сетки — это базовые сетки во всем графическом дизайне. К ним часто добавляются горизонтальные ряды, которые рассчитываются, исходя из величины кегля. Их конфигурация зависит от числа колонок, отступов от края макета (margins) и отступов колонок друг от друга (gutters).
Колоночные сетки помогают создавать верстку для разных устройств — компьютеров, планшетов и смартфонов. Колонки вносят необходимые ограничения, чтобы вы могли быстро решить, как разместить контент, но при этом у вас остается много возможностей для сочетания разных типов информации (текстов и изображений) и дизайн-элементов.
В разделе Grid Systems вы можете настроить базовые сетки для выбранной темы, а потом в редакторе работать в одной из них. По умолчанию в Setka Editor подключено несколько видов сетки: шестиколоночные, восьмиколоночные, десятиколоночные и двенадцатиколоночные. Кроме того, вы можете загрузить собственную сетку.
Если вы только начинаете и хотите верстать несложные текстовые посты, можно загрузить четырехколоночную сетку. Это один из самых простых вариантов. Его минус в том, что пост может выглядеть немного скучным из-за симметричной разбивки. Часто такие сетки используют так: три колонки занимает контент, а одну — меню или какая-то дополнительная информация.
Когда вам нужна особенно гибкая верстка (например, для съемки или поста с большим количеством подверсток), используйте двенадцатиколоночные сетки: пост можно разбивать на 3, 4 и 6 колонок. Кроме того, можно делить пост на симметричные и несимметричные части — это тоже позволяет создавать очень динамичные посты.
Даже если у вас сразу не получится работать с многоколоночными сетками, не отчаивайтесь — практика обязательно поможет вам освоить даже самые сложные приемы. Начните с простых вариантов и не бойтесь экспериментировать. В любом случае в изучение сеток стоит инвестировать свое время, ведь это отличный способ создавать понятные, легкие для восприятия и сбалансированные посты.
Попробуйте Setka Editor в деле
Получите демо от нашей команды сопровождения или попробуйте Setka Editor в течение двух недель бесплатно.
Продуктовый дизайнер (UX/UI), веб-дизайнер и бренд-дизайнер. Опыт проектов в международных компаниях Omega-R (агентство), iSpring Solutions (продуктовая) и со стартапами по всему миру. Преподаватель курсов «UI-дизайн и анимация интерфейсов» и «Веб-дизайн» в Институте программных систем и godesign.school.
Май 15, 2020 · 6 мин читать
Сегодня поделюсь практическими советами и фишками, которые пригодятся при построении сеток в дизайне мобильных интерфейсов. Проверено в проектах, берите на вооружение.
Содержание:
Сетки — один из ключевых инструментов дизайнера. Сетка помогает достичь согласованности элементов, установить связи между ними и задать визуальную систему и помочь пользователям ориентироваться. А еще сетка привносит гармонию в дизайн. О связи сеток и гештальта здесь →
Итак, приступим к разбору.
Определяем оптимальное количество колонок
Совет: На начальных этапах дизайна не думайте про количество столбцов. Лучше сфокусируйтесь на создании прототипа интерфейса (Lo-Fi или Hi-Fi) и решите вопросы с основными элементами и сценарием взаимодействия (User Flow). А затем начинайте настраивать оптимальное количество столбцов и размеры. Главное не бояться экспериментировать и быть готовым корректировать свою работу по мере движения.
«Сколько сделать столбцов в сетке для мобильного?» — один из самых популярных вопросов среди начинающих UX/UI-дизайнеров. Непонимание применения сеток возникает из-за того, что на большом экране колонок много, а на мобильном они все не влазят в экран в том же виде.
12 столбцов — одна из самых удобных сеток для мобильных интерфейсов (с ней все как в вебе), она помогает размещать в строке как четное, так и нечетное количество элементов.
У сетки в 12 столбцов есть недостаток при работе с мобильным устройствами: сетка из 12 столбцов дает слишком малую ширину колонки, а значит она годится только для редких случаев на мобильниках.
Если вы выбираете сетку из 2, 4 или 8 столбцов, помните о возможных проблемах с размещением нечетного количества элементов в строке.
🤓 Профессиональный совет
Не зацикливайтесь на одной сетке. Дизайн интерфейса часто может содержать сотни различных экранов, поэтому одна сетка может не подойти для всех экранов. Вы можете создать дополнительные сетки, но не забывайте о консистентности в дизайне.
Согласованность в сетках поможет вам достичь следующего: одинаковых отступов с краев экнара в макете, равных или пропорциональных межколонных расстояний (gutters) между столбцами и одинакового поведения при изменении размера самих столбцов.
Дополнительный вопрос:
Может ли элемент занимать разное количество колонок сетки в зависимости от размера экрана? Читать подробнее →
Рассчитываем межколонное расстояние (gutters) и отступы от края экрана (margins)
Итак, мы определили оптимальное количество столбцов. Давайте теперь определим межколонное расстояние (gutters) и отступы от края экрана (margins).
Первым делом заглянем в гайдлайны операционных систем и отыщем требования к полям у дизайн-макетов (offsets). Минимальные рекомендуемые поля макета для Android и iOS — 16pt. Если придерживаться стандартных рекомендаций, то поля не должны быть меньше (Зато они могут быть больше 😉).
Если взять сетку из 12 столбцов отступы между столбцами не должны быть слишком большими, так как из-за небольшой ширины столбцов и больших отступов между ними можно потерять восприятие колонки.
В дизайне интерфейсов принято работать с сетками в 8pt. Соответственно и межколонный интервал нужно подсчитать пропорционально модулю 8pt. Такой подход обеспечит единый горизонтальный и вертикальный ритм в макете.
🤓 Профессиональный совет
Отступы следует сделать пропорциональными полям макета. Такой подход поможет сделать сетку согласованной, а также поможет гибче работать с пространством и размещать горизонтальные потоки контента, например карусели.
Дополнительный вопрос:
Почему сетки на 8 pt так распространились если сетки на 10 pt не хуже. (Кроме соответствия популярным разрешениям): Читать подробнее →
Фиксированная сетка (fixed grid) и адаптивные сетки (adaptive grid)
В мобильном дизайне, как и веб-дизайне, вы можете применять фиксированную или адаптивную сетку. Экраны смартфонов не сильно отличаются друг от друга по ширине, поэтому оптимальным решением будет использование гибких сеток и растягивание столбцов по ширине.
Я рекомендую использовать адаптивный размер сетки, потому что такой подход поможет эффективнее работать с ограниченным пространством экрана смартфона.
🤓 Профессиональный совет
Всегда начинайте с наименьшего размера экрана в системе или с самого популярного. Например, на данный момент для iOS самый маленький экран – iPhone SE (320sp), а самый популярный – iPhone 8/7/6 (375sp). Затем просто растяните сами столбцы и оставьте одинаковые размеры межколоночных расстояний.
Такой метод подходит для большинства случаев, но, конечно, будут исключения из правил, когда нет необходимости растягивать содержимое столбца.
Точность расчета сеток для мобильных
В iOS многие экраны с нечетной шириной и не делятся без остатка. В Android такая же история.
В такой ситуации есть несколько вариантов:
Метод 1. Компенсация в 1pt из-за различных размеров полей макета
Например, устанавливаем левое поле в 24pt, а правое 23pt. Скорее всего, никто визуально не заметит разницу, но ваш внутренний перфекционист будет негодовать 😡.
Плюсы: оставшееся пространство можно разделить на нужное количество столбцов.
Минусы: разработчики должны всегда учитывать разницу в полях макетов, и, например, на iPhone SE (320sp) изменить нечетное поле на четное.
Метод 2. Оставьте точные значения для полей (например, 24pt) и используйте дробные размеры столбцов
Ваш внутренний эстет снова будет расстроен. Но на самом деле этот метод не так плох, как может показаться, из-за того, что современные экраны имеют более высокую плотность пикселей. Вряд ли кто-то из пользователей заметит наличие половины пикселей, появившихся в результате дробных значений.
Плюсы: алгоритм будет учитывать ширину столбцов, и вам не придется придумывать различные варианты сетки для разной ширины.
Минусы: на данный момент создание такой точной сетки в графическом редакторе будет проблематичным. Например, Figma отказывается применять для столбцов дробные значения. Решением может быть сетка, созданная из прямоугольников внутри самого фрейма.
Сетка внутри отдельных компонентов (модулей)
Дизайн состоит из модулей. У каждого модуля (элемента) может быть собственная сетка.
Здесь применяется то же правило, что и с дополнительными экранами. Необходимо соблюдать консистентность в применении сетки внутри модуля.
Строки и вертикальный ритм
Вы можете создать крупные модули и поддерживать вертикальный ритм, для этого вам следует создать строки и межколоночные расстояния между ними и сделать их соизмеримыми с основным модулем (на примере пропорционально модулю 8pt).
Библиотека популярных систем сеток для iOS, Android и Bootstrap (.xd, .psd, .ai, .sketch, .fig)
Вывод
Эта статья — частный разбор популярных сценариев на примере. Основная цель – побудить вас начать изучение сеток в мобильных интерфейсах. Ищите и находите оптимальные решения для ваших задач и проектов.
«Изучайте правила, чтобы знать, как правильно их нарушить».
(c) Далай-лама XIV
Разбираем, как можно расположить текст и фото в CSS Grid.
Продолжаем сагу о сетках в CSS. Что мы уже знаем:
- Сетка (grid) — это один из современных приёмов вёрстки в CSS.
- Сетку можно поделить на строки и столбцы и задать им любой размер.
- Можно выделить любую область ячеек, объединить их в один класс и управлять ими как одним целым.
- Элементами сетки может быть что угодно — текст, фото, видео или любой другой HTML-блок.
- Сетку можно сделать адаптивной, чтобы страница хорошо смотрелась на экранах любого размера.
Теперь поговорим о том, как размещать контент в ячейках сетки и что для этого нужно. Используем для этого сетку 4 × 4 — каждая ячейка пусть будет по 150 пикселей в высоту и ширину.
Заполнение блоков по очереди
Самый простой способ добавить что-то в сетку — прописать в блоке <div>, что нам нужно. Например, можем заполнить часть нашей сетки текстом, а часть — картинками:
Чтобы картинки у нас подгонялись точно под размер сетки, мы использовали свойство object-fit: cover — оно увеличивает или уменьшает размер картинки так, чтобы она подгонялась под нужное место.
Ещё мы добавили отдельный стиль для абзацев с текстом и сделали в нём отступы слева и справа, чтобы текст не прилипал к границам ячеек. Там, где мы не использовали тег <p> (элементы 4,5,6 и 10), текст прижался к краям и выглядит неопрятно.
Работаем с областью
Область — это одна или несколько соседних ячеек в сетке. Чтобы управлять областью в сетке, нужно сначала прописать для неё отдельный класс, а потом указать его в одном из блоков.
Допустим, нам нужно, чтобы самая первая фотография в нашем последнем примере занимала не одну ячейку, а четыре — по две с каждой стороны. Для этого сделаем новую область:
.oblast-1 grid-column: span 2;
grid-row: span 2;
>
Теперь применим этот класс к нашей картинке:
Сетка автоматически передвинула остальные блоки на другие места, потому что у нас появилась новая большая область. Но если мы в HTML-коде переставим эту строку вниз, то и картинка тоже уедет вниз. Вот что произойдёт, если мы передвинем этот блок с картинкой на три строки ниже:
Элементы сетки снова перетасовались, потому что большой блок уехал ниже. Если нам нужно, чтобы эта большая картинка всё время стояла наверху, как в предыдущем варианте, то при создании области нужно прямо указать, где она должна стоять:
.oblast-2 grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 4;
>
Здесь мы говорим браузеру, что область oblast-2 занимает расстояние от первой до третьей линии по горизонтали и от второй до четвёртой по вертикали. Если с линиями пока сложно — почитайте наш вводный материал по сетке, мы там подробно разбираем, что это за линии и откуда они берутся.
После этого мы можем переместить наш блок в любое место в коде, даже опустить в самый низ, и картинка всё равно останется на своём месте:
А ещё можно сделать один большой блок на всю ширину сетки: объединить 4 ячейки подряд — получится шапка сайта:
.oblast-2 grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 5;
>
Как управлять отдельной ячейкой
Ячейка — это самая маленькая доступная область в сетке. Для этого нужно создать новую область, куда будет входить только эта ячейка, например, так:
.oblast-3 grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
>
Сетка — это универсальный инструмент
В ней можно заверстать что угодно:
- текст в несколько колонок;
- галерею с картинками;
- картинки с поясняющим текстом;
- видео вперемешку с текстом;
- рекламные баннеры;
- полноценный сайт с шапкой, подвалом и боковым меню;
- что угодно ещё.
В финальной статье про сетку мы покажем, как с её помощью можно сделать свой полноценный сайт-портфолио — с навигацией, разделами и красивыми фотографиями.
Читайте также: