1 2 1160x620 - Сетки в дизайне мобильных приложений

В этой статье я хотел бы поделиться с вами практическими советами и рекомендациями, которые могут быть полезны для создания сеток при разработке мобильных интерфейсов. Это всего лишь советы, а не нерушимые догмы.

Мы рассмотрим:

  • Оптимальное количество столбцов
  • Как правильно рассчитать отступы между колонками и от края сетки
  • Фиксированные и адаптивные сетки
  • Точность расчета сеток
  • Сетка внутри отдельных элементов (модулей)
  • Строки и вертикальный ритм

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

Итак, приступим.

Оптимальное количество столбцов

Не ограничивайте себя количеством столбцов на первом этапе. Сначала создайте прототип вашего интерфейса (низкой или высокой точности). Определитесь с основными элементами и юзерфлоу. И только после этого можете начать выбирать оптимальное количество столбцов и размеров. Не беспокойтесь, если в дальнейшем вам придется изменить их количество 😎

«Каково оптимальное количество столбцов в сетке для мобильных устройств?» Я думаю, что это один из самых распространенных вопросов среди дизайнеров, которые начинают проектировать мобильный интерфейс. Наиболее распространенное заблуждение возникает, когда речь идет о небольшом размере экрана, ширина которого часто не превышает нескольких столбцов веб-интерфейса.

Cетка из 12 столбцов является одной из наиболее удобных сеток для мобильных интерфейсов. Она позволит вам разместить в строке как четное, так и нечетное количество элементов.

Сетки в дизайне мобильных приложений

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

Если вы выбираете сетку из 2, 4 или 8 столбцов, помните о возможных проблемах с размещением нечетного количества элементов в строке.

🤓 Совет

Не зацикливайтесь на одной сетке. Дизайн интерфейса часто может содержать сотни разных экранов, поэтому одна сетка может не подходить для всех. При необходимости создайте дополнительные сетки, но не забывайте о согласованности дизайна.

Согласованность в сетках поможет вам добиться: равных полей макета, одинаковых или пропорциональных отступов между столбцами и одинакового поведения при изменении размера самих столбцов.

Сетки в дизайне мобильных приложений

Отступы и поля (Offsets)

Хорошо, мы определились с оптимальным количеством столбцов. Давайте определим отступ и поля сетки.

Во-первых, давайте посмотрим на рекомендации операционных систем, чтобы выяснить поля макетов (offsets). В настоящее время минимальные рекомендуемые поля макета для Android и iOS составляют 16pt. Это означает, что, если вы хотите придерживаться системных рекомендаций, поля не должны быть меньше этого значения. (Но они могут быть больше 😉)

Сетки в дизайне мобильных приложений

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

Если вы, как и я, являетесь поклонником сетки 8pt, я рекомендую вам выбрать размер отступов, пропорциональный модулю 8pt. Таким образом, горизонтальный и вертикальный ритм макета будет совпадать.

Сетки в дизайне мобильных приложений

🤓 Совет

Отступы должны быть пропорциональны полям макета. Это сделает сетку более согласованной, а также позволит вам легко размещать в ней элементы, например, карусели.

Сетки в дизайне мобильных приложений

Фиксированные и адаптивные сетки

Как и в веб-дизайне, в мобильном дизайне вы можете использовать фиксированную или адаптивную сетку. Экраны смартфонов не так сильно отличаются друг от друга по ширине, поэтому оптимальным решением будет использование гибких сеток и растягивание столбцов по ширине.

Я рекомендую использовать адаптивный размер сетки, потому что такой подход позволит более эффективно использовать все пространство экрана смартфона, которое очень ограничено.

Сетки в дизайне мобильных приложений

🤓 Совет

Всегда начинайте с меньшего размера экрана в системе или с самого популярного. Например, на данный момент для iOS самый маленький экран – iPhone SE (320sp), а самый популярный – iPhone 8/7/6 (375sp). Далее просто растяните сами столбцы и оставьте одинаковые размеры желоба.

Этот метод подходит для большинства случаев, но, конечно, будут исключения из правил, когда нет необходимости растягивать содержимое столбца.

Точность расчета

В iOS большинство экранов имеют нечетную ширину и поэтому не делятся без остатка. В Android вы также можете найти экраны с подобными размерами.

В этом случае у вас есть несколько вариантов:

Компенсация в 1pt из-за различных размеров полей макета

Например, установите левое поле 24pt, а правое 23pt. Скорее всего, никто визуально не заметит разницу, но ваш внутренний перфекционист будет немного недоволен 😡.

Сетки в дизайне мобильных приложений

Преимущества: оставшееся пространство можно разделить на нужное количество столбцов

Недостатки: разработчики должны всегда учитывать разницу в полях макетов, и, например, на iPhone SE (320sp) изменить нечетное поле на четное.

Оставьте точные значения для полей (например, 24pt) и используйте дробные размеры столбцов

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

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

Недостатки: на данный момент создание такой точной сетки в графическом редакторе будет проблематичным. Например, Figma отказывается применять для столбцов дробные значения. Решением может быть сетка, созданная из прямоугольников внутри самого фрейма.

Сетка внутри отдельных элементов (модулей)

Как и при больших размерах, в вашем дизайне могут быть отдельные модули. В этом случае отдельный модуль (элемент) может иметь собственную сетку.

Здесь применяется то же правило, что и с дополнительными экранами. Необходимо соблюдать последовательность в сетке внутри модуля.

Сетки в дизайне мобильных приложений

Строки и вертикальный ритм

Чтобы создать более крупные модули и поддерживать вертикальный ритм, вы должны разместить строки и желоба между ними, которые соизмеримы с основным модулем (в моем примере пропорционально модулю 8pt)

Сетки в дизайне мобильных приложений

Вывод

Эта статья является лишь конкретным примером, цель которого – побудить вас начать изучение сеток в мобильных интерфейсах. Ищите и находите оптимальные решения для конкретных задач и проектов.

И помните:

«Изучай правила, чтобы знать, как правильно их нарушить»

-Далай-лама

Какие приемы вы используете при создании сеток для мобильных интерфейсов? Пожалуйста, поделитесь в комментариях.

Подписывайтесь на Twitter автора Andrey Zhulidin

Оригинал: Andrey Zhulidin

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

Все, что вам нужно знать о сетках в Figma

Когда я был начинающим дизайнером, одной из первых книг, которую я приобрел,…

Базовая сетка 4px для достижения визуальной точности

Я пользуюсь базовой сеткой 4px уже более 2-х лет и пытаюсь заставить мою команду начать использовать ее.