Сбербанк Брендбук
Мы передаём слово команде разработчиков Android-приложения Сбербанка, чтобы вы услышали об опыте создания такой сложной штуки, как UI мобильного банк-клиента, из первых уст. Б ольшую часть поста написал, так что спасибо говорите ему.;) Предыстория Android 5, основанный на Material Design, доступен пользователям уже полтора года. 18 месяцев — срок немалый, и сейчас можно с уверенностью сказать, что и пользователям, и разработчикам пришлась по душе философия визуального языка представления информации от Google. Сегодня мы расскажем, как в нашей расширяющейся и развивающейся команде протекал процесс перехода приложения ' для Android на Material Design, и осветим сопутствующие технические аспекты.
Процесс непосредственно создания интерфейса будет подробно описан в следующей статье. Постановка задачи Наша основная задача — сделать удобное и понятное приложение, которым было бы приятно пользоваться. Вместе с тем, переход на Material Design позволил бы качественно улучшить и процесс разработки. То есть, программисты и дизайнеры меньше будут отвлекаться на «процесс», больше — на результате. Единый визуальный язык, который разработали в Google, позволил меньше задумываться о том, «что делать», сосредоточившись на вопросе «как делать». И если предыдущая попытка (Holo) не остановила калькирование интерфейсов с iOS или придумывание велосипедов, то новая система (MD) практически полностью «убила» зоопарк дизайнерских изысков.
Приложения не стали скучнее или однообразнее, но стали единообразнее: MD позволяет крайне свободно использовать имеющиеся инструменты и возможности визуального языка, вместе с тем сохраняя преемственность интерфейсов, что удобно и пользователям, и разработчикам. Когда все приложения работают одинаково и различные элементы интерфейса в них работают одинаково, вам не требуется привыкать к новым приложениям. Берёте и пользуетесь. Простота, удобство для пользователя и эффективность — вот ключевые понятия, от которых мы отталкивались в работе над новым приложением. Имеющиеся проблемы Общие проблемы для разработки почти всегда одни и те же:. Программисты не всегда внимательно относятся к макетам;. Дизайнеры слабо осведомлены о том, насколько трудозатратна для программиста реализация того или иного варианта верстки;.
Изменения в одной разметке (layout) не масштабируются автоматом на другие. В корне этих «общих» проблем лежат вполне конкретная беда, которую, увы, очень тяжело уладить. Дизайнеры и программисты говорят на своих языках и не понимают друг друга. В чём заключается недопонимание?.
Программист не может смоделировать мышление дизайнера, из-за чего не может установить от чего ему отталкиваться в верстке;. Дизайнер не знает, какую именно информацию выдавать программисту для того, чтобы тот сверстал масштабируемо и с точным соответствием макету. Рассмотрим частный случай типичного рабочего процесса: На макетах экранов приложения дизайнеру необходимо отметить размеры и цвет текста, ширину и высоту элементов. При нулевой коммуникации (и, следовательно, нулевом понимании потребностей и возможностей друг друга) задача решается в лоб: на макетах зашиваются непосредственно значения — размер, цвет.
Далее, исполнитель верстки либо жестко забивает значения в разметку, либо заводит новый ресурс (size, color), либо пытается по значению отыскать уже имеющийся ресурс. Жесткое зашивание значений в разметку либо несистематизированное заведение ресурсов влекут за собой невозможность повторного использования одних и тех же значений: нарушается и принцип, и вообще сама логика разделения конструкции и её стилей. Работать над таким приложением примерно также «приятно», как над веб-страницей, на которой половина значений стилей указана прямо внутри div’ов. Если встает необходимость изменить цвет текста на информационных ячейках, то необходимо пройтись по каждой разметке (при этом есть ненулевая вероятность пропустить какой-либо файл).
В конце 2009 года «Сбербанк России» начал масштабный ребрендинг. Брендбук - это свод законов, на которые должно опираться любое.
Стоимость операции возрастает многократно при экспериментах «Последовательно проверить несколько цветов/отступов». Наконец, если псевдоним заведен для ресурса не системным образом, то, скорее всего, его название неактуально для нового экрана, и программист вместо использования готового ресурса создаст новую сущность.
Чтобы всего этого бардака избежать, требуется наладить здоровую атмосферу в рабочем коллективе:. Между программистами и дизайнерами должна быть налажена коммуникация: они должны понимать и принимать потребности и возможности друг друга;. Список требуемых данных для построения универсальной и масштабируемой вёрстки приложения должен быть чётко закреплён: так программисты получат все необходимые для них значения, а дизайнеры смогут отталкиваться от имеющихся значений при построении новых экранов.
Doing it right way Своеобразным «первым мостиком» в построении коммуникации между программистами и дизайнерами выступили. Гайдлайны достаточно гибки, чтобы не стеснять творческую мысль дизайнера и одновременно они определяют закономерности, удобные для моделирования программистом.
Для масштабируемой верстки в OS Android используется такой инструмент как стили. Стили — это набор пар «атрибут-значение». Значениями атрибутов могут выступать цвета, ColorStateList, Drawable, текст, размеры и другие стили. При исследовании ресурсов последних платформ и библиотеки AppCompat можно обнаружить, что стили делятся на следующие группы:. TextAppearance — внешний вид текстового поля. Определяют цвета текста и ссылок, подсказок в текстовом поле, фон выделенного текста, стиль и гарнитуру шрифта;.
Widget-стиль — стиль View. Определяют специфические для конкретного виджета атрибуты (например, progressDrawable для ProgressBar), виджет-стили TextView и его наследников могут указывать используемый TextAppearance;. Theme — тема.
Темы — это своего рода «стили стилей», стили активити; Определяют ключевые атрибуты, характерные для данного экрана, стили виджетов. Грамотно составив тему, мы избежим прямых ссылок на цвета и стили виджетов внутри разметок (layout), установим единообразный внешний вид для View в рамках приложения;.
ThemeOverlay — занимают промежуточное положение между виджет-стилями и темами. Если обычный виджет-стиль применяется только к одному View, тема — ко всем View в пределах экрана, то ThemeOverlay проставляют на определенный контейнер (ViewGroup) в разметке. В дальнейшем мы покажем, где именно он применяется и как. В нашем случае нормально построенный рабочий процесс выглядит так:. Программисты и дизайнеры, основываясь на Google Material Guidelines, формируют единые таблицы ресурсов (далее в статье вы их увидите);. Каждому ресурсу (размеру, стилю, цвету) присваивается псевдоним;.
Дизайнер в макете указывает именно псевдоним. По этому псевдониму программист находит ресурс (размер, стиль) и указывает его в разметке. Свойства стилей Прежде чем мы займемся настройкой стилей, давайте рассмотрим свойства этого инструмента поближе — чтобы воспользоваться им с максимальной эффективностью. Наследование стилей Стили могут наследоваться друг от друга двумя способами. Вот первый:
Ссылки на значения атрибутов Стили низкого уровня (TextAppearance и Widget-стили) могут ссылаться на значение атрибута, установленного темой. Допустим, в приложении есть 2 темы: красная и желтая. Нам необходимо, чтобы на экранах с желтой темой некоторый TextAppearance задавал своим TextView желтый бэкграунд, а на экранах с красной темой — красный бэкграунд.
Тогда при применении TextAppearance для этого виджета Андроид подставит в качестве значения textColor именно то значение colorPrimary, которое прописано в данной теме. Настройка стилей и тем Основные цвета приложения Рассмотрим атрибуты, указывающие основные цвета приложения. Атрибут Назначение colorPrimary Главный цвет приложения. Обычно в него красят AppBar colorPrimaryDark Более темная версия главного цвета — используется для статус-бара colorAccent Акцентный цвет приложения. Используется косвенным образом для кнопок, SeekBar, ProgressBar android:colorBackground Дефолтный цвет фона android:colorForeground Противоположность вторичному цвету фона android:colorForegroundInverse Вторичный цвет фона dividerHorizontal Цвет горизонтального разделителя dividerVertical Цвет вертикального разделителя У Сбербанка есть брендбук, в соответствии с которым требуется оформлять всё: печатную продукцию, интернет-рекламу, сайты, визитки, пакеты и т.д. Официальные цвета регламентированы, их «ближайшие аналоги» — тоже.
В соответствии с брендбуком Главным цветом (colorPrimary) для нашего приложения стал зелёный, а Акцентным (colorAccent) — оранжевый. Кроме того, colorPrimary относился к позитивным действиям (подтверждение, покупка), а colorAccent, как правило, — к негативным (отмена). Стилизация TextView Настало время разобраться с цветами для текстов, которые предлагаются библиотекой AppCompat. Всего есть две темы (тёмная и светлая), в каждой из которых есть две группы цветов: стандартные и инвертированные. Для тёмной темы (наследницы Theme.AppCompat) стандартными будут светлые оттенки, инвертированными — тёмные. Для светлой темы (которая также наследует значения у Theme.AppCompat), соответственно, наоборот.
Заданные библиотекой цвета имеют свои «названия» и функциональные назначения:. textColorPrimary — наиболее «сочная» форма цвета. textColorSecondary — чуть более бледная форма цвета. textColorTertiary — еще более бледная форма.
textColorHint — цвет подсказок в EditText. textColorLink — цвет ссылок.
textColorHighlight — цвет фона выделенного текста. textColorPrimaryActivated — в обычном состоянии то же, что и textColorPrimary, в активированном состоянии — textColorPrimaryInverse. textColorSecondaryActivated — аналогично textColorPrimaryActivated, только со вторичным цветом. Кроме того, есть цвета с «жутковатыми» названиями типа textColorPrimaryDisableOnly (используются для текста CompoundButton’ов: радиокнопки, чекбоксы), или textColorPrimaryNoDisable, textColorSecondaryDisableOnly, textColorSecondaryNoDisable — использование последних трех в стилях и Text Appearance обнаружить не удалось. Мы составили таблицу цветов, используемых в приложении. Для невнимательных поясним:.
Линия EditText в несфокусированном и задисейбленном состоянии должна быть бледнее;. Линия EditText в сфокусированном состоянии должна быть сплошной зелёной (colorPrimary), а не черной-оранжевой;. Ошибка выделяется оранжевым цветом (colorAccent), а не красным. Размер шрифта EditText-а должен быть крупнее. Внутри библиотеки AppCompat мы обнаружили что при создании View из разметки AppCompatActivity подменяет определенные виджеты на их AppCompat-наследников.
Делается это, судя по всему, для поддержки background tinting и подтягивания стилей из AppCompat-тем. В частности, EditText заменяется на AppCompatEditText. (Следовательно, если вам нужен кастомный виджет, то создавать подкласс нужно не непосредственно из EditText, а из AppCompatEditText). Стиль AppCompatEditText-у задается в теме через атрибут editTextStyle.
По умолчанию стиль — Widget.AppCompat.EditText, задающий определенный TextAppearance, фон и цвет текста (то есть, цвет из TextAppearance игнорируется). Взглянем на разметку бэкграунда EditText-а для версии 5.0 (для старых версий background в целом похож, разница только в том, где происходит его подкрашивание (tinting) — в самой разметке, как на 5.x, или в конструкторе виджета на более ранних версиях). А вот сами ресурсы textfielddefaultmtrlalpha и textfieldactivatedmtrlalpha. Как видно из разметки, тонкая линия подкрашивается цветом, являющимся значением атрибута colorControlNormal.
Сбербанк Брендбук
Заменим этот цвет. #1A000000
По умолчанию он применяет к себе стиль Widget.Design.TextInputLayout, извлекая из него следующие атрибуты:. hintTextAppearance — TextAppearance плавающего лейбла (на нашем скрине в нем написано слово «Подсказка») в сфокусированном состоянии;. android:textColorHint — цвет плавающего лейбла в несфокусированном состоянии, цвет подсказки в EditText.
Если значение атрибута у TextInputLayout не указано, то подтянется значение этого же атрибута у EditText;. android:hint — собственно текст плавающего лейбла, перегружает подсказку самого EditText;. hintAnimationEnabled — применять ли анимацию при «переходе» подсказки из EditText-а в плавающий лейбл. errorTextAppearance — TextAppearance лейбла с ошибкой. В данном случае подкрашивается линия EditText-а;.
errorEnabled — следует ли при отрисовке TextInputLayout заранее закладывать место под лейбл с ошибкой;. counterTextAppearance — TextAppearance счетчика длины текста. counterEnabled — следует ли при отрисовке TextInputLayout показывать счетчик длины текста. counterMaxLength — максимально допустимая длина текста.
counterOverflowTextAppearance — TextAppearance индикатора ошибки превышения длины текста. Составим таблицу свойств TextAppearance вспомогательных TextView. Все они наследуются от TextAppearance.AppCompat.Caption (textColorSecondary, 12sp, regular), изменяется только цвет. Название Цвет текста TextAppearance.Design.Hint?attr/colorControlActivated TextAppearance.Design.Error #FFDD2C00 TextAppearance.Design.Counter?attr/colorControlActivated TextAppearance.Design.Counter.Overflow #FFDD2C00 Дальше всё просто: заменим цвет текста на colorAccent:
Обычно для каждого виджета существует атрибут в теме, по которому он в своем конструкторе может взять актуальный для данной темы стиль. TextInputLayout (как и другие виджеты библиотеки Design) такого атрибута в теме не имеет. Введем его на стороне приложения: Внедрим его в тему:
Атрибут actionBarTheme ссылается на ThemeOverlay — своего рода мини-тему, применяемую к отдельному ViewGroup, его дочерним элементам, их дочерним элементам и так далее. При применении ThemeOverlay одноименные атрибуты темы Activity получают новое значение. Для большей наглядности рассмотрим 3 скриншота: на первом к верхнему бару и виджетам в нем не применяются ни стиль, ни ThemeOverlay, на втором применяются зелёный стиль и ThemeOverlay с белым текстом, на третьем — белый стиль и ThemeOverlay с зелёным текстом. Цвет фона AppBarLayout. В ресурсах библиотеки Design указано, что Background этого виджета красится в первичный цвет приложения (colorPrimary). Создадим стили для AppBarLayout:
Стиль TabLayout. Решается аналогично задаче с AppBarLayout. Цвет иконок в toolbar’е задается посредством атрибута colorControlNormal. Однако, здесь есть некоторые проблемы, которые надо решить. Цвет colorControlNorman мы использовали для линии EditText-а в несфокусированном состоянии (автоматом цвет также применился для цвета незаполненного прогресса в детерминированном ProgressBar и в SeekBar). ThemeOverlay с белым текстом переопределяет colorControlNormal как #FFFFFF (белый). ThemeOverlay с зелёным переопределяет colorControlNormal как?attr/colorPrimary (у нас он, как вы помните, зелёный).
Определим ThemeOverlay. Ну и зря, сейчас Сбербанк стал очень хорошим банком. Активно пользуюсь услугами с лета 2014 года, за это время никаких стоящих описания проблем не испытал.
Существенные плюсы для меня — это отделения на каждом шагу, а банкоматы и того чаще (девиз «Всегда рядом» — правда). Бесплатный полноценный мобильный банк (пользователям кредитных карт).
Сбербанк О
Единственные минусы, в моем случае, это региональное разделение банка и его клиентов (имею две карточки, открытые одна в Москве, другая в МО — вынужден обслуживать каждый счет при случае отдельно) и невозможность влияния клиента на изменение лимита кредитной карты (ни справку принести, ничего) — в итоге сижу уже год с запрошенным изначально лимитом. Тоже не люблю сбер. Года 3 назад управляющий отделением пыталась развести на деньги обманным путем скрывая истинную информацию при открытии счета. Звонил в ТП писал заявление реакции 0.
Правда на данный момент отделение закрыли, уж не знаю по каким причинам. Ситуация почти повторилась в другом отделении, в которое я вынужден был обратиться, если бы я не поймал их за руку. Постоянные очереди, отсутствие желания помогать клиентам разбираться с терминалами, хамство, архаизмы в виде сбер книжек, высокие ставки по кредитам и низчайшие по вкладам(6-8% в среднем просто смех). Чего я только там не насмотрелся.
Дважды приглашали на собеседования в разное время на Java developer, оба раза отказывал именно из-за негативного отношения к банку. Но надо сказать, приложение выглядит действительно достойно, судя по скринам функционал не хуже программ фин учета.
Сбер старается, тащит разработчиков, очевидно держит планку, но сама суть взаимодействия с клиентом, уверен, останется прежней. Иметь какие-либо отношения с мошенниками не захочет никто. В новой версии заметил два недочета: — В течении нескольких секунд после старта приложение показывает старые суммы баланса, что уже пару раз меня вводило в заблуждение.
— Вкладка «вклады и счета» имеет шапку в красных тонах, что подсознательно наводит на мысль о каких-то проблемах. А вообще, по стабильности работы, приложение к сожалению только ухудшается. Все было прекрасно и надежно до встраивания антивируса, теперь же приложение запускается долго (хотя в последней версии стало чуть быстрее), часто рапортует о невозможности авторизации, что лечится только перезапуском приложения. В итоге теряется оперативность, которая очень важна на мобильном устройстве.
Честно говоря, Сбер, конечно, рулит. Но мобильное приложение, из которого (раньше) было невозможно сделано ничего толкового — это нечто. С тех пор решил им не пользоваться, но деньги за возможность пользования с меня снимают до сих пор.
Потому что в веб-личном кабинете отключить эту платную возможность нельзя, а девочки в отделении банка затрудняются помочь. Такая вот фича с однонаправленным переключателем. Зашел на статью, не заметив, что это блог Гугла.
Сверху увидел баннер «личные вещи храню в облаке», и аж вздрогнул. Вверху страницы такая легкомысленная барышня, ниже — про сбер ). Feature request: Добавьте в приложении возможность обратной связи с разработчиками. Теоретически, можно конечно писать в Спортлото Google Play, надеясь что там сообщение прочитает кто-то из разработчиков. Но, как показывает практика, на писанину в Google play далеко не всегда реагируют. Наверное, потому что там количество неадеквата зашкаливает.
Хотел написать о баге, который напрягает в последних версиях приложения, но непонятно куда. Через «Написать в банк» (из приложения) приходит какая-то стандартная отписка, не имеющая ничего общего с ссобщением. А баг такой: в списке операций по карточке некорректно указывается время.
Моё время GMT+5 и если я только что совершил операцию, то в там в списке рядом с ней надпись «5 часов назад». Время на телефоне у меня выставлено корректно. Скорее всего какая-то несогласованность по поводу UTC в приложении. Кому-то может и нравится стиль всего в стиле «попроще и поярче», но как-то мобильный банк должен уметь делать всё, что я смогу сделать из личного кабинета с ПК. Вместо солнышек и величаний по имени лучше бы сделать загрузку быстрее, тогда и солнышки не нужны. Нужная информация переехала куда-то непонятно куда, а по середине экрана просто дырки. Ну это несерьёзно.
Сбер правда старается угодить клиенту хотя бы тут, но получается со скрипом. Со скрипом — потому что мобильное приложение хоть медленно, коряво и непонятным маршрутом, но как-то развивается. Лучше бы не про иконки думали, а про наглядное информирование пользователей о любых действиях, касающихся их личной информации. При установке приложения Сбербанк онлайн контакты с телефона неизвестными путями проникают на сайт Сбербанк онлайн и там прописываются в разделе Настройки - Адресная книга. И не удаляются. Если кто не против, мог бы согласиться с этим заботливым копированием адресной книги, нажав раз 10 кнопку согласен, копируйте все мои контакты, размещайте где хотите, мне точно пофиг, я точно согласен, да, да и еще раз да.
А мне вот это как-то совсем не понравилось и хочется сделать что-нибудь, чтобы они так больше не делали, нехорошие, только вот не знаю.
Далее по тексту брендбука говорится, что оно в РЖД 'передается из поколения в поколение', совсем как часы Патек Филипп. Прошлое поколение еще помнит такие слова, как 'чугунка' и 'кукушка'. А следующее на Сапсан будет смотреть как на 'кукушку'.
Что они друг другу собрались передавать? При том количестве дочек и внучек, которыми обросли РЖД, эта ценность — из разряда ушедшей молодости. Наверное, авторы считают, что особо ценится то, чего больше нет. Тогда в этом точно есть резон.
Обновление меня поставило в безнадежный логический тупик. Не знаю, как вы, а я не в состоянии оценить 'обновление'. Немного жаль, что в РЖД уже не осталось ничего более ценного.