Дизайн приложения-календаря: редизайн экрана дня, до и после
Экран дня в календаре, где пять событий, сетка месяца и красный алерт кричат одновременно, и тот же экран после правок: тихая шкала времени, одна строка для ближайшей встречи, полоса недели и одно меню «День». Каждое изменение рядом, с бесплатным файлом Figma.
У экрана дня в календаре одна задача: показать, что дальше и сколько времени осталось в дне. Первый черновик ниже знает весь день, но красит пять событий в пять громких цветов, добавляет сетку месяца и ставит сверху красный алерт, так что ничто не выглядит важнее остального. Встреча через 19 минут весит столько же, сколько обед.
Исправление сохраняет все функции и меняет только вес. Длинные встречи выглядят длинными, свободное время просто пустое, а единственная встреча, которая важна прямо сейчас, получает свою спокойную строку.
Весь экран, до и после
Черновик джуниора
Исправлено
Слева глазу не за что зацепиться. Шапка, четыре кнопки, красный баннер, сетка месяца и стопка насыщенных карточек борются за первый взгляд. Карточки событий самое громкое на экране, и все они одинаково громкие. Красный использован дважды: один раз для алерта и один раз для события, поэтому красный перестаёт что-либо значить.
Справа у экрана ясный порядок сверху вниз: где я на неделе, что дальше и как выглядит остаток дня. Цвет тихий и служит одному: отличать события друг от друга.
Что изменилось, в цифрах
| Черновик джуниора | Исправлено | |
|---|---|---|
| События | Пять полноцветных карточек с колокольчиком, аватарами и тегами | Бледные тонированные блоки с цветной полосой 3 px, радиус 6 |
| Время | Не показано, карточки одной высоты | Шкала 70 px на час, длина видна |
| Ближайшая встреча | Красный баннер с предложением | Одна строка 76 px: «Через 19 мин», участники и кнопка Join 36 px |
| Выбор даты | Сетка месяца 158 px с цветными точками | Полоса недели, один сплошной кружок 36 px на сегодня |
| Виды | Четыре равные кнопки по 24 px | Одно маленькое меню «День» |
| Иконки в шапке | Мелкие, разные | 24 px, простые |
| Поля | 14 px слева, 12 px справа | Ровные, строки от края до края |
| Размеры текста | От 8 до 16 px | Читаемая шкала, один размер на роль |
| Плавающая кнопка | 52 px, лежит поверх последней карточки | Нет, добавление это плюс в шапке |
| Таб-бар | Пять вкладок | Пять вкладок в плавающей панели 62 px, день идёт под ней |
Правка 1: превращаем карточки в шкалу времени
До
После
Пять полноцветных карточек друг под другом, синяя, красная, оранжевая, зелёная и фиолетовая, все одной высоты, у каждой колокольчик, аватары и теги, и рядом шкала времени с подписями часов, серой прошедшей встречей, красной линией на 9:41 и четырьмя бледными блоками с тонкой цветной полосой, где обед и звонок с клиентом выше, чем встреча один на один.
Список карточек говорит «вот пять дел» и больше ничего. Часовая планёрка и трёхчасовой воркшоп занимают одно место, а промежутки между ними, то есть именно то, что люди хотят видеть в календаре, невидимы.
Шкала времени придаёт дню форму. Встреча на 45 минут это короткий блок, длинная это высокий блок, а свободное время это белое пространство, которое видно. Цвет переехал с целой карточки на тонкую полосу слева и бледный фон, так что текст читается сразу, а цвет по-прежнему отличает рабочий звонок от обеда.
Две мелочи несут смысл. Team Standup серый, потому что он закончился. Красная линия отмечает 9:41, так что видно, где вы сейчас в дне.
Правило на будущее: показывайте время как пространство, а громкий цвет оставляйте для того, что происходит сейчас.
Правка 2: одна спокойная строка для того, что дальше
До
После
Красный баннер с колокольчиком и текстом «У вас сегодня 5 событий. Следующее через 19 минут» и рядом белая строка Roadmap Review, затем красное «Через 19 мин» с Zoom рядом, три маленьких аватара и жёлтая кнопка Join.
Алерт в черновике пытается сообщить три вещи одной фразой: сколько событий, что одно из них ближайшее и когда. Читается как ошибка. Количество событий за сегодня никому не нужно, ведь экран их показывает.
Исправление отвечает на единственный вопрос, который возникает при открытии календаря: что дальше и можно ли подключиться? Сначала название, «Через 19 мин» красным это единственный красный на экране, а кнопка Join 36 px лежит там, куда достаёт большой палец. Время сходится: в статус-баре 9:41, а Roadmap Review начинается в 10:00.
Этот же паттерн использует Notion Calendar для кнопки подключения: встреча, обратный отсчёт и одно действие.
Правило на будущее: замените баннер, описывающий день, строкой, которая помогает с ближайшим шагом.
Правка 3: меняем месяц на неделю
До
После
Полная сетка месяца, пять рядов чисел с маленькими цветными точками под многими из них и сегодняшний день в маленьком жёлтом кружке, и рядом одна строка недели с буквой над каждым числом, большой сплошной жёлтый кружок на вторнике, 3-м числе, и подпись «Вторник, 3 ноября» под ним.
Сетка месяца отвечает на вопрос, который экран дня не задаёт. Она тратит 158 px телефона, чтобы показать 30 дней цветных точек, а точки похожи на карточки под ними, так что на экране два конкурирующих резюме одного и того же.
Полоса недели сохраняет то, что нужно виду дня: сегодня и соседние дни. Один сплошной кружок отмечает сегодня, а полная дата словами лежит прямо под ним. Месяц никуда не делся: «Ноябрь» в шапке возвращает к виду месяца, а свайп по полосе листает неделю.
Правило на будущее: показывайте тот масштаб, о котором экран. Экрану дня нужна неделя, а не месяц.
Правка 4: складываем четыре кнопки в одно меню
До
После
Шапка с «Ноябрь 2026», двумя шевронами, логотипом-надписью, чипом «Сегодня», иконками поиска и настроек, а под ней четыре равные кнопки с контуром: День, Неделя, Месяц и Год, и рядом шапка со стрелкой назад и «Ноябрь», маленьким меню «День» с шевроном, иконкой поиска и иконкой плюса.
Четыре равные кнопки говорят, что все четыре вида одинаково вероятны. Это не так: люди сидят в одном виде и редко его меняют. Кнопки занимают целую строку и похожи на карточки под ними.
Исправление складывает их в одно маленькое меню, которое показывает текущий вид. Неделя, Месяц и Год в одном касании. Поиск и добавление становятся простыми иконками 24 px, «Настройки» остаются в таб-баре, а логотип уходит, потому что экран и есть продукт, и у Apple Calendar его тоже нет.
Правило на будущее: когда опциями пользуются неравномерно, показывайте текущую, а остальные прячьте за ней.
Мелкие правки
- Все функции на месте. Стрелки это свайп по полосе недели. Колокольчик, теги и место у каждого события открываются вместе с событием.
- Те же события. Все пять событий есть на обоих экранах, каждое сохраняет прежний цвет как оттенок. Team Standup серый, потому что он закончился, а Roadmap Review фирменного жёлтого цвета, потому что он ближайший.
- Плавающий таб-бар. При 62 px и дне, идущем под ним, экран использует всю высоту, а таб-бар перестаёт выглядеть отдельной коробкой.
- Никакой плавающей кнопки. Плюс 52 px раньше лежал поверх последней карточки и её участников. Теперь это иконка в шапке.
- Ровные поля. В черновике 14 px слева и 12 px справа. Исправленные строки идут от края до края на одной сетке.
- Zoom на обоих. Roadmap Review проходит в Zoom на обоих экранах, так что Join что-то значит.
Проверьте свой экран календаря
| Вопрос | Почему это важно |
|---|---|
| Длинная встреча выглядит длинной? | Длина это первое, что должен показывать календарь |
| Свободное время видно как пустое место? | Люди открывают календарь, чтобы найти окна |
| Есть ли одна строка для того, что дальше? | Это самый частый вопрос |
| Красный используется только для одного? | Цвет предупреждения работает один раз |
| Выбор даты соответствует виду? | Сетка месяца на экране дня это второе резюме |
| Редкие виды убраны? | Равные кнопки подразумевают равное использование |
Скачайте файл Figma
В бесплатном файле есть черновик джуниора, исправленный экран и каждая часть как компонент.
Бесплатный файл Figma
Редизайн экрана дня в календаре, до и после
Оба экрана и каждая часть как компонент Figma. Бесплатно, только просмотр, продублируйте в свои черновики.
FAQ
Как проектировать вид дня в приложении-календаре?
Как шкалу времени, где высота блока равна длине встречи, с тихими оттенками и тонкой цветной полосой, пустым свободным временем и линией текущего момента. Ближайшую встречу поместите в одну строку над ней.
Как показать ближайшую встречу в приложении-календаре?
В одной строке с названием встречи, обратным отсчётом вроде «Через 19 мин», участниками и кнопкой Join, если есть звонок. Избегайте баннера, который считает события дня.
Нужно ли показывать сетку месяца на экране дня в календаре?
Обычно нет. Полоса недели с одним сплошным кружком на сегодня даёт контекст, который нужен виду дня, а месяц остаётся в одном касании от шапки.
Сколько кнопок видов нужно приложению-календарю?
Одна. Показывайте текущий вид в маленьком меню, здесь это «День», а «Неделю», «Месяц» и «Год» убирайте внутрь.
Почему полноцветные карточки событий плохи для календаря?
Когда каждое событие насыщенное, каждое выглядит срочным, и цвет перестаёт их разделять. Бледный оттенок с тонкой цветной полосой сохраняет категорию и позволяет читать текст.
Какого цвета должна быть кнопка подключения в календаре?
Фирменного, как единственная залитая кнопка на экране, а красный оставьте только для обратного отсчёта.
Источники
- Оба экрана наши собственные, спроектированы и измерены в Figma. Приложение Sundial, люди и события выдуманы. Время согласовано: в статус-баре 9:41, Roadmap Review начинается в 10:00, а 3 ноября 2026 года это вторник.
- Проверки текста и контраста: чернила #1B1A17 на бархатце #FFC233 дают 10,8 к 1. Текст события на его оттенке: 8,1 (жёлтый), 6,5 (оранжевый), 6,8 (зелёный) и 8,4 (фиолетовый) к 1. Красное «Через 19 мин», #D70015, на белом даёт 5,4 к 1.
- Изученный паттерн: вид дня в Apple Calendar (назад к месяцу слева сверху, поиск и добавление как простые иконки, полоса недели с одним сплошным сегодня, тонированные блоки с цветной полосой, пустое место как свободное время) и кнопка подключения в Notion Calendar.
- Логотип-надпись на экране «до»: Playfair Display Bold. Фото аватаров с Pexels: Peter Platou, Son Hoa Nguyen, Luthfi Ramaditya и Carlos Gutierrez.
- Впервые опубликовано как карусель в App Brainy.
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
