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

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

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

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

Исправлено

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

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

Правка 1: прогресс кольцом и одним предложением

До

После

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

Черновик говорит одно и то же трижды: «1/5», «20.00%» и полоса, заполненная на пятую часть. Два десятичных знака выдают всё: «20.00%» это число, которое напечатала программа, а не то, что нужно человеку. А строка под ним мелкая, серая и заканчивается двумя восклицательными знаками.

Исправление выбирает одну картинку, кольцо на 20%, и одно предложение с двумя важными фактами: одна задача из пяти выполнена, четыре осталось. Предложение заканчивается полезной частью, «следующая в 16:00», которая подсказывает пользователю, что делать дальше, вместо того чтобы подбадривать его.

Кольцо нарисовано фирменным красным, тем же, что у строки добавления и активной вкладки.

Правка 2: фильтруем по времени, а не по цвету

До

После

Пять чипов для приоритета и статуса в пяти цветах против трёх слов в одном переключателе.

Чипы в черновике смешивают два вопроса. «Высокий», «Средний» и «Низкий» спрашивают, насколько задача важна, «Готово» спрашивает, в каком она состоянии, а «Все (5)» просит показать всё. Пять чипов используют пять цветов и два радиуса скругления, так что не совпадают даже формы.

Чтобы ими пользоваться, пользователь сначала должен выучить, что красный значит срочно, оранжевый средне, а зелёный низко, и

Исправление задаёт один вопрос, тот, который люди задают списку дел: когда. «Все», «Сегодня» и «Скоро» это три слова в одном переключателе, он читается как один элемент управления с одним выбранным состоянием и совпадает с вкладками внизу: вкладка «Сегодня», вкладка «Скоро». Приоритет не исчез. Он переехал в строки в виде маленькой точки (правка 3).

Правка 3: задача занимает полторы строки

До

После

Заголовок, описание, теги, красная строка срока и аватары на каждой задаче против заголовка, времени и списка.

Каждая задача в черновике может нести пять видов информации: описание, до трёх цветных тегов, красное «Срок: 24.10.2026 17:00», группу аватаров и чекбокс. «Срочно!!» появляется как тег у задачи, которая и так красная в строке срока. Все задачи на сегодня, и все сроки красные, поэтому красный перестаёт значить «просрочено» и начинает значить «тут есть задача».

Исправление даёт каждой задаче один заголовок и одну серую строку: время и список, к которому она относится. «17:00, Работа». Даты нет, потому что заголовок уже говорит, какой сегодня день.

Теги свернулись в название списка. Приоритет стал одной маленькой точкой справа, красной у первой задачи и оранжевой у второй, а там, где отмечать нечего, точки нет. Выполненная задача остаётся в списке, зачёркнутая и с пометкой «Готово», с заполненной отметкой фирменного красного.

Задачи лежат в одной белой карточке с тонким разделителем между ними, так что список читается как единое целое.

Правка 4: «Добавить задачу» в конце списка

До

После

Плавающая кнопка, закрывающая последнюю задачу, против строки в конце списка.

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

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

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

• Четыре вкладки, а не пять. «Сегодня», «Скоро», «Обзор» и «Профиль» заменяют «Сегодня», «Скоро», «Проекты», «Поиск» и «Профиль».
• Одно поле. В черновике 14 px слева и 12 px справа. В исправлении по 20 px с обеих сторон.
• Нормальная шапка. «Мои задачи» с полной датой превратились в маленькое «Суббота, 24 окт» над крупным «Сегодня», а аватар стал колокольчиком.
• Один красный. Фирменный красный #E5484D покрывает кольцо, значок добавления и активную вкладку. Красный текст использует более глубокий #D92D20, чтобы оставаться читаемым.
• Настоящая типографская шкала. Текст перешёл с 8–20 px на размеры iOS от 11 до 28 pt.

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

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

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

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

Экран «Сегодня» в приложении для задач, до и после

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

Открыть в Figma

FAQ

Что должен показывать экран «Сегодня» в приложении для задач?

Прогресс за сегодня, способ переключаться между «Все», «Сегодня» и «Скоро», список задач с их временем и действие «Добавить задачу». Описания и длинные даты могут подождать на экране задачи.

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

Кольцом или полосой плюс одно предложение, например «1 из 5 выполнено». Не печатайте одно и то же число как дробь, процент и полосу. Если показываете процент, округлите его.

Как приложению для задач показывать приоритет?

Маленькой точкой или флажком в тех строках, где это нужно, а не цветными тегами на каждой задаче. Приоритет может быть и фильтром, и сортировкой, но главным ему быть не обязательно.

Нужна ли приложению со списком дел плавающая кнопка добавления?

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

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

Теми вопросами, которые задают люди: все, сегодня и скоро. Один вопрос на один элемент управления, и не смешивайте фильтр приоритета с фильтром статуса в одной строке.

Источники

• Оба экрана наши собственные, спроектированы и измерены в Figma. Задачи, люди и клиент выдуманы для упражнения. 1 выполненная задача из 5 это 20%.
• Фото с Pexels: pessoas uem, Iphanyi Ezemenari и Ajan Yogi.
• Apple Human Interface Guidelines: Typography, для размеров текста iOS, использованных на исправленном экране.
• Apple Human Interface Guidelines: Color, о том, что нельзя полагаться только на цвет для передачи смысла.
• Впервые опубликовано как карусель в App Brainy.