Как проектировать календарь: 56 шаблонов для Figma

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

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

Мы рассмотрели всевозможные варианты и составили полный набор из 56 шаблонов календарей для Figma, чтобы не упустить ни одной детали. Он будет полезен, когда вы застряли в процессе проектирования календаря или устали гуглить в поисках вдохновения.

Оглавление:

• Календарь или Средство выбора даты (Date picker)?
• Анатомия базовых элементов
• Средство выбора даты с диапазоном
• Структура календаря
• Использование календаря в мобильных и декстопных версиях
• Интерфейсы календарей и средств выбора даты для вдохновения

Календарь или Средство выбора даты (Date picker)?

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

Средство выбора даты (Date picker) — это компонент, который позволяет пользователям выбирать конкретную дату или диапазон дат, указывая интервал в нумерованной сетке, которая по умолчанию является месяцем.

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

Анатомия базовых элементов

Для cредства выбора даты элемент День является необходимой составляющей, которая инициирует взаимодействие с пользователем. Полная неделя состоит из семи элементов — дней, которые расположены в ряд. Для Дня как базового элемента есть несколько состояний: активное, неактивное, сегодня (выделено), начало диапазона и конец диапазона (в том случае, когда пользователь выбрал период).

Базовые компоненты календаря. Посмотрите наши Figma-ресурсы, которые содержат календари, чтобы сэкономить время при проектировании

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

Ниже представлены варианты календарей с размещенными в них событиями:

Средство выбора даты с диапазоном

Выбор диапазона — это функция средства выбора даты (date picker). По умолчанию календарь отражает диапазон как полную картину происходящих у пользователя событий, планов, встреч и т.д.

Цель средства выбора даты с диапазоном — ввод необходимого количества дней в рамках одного действия. В зависимости от сценария использования приложения можно выделять только начальный и конечный день (например, покупка авиабилетов на определённые даты) или все дни внутри диапазона (например, маршруты передвижения, бронирование на несколько дней подряд).

Это решение больше подходит для десктопных версий. Чтобы пользователи могли правильно выбрать диапазон, разместите текущий месяц вместе с последующим. Это поможет пользователю указать диапазон, который покрывает два месяца (например, Google Analytics показывает даже три месяца для выбора диапазона).

Посмотрите все диапазоны, которые мы извлекли из наших дизайн-систем Figma.

Структура календаря

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

Каждый блок в сетке соответствует задачам, планам, напоминаниям, встречам и другим видам событий. Цвета этих прямоугольников могут быть разными. Это зависит от категорий событий, заданных пользователем заранее (например, Работа, Семья, Друзья и т.д.). Некоторые блоки могут растягиваться на несколько дней и таким образом отображать продолжительность отдельного события. Даты его начала и окончания, как правило, показаны в формате временной шкалы. Поэтому очевидно — чем шире блок, тем больше времени требует событие.

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

Использование календаря в мобильных и десктопных версиях

Календарь

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

Мобильная версия. На мобильных устройствах единственный способ отображения календаря — перестройка его содержимого по вертикали в столбец. Расположите 7 дней в ряд, используя всю ширину мобильного устройства, чтобы каждый день был доступен для нажатия. Сократите блоки с задачами до маленьких круглых цветных точек. Так вы сохраните функциональность календаря и сможете предоставить необходимый минимум информации.

Средство выбора даты (Date picker)

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

Мобильная версия. Выбор даты на мобильных устройствах появляется в виде всплывающих окон (заставок) или диалоговых окон. В них легко выбрать конкретный день, но чтобы изменить значение месяца/года, необходимо выполнить дополнительные действия. Да, вы можете последовательно переключать месяцы с помощью стрелок слева направо, но чтобы вернуться, например, на 5 лет назад, нужно будет открыть окно выбора года в формате попапа.

Интерфейсы календарей и средств выбора даты для вдохновения

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

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

Используйте этот шаблон календарей для Figma

Скопируйте этот ресурс интерфейса календарей. Там вы найдете редактируемые календари и средства выбора даты и времени, представленные в этой публикации, бесплатные для любых целей.

Перевод статьи Calendar UI design best practices & Datepicker inspiration