Дизайн приложения для учёта расходов: редизайн бюджетного дашборда, до и после

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

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

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

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

Исправлено

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

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

Что изменилось, в цифрах

Правка 1: сначала то, сколько осталось потратить

До

После

Четыре одинаковые мелкие коробки в ряд: Income $4,200 зелёным, Expenses $1,916 красным, Savings $1,000 синим и Balance $1,284 чёрным, всё по 10 px, против $1,284 огромным жирным шрифтом с остатком из $3,200 и 12 днями до конца серым цветом под ним.

Четыре коробки делают все числа одного размера, так что ни одно из них не является ответом. Пользователь должен сам знать, что важен именно Balance, а потом прочитать его в 10 px.

Исправление выбирает одно. $1,284 набрано жирным 48 px, а строка под ним несёт два факта, которые придают числу смысл: бюджет, из которого оно получено, $3,200, и дни, оставшиеся в месяце. Число без бюджета просто любопытный факт. С бюджетом пользователь понимает, стоит ли беспокоиться.

Цифры сходятся, так что ничего не выдумано под картинку. Доход $4,200 минус $1,000 сбережений дают бюджет $3,200, а $1,916 потрачено, остаётся $1,284. Income и Savings переехали на вкладку Stats.

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

Правка 2: одна плоская полоса вместо круга

До

После

Большая круговая диаграмма из восьми цветных секторов с подписями Rent, Food, Fun, Transport, Shopping, Health, Bills и Subscriptions, с крошечной легендой и процентами, против одной тонкой составной полосы индиго, коралловым, янтарным и бирюзовым цветами с бледным концом, легенды два на два Rent $1,100, Food $412, Fun $186 и Other $218 и трёх строк бюджетов с тонкими полосками под ними.

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

Полоса читается слева направо, как индикатор прогресса, а его все уже понимают. Она нарисована в масштабе бюджета $3,200, так что бледный конец это оставшиеся $1,284, и экран показывает одно и то же число дважды в двух видах. Пять мелких категорий сворачиваются в Other, $218, и раскрываются в Budgets. Сектора сходятся: 1,100 + 412 + 186 + 84 + 62 + 30 + 22 + 20 дают $1,916.

Бюджеты расположены сразу под полосой простыми строками: название, «$412 из $600» и полоска 4 px. Полоска заполняется к лимиту, поэтому показывает, насколько близко пользователь к нему подошёл. Круг так не умеет.

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

Правка 3: четыре строки вместо таблицы

До

После

Заголовок Transactions с кнопками-фильтрами All, Income и Expenses над пятиколоночной таблицей с колонками Date, Merchant, Category, Method и Amount, десять строк текста по 9 px и плавающая коралловая кнопка плюс, закрывающая последние суммы, против заголовка Recent со ссылкой See All кораллового цвета и четырёх строк: бирюзовая M для Marlow Market, фиолетовая R для Reel House, янтарная A для Alder Studio с доходом зелёным и зелёная C для Cityline Transit.

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

Четырёх строк для главного экрана достаточно. Кружок 36 px с буквой продавца даёт глазу за что зацепиться, продавец набран 15, категория 13 серым, а сумма справа. Доход единственный зелёный в списке, поэтому зарплата заметна без подписи. Дата, способ оплаты и фильтры открываются из See All и из каждой строки, так что ничего не потеряно.

Правило на будущее: главный экран показывает несколько последних записей, а не всю историю. Фильтры спрячьте за See All.

Правка 4: сделайте месяц заголовком

До

После

Строка шапки с иконкой меню, коралловым словом Penny, словом Dashboard, выпадающим списком November 2026, иконкой экспорта и колокольчиком с красной точкой, против маленького кораллового логотипа Penny над словом November жирным 28 pt с шевроном, колокольчиком с красной точкой и коралловым плюсом.

Шапка в черновике держит шесть вещей одного размера: меню, логотип, подпись «Dashboard», которая ничего не говорит, выпадающий список, экспорт и колокольчик. Выпадающий список это элемент, которым люди реально пользуются, и он самый мелкий.

Исправление даёт экрану заголовок, и заголовок и есть элемент управления. «November» набрано жирным 28 с шевроном, логотип маленький на отдельной строке, а плюс переехал из плавающей кнопки в шапку, рядом с колокольчиком. Меню и подпись Dashboard ушли на вкладку Profile, а экспорт на Stats.

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

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

• Все функции остаются. Недельная диаграмма, Income и Savings переезжают в Stats. Пять мелких категорий сворачиваются в Other и открываются в Budgets вместе с Goals. Фильтры, даты и способ оплаты открываются из See All и из каждой строки.
• Ровные поля. В черновике 14 px слева и 12 px справа. В исправлении по 20 с обеих сторон.
• Никаких коробок. В исправлении нет ни карточек, ни плиток, ни теней. Вещи разделяют отступы и шрифт.
• Меньше вкладок. Четыре вкладки в плоской панели 78 px с тонкой линией вместо пяти с вперемешку залитыми и контурными иконками.
• Шкала шрифтов. Текст идёт от 13 до 48 px против 8 до 13 px в черновике.
• Место под контентом. Экран заканчивается за 67 px до панели вкладок, так что ничего не обрезано и не закрыто. В черновике плавающий плюс лежит поверх таблицы.

Проверьте свой бюджетный экран

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

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

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

Редизайн экрана трекера расходов, до и после

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

Открыть в Figma

FAQ

Как проектировать главный экран трекера расходов?

Начните с того, сколько осталось потратить, крупно, а бюджет и число оставшихся дней напишите одной строкой под ним. Затем одна плоская полоса того, куда ушли деньги, несколько простых строк бюджетов и четыре последние транзакции, а всё остальное за See All.

Что лучше для категорий трат, круговая диаграмма или полоса?

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

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

Три или четыре. На этом экране пять мелких категорий сворачиваются в Other, $218, и раскрываются в Budgets, поэтому полоса остаётся читаемой.

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

Достаточно большим, чтобы его замечали первым. Здесь баланс набран жирным 48 px, заголовок месяца 28 px, а строки 15 px.

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

Четыре или пять строк по 13 до 15 px и ссылку See All для полного списка, фильтров и способа оплаты.

Что должно быть в панели вкладок бюджетного приложения?

Четырёх вкладок достаточно: Home, Stats, Budgets и Profile. Goals живут внутри Budgets.

Источники

• Оба экрана наши собственные, спроектированы и измерены в Figma. Приложение Penny, его продавцы и суммы выдуманы. Цифры согласованы на обоих экранах: доход $4,200 минус сбережения $1,000 дают бюджет $3,200, потрачено $1,916, остаётся $1,284, а 12 дней до конца означают 18 ноября, дату самой новой транзакции.
• Изученный паттерн: Copilot Money и Monarch, с одним числом остатка, одной полосой для категорий, простыми строками и плоской панелью вкладок.
• Иконки из Phosphor (MIT). Фотографии не используются.
• Впервые опубликовано как карусель в App Brainy.