Дизайн приложения для билетов на события: редизайн главного экрана, до и после

Приложение для событий продаёт одно: вечер вне дома. В первом черновике ниже нужные события есть, но они похоронены. Экран открывается подсказкой поиска на 50 символов, восемью цветными категориями, адресом шрифтом 8 px поверх фото и шестью фактами в каждой строке. Исправление сохраняет события и фотографии и кладёт их на тёмный фон, на котором фото светятся.

Весь экран, до и после

Черновик джуниора

Исправлено

Слева на экране пять секций, и ни одна не главная: шапка с двумя иконками, восемь кругов, карточка с четырьмя элементами на фото и список. Справа заголовок задаёт вопрос, фотокарточка является звездой, а список остаётся списком. Всё начинается от одного края в 20 px, между секциями по 16 px.

Исправление 1: крупный заголовок в две строки и одно поле поиска

До

После

Маленькая подпись города, колокольчик и корзина против крупного заголовка, который говорит, для чего этот экран.

Верхняя панель черновика это панель инструментов: город мелким жирным шрифтом, колокольчик, корзина со счётчиком, затем поле поиска с подсказкой на 50 символов, «Поиск событий, артистов, площадок, команд и не только...», и иконка фильтра. Она говорит человеку, где он находится, и вручает ему инструменты.

Исправление даёт ему фразу. «Сегодня в» белое, а Los Angeles цвета маджента с маленьким шевроном, так что город по-прежнему можно сменить. В 28 pt это самый крупный текст на экране.

Поле поиска говорит «Артисты, площадки, события» и сохраняет иконку фильтра. Колокольчик и корзина ушли из шапки, и этот редизайн не рисует, куда они переехали.

Правило на будущее: верх главного экрана должен словами говорить, для чего этот экран.

Исправление 2: восемь кругов становятся одной строкой таблеток

До

После

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

Восемь кругов в черновике розовые, синие, жёлтые, фиолетовые, зелёные, оранжевые, голубые и розовато-красные: это пастели светлой темы, оставленные как есть на чёрном экране. Они занимают два ряда и просят человека выбирать ещё до того, как ему показали хоть одно событие.

Исправление это одна строка таблеток. «Концерты» залиты фирменной маджентой #D6246E, остальные простые тёмные таблетки. Строка прокручивается, поэтому «Комедия» намеренно обрезана краем: человек видит, что справа есть ещё.

«Ещё» закреплена в конце, так что полный список всегда в одном касании. Список категорий сократился с восьми до семи таблеток, остальное спрятано за «Ещё».

Правило на будущее: фильтры должны вести себя как фильтры. Одна строка, одно выбранное состояние, один цвет.

Исправление 3: одна главная карточка и одна кнопка

До

После

Фото с меткой, длинный заголовок, мелкие детали и две кнопки против большого фото, названия и одной кнопки.

Черновик кладёт на фото четыре элемента: красную метку «БЫСТРО РАСХОДИТСЯ!!», сердечко, заголовок заглавными, «NEON NIGHTS LIVE: THE WORLD TOUR 2026», и строку с датой, временем, площадкой и адресом шрифтом 8 px. Ниже цена с комиссиями и две кнопки, «КУПИТЬ БИЛЕТЫ» и «ПОДЕЛИТЬСЯ», заглавными. Большая часть фото закрыта текстом.

Исправление делает фото высотой 228 px и даёт сцене показаться. Название лежит на мягкой чёрной тени, идущей от 0 до 78% под заголовком, так что белый текст читается на любом участке фото. Белая плашка даты «24 ОКТ» заменяет дату в мелкой строке.

Площадка и время сжимаются до «Marlow Theatre · сб, 20:00». Под фото слева «От $45» и «312 идут», справа одна кнопка «Купить билеты». Метка, адрес и кнопка «Поделиться» исчезли.

Правило на будущее: одна карточка, одно действие. Работа карточки в том, чтобы получить касание, так что дайте ей одно.

Исправление 4: строки популярного с датой, площадкой и ценой

До

После

Шесть фактов в одной серой строке и две иконки против даты, названия, площадки и цены.

Каждая строка в черновике несёт название, дату, время, площадку, возрастное ограничение, диапазон цен и счётчик интереса в одной переносящейся строке шрифтом 8 px. Ещё на каждой строке есть сердечко и иконка «поделиться». Вместе это абзац.

Исправление отводит каждому факту своё место. Дата сверху цветом бренда, заглавными: «ПТ, 30 ОКТ». Название жирным под ней, площадка серым ниже, а цена справа в скруглённой плашке, «$25», то есть начальная цена из черновика «$25-$40».

Фото остаётся квадратной миниатюрой. Возрастное ограничение, счётчик интереса, сердечко и иконка «поделиться» ушли из строки, а полноценному приложению для них всё равно нужен дом.

Правило на будущее: когда в строке много фактов, ранжируйте их и дайте верхним четырём собственное место.

Мелкие исправления

• Тёмный фон, который не чёрный. Черновик лежит на чистом #000000 с пастелями светлой темы. Исправление использует почти чёрный #0B0B0F с тёмными поверхностями iOS, #1C1C1E, чтобы карточки отделялись от фона.
• Один акцент и более светлый вариант для текста. Фирменная маджента #D6246E заливает выбранную таблетку и кнопки. Более светлый оттенок, #EC4F88, используется для текста и иконок цвета маджента на тёмном фоне, где базовая маджента слишком тусклая для чтения.
• Один левый край. В черновике 14 px слева и 12 px справа. В исправлении по 20 px с обеих сторон и 16 px между секциями.

Проверьте своё приложение для событий

Скачайте файл Figma

В бесплатном файле оба экрана как компоненты, каждое исправление в виде пары «до и после», переменные цвета и текстовые стили iOS.

Бесплатный файл Figma

Главный экран билетов на события, до и после

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

Открыть в Figma

FAQ

Что должен показывать первым главный экран приложения для билетов на события?

Заголовок, который говорит, для чего этот экран, например «Сегодня в Los Angeles», затем одно поле поиска и строку таблеток-категорий. Главное событие идёт сразу следом.

Как оформить карточку главного события?

Одно большое фото, название события на мягкой тени, дата в виде плашки, цена и одна кнопка. Адрес, метки и кнопку «Поделиться» оставьте для страницы события.

Сколько категорий должно показывать приложение для событий?

Около семи таблеток в одной прокручиваемой строке, с залитой выбранной и закреплённой в конце «Ещё». Восемь цветных кругов в два ряда просят человека выбирать слишком рано.

Стоит ли приложению для событий использовать тёмную тему?

Она подходит событиям, потому что фото сцен и толпы светятся на тёмном фоне. Берите почти чёрный, например #0B0B0F, со светлыми поверхностями, а не чистый чёрный с оставленными цветами светлой темы.

Как показать детали события в списке?

Ранжируйте их: сначала дата акцентным цветом, затем название, площадка и цена. Возрастное ограничение, счётчик интереса и лишние иконки оставьте для страницы деталей.

Источники

• Оба экрана наши собственные, спроектированы и измерены в Figma. Названия событий, площадки и адрес выдуманы; даты сверены с календарём 2026 года.
• Фото с Pexels: Thibault Trillet (главная сцена, на обоих экранах), Sid Dalal, julio cesar resendiz resendiz, Maor Attias и Martin Lopez.
• Контраст проверен по формуле контраста WCAG 2.2: белый текст на #D6246E даёт 4,8:1, а #EC4F88 на тёмном фоне 5,7:1, тогда как #D6246E дал бы 4,1:1.
• Apple Human Interface Guidelines: Typography, для размеров текста iOS на исправленном экране.
• Впервые опубликовано как карусель в App Brainy.