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

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

Исправление сохраняет фирменный фиолетовый и все функции. Цвет тратится на то число, которое важно, а всё остальное приглушается.

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

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

Исправлено

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

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

Правка 1: потратьте фиолетовый на баланс

До

После

«Общий баланс» с иконкой глаза и $12,450.80 одним размером, ряд звёздочек и 4821, «Владелец карты» и «Действует до», логотип VISA на ярком градиенте. Справа: «Основной счёт» и 4821 в углу, $12,450 с уменьшенным .80 и плашка «+$320.50 в этом месяце» на более глубоком фиолетовом.

Черновик использует фирменный градиент на карте, которая выглядит как карта, поэтому первое впечатление: «это кредитка». Баланс там самый крупный текст, но номер карты, имя владельца, срок действия и логотип VISA борются за то же место на карте. Большая часть этого человеку уже известна или нужна только при оплате в интернете.

Исправление оставляет то же семейство фиолетового и синего, но подчиняет его одной идее. Доллары набраны 42 pt, а центы 22 pt, потому что $12,450 это число, которое вы читаете, а .80 это деталь. Плашка показывает, что изменилось за месяц, а это второй вопрос, который задают о балансе. Номер карты уменьшается до скрытого «4821» в углу, чтобы было понятно, какой это счёт.

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

Правка 2: три действия, а не шесть

До

После

Шесть круглых иконок синего, зелёного, оранжевого, розового, фиолетового и серого цветов: «Отправить», «Запросить», «Пополнить», «Платежи», «Обмен» и «Ещё». Справа три широкие кнопки: залитая «Отправить», затем «Запросить» и «Пополнить» простые белые.

Шесть цветов у шести действий говорят: «они одинаково важны и все разные». Это не так ни в том, ни в другом. Остаются три, нужные любому счёту: «Отправить», «Запросить» и «Пополнить». «Платежи», «Обмен» и «Ещё» с этого экрана ушли, а новая вкладка «Платежи» даёт таким действиям собственный дом.

Также исправление выстраивает для этой тройки иерархию. «Отправить» залито фирменным цветом, ведь за этим люди и приходят. «Запросить» и «Пополнить» простые, они на месте, но не кричат. Кнопки широкие, в них легко попасть, а подпись стоит рядом с иконкой, а не под ней.

Правка 3: группируйте операции по дням, цвет используйте со смыслом

До

После

Плоский список из пяти операций, у каждой цветной фирменный кружок, длинная метка времени вроде «22 окт. 2026, 09:41» и суммы красного или зелёного цвета. Справа две группы, «Сегодня» и «Вчера», каждая в одной белой карточке с фиолетовыми плитками-буквами, категорией под каждым названием, чёрными суммами и одним зелёным +$2,500.00.

Красный значит «стоп». Банковское приложение, которое красит каждый расход в красный, превращает обычную жизнь, оплату стриминга, поездку, кофе, в ряд маленьких тревог. Исправление оставляет исходящие деньги простым текстом, а зелёный отдаёт единственной хорошей новости: деньги пришли.

Метки времени тоже изменились. Полная дата и время в каждой строке по большей части повторяют друг друга. Группировка под «Сегодня» и «Вчера» называет дату один раз, а вторая строка каждой операции говорит, за что был платёж: «Подписка», «Транспорт», «Зарплата». Именно этот вопрос люди и задают, когда пробегают список глазами.

Продавцы тоже лишились фирменных цветов. Красная N, чёрная U, зелёная S и оранжевая A выглядят живо, но превращают список в радугу, которой нечего сказать. Одна тонированная плитка с буквой делает строки ровными, и читаются суммы и названия.

Правка 4: четыре вкладки, никакого плавающего плюса

До

После

Главная, Карты, большая плавающая кнопка плюс, Статистика и Профиль. Справа: Главная, Карты, Платежи и Профиль с активной вкладкой фиолетового цвета.

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

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

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

• Шапка с одной иконкой. В черновике рядом с приветствием QR-код, колокольчик и значок настроек. В исправлении остался только колокольчик.
• Настоящий аватар с инициалами. Фиолетовый круг с «AM» залит сплошным фирменным фиолетовым, поэтому он выделяется на фоне.
• Один отступ и одна шкала интервалов. Строки стоят на поле в 20 пунктов, а промежутки берутся из короткого списка.
• Более спокойное приветствие. «Good Morning, Alex Moreno!» с заглавной M и восклицательным знаком стало «Доброе утро» и имя.
• Карточки, которые группируют. Операции каждого дня лежат в одном белом контейнере с тонким разделителем между строками и без разделителей между группами.

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

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

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

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

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

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

Открыть в Figma

FAQ

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

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

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

Хорошо работают три: «Отправить», «Запросить» и «Пополнить». Сделайте самое частое залитым, остальные простыми, а более редкие действия перенесите во вкладку «Платежи».

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

Нет. Красный читается как предупреждение, а обычные траты предупреждением не являются. Оставьте исходящие суммы простым текстом и используйте зелёный только для поступлений.

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

Скрытым и мелким, только с последними четырьмя цифрами, чтобы люди понимали, на какой счёт они смотрят. Полные данные место на экране «Карты».

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

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

Источники

• Оба экрана наши собственные, спроектированы и выверены в Figma. Названия продавцов условные примеры.
• Впервые опубликовано как карусель в App Brainy.