UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Сетки в дизайне мобильных приложений
Редакція
Редакція

Опубліковано

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

Ця стаття українською:

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

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

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

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

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

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

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

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

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

Топ коментарі (0)