Блог Сергея Копылова

Не получается

Жизнь устроена так, что у тебя постоянно что-нибудь не получается. Потом ты стараешься, учишься и повторяешь и получается. Или всё равно не получается и ты делаешь что-нибудь другое, или ещё стараешься и получается.

И так не только в школе, а прямо всегда!

Поэтому не нужно бояться неудач, а стоит стремиться и по чуть-чуть делать, даже если научишься через много лет.

Что сделать производителям дешёвых гитар

Короче, за 20 лет игры на гитаре, про дешёвые электрогитары я слышал только 2 претензии: звукосниматели плохие и головка грифа страшная. Ну ещё гриф ведёт через несколько лет, но это сразу не узнаешь.

Так вот, производителям дешёвых гитар достаточно один раз заплатить дизайнеру 1000 баксов и потом продавать годами свои инструменты не только тем, у кого нет денег на получше, а вообще всем.

Тем более, что никаких ученических инструментов нет: или почти на всех ладах строит и можно играть кому угодно, или не инструмент вообще.

Умный дом

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

Идеальный код

Лучшее описание, что я встретил в интернете:

Хороший код — это код, понятный младшему инженеру. Отличный код — код, понятный первокурснику computer science. Лучший код — его отсутствие.

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

Учиться писать простой код, что же еще!

Сложное ПО

Хорошо известное правило разработки сложного программного обеспечения гласит: не создавай сложное программное обеспечение.

Посадочные талоны Аэрофлота

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

Получилось то, что на картинке выше. Талон хорош вот этим:

  • Разделена информация про рейс вообще и про то, что делать конкретному пассажиру в аэропорту. Есть отдельный столбец про то, кто пассажир, куда идти, ко скольки и куда сесть на борту.
  • Отрывной талон содержит всю информацию, которая пригодится через год после поездки в домашнем архиве.
  • Вся важная для сотрудников информация сгруппирована по краям или написана большим кеглем, найти легко.
  • Много места для названия мест вылета и прилёта, имени пассажира.
  • Талон складывается пополам и на правой половине есть всё, что нужно пассажиру.
Бланк был вот такой.

Расскажу о процессе.

Так как наша главная задача не потерять информацию, возьмём любой конкретный настоящий талон и выпишем, что на нём есть:

На существующем талоне информация выстроена по сетке, и чуть-чуть по смыслу, но очевидных блоков не получается. Попробуем объединить. Очевидно, что есть какая-то информация о рейсе, независимо от того, летит ли на нём кто-нибудь или нет и та информация, которая нужна в аэропорту. Ещё есть какая-то техническая, оставим на потом.

Обратим внимание на то, что выделено большим кеглем, вероятно, это то, что вправду больше нужно кому-то.

Попробуем как-нибудь это разместить.

Отрывной талон оставим на будущее, займёмся главной половиной.

Штрихкод хорошо разместить там, где он обычно и бывает: в этом вероятно есть какой-то смысл и менять привычки персонала просто так не стоит. Ещё я помню, что я его сканировал когда-то при проходе на посадку, было удобно, что он сбоку.

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

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

Продолжим и расставим акценты:

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

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

По макету пока получается какая-то дичь. Слева слишком много пустого места, справа тесно. Можно поставить по выдуманной сетке, но тогда появятся горизонтальные связи, нам такого не надо.

А что если обвести рейс и разместить пункт вылета и прилёта друг под другом? Заодно можем логотип вписать
в рамку, это же тоже про рейс.

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

А английский пусть будет первым, как некий универсальный язык.

Итак:

Идея с рамкой вроде сработала. Вообще, конечно, хорошо, когда элементов как можно меньше, но здесь рамка хорошо объединяет. На прошлом пакете я ещё имя клиента забыл, пожалуй, это не к рейсу, а к тому, что происходит
в аэропорту.

Ну что, расставим всё получше, нарисуем самолётик и иконку окна у места и возьмёмся за отрывной талон:

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

Ещё это круто тем, что если ты собираешь талончики, чтобы там в фотоальбом путешествий прилепить, то не забудешь какого числа и на чём летел.

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

Нагуглим настоящий талон Аэрофлота и дополним список информацией. Оказывается, там много технических данных, использование половины из списка неясно. Размещу в блоке дополнительной информации. Заодно, не буду здесь переводить: сотрудники в курсе, что это, а для остальных пусть будет небольшой загадкой о том, как работает аэропорт.

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

Проверим, все ли идеи я использовал. О, нужно ещё сильнее выделить время окончания посадки, его постоянно ручкой обводят.

А ещё проверим, удобно ли пользоваться талоном всем, кто с ним работает. Вся важная для сотрудника информация должна быть или в углу, или у края, или большого кегля. Вроде получилось.

Ну теперь совсем по мелочам:

У Аэрофлота, оказывается штрихкод меньше, чем вся ширина, наверно, это с оборудованием связано. Уменьшим.

Самолётик на отрывном нарисуем.

Проверим зону печати, создаётся впечатление, что сверху принтеры не печатают на какой-то полосе, слева тоже, а вот снизу и справа ограничений нет.

Добавим ISS Agent на правую часть, оно зачем-то у Аэрофлота дублируется.

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

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

На следующий день:

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

Но несколько хороших идей есть: написать покрупнее ФИО, ограничиться несколькими размерами шрифта (и красиво, и реализовать будет проще), убрать гейт и время посадки с отрывного и так далее.

Заодно круто получилось, что талон складывается пополам и на одной половине есть вообще вся информация, кроме технической, а вся техническая есть с другой. Отлично, теперь не жалко сгибать посередине, а не по линии отрыва.

Чтобы двигаться дальше, нужно узнать технические ограничения печати: можно ли печатать разными шрифтами, разной толщиной, на разных уровнях, может там сетка жёсткая. Но это не так и важно, тут есть что куда подвинуть, если такие проблемы появятся. И не забыть разузнать про класс бронирования и нужен ли ISS Agent на отрывном талоне. Иконки ещё нужно будет перерисовать, а не из интернета брать.

Процесс работы над схемой троллейбусов Петрозаводска

О том, что получилось: Схема троллейбусов Петрозаводска.

Года два назад я задумался о том, чтобы сделать хорошую схему троллейбусов Петрозаводска. К тому времени официальной схемой была следующая:

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

В моём детстве в троллейбусах висели примерно такие схемы:

Они куда более информативные и неплохо привязанные к географии, рассматривать их было интересно. Но вокруг линий было довольно много свободного места, а общий стиль схемы сложно было назвать красивым. Впрочем свободное место тоже выполняло свою функцию: на нём размещались рекламные блоки.

Я начал свою работу с чтения статей в интернете и знакомством с самыми разными транспортными схемами. Некоторые я даже расечататал и повесил на стену над диваном.

И вот в последние недели я взялся за реализацию.

Для начала я обрисовал свою географичную схему троллейбусов, которую делал на яндекс-картах, после изменения машрутов несколько лет назад

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

После этого, я упростил линий с учётом своего представления о том, где прямая, а где поворот, когда я еду на троллейбусе. То есть, я просто представил, как мне кажется, есть ли поворот там или там. Оказалось, что если поворот существенно меньше 90 градусов, то он таким и не воспринимается.

Потом я расположил линии по сетке: под углами в 90 и 45 градусов. Чем меньше разных вариаций углов на схеме, тем проще она воспринимается. Оказалось, что это не очень сложно, многие углы уже были похожими.

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

Пришло время чертить линии. Я выбрал какие-то разные цвета, построил линии и расставил остановки чёрными чёрточками. Пока нет смысла делать их более красивыми важно прикинуть в целом. Центр я закрыл плашечкой, чтобы не думать о тех сложностях, которые меня ждут :)

Пришла пора центра. Самыми большими проблемами были повороты маршрутов, нужно сделать, чтобы они не накрадывались друг на друга и за ними было легко следить глазами. И, конечно, самая большая проблема — это круговое движение в районе вокзала. Там какие-то машруты идут сразу в несколько сторон, какие-то останавливаются на самом вокзале, а какие-то — напротив, а 6 маршрут так вообще делает круг там, когда идёт в одну сторону и когда идёт обратно.

Кроме того, я попробовал сделать надписи более крупным кеглем. Если они поместятся, то станут лучше читаться издалека. Часть надписей я попробовал сделать не чёрными, а менее контрастными, чтобы схема была более неформальной, не такой строгой.

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

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

И тут мне пришла в голову мысль о том, что не нужно пытаться нарисовать все маршруты у вокзала: можно просто увеличить масштаб ещё сильнее и нарисовать саму дорожную развязку. Я оставил это на потом.

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

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

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

Пришло время очередной приборки. Часть линий просто не помещалась в формат. Пеньки остановок были не везде. Ещё нужно было перепроверить, что остановки расставлены правильно, а остановки с односторонним движением пометить стрелочками. И, конечно, ещё немного перерисовать центр.

Добавим маршруты автобусов, которые везут в отдалённые районы. Это хорошо делать именно сейчас потому, что это второстепенная информация и если останутся какие-то географические неточности, не страшно. К тому же, с помощью автобусов мы сможем закрыть пустые пространства, главное — сделать их менее контрастными, чтобы они не спорили с основной схемой.

Теперь, когда на схеме отмечены все значимые вещи, можно нарисовать реки и немного подвинуть второстепенные штуки, чтобы всё стало более причёсанным. Пора вывесить схему на своей стенке в ВК, чтобы жители Петрозаводска смогли указать на ошибки, которых я не заметил.

По отзывам стало известно, что какие-то остановки я перепутал, какие-то автобусы давно не ходят, а где-то есть просто помарки. Исправим это, добавим маршруты автобусов в самом городе между районами, изменим форму реки. Осталось перерисовать центр, чтобы изгибы были менее ломанными, а круг у вокзала превратился в ту сложную фигуру, какой является в жизни. Ну и добавить линию в Кижи :)

Пора выпускать.

Схема троллейбусов Петрозаводска

Я сделал схему троллейбусов Петрозаводска:

У неё есть несколько плюсов, по сравнению с существующими схемами:

  • надписи достаточно большие, чтобы было видно на карманной формате A5, и на форматах A4 и A3 в троллейбусах;
  • впервые решена проблема с пониманием того, как идут троллейбусы в районе вокзала;
  • отмечены автобусы в районы, в которые троллейбусы не ходят.

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

Таким образом, расстояния не соблюдаются, однако схема не ведёт себя, как схема метро: все повороты, которые воспринимаются как повороты в поездке сохранены. Старожилы представляют, к примеру, поездку по Первомайскому проспекту (слева вверху схемы), как поедку по прямой, несмотря на то, что географически, там немало небольших изменений направления. Кроме того, это первая схема, где север примерно там, где и на самом деле.

Поэтому схема нужна в первую очередь тем, кто не очень хорошо представляет, как на общественном транспорте можно добраться до нужного района или остановки и может составить первое впечатление об этом. Тем, кто живёт в городе десятки лет схема и не нужна: они хорошо представляют её в голове, маршрутов-то не так и много.

Остановки, которые находятся в зоне видимости помечены одним пеньком, а те, которые чуть дальше — разными, с указанием направления движения.

Процесс создания.

Образование и среда

Я вывел формулу того, чем должно заниматься государство в первую очередь. Был бы я политиком, я бы писал это на каждом билборде и в каждом буклете. Итак:

Образование и среда.

Ранее Ctrl + ↓