Подсветка ячеек может быть как бинарной (есть событие либо нет события), так и имеющей несколько вариантов, в зависимости от типа проходящего мероприятия, его текущего статуса (прошло или еще только будет проходить), наличия дополнительной информации.
В зависимости от размера всего виджета дизайнеры стараются уместить в ячейке даты максимальный объем информации без потери ее читаемости и урона внешнему виду календаря. Поэтому для маленьких календарей стандартным является подсвечивание тем или иным образом дат, содержащих новости, тогда как в полноэкранных реализациях (когда ширина ячейки больше 100-120 пикселей по ширине) появляется возможность разместить в ячейке-дате краткий заголовок события, либо даже небольшое описание нескольких мероприятий.
Табличная часть, список дат
В своих проектах я дважды использовал календарь для навигации, и оба раза останавливался на втором варианте, храня даты событий в скрытом DOM-элементе и подгружая их в календарь без запросов к серверу. Общее количество новостей в первом случае было порядка 60-70, а во втором около 30. При этом интерфейс оставался отзывчивым, задержек в работе замечено не было. Из этого можно сделать вывод, что даже при увеличении количества новостей в два раза работоспособность сайта не нарушится и не ухудшится.
предложил выделять даты с событиями при помощи ярких точек
В программной реализации календарь может либо подгружать информацию с помощью асинхронных запросов, либо же изначально загрузить всю базу событий и работать непосредственно с ней. Второй метод удобен для небольших сайтов, где количество событий не превышает несколько сотен. В случае, если календарь насыщен событиями, предпочтительнее использовать AJAX.
В большинстве реализаций шапка календаря содержит текущие месяц и год. Также в шапке часто присутствуют элементы для изменения месяца и года, реализуя навигацию по всему календарю.
Заголовок, верхняя часть календаря
Просмотрев порядка нескольких сотен различных реализаций календарного виджета, я могу выделить несколько элементов, типичных для данного технологического решения. Наиболее часто можно выделить такие части, как заголовок календаря, табличную часть с датами и футер, содержащий легенду или какую-либо дополнительную информацию. Если шапка и футер являются достаточно стандартными, то табличная часть может иметь заметно отличающийся функционал в зависимости от той или иной реализации. Рассмотрим все эти элементы более подробно.
Основные элементы дизайна календаря событий
и решение со стрелками в стиле музыкальных плееров
Необходимо рассмотреть как варианты с изменением текущего месяца, года, так и статичные примеры. Следует учесть такие форматы календаря: все события в виде списка, события на неделю, события в этом месяце.
Даты, содержащие новости, должны быть визуально выделены. Календарь может быть в формате виджета на месяц, размером до 300-400 пикселей (размещение предположительно в боковой панели), либо в полном формате, для полноэкранной работы.
Для упрощения навигации по архиву новостей необходимо добавить календарь с активными элементами, отражающими информацию по новостям.
Краткое описание задачи
предлагает такое решение для iOS календаря
В этой статье я рассмотрю несколько хороших дизайнерских решений, отметив их ключевые преимущества и особенности.
Занимаясь разработкой модуля новостей, я в очередной раз столкнулся с проблемой оформления календаря. Несмотря на то, что существует несколько готовых технологических решений, всегда имеет смысл освежать свои знания, сохраняя их актуальность и ценность.
Дизайн календаря новостей: обзор типовых решений и нестандартных приемов
Дизайн календаря новостей: обзор типовых решений и нестандартных приемов Виталий Комлев, разработка сайтов «под ключ» (Харьков), советы по поддержке сайтов, консультации по поисковой оптимизации
Комментариев нет:
Отправить комментарий