Перевёрстка — 1. Расписание поезда «Челябинск — Москва»

Сверстал расписание поезда «Челябинск — Москва (и обратно)».

 

 
В отличие от варианта, который использует РЖД, мое расписание удобнее читать, а вероятность неправильного считывания (об этом в процессе) гораздо ниже

Процесс

Однажды я ехал поездом из Челябинска в Самару. В вагоне висело расписание, чтобы пассажиры могли понять, когда будет станция, на какой остановке можно выйти покурить и когда уже будет пункт назначения. Расписание представляет собой ламинированный лист формата А4, висит в пластиковом кармашке и выглядит так:

Это плохое расписание, и вот почему.

  1. Формат использован неэффективно — под само расписание отведена примерно треть, зато еще треть отъедает бестолковая картинка. Из-за этого таблица набрана очень мелким кеглем, который тяжело читать (особенно в трясущемся поезде).
  2. На первый взгляд кажется, что левая таблица для русско-, а правая — для англоговорящих пассажиров. На самом деле нет. Уважаемым пассажирам приходится расписание поезда в сторону Челябинска читать по-русски, а в сторону Москвы — по-английски. Догадаться об этом можно, самому наступив на грабли (так случилось со мной), или по разделителю в форме секс-игрушки (точнее, по стрелочкам вокруг него). Представляю, каково бедным иностранцам.
  3. Выключка содержимого столбцов по центру и вертикальные надписи в шапке таблицы делают чтение таблицы еще более неудобным.

Решаю переделать. Принципиально хочу обойтись минимальным количеством кеглей и цветов, и сохранить английские тексты. Ну и границы ячеек  — нафиг.

Поехали. Сначала хочется набрать все крупно. Для этого нужно освободить место — выкидываю к ебаной матери картинку и половину расписания. Да, если я еду из Челябинска в Москву, мне не нужно знать график обратного следования. Расстоянием до станции и часовыми поясами тоже жертвую, чтобы снизить шум (расписание используется не в самых удобных условиях).

Время набираю табличными (моноширинными) символами — столбцы получают ровные края, взгляду легко скользить по вертикали и находить нужную строку. Вместо двоеточий между часами и минутами использую точки, так меньше шума.

Названия в шапке сокращаю, чтобы между столбцами не образовались дыры, а строки сложились.

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

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

Пришлось использовать горизонтальные линейки.

Добавляю таблице заголовок, без него нельзя. Слово «расписание» выкидываю — об этом говорит само содержимое таблицы при первом же взгляде.

Во всем расписании указывается московское время — это важно. Для акцента использую красную звезду (время-то московское). Добавляю телефон горячей линии, сайт и логотип РЖД.

Вроде ок, но хочется решить задачу без выхода в надсистему. Вдруг РЖД разорится на двухсторонней печати.

Пробую впихнуть невпихуемое, для этого немного уменьшаю кегль. Заголовок последнего столбца сокращаю, чтобы вместить две таблицы на формате. Текст внутри столбца выравниваю по центру — читаемость не пострадала (значения в ячейках маленькие), зато выглядит аккуратнее. Удалось обойтись без линеек, круто!

Добавляю заголовки. Нужную часть расписания пассажир будет выбирать по направлению (например, «Челябинск—Москва»), а не по маршруту. Поэтому номера маршрутов набираю в конце строки.

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

Добавляю логотип. Для телефона и сайта места не осталось. Мне кажется, это не страшно — контактная информация есть на других носителях. Честно говоря, с трудом представляю сценарий, когда за контактной информацией пассажир пойдет в коридор к расписанию.

Чтобы лучше отделить направления друг от друга, добавляю тоненькую вертикальную линеечку. Чуть-чуть поджимаю вертикальные отступы, чтобы нижнее поле не было таким опасно маленьким. Надеюсь, Тафти доволен.

Было и стало:

܀

Чтобы тренироваться и не расслаблять мозги, я буду делать и публиковать переверстки раз в неделю. Переверстывать буду все, что попадется под руку.

8 комментариев
Владимир Федулкин

Нештяк, классно, здорово! Молодец

Александр Ким

Привет! Может быть тебе интересна будет аналогичная переверстка Ильи Бирмана
http://ilyabirman.ru/projects/train-thirteen/

Максим Розов

С работой Бирмана я знаком. У нас разные задачи. У него — показать детали маршрута, а у меня — сделать удобное для чтения расписание на уже работающем формате.

Александр Бородулин

Хорошо вышло. Только притензия к шрифту, или мне кажется, или кернинг жутко гуляет.

Александр Бородулин

П.с расстояние между столбцами со временем стоит немного увеличить.

Николай

Теперь дело за малым — подождать, пока РЖД примет твой вариант в работу. Меня всегда раздражало старое расписание, которое создавалось генератором дерьмовой верстки.

Посмотри гайдлайны РЖД, позволяют ли они избавляться от фирменного заголовка в красной плашке (я про слово «Расписание» на старом макете)?

Максим Розов

Что касается гайдлайнов и вообще любых стандартов. Я считаю, что если они снижают эффективность, то их можно нарушать.

Я переверстывал расписание для себя, а не для РЖД. Было бы безответственно предлагать новый дизайн, не зная ограничений и требований. Предложить это расписание можно разве что начальнику поезда.

Этот формат однозначно не подойдет, например, для маршрута «Москва — Владивосток» (там объем больше). Мой дизайн нельзя назвать системным, потому что систему я не изучал .

Борис

Телефон горячей линии приведен для справок и жалоб. Почему решили оставить строчку ожидание? Почему убрали ее из средней колонки в правую? Помоему было логичнее — приехали, стоянка, отправление.

Максим Розов

Я понимаю, для чего телефон горячей линии, но это я его так назвал :) В исходном расписании не написано, что это за телефон, и зачем по нему надо звонить. Даже если предположить, что это правда горячая линия, то что этот номер делает в расписании? Почему он не написан крупно отдельной табличкой или не напечатан на билете? Кто догадается искать его в расписании?

Согласен, колонка с временем стоянки по логике должна быть между временем прибытия и отправления. Но своей версткой я закрыл свою проблему — когда я ехал в поезде, меня чаще всего интересовало время стоянки, чтобы я мог сгонять за минералкой. Сейчас найти самую долгую стоянку проще. Ну и мне не кажется, что в таком плотном наборе можно как-то заблудиться.

А вообще делать какие-то однозначные выводы о положении колонок без исследований и тестов я бы не стал. Пока вижу, что мой вариант точно лучше (хотя сделать верстку лучше нынешней несложно).

Дмитрий

Все хорошо, но зачем логотип РЖД повернули? Ерунда какая-то и дизайн ради дизайна. Если уж «переверстывал расписание для себя, а не для РЖД», то логотипом можно пренебречь, раз места не осталось. Или что-то менять.

Максим Розов

Дмитрий, спасибо за комментарий. Я посчитал, что логотип должен остаться, потому что он идентифицирует «хозяина» расписания. Логотип не уместился в основной колонке, поэтому его пришлось поставить на поле и повернуть, как и текст про московское время. С задачей идентификации он справляется и в таком виде. В качестве аналогичного решения можете представить себе подпись автора на фотографии.

Дмитрий

Все же спорно получается с логотипом. Одно дело — текст поворачивать, другое — графику, тем более логотип. Я думаю, что это можно делать, если только носитель предполагается раздавать, т. е. можно его повертеть в руках. А когда расписание весит в вагоне — не очень. Кстати, гляньте в гайдлайны РЖД, там логотип предписывается размещать как раз не в формате, а на половину заводить на на поля. Мне видится, что тут тоже бы неплохо получилось. Если уж верстать расписание для РЖД, то они должны сказать «хочу такое повесить», так ведь?

PS Минуты от секунд надо бы отделять двоеточием.

Максим Розов

Я специально использовал точки в качестве разделителей. Двоеточия в таком количестве выглядят более шумно. Тафти раскрывает эту тему в книге Envisioning Information. Очень рекомендую, хотя язык у него сложный.

Ваш комментарий
адрес не будет опубликован

ХТМЛ не работает

Ctrl + Enter
Популярное