{
    "version": "https:\/\/jsonfeed.org\/version\/1",
    "title": "Блог Сергея Копылова: заметки с тегом лебедев",
    "_rss_description": "Блог Сергея Копылова",
    "_rss_language": "ru",
    "_itunes_email": "",
    "_itunes_categories_xml": "",
    "_itunes_image": "",
    "_itunes_explicit": "",
    "home_page_url": "https:\/\/blog.sergeykopylov.ru\/tags\/lebedev\/",
    "feed_url": "https:\/\/blog.sergeykopylov.ru\/tags\/lebedev\/json\/",
    "icon": "https:\/\/blog.sergeykopylov.ru\/user\/userpic@2x.jpg?1574324497",
    "author": {
        "name": "Сергей Копылов",
        "url": "https:\/\/blog.sergeykopylov.ru\/",
        "avatar": "https:\/\/blog.sergeykopylov.ru\/user\/userpic@2x.jpg?1574324497"
    },
    "items": [
        {
            "id": "96",
            "url": "https:\/\/blog.sergeykopylov.ru\/all\/posadochnye-talony-aeroflota\/",
            "title": "Посадочные талоны Аэрофлота",
            "content_html": "<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.sergeykopylov.ru\/pictures\/8-Final.png\" width=\"1200\" height=\"587\" alt=\"\" \/>\n<\/div>\n<p>Я поучаствовал в конкурсе на вакансию верстальщика в Студии Артемия Лебедева. Нужно было сверстать в один цвет посадочный талон Аэрофлота, оставив бланк без больших изменений.<\/p>\n<p>Получилось то, что на картинке выше. Талон хорош вот этим:<\/p>\n<ul>\n<li>Разделена информация про рейс вообще и про то, что делать конкретному пассажиру в аэропорту. Есть отдельный столбец про то, кто пассажир, куда идти, ко скольки и куда сесть на борту.<\/li>\n<li>Отрывной талон содержит всю информацию, которая пригодится через год после поездки в домашнем архиве.<\/li>\n<li>Вся важная для сотрудников информация сгруппирована по краям или написана большим кеглем, найти легко.<\/li>\n<li>Много места для названия мест вылета и прилёта, имени пассажира.<\/li>\n<li>Талон складывается пополам и на правой половине есть всё, что нужно пассажиру.<\/li>\n<\/ul>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.sergeykopylov.ru\/pictures\/Blank.png\" width=\"1200\" height=\"587\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Бланк был вот такой.<\/div>\n<\/div>\n<p>Расскажу о процессе.<\/p>\n<p>Так как наша главная задача не потерять информацию, возьмём любой конкретный настоящий талон и выпишем, что на нём есть:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.sergeykopylov.ru\/pictures\/image-9.png\" width=\"494\" height=\"310\" alt=\"\" \/>\n<\/div>\n<p>На существующем талоне информация выстроена по сетке, и чуть-чуть по смыслу, но очевидных блоков не получается. Попробуем объединить. Очевидно, что есть какая-то информация о рейсе, независимо от того, летит ли на нём кто-нибудь или нет и та информация, которая нужна в аэропорту. Ещё есть какая-то техническая, оставим на потом.<\/p>\n<p>Обратим внимание на то, что выделено большим кеглем, вероятно, это то, что вправду больше нужно кому-то.<\/p>\n<p>Попробуем как-нибудь это разместить.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.sergeykopylov.ru\/pictures\/1.png\" width=\"1200\" height=\"587\" alt=\"\" \/>\n<\/div>\n<p>Отрывной талон оставим на будущее, займёмся главной половиной.<\/p>\n<p>Штрихкод хорошо разместить там, где он обычно и бывает: в этом вероятно есть какой-то смысл и менять привычки персонала просто так не стоит. Ещё я помню, что я его сканировал когда-то при проходе на посадку, было удобно, что он сбоку.<\/p>\n<p>Остальное расставим по двум столбцам: рейс и<br \/>\nв аэропорту. Внизу пустим строку с техническими параметрами, кажется, что персоналу будет удобно найти это глазами, если оно будет с краю.<\/p>\n<p>Вообще важно держать в голове, что талон нужен не только пассажиру, с ним работают разные люди.<\/p>\n<p>Продолжим и расставим акценты:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.sergeykopylov.ru\/pictures\/2.png\" width=\"1200\" height=\"587\" alt=\"\" \/>\n<\/div>\n<p>Разделим цветами то, что напечатано на бланке и термопечать. Мы печатаем на стандартном бланке, а значит ограничены возможностями термопринтеров.<\/p>\n<p>Поэтому и конкретный шрифт пока неважен, надо будет потом спросить, какие есть технические ограничения по шрифту. Roboto, как безликий брусковый шрифт — ок.<\/p>\n<p>По макету пока получается какая-то дичь. Слева слишком много пустого места, справа тесно. Можно поставить по выдуманной сетке, но тогда появятся горизонтальные связи, нам такого не надо.<\/p>\n<p>А что если обвести рейс и разместить пункт вылета и прилёта друг под другом? Заодно можем логотип вписать<br \/>\nв рамку, это же тоже про рейс.<\/p>\n<p>Подписи делаем на двух языках, надо за этим следить. Но вообще хорошо, если подписей будет как можно меньше, а просто формат данных будет объяснять, что мы видим.<br \/>\nНа всех языках мира написать мы всё равно не сможем.<\/p>\n<p>А английский пусть будет первым, как некий универсальный язык.<\/p>\n<p>Итак:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.sergeykopylov.ru\/pictures\/3.png\" width=\"1200\" height=\"587\" alt=\"\" \/>\n<\/div>\n<p>Идея с рамкой вроде сработала. Вообще, конечно, хорошо, когда элементов как можно меньше, но здесь рамка хорошо объединяет. На прошлом пакете я ещё имя клиента забыл, пожалуй, это не к рейсу, а к тому, что происходит<br \/>\nв аэропорту.<\/p>\n<p>Ну что, расставим всё получше, нарисуем самолётик и иконку окна у места и возьмёмся за отрывной талон:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.sergeykopylov.ru\/pictures\/4.png\" width=\"1200\" height=\"587\" alt=\"\" \/>\n<\/div>\n<p>Хочу сделать отрывной талон копией обычного, как визуально, так и информативно. В моих полётах было так, что мне оставляют весь талон вообще, отдают отрывной или отдают большую часть, фиг догадаешься.<\/p>\n<p>Ещё это круто тем, что если ты собираешь талончики, чтобы там в фотоальбом путешествий прилепить, то не забудешь какого числа и на чём летел.<\/p>\n<p>Заодно круто получилось, что ещё одна рамочка такая же, как большая, появляется своё лицо. Теперь пора браться за детали.<\/p>\n<p>Нагуглим настоящий талон Аэрофлота и дополним список информацией. Оказывается, там много технических данных, использование половины из списка неясно. Размещу в блоке дополнительной информации. Заодно, не буду здесь переводить: сотрудники в курсе, что это, а для остальных пусть будет небольшой загадкой о том, как работает аэропорт.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.sergeykopylov.ru\/pictures\/image-15.png\" width=\"568\" height=\"295\" alt=\"\" \/>\n<\/div>\n<p>Отдельная проблема с классом бронирования. Это вроде и персоналу надо (потому, что нормальные люди не знают, что значит М), но и тебе важно, куда ты там сможешь зайти подождать. Короче, пока размещу в углу, потом спрошу.<\/p>\n<p>Проверим, все ли идеи я использовал. О, нужно ещё сильнее выделить время окончания посадки, его постоянно ручкой обводят.<\/p>\n<p>А ещё проверим, удобно ли пользоваться талоном всем, кто с ним работает. Вся важная для сотрудника информация должна быть или в углу, или у края, или большого кегля. Вроде получилось.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.sergeykopylov.ru\/pictures\/5.png\" width=\"1200\" height=\"587\" alt=\"\" \/>\n<\/div>\n<p>Ну теперь совсем по мелочам:<\/p>\n<p>У Аэрофлота, оказывается штрихкод меньше, чем вся ширина, наверно, это с оборудованием связано. Уменьшим.<\/p>\n<p>Самолётик на отрывном нарисуем.<\/p>\n<p>Проверим зону печати, создаётся впечатление, что сверху принтеры не печатают на какой-то полосе, слева тоже, а вот снизу и справа ограничений нет.<\/p>\n<p>Добавим ISS Agent на правую часть, оно зачем-то у Аэрофлота дублируется.<\/p>\n<p>Отступы проверим, и сделаем побольше блок рейса, чтобы даже большие названия городов, аэропортов и терминалов влезали. Как и дата на двух языках.<\/p>\n<p>Пора выдохнуть, отвлечься, и посмотреть в интернете, как другие решали проблему.<\/p>\n<p>На следующий день:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.sergeykopylov.ru\/pictures\/Rezultat(1).png\" width=\"1200\" height=\"587\" alt=\"\" \/>\n<\/div>\n<p>Вычитал в интернете, что думают другие ребята. Много народу предлагает всё отменить, поменять формат бумаги, полноцветную печать и т. д. Ну у нас это не пройдёт, задание — сделать на стандартном бланке.<\/p>\n<p>Но несколько хороших идей есть: написать покрупнее ФИО, ограничиться несколькими размерами шрифта (и красиво, и реализовать будет проще), убрать гейт и время посадки с отрывного и так далее.<\/p>\n<p>Заодно круто получилось, что талон складывается пополам и на одной половине есть вообще вся информация, кроме технической, а вся техническая есть с другой. Отлично, теперь не жалко сгибать посередине, а не по линии отрыва.<\/p>\n<p>Чтобы двигаться дальше, нужно узнать технические ограничения печати: можно ли печатать разными шрифтами, разной толщиной, на разных уровнях, может там сетка жёсткая. Но это не так и важно, тут есть что куда подвинуть, если такие проблемы появятся. И не забыть разузнать про класс бронирования и нужен ли ISS Agent на отрывном талоне. Иконки ещё нужно будет перерисовать, а не из интернета брать.<\/p>\n",
            "date_published": "2020-09-16T13:04:16+03:00",
            "date_modified": "2021-07-24T16:24:48+03:00",
            "image": "https:\/\/blog.sergeykopylov.ru\/pictures\/8-Final.png",
            "_date_published_rfc2822": "Wed, 16 Sep 2020 13:04:16 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "96",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/blog.sergeykopylov.ru\/pictures\/8-Final.png",
                    "https:\/\/blog.sergeykopylov.ru\/pictures\/Blank.png",
                    "https:\/\/blog.sergeykopylov.ru\/pictures\/image-9.png",
                    "https:\/\/blog.sergeykopylov.ru\/pictures\/1.png",
                    "https:\/\/blog.sergeykopylov.ru\/pictures\/2.png",
                    "https:\/\/blog.sergeykopylov.ru\/pictures\/3.png",
                    "https:\/\/blog.sergeykopylov.ru\/pictures\/4.png",
                    "https:\/\/blog.sergeykopylov.ru\/pictures\/image-15.png",
                    "https:\/\/blog.sergeykopylov.ru\/pictures\/5.png",
                    "https:\/\/blog.sergeykopylov.ru\/pictures\/Rezultat(1).png"
                ]
            }
        }
    ],
    "_e2_version": 3559,
    "_e2_ua_string": "E2 (v3559; Aegea)"
}