{ "version": "https:\/\/jsonfeed.org\/version\/1", "title": "Переверстал, заметки с тегом: тикетбасбай часть 3", "home_page_url": "https:\/\/pereverstal.by\/tags\/tiketbasbay-chast-3\/", "feed_url": "https:\/\/pereverstal.by\/tags\/tiketbasbay-chast-3\/json\/", "icon": "https:\/\/pereverstal.by\/user\/userpic@2x.jpg", "author": { "name": "Автор блога", "url": "https:\/\/pereverstal.by\/", "avatar": "https:\/\/pereverstal.by\/user\/userpic@2x.jpg" }, "items": [ { "id": "75", "url": "https:\/\/pereverstal.by\/all\/pereverstka-tiketbasa-ch-3-poisk-i-pokupka-bileta\/", "title": "Переверстка тикетбаса, часть 3., Поиск и покупка билета.", "content_html": "

Привет, последняя часть переверстки тикетбасабай.<\/p>\n

Для начала давайте попробуем заказать билет на старом сайте.
\nК примеру, нам нужно (за каким-то хреном) съездить в Фаниполь.<\/p>\n

Первое, что я вижу — это окно выдачи результатов поиска.
\nЕсть один вариант на маршрут Минск—Клецк. Верстка в стиле «Убеейте меняя»<\/p>\n

\n\"\"\n<\/div>\n

Я ознакомлен.<\/p>\n

\n\"\"\n<\/div>\n

Окно выбора места в автобусе. Главный косяк здесь — это то, что таблица
\nне отображает расположение мест в салоне автобуса. Такая возможность,
\nконечно, сомнительный бонус, но я себя чувствую спокойнее,
\nкогда сразу знаю где в автобусе искать свое место.<\/p>\n

\n\"\"\n<\/div>\n

Идем дальше.<\/p>\n

\n\"\"\n<\/div>\n

Кстати, я обожаю визуализировать свои чувства при просмотре и оценке
\nкачества чьей-нибудь верстки. Вот картинка для верхнего скрина.<\/p>\n

\n\"\"\n<\/div>\n

Выпадающее меню «Тип билета» содержит гораздо больше опций,
\nчем можно себе представить. Все они влияют на конечную стоимость билета.
\nУчтем это на будущее.<\/p>\n

\n\"\"\n<\/div>\n

Окно выбора типа билета и ввода ФИО и страны проживания.
\nСчитаю необходимым сделать автоввод данных, раз на сайте есть
\nфункция авторизации.<\/p>\n

\n\"\"\n<\/div>\n

Окно «Оформление заказа». Последний шаг перед оплатой. Содержит инфу
\nпо направлению следования, дате, времени, тип билета стоимости и места
\nв автобусе.<\/p>\n

\n\"\"\n<\/div>\n

Мой диагноз такой верстке — множественные переломы, ушибы и сотрясения.<\/p>\n

Гомер, помоги мне изобразить правильное чувство.<\/p>\n

\n\"\"\n<\/div>\n

Ок, пойдет<\/p>\n

Ну что же, последний шаг — выбор платежной системы.<\/p>\n

\n\"\"\n<\/div>\n

После оплаты получил вот такой чек.<\/p>\n

\n\"\"\n<\/div>\n

Мда. Половина инфы лишняя, строки слиплись,
\nнабор прописными, черт подери сколько-ж можно-то?<\/p>\n

\n\"\"\n<\/div>\n

Кстати, самые наблюдательные заметили, что дата стоит 2 июля.
\nЧто тут скажешь — затянул я с переверсткой тикетбаса.<\/p>\n

Пора герою вершить правосудие. Сейчас на ваших глазах, я создам
\nновый интерфейс для покупки билета, учтя все ошибки, допущенные
\nв текущей версии сайта.<\/p>\n

Форма «Поиск билетов» была еще сделана в первой части.<\/p>\n

\n\"\"\n<\/div>\n

Вбиваем направление, дату и количество пассажиров.
\nПокажу пару вариантов, которые у меня получались в процессе.<\/p>\n

\n
\n\"\"\n\"\"\n<\/div>\n<\/div>\n

Надо сказать, что самое неприятное в переверстке, да и вообще в создании интерфейса
\nв том, что, разбирая по утру, уже, вроде бы сделанную работу, начинаешь замечать,
\nчто структура информации неверная, главное сделано мелко, а второстепенное
\nкрупно, это окно не должно быть здесь, а здесь должно, или вот тут не достает такой-то
\nкнопки. Да и вообще нихера не понятно, что делать, если, к примеру, решил поменять
\nисходные данные. К примеру, уже подошел к оплате, но с тобой решил поехать
\nтвой друг? А разницу комиссий платежных систем учел? А что если нужно вернуться назад
\nи поменять что-нибудь? Ничего не посыпется? Короче по итогу понимаешь, что нельзя
\nне думать рамками конкретной функции, а нужно видеть связи между всеми шагами
\nоперации, и, делая форму выбора времени, уже заранее думать о последнем этапе
\nпокупки. Все взаимосвязано. Вот что у меня в итоге получилось.<\/p>\n

\n\"\"\n<\/div>\n

Крупно пару моментов<\/p>\n

    \n
  1. «Хлебные крошки». Благодаря им видно кол-во предстоящих операций,
    \nа также можно будет вернуться на шаг-другой назад, если понадобится.<\/li>\n<\/ol>\n
    \n\"\"\n<\/div>\n
      \n
    1. Приятная мелочь — количество свободных мест.<\/li>\n<\/ol>\n
      \n\"\"\n<\/div>\n
        \n
      1. Не забыл про окно выбора типа билетов.<\/li>\n<\/ol>\n
        \n\"\"\n<\/div>\n

        Нажали «Продолжить». Переходим к окну выбора места в автобусе.<\/p>\n

        \n\"\"\n<\/div>\n

        Схему автобуса предварительно перерисовал<\/p>\n

        \n\"\"\n<\/div>\n

        Обратите внимание на крошки. «Время отправления...» теперь подчеркнуто, т. е.
        \nпревращено в ссылку, нажав на которую можно будет вернуться в предыдущий раздел.<\/p>\n

        \n\"\"\n<\/div>\n

        Вот вид сверху.<\/p>\n

        \n\"\"\n<\/div>\n

        Последний этап. переходим к оплате. Тут при верстке я тоже залип на время,
        \nпостоянно переверстывая вариант за вариантом.<\/p>\n

        Вот троечка из процесса<\/p>\n

        \n
        \n\"\"\n\"\"\n\"\"\n<\/div>\n<\/div>\n

        Вот готовый вариант<\/p>\n

        \n\"\"\n<\/div>\n

        Если кол-во пассажиров резко изменилось, то всегда можно его подкорректировать.<\/p>\n

        Имя и фамилия прописались автоматом, но не намертво — при желании
        \nможно поменять пассажира на другого. И тут же поменять тип билета, чтобы
        \nне возвращаться назад.<\/p>\n

        Если закрыть окно, так и не выполнив ни одну из операций (оплатить или отменить),
        \nто в дальшнейшем вводить все заново не придется, т. к. вся инфа о неоплаченном
        \nбилете сохранится в разделе «Мои билеты», о чем свидетельствует цифра
        \n1 в красном кружке.<\/p>\n

        Нажмем на «Мои билеты»<\/p>\n

        \n\"\"\n<\/div>\n
        \n\"\"\n<\/div>\n
        \n\"\"\n<\/div>\n

        Видим наш заказ, ждущий, когда же его оплатят.<\/p>\n

        Уф, готово! Спасибо всем за ваше ожидание и внимание!
        \nВпереди много нового, не переключайтесь!<\/p>\n", "date_published": "2018-11-24T18:24:44+03:00", "date_modified": "2018-11-24T14:28:35+03:00", "image": "https:\/\/pereverstal.by\/pictures\/282212_900.jpg", "_date_published_rfc2822": "Sat, 24 Nov 2018 18:24:44 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "75", "_e2_data": { "is_favourite": false, "links_required": [ "system\/library\/fotorama\/fotorama.css", "system\/library\/fotorama\/fotorama.js", "system\/library\/fotorama\/fotorama.css", "system\/library\/fotorama\/fotorama.js" ], "og_images": [ "https:\/\/pereverstal.by\/pictures\/282212_900.jpg", "https:\/\/pereverstal.by\/pictures\/278824_800.jpg", "https:\/\/pereverstal.by\/pictures\/279288_800.jpg", "https:\/\/pereverstal.by\/pictures\/279297_800.jpg", "https:\/\/pereverstal.by\/pictures\/289953_800.jpg", "https:\/\/pereverstal.by\/pictures\/279578_800.jpg", "https:\/\/pereverstal.by\/pictures\/281616_1000.jpg", "https:\/\/pereverstal.by\/pictures\/280575_800.jpg", "https:\/\/pereverstal.by\/pictures\/290166_800.jpg", "https:\/\/pereverstal.by\/pictures\/281079_800.jpg", "https:\/\/pereverstal.by\/pictures\/282725_800.jpg", "https:\/\/pereverstal.by\/pictures\/290807_800.jpg", "https:\/\/pereverstal.by\/pictures\/283888_800.jpg", "https:\/\/pereverstal.by\/pictures\/283292_800.jpg", "https:\/\/pereverstal.by\/pictures\/282905_800.jpg", "https:\/\/pereverstal.by\/pictures\/377888_800.jpg", "https:\/\/pereverstal.by\/pictures\/291139_800.jpg", "https:\/\/pereverstal.by\/pictures\/378393_900.jpg", "https:\/\/pereverstal.by\/pictures\/379078_800.jpg", "https:\/\/pereverstal.by\/pictures\/292226_800.jpg", "https:\/\/pereverstal.by\/pictures\/292457_800.jpg", "https:\/\/pereverstal.by\/pictures\/292982_800.jpg", "https:\/\/pereverstal.by\/pictures\/293294_800.jpg", "https:\/\/pereverstal.by\/pictures\/293671_800.jpg", "https:\/\/pereverstal.by\/pictures\/293982_800.jpg", "https:\/\/pereverstal.by\/pictures\/297509_800.jpg", "https:\/\/pereverstal.by\/pictures\/297341_800.jpg", "https:\/\/pereverstal.by\/pictures\/295541_800.jpg", "https:\/\/pereverstal.by\/pictures\/297199_800.jpg", "https:\/\/pereverstal.by\/pictures\/297925_800.jpg" ] } } ], "_e2_version": 3254, "_e2_ua_string": "E2 (v3254; Aegea)" }