x
 
Илья Бирман
30 августа 2016
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Илья, а расскажите про процесс разработки схемы метро. Какие решения были приняты, какими рассуждениями руководствовались.

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

(Часть третья)


Когда конструктивно с пересадкой всё ясно, можно подумать о её графическом дизайне: цвете и форме. Рассмотрим способы соединения кружков.

Простейший вариант придумал на своей схеме Генри Бек. Если все кружки касаются друг друга, достаточно вырезать белые «коридорчики»:


Это работает как с чёрными кружками, так и с кружками разного цвета:


Об обозначении станций

Схема Бека 1951 года. Архив схем лондонского метро

Но расположить все кружки так, чтобы каждый касался каждого, удаётся не всегда, и коридорчики приходится удлинять:

А если кружков больше трёх, это просто невозможно математически.



Если кружки разного цвета, возникает вопрос, как красить обводку самого коридорчика:

Барселона


Градиент кажется самым справедливым вариантом, ведь это действительно переход между линиями.

К сожалению, между некоторыми цветами градиенты выглядят грязно:


Можно попытаться решать проблему добавлением промежуточной точки посередине со сдвинутым куда-нибудь цветом:


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

Более изящное решение — использовать градиент в другой цветовой модели. Lch выглядит экстравагантно:


А вот Lab даёт отличный результат:


К сожалению, мне неизвестен способ делать такие градиенты в Иллюстраторе. Приглашаю уважаемых советчиков поделиться секретами. Мне пришлось использовать программу Дэвида Джонстоуна.

Стоит вспомнить, что роль этого градиента — быть фоном для коридорчика. На моей третьей схеме московского метро узел Библиотеки имени Ленина выглядел так:



Артём Горбунов обратил моё внимание на то, что градиент между тёмно-синим и красным тут не нужен и предложил от него избавиться:

Майк Босток о градиентах в альтернативных цветовых моделях

Таня Бибикова о выборе цвета



Во всех этих вариантах соотношение между толщинами кружков, коридорчика и его обводки может быть разным:

Вообще, локальные исключения и «замазки» — тема отдельного совета. Спросите кто-нибудь!


Но все эти формы, на мой вкус, выглядят топорно.

В четвёртой версии мне хотелось сделать переходы более пластичными. Чтобы они выглядели не как элементы, собранные из запчастей, а как цельные объекты. Я долго искал форму переходов, которая бы меня полностью удовлетворила. И в итоге остановился на таком «арахисе»:



От градиентов в этой версии я отказался, вместо этого решив делить переходы цветами пополам — так чище.

Сильнее выделить, «поднять» переходы над линиями, помогли тени. Причём их я сделал тоже графичными, без градиента:



Обратите внимание, что тень падает только на линии, но не на белый фон. Так тоже чище, а ещё это добавляет ощущения объёма — схема кажется висящей в воздухе над фоном, а не лежащей прямо на нём.

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

О значении эстетики

Видео о превращении третьей версии схемы в четвёртную

Интерфейс и информация — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

Поделиться
Отправить

Комментарии

Владимир Соловьёв
30 августа 2016

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

Егор Чистяков
31 августа 2016

Илья, насколько мне известно, Иллюстратор не поддерживает Lab ни в каком виде, даже лабовские свотчи отдаются в виде эквивалентов.

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

C Lch ничего предложить не могу, а вот HSL-градиент можно сделать в Фотошопе же через фильтр от Kamlex или ему подобный.

А как именно был собран градиент с помощью упомянутого сервиса в схеме 2012 года? Множество промежуточных оттенков, вручную перенесённых в Иллюстратор или другую среду?

Дмитрий Кондратьев
31 августа 2016

Илья, учитывая ваш перфекционизм и педантичность не совсем логично выглядит, что только красная и голубая линии «входят» без тени в соответсвующие станции. Может быть серая и синяя тоже должны так же соединяться, а то появляется ощущение, что станции «оторваны» от своих веток.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

1




Недавно всплыло

Экран ожидания в поликлинике 6 Какие законы для текста, который будет восприниматься только на слух? 1 Выбранные элементы списка, как не забывать принципы из советов бюро и когда нужен логотип 1 Как следует поступить дизайнеру, если клиент постоянно вспоминает «нечто очень важное» 7