Наш коллега, Евгений Маликов (all43), предложил нам исследовать интерфейсные проблемы московского велопроката и найти возможные решения. Ради спортивного интереса мы решили ограничить все работы по этому проекту одним днём.

Что представляет из себя велопрокат в Москве?

В 2013 году в Москве создали первую публичную велопрокатную сеть. Она состоит из парковочных систем, которые хранят и выдают велосипеды, веб-сайта, на котором можно зарегистрироваться, найти свободный велосипед или место для парковки, системы биллинга, и, собственно, велосипедов.

Участники

Антон Уткин (aienn) и Дмитрий Кириллов (dmitrek) — коллеги в интерфейсной компании Thalient. Вместе делают интерфейсы, помогают стартапам, читают лекции и занимаются другими интересными делами.

Евгений Маликов (all43) — помогает нам здесь, работал менеджером проектов в компании «МобиДеньги» и разбирается в платёжных системах. Кстати, сейчас он ищет работу.

Проект

Для удобства рассказа, мы решили разбить проект на по порядку на несколько частей. Для того, чтобы использовать велопрокат, нужно обязательно зарегистрироваться на сайте velobike.msk.ru. Этот же сайт отвечает за объяснение того, как работает вся система.

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

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

Иногда у веб-разработчиков возникает задача, которая требует плавного движения объекта по экрану. Это может быть строка загрузки, какой-то спрайт (например, машинки на клавогонках) или что-то ещё. Проблема возникает, когда сдвиг даже на одну точку кажется слишком резким и портит общее ощущение от происходящего. Как этого избежать? Использовать приёмы антиалиасинга.

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

Как это сделано?