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

Обновлено: 18.07.2024

Недавно мы добавили в «СберБанк Онлайн» новые цвета, и после первой итерации в отзывах нам написали, что розовый оказался «недостаточно розовым». В следующем релизе мы добавили ещё один оттенок — «Больше чем розовый».

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

лидер дизайн-кластера, СберБанк Онлайн

Люди постоянно взаимодействуют с финансовыми сервисами. Многие не меняют банк годами, а кто-то пользуется услугами одной организации всю жизнь. Среднестатистический клиент СберБанк Онлайн заходит в приложение более 30 раз в месяц, примерно раз в сутки, и эта цифра растёт из года в год. Неудивительно, что со временем между банком и клиентом возникает эмоциональная связь.

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

Ещё совсем недавно у клиентов было не очень хорошее отношение к банкам в целом. К сожалению, так сложилось исторически. Обязательные походы в офис, подписание договоров, канцеляризмы, юридические тонкости: всё это никак не упрощало взаимодействие. Стало очевидно, что нужны изменения. Причём не только в приложении, но и в процессах внутри банка. В первую очередь нужно было облегчить коммуникацию с клиентом хотя бы на уровне формулировок — начать общаться простым языком. Где-то на этом этапе родились рекомендации по написанию текстов в интерфейсах, начала расти дизайн-система для iOS и Android, добавился иллюстративный язык в онбордингах, появились сами онбординги (как принцип рассказа о новых фичах). И только потом — кастомные заставки на вход в СберБанк Онлайн и смена цвета фона.

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

Можно выбрать разные темы заставок на вход в СберБанк Онлайн

В случае с летним обновлением добавление новых цветов — это ещё и решение технологической задачи по расширению визуальной гибкости приложения. Грубо говоря, раньше был монолитный кусок UI, а теперь можно и так и этак. Кроме того, эти точечные наработки в перспективе приведут нас к полноценным цветовым схемам и тематическому оформлению. Для примера расскажу о прошлом кирпичике из этой серии: около года назад мы делали тёмную тему в приложениях на iOS и Android. Под эгидой этого нововведения мы перенесли на дизайн-систему тонну UI-компонентов.

Спасибо разработчикам — сейчас всем этим добром намного проще управлять с точки зрения как отдельных элементов, так и для изменения интерфейса СберБанк Онлайн в целом. Теперь, чтобы выбрать форму или цвет кнопки, нам не нужно бегать по каждому сценарию и менять параметры вручную. Win-win наступает тогда, когда мы работаем не только над визуальными изменениями, но и закладываем системный подход к фронтенду на будущее. Вот и с фонами так же.

В прошлом году в шапке СберБанк Онлайн у нас был ограниченный набор цветов из нижней части цветового круга. Типографика была исключительно белой, и здравый смысл (базовые принципы удобочитаемости информации и стандарты доступности) подсказывал, что нельзя просто так взять и влить туда светлые цвета — нужно было как минимум подготовиться.

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

Лирическое отступление о важности WCAG


Дизайнеры с прошлым из мира графического дизайна (типа меня) часто ходят по некой грани, доверяя своему субъективному представлению о достаточной контрастности. В продуктовом дизайне это зачастую работает против пользователей — просто потому, что пользователи очень разные, а удобно должно быть всем и каждому. Чтобы интерфейс был доступным для всех, в том числе для слабовидящих клиентов, существует эталон — общемировой стандарт WCAG 2.0. В нём прописано, каким должен быть доступный интерфейс: требования к контрастности, размеру шрифта, минимальной зоне тапа и так далее.

Цветовая растяжка с индексом контрастности

Итак, необходимые доработки мы сделали и разобрались с типографикой: теперь она могла быть как светлой, так и тёмной. После этого мы добавили светлые фоны и подгадали так, чтобы это обновление вышло одновременно с другими важными изменениями на главном экране. В итоге клиенты получили другое общее впечатление от приложения. О нововведении мы рассказали в промо на главном экране и в канале «Что нового», который живёт внутри СберБанк Онлайн — он как раз для тех, кто следит за обновлениями. Кстати, эта одна из тех функций, благодаря которым мы в прошлом году взяли премию Red Dot Design Award, но об этом как-нибудь в следующий раз.

Так вот, мы добавили новые цвета — и приложение посвежело и похорошело. Хотя, повторюсь, для дизайна в широком смысле слова это эффект именно косметический. Но набившие некоторым оскомину стандартные цвета теперь можно поменять на что-то новое.

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

Забавно, что когда мы впервые, ещё в прошлом году, добавили возможность сделать СберБанк Онлайн розовым, в отзывах нам написали, что он «недостаточно розовый». Мы тогда, конечно, поскромничали, выбрав более мягкий оттенок. Но вот прошло время, и мы решили, что розовых будет два: один понежнее, другой — фуксия. Его мы назвали «Больше чем розовый».

Лавандовый, розовый, лаймовый и лунный

Кстати, когда на одной из последних презентаций iPhone Тим Кук выходил из-за куста сирени, у нас в тестовой сборке уже лежал лавандовый. Во время презентации мы хихикали и обсуждали, переименовывать его в «Сирень» или нет.

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

Обещали цифры — делимся Нам очень интересно смотреть на клиентов и их привычки через призму приложения из топ-3 по аудиторным показателям в России. На конец августа MAU приложения СберБанк Онлайн — 70 млн. С момента релиза цветов мы могли наблюдать за тем, как пользователи применяют новую функцию и какие цвета выбирают. По итогам месяца первую строчку уверенно занял лавандовый (335 тысяч установок), вторую — розовый (265 тысяч). Сразу за ними идут лунный и лаймовый. Если смотреть и на те цвета, которые уже были в приложении, видно, что графит на 2-м месте (270 тысяч установок): дело явно в его нейтральности. Сейчас цвет в приложении меняют около 16 тысяч пользователей каждый день.

Ещё теперь нам известно, что среди пользователей фичи примерно в полтора раза больше женщин, чем мужчин: 678 тысяч против 463 тысяч. Гендерные стереотипы всё ещё сильны, и по самым популярным цветам картина выглядит так: почти каждый четвёртый мужчина ставит графит, а каждая четвёртая женщина — лавандовый. Это самые популярные цвета в своей демографической группе. Но при этом каждый 10-й мужчина выбирает розовый фон, а каждая 12-я женщина — графит. А вот клиентам старше 45 лет эта функция не особо нужна: их почти в 5 раз меньше, чем в других возрастных группах.

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

Как мы уже сказали, СберБанк Онлайн — как личный кабинет. И наше приложение клиент воспринимает как личное пространство, которое можно как-то обустраивать «под себя». Это не только про «перекрасить стены», а про перестановку мебели, например. Вы знали, что на главном экране можно менять разделы местами? Или скрывать те, которые вам кажутся ненужными? Если да — отлично, но многие клиенты не знают даже об опции смены заставок.

Начав развивать тему эмоционального банкинга с показа разных заставок для Москвы и Санкт-Петербурга, мы уже не могли остановиться. После набора фотографий природы появился Эрмитаж, потом коллаборация с Bang! Bang! Illustration, затем Третьяковская галерея, «Союзмультфильм», «Русские футуристы» и… Кажется, мы насытились на какое-то время темой искусства. Как выпускник художественного вуза (Строгановке привет), считаю свою социальную миссию хотя бы отчасти выполненной.

Каждый новый набор заставок заходил на ура, поэтому сомнений в том, что возможность изменять цвета интерфейса понравится клиентам, у нас не было. Кстати, сейчас суммарно у нас уже почти 5 млн клиентов, попробовавших альтернативный дефолтному набор. А пару недель назад вышел нереальный подводный пак, который мы собрали на базе фотографий проекта Aquatilis. Сам проект я не устану нахваливать — слишком уж крутое у него сочетание научно-популярной составляющей и эстетичности подводных существ, снятых Александром Семёновым и командой.

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

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

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

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

Справочное руководство по Сбербанк Онлайн

Виджет - это информационный блок, содержащий, например, информацию о Ваших счетах или картах.

Вы можете самостоятельно настраивать внешний вид страниц системы Сбербанк Онлайн: добавлять новые блоки (виджеты) на страницу, удалять их, изменять положение виджетов относительно друг друга, перемещать боковое меню, а также настраивать стиль отображения страниц приложения.

Для перехода в режим редактирования страниц щелкните ссылку Настроить в верхней правой части страницы. В результате раскроется панель настройки страницы.

Внимание! Для возможности работать с виджетами в пункте меню Настройки - Настройка интерфейса в разделе Интерфейс выберите значение "Расширенный".

Каталог виджетов

В данном разделе настроек Вы можете добавить новые блоки на главную страницу, изменить их положение, настроить параметры и при необходимости удалить неиспользуемые виджеты.

При входе в этот раздел отображается каталог виджетов, в котором для каждого блока показана иконка, название, краткое описание и ссылка Добавить.

Примечание. Для навигации по списку виджетов Вы можете воспользоваться стрелками и или прокрутить горизонтальную полосу прокрутки под каталогом виджетов.

Для того чтобы изменить наполнение главной страницы системы, Вы можете выполнить следующие действия:

  • Добавить виджет. Для того чтобы добавить виджет на главную страницу, в списке виджетов нажмите левой кнопкой мыши на интересующий Вас виджет и, не отпуская кнопку, перетащите его вниз на страницу, либо щелкните ссылку Добавить. В результате виджет появится на главной странице системы.
  • Переместить виджет. Если Вы хотите изменить положение виджета на странице, перетащите его на нужное место.
  • Настроить виджет. В режиме редактирования Вы можете изменить внешний вид виджетов следующим образом:
    • Если Вы хотите свернуть или развернуть блок, щелкните значок в виде стрелочки, расположенный перед названием виджета. В свернутом режиме отображается только название виджета, в развернутом - вся доступная по нему информация.
    • Для того чтобы изменить параметры настраиваемых виджетов, щелкните значок . Затем задайте интересующие Вас параметры и нажмите кнопку Применить. Если Вы передумали изменять настройки виджета, нажмите кнопку Отменить.

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

    Если Вы передумали изменять наполнение страницы, нажмите кнопку Отменить, в результате Вы вернетесь к системе Сбербанк Онлайн без изменений.

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

    Формат страниц

    Вы можете изменить положение бокового меню на страницах приложения. Для этого на панели настроек страницы щелкните ссылку Формат страниц.

    Вы можете переместить боковое меню одним из следующих способов:

    • Перетащите меню влево. Если Ваше личное меню находится с левой стороны, то перетащите его вправо.
    • На панели настроек страницы в разделе "Формат страниц" щелкните значок нужного Вам формата ("Меню справа" или "Меню слева").

    После этого нажмите кнопку Сохранить. В результате настройка будет применена ко всем страницам приложения.

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

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

    Настройка стиля

    Вы можете выбрать другой стиль отображения системы Сбербанк Онлайн на панели настроек системы в разделе Настройка стиля.

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

    Если Вы передумали изменять стиль отображения страниц, нажмите кнопку Отменить, в результате Вы вернетесь к системе Сбербанк Онлайн без изменений.

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

    Доброго времени суток! Сегодня будет полезная статья для пользователей мобильного приложения от СберБанка и соответственно клиентов этого банка. Сразу хочу предупредить, что это не рекламная статья и никто мне не доплачивал, как любят писать в комментариях некоторые "доброжелатели".

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

    Как я раньше рекомендовал, для тех кто оплачивает онлайн-покупки, желательно заводить отдельную виртуальную карту для всех интернет платежей. На этой карте (счете) не нужно хранить какие-либо средства. Для оплаты рекомендую переводить деньги с основного счета на счет виртуальной карты для платежей в интернете. Эту карту в мобильном банке можно так и назвать, чтобы не путаться. Сумму необходимо переводить равную стоимости покупки или оплаты каких-либо услуг. Думаю тут всем всё понятно.

    Сегодня в СМИ появлялась информация о том, что Сбербанк подвергся хакерской атаке. Официально СберБанк пояснил, что всё в порядке и все сервисы продолжают функционировать. Денежные средства клиентов в полной безопасности.

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

    Вернемся к полезной настройке. Как раз поступила информация, что с банковских карт клиентов СберБанка, которые совершают покупки онлайн, стали списывать деньги без подтверждения. Я не буду утверждать правда это или нет, но информация такая есть. Исходя из этой информации, в сбербанк онлайн на картах пользователей включилась функция "автоматического списания денег без подтверждения смс".

    Я раньше не знал, включена ли у меня была эта функция и зашёл проверить. Оказалось, что у меня на всех картах включена "покупка в интернете без подтверждения смс-кодом". Была ли эта функция включена на всех картах по умолчанию или нет, но подозреваю, что была. Так как раньше совершал покупки, и деньги списывались без подтверждения смс. Редко, но такие примеры есть. Из последних, могу вспомнить оплату коммунальных платежей (автоплатеж не подключен) и оплату на AliExpress.

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


    А вы знали, что стандарнтую заставку Сбербанка Онлайн можно поменять на целый набор картинок.

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

    Технически схема предельно простая:

    - Войдите в приложение банка и нажмите на «Профиль» — круглую иконку в левом верхнем углу экрана
    - Нажмите вкладку «Настройки» -- «Заставки на входе»
    - Нажмите «выбрать» на понравившемся наборе изображений

    Вместо стандартной анимированной картинки будут ретироваться картины Саврасова, Венецианова, Шишкина, Васнецова, Айвазовского, Левитана и Кустодиева, которые, по мнению директора Третьяковки Зельфиры Трегуловой, "формируют культурный код человека русской ментальности". Еще и целый набор с авангардистами, причем не только ожидаемые Кандинский и Малевич, но и Гончарова, Попова и Экстер.

    Такая вот карманная галерея.

    Posts from This Journal by “Интернет” Tag


    RuTube подвергся крупному взлому и остановил работу


    Социальная сеть "BASTION" изнутри

    Рассказывал вам уже пару слов про эту новую социальную сесть " BASTION.COM", которая активно появляется в интернет-обсуждениях сейчас в…


    Зачем Илон Маск покупает Твиттер?

    Американский бизнесмен Илон Маск купит социальную сеть Twitter за $44 млрд. По словам Маска, свобода слова — это основа функционирующей…

    Информация об этом журнале

    • Цена размещения 200 жетонов
    • Социальный капитал 45 063
    • В друзьях у 2 500+
    • Длительность 3 часа
    • Минимальная ставка 200 жетонов

    Из-за западных санкций мобильные приложения «СберБанк Онлайн» были удалены из магазинов цифрового контента Google Play для платформы Android и Apple App Store для смартфонов и планшетов на iOS. «Сбербанк» выпустил рекомендации для своих клиентов, как быть в данной ситуации и обойти ограничения.


    Для пользователей Android всё довольно просто: APK-установщик приложения можно скачать прямо с сайта «Сбербанка», или кликнув по этой ссылке. Чтобы установить загруженный файл нужно в настройках смартфона или планшета разрешить установку приложений из сторонних источников. Сделать это можно, перейдя в «Настройки» —> «Безопасность» —> «Неизвестные источники» (или пункт с похожим названием). На некоторых смартфонах нужно выбрать приложение, из которого вы разрешаете устанавливать сторонние программы, например, «Диспетчер файлов».

    Также пользователям Android доступны сторонние магазины приложений, где «СберБанк Онлайн» по-прежнему доступен. Например, пока что софт доступен в магазине Xiaomi и в Huawei AppGallery.

    А вот скачивать установщик со сторонних сайтов мы крайне не рекомендуем. Там легко можно получить поддельное или модифицированное приложение, которое попытается украсть учётные данные клиента банка и следом украсть его деньги. Загружайте приложения только из проверенных источников!

    Что до пользователей iPhone, то им «Сбербанк» рекомендует пользоваться веб-версией своего сервиса. Она доступна по этой ссылке, открыть которую можно через Safari и любой другой браузер. Отмечается, что веб-версия «СберБанк Онлайн» адаптирована под мобильные устройства. Конечно, веб-версия доступна и Android-пользователям.

    Наконец, если на вашем смартфоне или планшете уже установлено приложение «СберБанк Онлайн», то не стоит его удалять. Ранее установленные приложения работают, никаких ограничений по их использованию нет как на iOS, так и на Android. Также банк отмечает, что его системы и инфраструктура «работают в штатном режиме, средства клиентов находятся в безопасности».

    Автор статьи

    Куприянов Денис Юрьевич

    Куприянов Денис Юрьевич

    Юрист частного права

    Страница автора

    Читайте также: