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

Конечно, у «табличного» варианта на два маршрута меньше, но если вспомнить, что иногда на табло надо попытаться уместиться аж 16 маршрутов, то становится очевидным, что всё равно ни одним из этих вариантов не закрыть задачу полностью.

Так что давайте, во-первых, оценим достигнутый прогресс, сравнив было и стало:

найс. Мы удвоили количество отображаемых маршрутов. На 25% увеличили кегль. Перераспределили палитру, чтобы менее заметные цвета отвечали за отображение менее приоритетной информации. Подписи маршрутов теперь самые заметные, а не самые малозаметные элементы табло.

И во-вторых, настроим теперь динамизацию этому макету, чтобы кегль, количество строк и колонок подстраивались под количество маршрутов и длину их названий.

Скажем, если маршрутов не больше четырех, можно не стесняться увеличить кегль еще больше (на самом деле в городе есть и укороченные по высоте версии табло для малонагруженных остановок, но мы их в рамках упражнения оставили за скобками):

Если маршрутов 5‒10, появляется вторая колонка. Если позволяет длина подписей, в ней показывается информация о втором автобусе, то есть две колонки равноценны, иначе вторая колонка демонстрируется в укороченном варианте без инфы о втором автобусе маршрута. Количество строчек тоже подстраивается под количеством маршрутов:

Если маршрутов 10‒15, появляется третья колонка, при этом в первой колонке мы по-прежнему пытаемся дать полную информацию о двух ближайших автобусах пяти первых маршрутов. Но при длинных названиях маршрутов вынуждены оставить отсчет только в минутах. Заголовки колонок в этом случае уже и не нужны:

Можно дробить колонки и мельчить надписи дальше, обслуживая гипотетические варианты «а что если маршрутов будет... 26?», но тут бы я уже ограничился динамическим последним пунктом в списке, где анимацией перечислялось бы всё, что не влезло:

(Оптимистично оценил возможности табло в 10 fps)

Получается какая-то система вариантов макета, распределенных по количеству и объему информации:

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

— Простыми «CSS-изменениями» уже можно сделать сильно лучше, чем есть сейчас.

— Канонический «вот так надо»-вариант — это, конечно, хорошо, но когда речь идет о носителе, наполняемом данными произвольного объема, динамическая верстка — еще лучше. Потому что разработанный под самые экстремальные возможные условия макет будет пустым и малоинформативным на другом, более распространенном наборе данных. Я когда-то уже писал про эту коварную ловушку правила Константина Константинопольского https://www.tg-me.com/meow_design/571.

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

Ну и, конечно, пиксельные шрифты под разные кегли лучше отрисовать заново и в едином стиле, а не просто надергать из интернета, как сделал я.

Всё это можно будет допилить, если вдруг дело дойдет от фантазий на коленке у телеграма до реального проекта редизайна городских автобусных табло.

На этом всё, сорян за ночную простыню.

Ранее в рамках этой рубрики я уже редизайнил:

— графическое оформление крутилок икеевской газовой плиты: https://www.tg-me.com/meow_design/966

— графическое оформление крутилки выбора программы стиральной машины: https://www.tg-me.com/meow_design/1226

Я вам принес новый артефакт проникающей в интерфейсы эпла шизофрении. Попытался изменить какой-то параметр в разделе «Батарея» системных настроек, и на меня вылез попап с предупреждением, что «Батарея пытается модифицировать ваши системные настройки», подтверди это отпечатком пальца или паролем.