https://pereverstal.by/tags/tiketbasbay-chast-3/ E2 (v3254; Aegea) 75 https://pereverstal.by/all/pereverstka-tiketbasa-ch-3-poisk-i-pokupka-bileta/ https://pereverstal.by/all/pereverstka-tiketbasa-ch-3-poisk-i-pokupka-bileta/ <p>Привет, последняя часть переверстки тикетбасабай.</p> <p>Для начала давайте попробуем заказать билет на старом сайте.<br /> К примеру, нам нужно (за каким-то хреном) съездить в Фаниполь.</p> <p>Первое, что я вижу — это окно выдачи результатов поиска.<br /> Есть один вариант на маршрут Минск—Клецк. Верстка в стиле «Убеейте меняя»</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/282212_900.jpg" width="900" height="290" alt="" /> </div> <p>Я ознакомлен.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/278824_800.jpg" width="800" height="504" alt="" /> </div> <p>Окно выбора места в автобусе. Главный косяк здесь — это то, что таблица<br /> не отображает расположение мест в салоне автобуса. Такая возможность,<br /> конечно, сомнительный бонус, но я себя чувствую спокойнее,<br /> когда сразу знаю где в автобусе искать свое место.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/279288_800.jpg" width="800" height="504" alt="" /> </div> <p>Идем дальше.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/279297_800.jpg" width="647" height="698" alt="" /> </div> <p>Кстати, я обожаю визуализировать свои чувства при просмотре и оценке<br /> качества чьей-нибудь верстки. Вот картинка для верхнего скрина.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/289953_800.jpg" width="425" height="331" alt="" /> </div> <p>Выпадающее меню «Тип билета» содержит гораздо больше опций,<br /> чем можно себе представить. Все они влияют на конечную стоимость билета.<br /> Учтем это на будущее.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/279578_800.jpg" width="281" height="182" alt="" /> </div> <p>Окно выбора типа билета и ввода ФИО и страны проживания.<br /> Считаю необходимым сделать автоввод данных, раз на сайте есть<br /> функция авторизации.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/281616_1000.jpg" width="621" height="72" alt="" /> </div> <p>Окно «Оформление заказа». Последний шаг перед оплатой. Содержит инфу<br /> по направлению следования, дате, времени, тип билета стоимости и места<br /> в автобусе.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/280575_800.jpg" width="648" height="698" alt="" /> </div> <p>Мой диагноз такой верстке — множественные переломы, ушибы и сотрясения.</p> <p>Гомер, помоги мне изобразить правильное чувство.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/290166_800.jpg" width="500" height="314" alt="" /> </div> <p>Ок, пойдет</p> <p>Ну что же, последний шаг — выбор платежной системы.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/281079_800.jpg" width="648" height="698" alt="" /> </div> <p>После оплаты получил вот такой чек.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/282725_800.jpg" width="351" height="508" alt="" /> </div> <p>Мда. Половина инфы лишняя, строки слиплись,<br /> набор прописными, черт подери сколько-ж можно-то?</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/290807_800.jpg" width="236" height="284" alt="" /> </div> <p>Кстати, самые наблюдательные заметили, что дата стоит 2 июля.<br /> Что тут скажешь — затянул я с переверсткой тикетбаса.</p> <p>Пора герою вершить правосудие. Сейчас на ваших глазах, я создам<br /> новый интерфейс для покупки билета, учтя все ошибки, допущенные<br /> в текущей версии сайта.</p> <p>Форма «Поиск билетов» была еще сделана в первой части.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/283888_800.jpg" width="800" height="332" alt="" /> </div> <p>Вбиваем направление, дату и количество пассажиров.<br /> Покажу пару вариантов, которые у меня получались в процессе.</p> <div class="e2-text-picture"> <div class="fotorama" data-width="800" data-ratio="1.2326656394453"> <img src="https://pereverstal.by/pictures/283292_800.jpg" width="800" height="649" alt="" /> <img src="https://pereverstal.by/pictures/282905_800.jpg" width="800" height="583" alt="" /> </div> </div> <p>Надо сказать, что самое неприятное в переверстке, да и вообще в создании интерфейса<br /> в том, что, разбирая по утру, уже, вроде бы сделанную работу, начинаешь замечать,<br /> что структура информации неверная, главное сделано мелко, а второстепенное<br /> крупно, это окно не должно быть здесь, а здесь должно, или вот тут не достает такой-то<br /> кнопки. Да и вообще нихера не понятно, что делать, если, к примеру, решил поменять<br /> исходные данные. К примеру, уже подошел к оплате, но с тобой решил поехать<br /> твой друг? А разницу комиссий платежных систем учел? А что если нужно вернуться назад<br /> и поменять что-нибудь? Ничего не посыпется? Короче по итогу понимаешь, что нельзя<br /> не думать рамками конкретной функции, а нужно видеть связи между всеми шагами<br /> операции, и, делая форму выбора времени, уже заранее думать о последнем этапе<br /> покупки. Все взаимосвязано. Вот что у меня в итоге получилось.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/377888_800.jpg" width="800" height="788" alt="" /> </div> <p>Крупно пару моментов</p> <ol start="1"> <li>«Хлебные крошки». Благодаря им видно кол-во предстоящих операций,<br /> а также можно будет вернуться на шаг-другой назад, если понадобится.</li> </ol> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/291139_800.jpg" width="782" height="157" alt="" /> </div> <ol start="2"> <li>Приятная мелочь — количество свободных мест.</li> </ol> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/378393_900.jpg" width="765" height="224" alt="" /> </div> <ol start="3"> <li>Не забыл про окно выбора типа билетов.</li> </ol> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/379078_800.jpg" width="800" height="202" alt="" /> </div> <p>Нажали «Продолжить». Переходим к окну выбора места в автобусе.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/292226_800.jpg" width="800" height="563" alt="" /> </div> <p>Схему автобуса предварительно перерисовал</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/292457_800.jpg" width="700" height="675" alt="" /> </div> <p>Обратите внимание на крошки. «Время отправления...» теперь подчеркнуто, т. е.<br /> превращено в ссылку, нажав на которую можно будет вернуться в предыдущий раздел.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/292982_800.jpg" width="742" height="60" alt="" /> </div> <p>Вот вид сверху.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/293294_800.jpg" width="704" height="800" alt="" /> </div> <p>Последний этап. переходим к оплате. Тут при верстке я тоже залип на время,<br /> постоянно переверстывая вариант за вариантом.</p> <p>Вот троечка из процесса</p> <div class="e2-text-picture"> <div class="fotorama" data-width="532" data-ratio="0.665"> <img src="https://pereverstal.by/pictures/293671_800.jpg" width="532" height="800" alt="" /> <img src="https://pereverstal.by/pictures/293982_800.jpg" width="502" height="800" alt="" /> <img src="https://pereverstal.by/pictures/297509_800.jpg" width="526" height="800" alt="" /> </div> </div> <p>Вот готовый вариант</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/297341_800.jpg" width="571" height="667" alt="" /> </div> <p>Если кол-во пассажиров резко изменилось, то всегда можно его подкорректировать.</p> <p>Имя и фамилия прописались автоматом, но не намертво — при желании<br /> можно поменять пассажира на другого. И тут же поменять тип билета, чтобы<br /> не возвращаться назад.</p> <p>Если закрыть окно, так и не выполнив ни одну из операций (оплатить или отменить),<br /> то в дальшнейшем вводить все заново не придется, т. к. вся инфа о неоплаченном<br /> билете сохранится в разделе «Мои билеты», о чем свидетельствует цифра<br /> 1 в красном кружке.</p> <p>Нажмем на «Мои билеты»</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/295541_800.jpg" width="475" height="148" alt="" /> </div> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/297199_800.jpg" width="800" height="537" alt="" /> </div> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/297925_800.jpg" width="800" height="570" alt="" /> </div> <p>Видим наш заказ, ждущий, когда же его оплатят.</p> <p>Уф, готово! Спасибо всем за ваше ожидание и внимание!<br /> Впереди много нового, не переключайтесь!</p> Sat, 24 Nov 2018 18:24:44 +0300