В статье мы делимся нашим опытом редизайна мобильного приложения для сервиса по прокату велосипедов и электросамокатов. Почему отказались от «бургера» в пользу bottom navigation, особенности разработки на React Native и почему мы перешли на Graph QL.
2194 просмотров
Mobius bike — это сервис по прокату велосипедов и самокатов, разработанный для Таллина (на данный момент запланировано расширение географии).
Гипотеза первого релиза — “приложение по прокату велосипедов, будет востребовано на рынке Европы”. В декабре 2019 была пересмотрена основная гипотеза и теперь она звучала так — “может ли сервис по прокату велосипедов и самокатов получить максимальное распространение за счет удобства для конечного пользователя и франчайзи?” Для того, чтобы ответить на этот вопрос, нужно было реализовать следующее:
провести работы по оптимизации структуры приложения (как внутренней — backend, так и внешней — дизайн и frontend) для внедрения нового типа транспорта и возможного масштабирования в будущем
Кастомный UI Дизайн в Windows Forms / Flat Design GUI / C# Уроки
сделать условия аренды регулируемыми в админке.
Любовь Никифорук, Менеджер проекта
Ключевые экраны приложения Mobius bike до редизайна
Одной из первых моих задач в качестве продуктового дизайнера, была подготовка макетов для внедрения нового вида транспорта — электросамокатов. Закончив с макетами, я решил внести некоторые изменения в дизайн и UX приложения и сделать небольшой концепт редизайна. Показал новые макеты команде. Получил фидбэк: ребята давали советы и делились своим мнением. В итоге набралось некоторое количество ключевых экранов.
Приближался запланированный, двухмесячный рефакторинг кода и мы решили показать новый дизайн заказчику, чтобы оптимизировать код уже под новый интерфейс, если, конечно, заказчик согласится на редизайн. Мы презентовали макеты, объяснили как новый дизайн может упростить взаимодействие с приложением и какие выгоды это принесет бизнесу. И уже в процессе презентации мы поняли, что дизайн «зашёл». Редизайн одобрили и теперь мы выходили на рефакторинг уже с новым интерфейсом и переработанным UX.
Варианты ключевых экранов, которые были созданы в процессе редизайна
Организация работ
Так как у нас не было чётко прописанного технического задания и наш сервис развивался вместе с бизнесом, нам нужно было определиться с тем, как мы будет проводить работы: какие задачи брать в первую очередь, как отслеживать прогресс и оценивать результат. Больше всего под наши задачи подходил метод agile. Длительность каждого спринта мы определили в две недели. Каждый день мы проводили стендапы — обсуждали текущие задачи, делились идеями, решали возникающие проблемы. В конце каждого спринта проводили демо — показывали клиенту результаты работы, проделанной за спринт.
Agile во всей красе
Тестовый самокат в нашем офисе
Первое, что мы решили изменить — это навигацию по приложению. Вместо «бургера» мы сделали нижнее таб-меню (bottom navigation). Наверное вы заметили, что многие приложения переходят именно к этому типу навигации. И это понятно, так как таб-меню упрощает доступ к основным разделам приложения даже если человек держит телефон одной рукой. Но это не единственная причина использования данного типа навигации. Приложение разрабатывается на React Native, поэтому нам пришлось учитывать особенности этой платформы:
IOS 14 ОФОРМЛЕНИЕ ТЕЛЕФОНА/ КАК МЕНЯТЬ ИКОНКИ НА АЙФОНЕ, КАК ДОБАВИТЬ ВИДЖЕТЫ + ПРИЛОЖЕНИЯ
Основные навигаторы это так называемые стеки (стопки). Глубокая вложенность стеков ведёт к потенциальным ошибкам, поэтому вложенности, по возможности, нужно избегать, или, хотя бы, не делать её глубокой. При большом количестве экранов сделать это сложнее. Тут на помощь приходят табы. В каждый таб можно вложить стек, и таким образом навигация работает предсказуемее.
Никита Ренёв, Front-end разработчик
До редизайна — меню «бургер». После редизайна — навигация снизу (bottom navigation)
Интерфейс, компоненты, UI-kit
Кроме изменения навигации, мы отказались от контролов масштаба на экране приложения. Оставили изменение масштаба с помощью жестов. Заменили модальные окна, диалоги и часть экранов на swipe-up экраны. Опять же потому, что так удобнее использовать приложение одной рукой — такой экран можно просто «смахнуть» вниз и закрыть его.
Примеры swipe-up экранов в приложении Mobius bike после редизайна
Также мы упростили процесс регистрации в приложении, сделав вход через Google и Facebook. А кроме привязки банковских карт добавили возможность оплаты с помощью Apple Pay и Google Pay.
Экран входа в приложение и оплаты с помощью Apple Pay
Для того, чтобы в дальнейшем было проще добавлять новые функции в приложение, мы создали библиотеку компонентов и описали их применение и принципы взаимодействия.
UI-kit приложения Mobius bike
Рефакторинг и переход на GraphQL
Основными целями редизайна были:
- создать более гибкую и масштабируемую систему компонентов, которая бы легко позволяла добавлять новый функционал, например еще один вид транспорта, без ущерба внешнему виду и общей логике взаимодействия с приложением
- максимально облегчить и упростить интерфейс
- «освежить» внешний вид приложения
Но кроме обновления интерфейса приложения, видимой стороны редизайна, очень важной частью был переход с RESTful API на GraphQL.
Если по простому, GraphQL — это синтаксис, который описывает способ получения клиентом (телефоном/приложением) данных с сервера, посредством специальных запросов. В зависимости от запроса сервер отдает те или иные данные.
Артём Бухтояров,
DevOps/Backend-разработчик
GraphQL имеет три основные характеристики:
- позволяет клиенту точно указать, какие данные ему нужны
- облегчает агрегацию данных из нескольких источников
- использует систему типов для описания данных
GraphQL выступает прослойкой-адаптером между интерфейсом приложения и внешними сервисами. Это позволяет перенести обработку множества разных запросов на бэк. То есть, при подключении нового протокола транспорта нужно будет подключить его на бэке, а вёрстка будет получать все данные в унифицированном виде от GraphQL. Таким образом мы сократили необходимость дополнительных работ по вёрстке при добавлении нового типа транспорта и снизили число обрабатываемых запросов в приложении.
Кроме того, в процессе рефакторинга мы выделили следующие достоинства применения GraphQL:
- удобная документация для разработчика
- удачное решение для WebSocket, как для backend, так и для frontend
- с GraphQL разработчику проще ориентироваться в структуре кода
- более гибкая разработка, по сравнению с RESTful API, позволяет быстрее и проще добавить что-то новое (в нашем случае — это новый вид транспорта)
Было забавно, когда самый первый, привезенный из Китая, замок для велосипеда определял свою геопозицию в Китае, хотя физически был в Санкт-Петербурге. А ПО для этого замка было зашифровано и нам пришлось искать способ расшифровки для внесения изменений в настройки.
Изначально, когда у нас был только один вид транспорта, сервер для подключения велосипедов работал вместе с основным бэкендом. Затем, мы вынесли сервер для велосипедных замков как самостоятельный сервис, который можно разворачивать на отдельных серверах — это позволило снизить нагрузку на основной сервер и дало дополнительные возможности для масштабирования. Для передачи сообщений между сервисами мы используем RabbitMQ. И было очень удобно, что у него есть плагин для mqtt — протокол на котором работают наши самокаты, что позволило без труда добавить новый вид транспорта.
Оплата в приложении. Изначально мы планировали добавлять банковские карты в самом приложении, но в итоге остановились на варианте редиректа на страницу банка и весь процесс добавления карты уже происходит там. Такой способ оказался гораздо проще в реализации.
Франшиза и администрирование
У владельца сервиса были определенные требования к админке приложения. Так как планируется, что сервис будет продаваться в качестве франшизы, каждый франчайзи должен иметь возможность редактировать стоимость поездки, параметры тарифов, абонементы и т.д.
Поэтому мы переработали админку под возможность подключения новых владельцев парков. Добавили разные роли — владелец парка и владелец сети. Сделали целый раздел для добавления и редактирования повременного тарифа, абонементов и штрафов. В каждом городе владелец парка сможет устанавливать свои тарифы и менять их.
Также сделали возможность модерировать изменения администратором сети. Расширили структуру админки под добавление новых типов транспорта.
Конечно не обошлось и без трудностей. Мы отказались от визуализации маршрута в истории поездок, так как. gps-модуль в замке велосипеда, не всегда корректно передает координаты. И вместо красивой линии маршрута, как на дрибловском шоте, мы получали вот это:
Ожидание VS реальность
Была проблема в технической реализации Google карт под React Native. Маркеру на карте нужно постоянно перерисовываться, для того, чтобы изменить своё положение на карте. Перерисовка векторной графики в большом количестве не оптимизирована и поэтому, при определённых настройках, всё очень сильно тормозило. И мы решили заменить векторные маркеры на карте на растровые в формате png. Это дало значительный прирост к скорости работы приложения.
Много вопросов было вокруг реализации системы тарифов и абонементов. Мы старались предусмотреть разные кейсы: что делать если абонемент закончится во время поездки, давать ли возможность покупать разные абонементы для одного вида транспорта, стоит ли делать автопродление абонементов, как именно начислять стоимость поездки и так далее.
В итоге остановились на следующем варианте тарификации: время поездки разбивается на неравные отрезки и каждый отрезок времени тарифицируется отдельно. Например, первые 15 минут поездки стоят €2, если катаешься больше 15 минут, но меньше получаса, то стоимость поездки €3.5, от 30 минут до часа — €5 и т.д. И чтобы пользователю было проще ориентироваться в тарифах, мы решили визуализировать расчет стоимости и сделали его в виде прогресс бара. Теперь пользователь может видеть как изменяется стоимость поездки в реальном времени.
Источник: vc.ru
Как менять дизайн веб приложения, написанного на java?
С помощью чего можно изменять дизайн веб приложения написанного на java? Например дизайн кнопки поменять и т .д.
Отслеживать
36.1k 2 2 золотых знака 55 55 серебряных знаков 81 81 бронзовый знак
задан 4 ноя 2013 в 18:10
starichenko starichenko
11 1 1 бронзовый знак
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
с помощью css. что такое css
Отслеживать
ответ дан 4 ноя 2013 в 18:17
1,911 1 1 золотой знак 11 11 серебряных знаков 11 11 бронзовых знаков
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Источник: ru.stackoverflow.com
Темы оформления на iPhone (новые иконки): как менять, где скачать, как заработать на этом
С выходом iOS 14 пользователи получили новую интересную возможность – менять дизайн иконок, создавая тем самым собственные темы оформления. Интересно, что ранее сама Apple весьма категорично относилась к любым попыткам кастомизировать систему. Более того, пользователи получили не только возможность создавать свои собственные иконки, но и продавать их! Один дизайнер рассказал, что за ночь такой работы смог заработать 9240 долларов! Конечно же, нам интересно, как работает такая схема.
Целых 13 лет iOS шла к тому, чтобы разрешить пользователям менять облик интерфейса. При этом сама компания не стала предлагать определенные темы или шаблоны, оформить виджет или сделать иконку можно с помощью любой картинки. Пользователи не могли оставить без внимания такую возможность и начали активно ее использовать, проявляя свою креативность. Вот некоторые примеры:
Как изменить иконку на iPhone или iPad
Поменять привычный или уже надоевший интерфейс рабочих столов своего iPhone или iPad без труда может любой пользователь. Для этого:
1. Откройте приложение «Быстрые команды» от Apple (если его нет на устройстве, то скачать можно здесь).
2. Перейдите по пути Мои команды → «+» → Добавить действие.
3. В поисковой строке введите запрос «Открыть приложение», а потом выберите Открыть приложение → Выбрать. Вы увидите список установленных на устройстве приложений.
4. Выберите то, чью иконку вы хотите заменить. В системе появится ярлык приложения. Откройте дополнительное меню в виде трех точек справа вверху экрана и создайте имя для новой иконки. После этого нажмите на пункт «Добавить на экран «Домой».
5. Введите название значка на домашнем экране «Значок и название для экрана Домой», а затем нажмите на иконку.
Во всплывающем меню выберите пункт «Выбрать фото», а затем задайте фотографию, которая и должна стать значком приложения. При необходимости можно ее отредактировать.
Останется выбрать необходимую иконку в открывшемся приложении Фото, а затем нажать кнопку Добавить в правом верхнем углу.
Смена дизайна иконок – прорыв или провал?
Часто за хорошей идеей кроется отвратительная реализация. Кастомизация в iOS 14 все же имеет ограничения. Например, нет возможности выбора единой темы для всех иконок сразу и полной замены всего оформления рабочих столов. Пользователям предлагается вручную менять каждую иконку, добавляя затем ярлык на рабочий стол и пряча старый в библиотеку приложений.
Радостные пользователи сотнями выкладывают скриншоты своих преображенных рабочих столов. Но надо понимать, что для создания такого облика системы придется потратить немало времени. Каждый виджет и иконку необходимо изменять вручную и по одному элементу. Каждое изменение потребует указанных в приложении «Команды» действий. Конечно же, пользователю нетрудно будет запутаться.
Ведь на рабочем столе находятся одни иконки, а в Библиотеке приложений – другие.
Хорошо, что в Apple позволили кастомизировать интерфейс своей системы, вот только внятной альтернативы родному оформлению предложено не было. А ведь в Android давно уже существуют «Темы» с десятками бесплатных вариантов и тысячами платных. За пару кликов можно полностью изменить внешний облик всей системы.
Где найти и скачать иконки, обязательно ли надо за них платить?
К счастью, можно без труда найти и бесплатные пакеты с иконками для iOS 14. Пока еще нет единого ресурса, на которым вы могли бы найти нужные картинки. Приходится пользоваться поиском и социальными сетями, где начинающие дизайнеры активно делятся результатами своей работы. Например, тут можно скачать иконки в стиле iOS 6. Кастомизировать же виджеты можно с помощью приложения Widgetsmith.
Но большинство популярных тем оформлений доступны в Интернете платно. Очень много готовых тем представлено на сайте etsy.com. После оплаты вы получите ссылку на пакет с картинками. А на онлайн-платформе продаж Gumroad появился даже пакет кастомизации для iOS 14 в стиле Android.
Как заработать на иконках iOS?
Как создать свой пакет иконок и можно ли на этом заработать?
Дизайнеры рекомендуют для создания иконок использовать приложение Canva. Оно как раз и разработано для создания логотипов, а также для обработки фотографий. Инструментария вполне хватит для самостоятельной генерации иконки.
Программа уже обладает макетами иконок популярных приложений. Если фирменного значка нет, то есть возможность выбрать вариант по умолчанию. Так, для музыкального сервиса можно задать ноту, для онлайн-кинотеатра – кусочек пленки, геймпад на игру. Но подобное может сделать вообще любой графический редактор, в том числе и всем известный Photoshop.
А вот для монетизации своей работы вам понадобится создать нечто особенное, что привлечет внимание пользователей. Это могут быть иконки, навевающие ностальгию, как старые версии Windows или iOS, или же уникальные авторские работы с выраженным стилем.
Да и свободный доступ к иконкам после их продажи тоже мешает бизнесу. Никто не мешает покупателю поделиться товаром с кем-то другим или вообще выложить картинки в общий доступ. Правильным решением кажется создание специального магазина тем, в котором дизайнеры смогли бы размещать свои продукты. Пока же ситуация организованной не выглядит.
Зато авторы не платят комиссию со своих продаж, а ведь Apple безжалостно удерживает 30% с покупок, сделанных в ее экосистеме. Для кого-то возможность кастомизации станет всего лишь временным развлечением, но к этой функции iOS шла долгих 13 лет.
- Как создавать группы контактов в iPhone и iPad.
- Как научить iPhone автоматически включать Режим энергосбережения.
- Как включить встроенный всплывающий Шазам на iPhone без установки самого приложения.
Насколько публикация полезна?
Нажмите на звезду, чтобы оценить!
Средняя оценка 3.7 / 5. Количество оценок: 11
Оценок пока нет. Поставьте оценку первым.
Источник: yablyk.com