сетка для мобильных приложений ios
Сетки в дизайне мобильных приложений
В этой статье я хотел бы поделиться с вами практическими советами и рекомендациями, которые могут быть полезны для создания сеток при разработке мобильных интерфейсов. Это всего лишь советы, а не нерушимые догмы.
Мы рассмотрим:
Сетки являются одним из основных инструментов дизайнера, который помогает достичь согласованности элементов, установить связи между ними и создать визуальную систему, которая поможет пользователям ориентироваться и будет выглядеть гармонично.
Оптимальное количество столбцов
«Каково оптимальное количество столбцов в сетке для мобильных устройств?» Я думаю, что это один из самых распространенных вопросов среди дизайнеров, которые начинают проектировать мобильный интерфейс. Наиболее распространенное заблуждение возникает, когда речь идет о небольшом размере экрана, ширина которого часто не превышает нескольких столбцов веб-интерфейса.
Cетка из 12 столбцов является одной из наиболее удобных сеток для мобильных интерфейсов. Она позволит вам разместить в строке как четное, так и нечетное количество элементов.
Недостаток сетки из 12 столбцов для мобильных устройств заключается в том, что ширина одного столбца настолько мала, что вы редко можете создавать элементы шириной в один столбец.
Если вы выбираете сетку из 2, 4 или 8 столбцов, помните о возможных проблемах с размещением нечетного количества элементов в строке.
? Совет
Не зацикливайтесь на одной сетке. Дизайн интерфейса часто может содержать сотни разных экранов, поэтому одна сетка может не подходить для всех. При необходимости создайте дополнительные сетки, но не забывайте о согласованности дизайна.
Согласованность в сетках поможет вам добиться: равных полей макета, одинаковых или пропорциональных отступов между столбцами и одинакового поведения при изменении размера самих столбцов.
Отступы и поля (Offsets)
Хорошо, мы определились с оптимальным количеством столбцов. Давайте определим отступ и поля сетки.
При выборе сетки из 12 столбцов отступы между столбцами не должны быть слишком большими, поскольку из-за небольшой ширины столбцов и больших отступов между ними столбцы начинают визуально разрушаться.
Если вы, как и я, являетесь поклонником сетки 8pt, я рекомендую вам выбрать размер отступов, пропорциональный модулю 8pt. Таким образом, горизонтальный и вертикальный ритм макета будет совпадать.
? Совет
Отступы должны быть пропорциональны полям макета. Это сделает сетку более согласованной, а также позволит вам легко размещать в ней элементы, например, карусели.
Фиксированные и адаптивные сетки
Как и в веб-дизайне, в мобильном дизайне вы можете использовать фиксированную или адаптивную сетку. Экраны смартфонов не так сильно отличаются друг от друга по ширине, поэтому оптимальным решением будет использование гибких сеток и растягивание столбцов по ширине.
Я рекомендую использовать адаптивный размер сетки, потому что такой подход позволит более эффективно использовать все пространство экрана смартфона, которое очень ограничено.
? Совет
Всегда начинайте с меньшего размера экрана в системе или с самого популярного. Например, на данный момент для iOS самый маленький экран – iPhone SE (320sp), а самый популярный – iPhone 8/7/6 (375sp). Далее просто растяните сами столбцы и оставьте одинаковые размеры межколоночных расстояний.
Этот метод подходит для большинства случаев, но, конечно, будут исключения из правил, когда нет необходимости растягивать содержимое столбца.
Точность расчета
В iOS большинство экранов имеют нечетную ширину и поэтому не делятся без остатка. В Android вы также можете найти экраны с подобными размерами.
В этом случае у вас есть несколько вариантов:
Компенсация в 1pt из-за различных размеров полей макета
Преимущества: оставшееся пространство можно разделить на нужное количество столбцов
Недостатки: разработчики должны всегда учитывать разницу в полях макетов, и, например, на iPhone SE (320sp) изменить нечетное поле на четное.
Оставьте точные значения для полей (например, 24pt) и используйте дробные размеры столбцов
Ваш внутренний перфекционист снова будет расстроен. Но на самом деле этот метод не так плох, как может показаться, из-за того, что современные экраны имеют более высокую плотность пикселей. Вряд ли кто-то из пользователей заметит наличие половины пикселей, появившихся в результате дробных значений.
Преимущества: сам алгоритм будет учитывать ширину столбцов, и вам не придется придумывать различные варианты сетки для разной ширины.
Недостатки: на данный момент создание такой точной сетки в графическом редакторе будет проблематичным. Например, Figma отказывается применять для столбцов дробные значения. Решением может быть сетка, созданная из прямоугольников внутри самого фрейма.
Сетка внутри отдельных элементов (модулей)
Как и при больших размерах, в вашем дизайне могут быть отдельные модули. В этом случае отдельный модуль (элемент) может иметь собственную сетку.
Здесь применяется то же правило, что и с дополнительными экранами. Необходимо соблюдать последовательность в сетке внутри модуля.
Строки и вертикальный ритм
Чтобы создать более крупные модули и поддерживать вертикальный ритм, вы должны разместить строки и межколонники между ними, которые соизмеримы с основным модулем (в моем примере пропорционально модулю 8pt)
Вывод
Эта статья является лишь конкретным примером, цель которого – побудить вас начать изучение сеток в мобильных интерфейсах. Ищите и находите оптимальные решения для конкретных задач и проектов.
«Изучай правила, чтобы знать, как правильно их нарушить»
Какие приемы вы используете при создании сеток для мобильных интерфейсов? Пожалуйста, поделитесь в комментариях.
Подписывайтесь на Twitter автора Andrey Zhulidin
Сетки в дизайне мобильных приложений (iOS, Android и Bootstrap) — UI-советы
Правила и лайфхаки, которые пригодятся для создания сеток при дизайне мобильных интерфейсов. Проверено в проектах, берите на вооружение.
Продуктовый дизайнер (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. Здесь вы можете скачать 26 сеток с 6 и 12 колонками для 15 различных устройств, в файлах совместимых с популярными графическими инструментами: Adobe XD, Photoshop, Illustrator, Sketch и Figma. Цели библиотеки — ускорить запуск ваших дизайн-проектов. Скачать бесплатно →
Скачать сетки для мобильных приложений в фигма.
Вывод
Эта статья — частный разбор популярных сценариев на примере. Основная цель – побудить вас начать изучение сеток в мобильных интерфейсах. Ищите и находите оптимальные решения для ваших задач и проектов.
«Изучайте правила, чтобы знать, как правильно их нарушить».
Фото сетки и шаблоны постов
TapLab
Для iPad
Снимки экрана
Описание
Приложение Grids позволяет быстро и легко создать уникальный профиль в Instagram. Большая коллекция профессиональных шаблонов для ленты, постов и историй поможет преобразить вашу страницу в Instagram за считаные минуты.
ШАБЛОНЫ ДЛЯ ПОСТОВ И ИСТОРИЙ
Каждый шаблон в приложении можно изменять: добавляйте свои фотографии, текст и стикеры, чтобы создать уникальный дизайн. Более того, все шаблоны позволяют оформить бесконечную ленту, т. е. вы можете использовать их снова и снова, чтобы впечатлить своих подписчиков профилем в едином стиле. Благодаря такому дизайну вся страница в Instagram будет выглядеть гармонично и целостно.
РАЗНООБРАЗНЫЕ ИНСТРУМЕНТЫ ДИЗАЙНА
Если вам не нравятся готовые шаблоны, проявите креативность и создайте свой собственный вариант в редакторе. Выберите, что вы хотите оформить: всю ленту в Instagram, отдельный пост или историю, и воплотите все свои идеи в жизнь! Удобный редактор и огромный выбор стикеров, фонов и шрифтов вдохновят вас создать красивые и стильные шаблоны.
СОЗДАВАЙТЕ СЕТКИ ДЛЯ INSTAGRAM
Grids позволяет разделить фотографии и панорамы на одинаковые квадратные части и загрузить их в Instagram так, чтобы при просмотре профиля они составляли одно целое. Произведите неизгладимое впечатление на посетителей своей страницы! Выберите размер сетки, добавьте фотографию или создайте коллаж. Будь-то обычный кадр, городской или природный пейзаж, с Grids они будут выглядеть потрясающе на странице профиля в Instagram!
СОЗДАВАЙТЕ ИКОНКИ ДЛЯ ИСТОРИЙ
Добавляйте иконки для историй, которые вы хотите сохранить. Используйте готовый дизайн или создавайте свои собственные обложки, изменяя картинки и текст. Преобразите свои актуальные истории с Grids!
ПРЕОБРАЗИТЕ СВОЙ ПРОФИЛЬ В INSTAGRAM
Grids предлагает совершенно новый способ использования Instagram, обладая при этом простым и красивым дизайном. Не упустите шанс выразить себя, преобразить страницу профиля в Instagram, публикуя масштабные изображения во всей их красоте!
Планер для Инстаграм Постов 4+
Планировщик Визуала Instagram
Dima Komar
Для iPad
Снимки экрана
Описание
— Экспериментируй с видом своей ленты.
— Планируй посты и истории в Инстаграм, Фейсбук и Твиттер в пару кликов.
— Получай напоминания когда нужно сделать пост или историю.
— Делай посты в лучшее время для привлечения подписчиков.
Если вам понравилось приложение, оставьте отзыв в магазине приложений, это очень важно для меня 🙂
Что нового
— Исправления ошибок iOS 15
— Исправлена критическая проблема с памятью, приводившая к сбою.
— Улучшен интерфейс групп хештегов.
— Решены проблемы с локализацией
— Исправлены ошибки выбора
Если вам понравилось приложение, оставьте отзыв в магазине приложений, это так важно для меня 🙂
Оценки и отзывы
Все супер! Спасибо
Очень нравится, удобно, стильно, Красиво!
Супер
Отличное и простое в использовании приложение. С первых дней хорошее впечатление
Очень удобное приложение для формирования контента-плана
Подписки
Конфиденциальность приложения
Разработчик Dima Komar указал, что в соответствии с политикой конфиденциальности приложения данные могут обрабатываться так, как описано ниже. Подробные сведения доступны в политике конфиденциальности разработчика.
Сбор данных не ведется
Разработчик не ведет сбор данных в этом приложении.
Конфиденциальные данные могут использоваться по-разному в зависимости от вашего возраста, используемых возможностей или других факторов. Подробнее
Информация
русский, английский, арабский, венгерский, вьетнамский, голландский, греческий, датский, иврит, индонезийский, испанский, итальянский, каталанский, корейский, малайский, немецкий, норвежский (букмол), польский, португальский, румынский, словацкий, тайский, традиционный китайский, турецкий, украинский, упрощенный китайский, финский, французский, хинди, хорватский, чешский, шведский, японский
Фото сетки для IG профиля
INFOSTRING TECHNOLABS PRIVATE LIMITED
Для iPad
Снимки экрана
Описание
Приложение Grid Post позволяет разделить (обрезать) большие прямоугольные фото на несколько квадратных изображений и загрузить их в Instagram, чтобы произвести впечатление на ваших друзей и посетителей вашего профиля!
Фотосетка — совершенно новый способ использования Instagram с простым и удобным дизайном. Не упустите возможность выразить себя, размещая на странице своего профиля захватывающие дух фото большого размера.
1. Вы можете использовать 5 типов сетки: 3X5, 3X4, 3X3, 3X2 и 3X1
2. Отличные шаблоны фотоколлажей для создания уникального дизайна в вашем Instagram.
2. Приложение позволяет добавлять интересные варианты наложений и различные стили сетки.
3. Кроме того, вы можете применять к наложениям и стилям сетки разные цвета.
4. Увеличение и перемещение фото
5. Приложение предложит вам порядок загрузки, чтобы вы могли легко загрузить фото одно за другим.
6. Создавайте большие картинки и баннеры в Instagram.
7. Фотосетка — это быстрый и простой способ создания большого квадрата с изображением
Разделение панорамы для Instagram:
Фотосетка позволяет создавать публикации с пролистыванием изображений для Instagram. Разрезайте большие панорамные изображения на квадратные фрагменты и загружайте их в Instagram, используя новую функцию карусельных альбомов в Instagram. Разделение панорамы — лучший и быстрый способ создания карусельных альбомов в Instagram. Просто выберите фотографию из галереи и выберите количество квадратных фрагментов — и все фрагменты уже готовы к загрузке.
Фотосетки с функциями редактирования фотографий:
— Более 55 потрясающих фотофильтров для ваших фото.
— Более 120 креативных наложений.
— Наложение текста на фотографии
— Более 2000 творческих элементов, шрифтов и наклеек.
— Собственные водяные знаки или логотипы
Фотоколлаж — лучшая функция для создания профиля в Instagram. Grid Post предлагает готовые профессиональные шаблоны и макеты для фотоколлажей. Вам просто нужно добавить свои фотографии в коллажи, а приложение само разделит ваш большой коллаж на несколько квадратных фрагментов. Это быстрая и лучшая функция для создания публикации в виде сетки в Instagram. В Grid Post вас ждут шаблоны коллажей на все случаи жизни: День рождения, Новый год, Рождество, Праздник весны, Хэллоуин, Феста Жунина, Дивали, Распродажа, Юбилей, День Святого Валентина, лето, осень и многие другие.
Теперь вам не нужно использовать приложения, чтобы получать подписчиков для своего профиля в Instagram — просто загрузите стильные фотографии, и вы будете получать все больше и больше подписчиков!
Grid Post PRO Subscription Pricing & Terms:
Your subscription will automatically renew unless auto-renew is turned off at least 24-hours before the end of the current period. Your subscription will be charged through your iTunes account. You can turn off auto-renew at any time from your iTunes account settings but refunds will not be provided for any unused portion of the term. Alternatively, there is a «Manage Subscription» menu option in the App Settings menu.