UI-дизайн кошелька покупателя для Onpay

Onpay Wallet - Responsive Site View – UI-design, HTML5 Templates
Onpay Wallet - Responsive Site View – UI-design, HTML5 Templates

Описание проекта

Onpay.ru — это сервис по организации приема электронных платежей, собирающий в одном окне многочисленные способы оплаты в рунете.

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

В прошлом посте была представлен процесс проектирования сервиса, здесь описан графический дизайн и верстка страниц на основе детального прототипа.

Задача

  • Создать визуальное оформление интерфейса личного кабинета wallet.onpay.ru, дизайн должен быть адаптивным, оптимизированным для работы на устройствах с различными размерами экранов.
  • Разработать дизайн тему интерфейса, содержащую таблицы стилей для максимально достаточного количества стандартных html и комплексных html/js-компонентов.
  • Сделать адаптивную верстку всех страниц, установить js-модули динамические компоненты интерфейса.
  • Создать эффекты движения, раскрытия, переходов с помощью css-анимации.

Требования к графическому и motion-дизайну

Личный кабинет wallet.onpay – это веб-приложение с адаптивным дизайном.

  • Логотип сервиса содержит три цвета: зеленый, красный и черный, которые могут стать основой дизайн-темы для всего интерфейса.
  • Стиль – плоский дизайн с тонкими линейными элементами иконок, кнопок, свободным пространством между функциональными элементами.
  • Расположение элементов на страницах было утверждено на этапе проектирования и не требовано переработки.
  • Возможно использование фотографического изображения к качестве фона страниц.
  • Панели должны открываться, плавно увеличиваясь из квадратной плашки в ряду остальных в панель поверх всего остального содержания страницы.
  • Переходы по шагам форм очевидны и заметны для пользователя.

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

Дизайн должен быть разработан как генерируемый css-дизайн на основе фреймворка.

Отрисовывать графические макеты оформления по согласованию не требовалось.

Формат разработки и инструменты оставлены на усмотрение разработчика.

Было согласовано, что:

  • Вначале на фреймворке будет сверстана сначала только главная страница с квадратными плашками, превращающимися в панели, и на компонентах страницы будет придуман графический дизайн интерфейса (UI) в процессе разработки css-тема дизайна и motion-дизайн загрузки, открытия, сворачивания и перемещения по шагам в панелях.
  • Затем утверждение дизайн-темы, корректировки, следующие итерации в оформлении интерфейса.
  • Верстка с в разработанном ui-дизайне остальных страниц и компонентов.
  • Тестирование в разных браузерах и устройствах и передача шаблонов в разработку.

Процесс

1. UI Design

Последовательно было разработано два варианта ui-дизайна.

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

Onpay Wallet - Responsive Site View – UI-design, HTML5 Templates

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

У успешных конкурентов платежного сервиса интерфейс был серо-белым с тонкими элементами фирменного яркого цвета, было решено ориентироваться на такую же концепцию в оформлении кабинета onpay.

Была разработана новая тема оформления интерфейса с учетом комментариев в предыдущей версии. Фотографический фон был выбран в тон фирменному цвету органично подходил на мой взгляд.

Onpay Wallet - Responsive Site View – UI-design, HTML5 Templates

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

onpay-ui1.1

В результате этого этапа клиенту был предоставлен html5/css/js шаблон главной страницы с анимированными и динамическими компонентами панелей, форм, готовый для интеграции в код проекта.

2. Разработка шаблонов

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

3. Тестирование

При тестировании было выявлено, что на Android устройствах сложная css-анимация открытия панелей не работает корректно в Chrome и нативном браузере устройств. Разрешить проблему эту быстро оказалось практически невозможным, хотя было проведен поиск и многочисленные попытки обойти эту ошибку.

4. Correction

В результате потребовался полная замена анимации и принципа открытия панелей и форм. Если раньше они красиво разворачиваясь из малого квадрата в полный размер панели, то теперь панели были реализованы как всплывающие модальные окна, с типичной механикой открытия модальных окон в Bootstrap. Квадратная плашка оставалась на месте, но становилась невидимой. Изящность и плавность первого решения повторить не удалось , но оно было гарантировано рабочим на всех устройствах.

Результат

Дизайн реализован на https://wallet.onpay.ru и используется в настоящее время

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