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

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

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

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

Исправлено

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

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

Правка 1: одна карточка с кольцами вместо четырёх плиток

До

После

Четыре пастельные плитки, в каждой иконка, число, подпись и тонкая полоска, против одной карточки с тремя кольцами, целью под каждой подписью и пульсом в виде маленького чипа.

Каждая плитка в черновике называет число и рисует тонкую полоску, но не говорит, относительно чего она измеряется. 8 432 шага могут быть и хорошо, и плохо. Читателю приходится угадывать цель по длине полоски, а полоски тонкие.

Кольца выражают цель и словами («из 10 000», «из 600 ккал», «из 2 л»), и формой: кольцо либо заполнено, либо нет. Одного взгляда хватает, чтобы ответить на вопрос «я укладываюсь в план сегодня?». Пульс это показание, а не цель, поэтому кольца он не получает. Он уходит в чип в углу, что подчёркивает: это число другого рода.

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

Правка 2: одна кнопка play и подложка под текстом

До

После

Заголовок раздела, бейдж NEW, белый текст 9 px на фото и три элемента управления под ним, против подписанного фото, более крупного текста на подложке и одной кнопки play.

Белый текст на фото читается только там, где фото случайно тёмное. В черновике строка с деталями проходит по самой светлой части снимка, полу зала и серой футболке, и при 9 px она пропадает. Исправление накладывает на фото чёрную подложку, которая доходит до 72% у нижнего края, ровно там, где стоят слова, и делает текст крупнее.

Черновик к тому же задаёт вопрос, прежде чем человек сможет действовать: Начать, или Подробнее, или сохранить сердечком? С сегодняшней тренировкой можно сделать одно: начать её. Одна круглая кнопка play говорит это без слов. Детали в одном касании, если они понадобятся, но они больше не конкурируют с главным действием.

Бейдж «NEW» и заголовок раздела «Тренировка дня» говорили почти одно и то же дважды. Исправление оставляет одну метку, чип на фото.

Правка 3: начните график с итога

До

После

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

График отвечает на вопрос, а график из черновика не говорит, на какой. Семь столбцов одного насыщенного оранжевого, без значений и с легендой для единственного ряда, так что читатель сам решает, что из этого вынести. Исправление сначала отвечает на вероятный вопрос словами: 4 ч 12 мин за эту неделю, на 18% больше, чем на прошлой.

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

Правило на будущее: поставьте наверх число, на объяснение которого график потратил бы минуту, а остальное пусть делают столбцы.

Правка 4: одна кнопка в шапке

До

После

Аватар, приветствие с восклицательным знаком, вторая строка ещё с двумя и три иконки, против даты, приветствия и одной кнопки уведомлений.

Шапка черновика содержит семь элементов раньше любого контента: аватар, две строки приветствия и три иконки. Аватар ведёт в аккаунт, а во вкладках у приложения уже есть Профиль, поэтому исправление убирает его из шапки. Иконки поиска и настроек уходят вместе с ним, освобождая место для приветствия.

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

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

• Четыре вкладки, а не пять. Главная, Тренировки, Прогресс и Профиль. Статистика и Сообщество уступили место одной вкладке Прогресс.
• Один отступ. В черновике слева 14 px, справа 12 px, поэтому карточки выглядели чуть сдвинутыми. Исправление использует 20 px с обеих сторон и 16 px между карточками.
• Один цвет для действия. В черновике были персиковая, жёлтая, розовая и голубая плитки плюс оранжевый. В исправлении оранжевый для действия, а янтарный и синий остались только у двух колец, где они помогают их различать.
• Нормальная типографская шкала. Текст перешёл от 8-16 px к размерам текста iOS от 11 до 28 pt, так что на экране нет ничего мельче самой маленькой системной подписи.
• Без ряда «Рекомендуем». Второй ряд фото в черновике обрезался таб-баром. Исправление заканчивает главный экран графиком.
• Спокойнее приветствие. «Давай разнесём цели на сегодня!!» превратилось в дату над именем.

Проверьте своё фитнес-приложение

Получите файл Figma

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

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

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

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

Открыть в Figma

FAQ

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

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

Кольца прогресса лучше, чем полоски прогресса в фитнес-приложении?

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

Как сделать белый текст читаемым на фото тренировки?

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

Как проектировать график активности в фитнес-приложении?

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

Сколько вкладок должно быть в фитнес-приложении?

Четыре или пять. Объединяйте вкладки со связанными числами, например Статистику и Сообщество, в одно место вроде Прогресса.

Источники

• Оба экрана наши собственные, спроектированы и промерены в Figma.
• Фото с Pexels: pessoas uem, Julia Larson, Tima Miroshnichenko и Vitaly Gariev.
• Apple Human Interface Guidelines: Typography, размеры текста iOS, использованные в исправленном экране.
• Впервые опубликовано в виде карусели в App Brainy.