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

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

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

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

Исправлено

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

Каждая карточка справа начинается от одного и того же левого края в 20 px, а иконка состояния, жёлтое солнце за белым облаком, стоит справа в первом блоке, напротив числа.

Правка 1: город и одно крупное число

До

После

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

Первая карточка черновика — это форма для данных прогноза. «New York, NY, United States» — три названия одного места, где человек и так знает, что находится. «Updated 10/24/2026 09:41:12» точно до секунды и бесполезно для человека: никто не решает, что надеть, по метке времени. Переключатель единиц сидит в углу самой важной карточки.

Исправленная версия пишет «New York» и «72°» и делает число 84 px, самым большим на экране, потому что это и есть ответ на вопрос. Дальше словами идёт небо, «Partly cloudy», затем диапазон дня, «H 75° L 61°». Ощущаемая температура и вероятность дождя ушли из этого блока: число «ощущается как» переехало в детали, где получило отдельную карточку.

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

Правка 2: шесть часов, одна карточка, место для чтения

До

После

Восемь узких колонок в полосе с рамкой против шести широких с заголовком простым языком.

Черновик втискивает восемь часов в одну строку, поэтому каждая колонка тонкая, а шрифт крошечный. Исправленная версия показывает шесть: Now, 10 am, 11 am, 12 pm, 1 pm и 2 pm. Когда колонок на две меньше, у каждого часа получается иконка побольше и число побольше.

Заголовок карточки из подписи превратился в предложение: «Sunny spells until 3 pm». Он говорит читателю, во что складываются шесть колонок, так что не нужно просматривать каждую иконку, чтобы найти момент, когда погода изменится.

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

Правка 3: четыре детали, у каждой крупное число

До

После

Девять маленьких плиток на белой карточке против четырёх более крупных карточек с числом крупным шрифтом.

Девять плиток шрифтом 9 px считают все детали равнозначными, и ни одну не прочитать с одного взгляда. Давление, точка росы и видимость это настоящие данные, но не то, что исправленная версия ставит на первое место.

Остаются четыре: ощущаемая температура, влажность, ветер и UV-индекс. У каждой своя карточка, иконка, маленькая подпись и число куда крупнее, чем в черновике. «6 High» и «8 mph NW» читаются с вытянутой руки. Остальные шесть, давление, видимость, точка росы, восход, закат и качество воздуха, на этом главном экране отсутствуют.

Полноценному погодному приложению всё равно нужно место для них, например экран с деталями, и этот редизайн его не рисует.

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

Правка 4: три дня с полосой для каждого диапазона

До

После

Десять строк текста с процентом дождя, максимумом и минимумом против трёх строк с полосой для диапазона каждого дня.

Десять строк «75° / 61°» это десять сумм, которые читатель должен сравнивать в уме. Какой день самый тёплый? Где начинается похолодание? Ответ есть в числах, но глазу приходится его выкапывать.

Сравнение делает полоса. Минимум и максимум каждого дня стоят на общей шкале от 50° до 78°, так что более длинная или смещённая вправо полоса означает более тёплый или более широкий по диапазону день, а цвет вдоль полосы идёт от холодного синего к тёплому жёлтому. Процент дождя из строк ушёл. Суббота, 24 октября, это «Today»; следующие два дня идут за ней.

Правило на будущее: если вопрос в том, как сравниваются элементы ряда, нарисуйте сравнение.

Мелкие правки

• Один левый край. В черновике 14 px слева и 12 px справа, и блоки не выстраивались в линию. Каждый блок исправленной версии начинается от края в 20 px, между карточками 12 px.
• Более глубокий синий. Небо это градиент от #1D4ED8 до #3B82F6, где собственный синий черновика стал светлым концом. Карточки лежат на тёмно-синей вуали 24% (#1E3A8A), поэтому выглядят частью неба, а не белыми коробками на нём.
• Белый текст на синем, который можно прочитать. Белый текст 9 px на #3B82F6 в черновике самая слабая пара на экране. Крупный шрифт на более тёмных карточках это исправляет.
• Настоящая шкала шрифтов. Текст вырос с 8–13 px до размеров iOS от 13 до 28 pt, а сверху стоит температура в 84 px.
• Четыре вкладки, не пять. Исправленная версия убирает одну вкладку.
• Без переключателя единиц на главной карточке. Переключатель F и C ушёл из первой карточки.

Проведите аудит своего погодного приложения

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

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

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

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

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

Открыть в Figma

FAQ

Что должен показывать главный экран погодного приложения в первую очередь?

Город и одну крупную температуру, затем небо и максимум с минимумом за день. Всё остальное на шаг ниже: ближайшие часы, несколько деталей и короткий прогноз.

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

Большинству людей хватает четырёх: ощущаемая температура, влажность, ветер и UV-индекс. Давление, видимость, точку росы и восход или закат вынесите на экран с деталями.

Как показывать почасовой прогноз в погодном приложении?

Шесть часов или около того в одной карточке, с крупными иконками и числами и заголовком, который говорит, во что складываются эти часы, например «Sunny spells until 3 pm».

Как показать прогноз на несколько дней в приложении?

Три дня на главном экране, у каждого полоса от минимума до максимума на одной общей шкале. Более длинным спискам место на отдельном экране.

Какой размер шрифта использовать в погодном приложении?

Используйте шкалу текста платформы, например размеры текста iOS, и держите температуру намного крупнее всего остального. Исправленный экран идёт от 13 до 28 pt с температурой 84 px.

Источники

• Оба экрана наши, спроектированы и измерены в Figma. Место, температуры и даты выдуманы для упражнения.
• Контраст проверен по формуле контраста WCAG 2.2: белый текст имеет контраст 4.6:1 или выше на каждой исправленной карточке, а белый текст 9 px на #3B82F6 в черновике дает 3.7:1.
• Apple Human Interface Guidelines: Typography, для размеров текста iOS, использованных в исправленном экране.
• Впервые опубликовано как карусель в App Brainy.