В Телеграме помимо ссылок на заметки делюсь околодизайнерскими наблюдениями.
В Твиттере помимо ссылок на заметки пишу всякую чушь.
В Тумблере и Же-же есть автоматические трансляции. Если не работает, напишите мне: ilyabirman@ilyabirman.ru.
По РСС и Джейсон-фиду трансляции для автоматических читалок
Оказывается, фавыконка нового Зерулса случайно была на белом фоне. Если у вас есть картинка на белом фоне, и его надо сделать прозрачным, при этом сохранив весь антиалиасинг (пиксели промежуточных цветов по краям контура), то это делается вот так:
На самом деле вдвое быстрее, но я тут ещё комментирую.
Есть такая засада, когда вёрстка пытается использовать прямоугольность фоток, а фотки этому сопротивляются, потому что пересвеченые:
Конечно, лучше всего такие фотки заменить нормальными. Но предположим, что это почему-то невозможно. Фотограф в отпуске, открываться нужно через 15 минут.
Можно попробовать взять такие фотки в рамки:
Но это выглядит фигово. Особенно, если соседствуют и такие и такие:
Намного лучше немного подтемнить фотку с нужной стороны. Я тут ещё и подсинил чуток, так как это снег:
Можно ещё попытаться вытянуть хоть какую-то текстуру снега, чтобы он не выглядел таким плоским, но это уже не касается вёрстки, а касается обработки фото.
Это копипейст из канала в телеграме. Это бы попало в стенограмму за 5—11 февраля, но я выкусил и делаю отдельной заметкой. Заметку помог подготовить Вениамин Векк.
Звёзды не надо делать пухлыми. Они выглядят дебильно:
Вот эта штука должна быть прямой линией:
Звезда здорового человека, короче, такая:
Понятно, что стилистическая задача может требовать чего-то там. Но я говорю о виде звезды по умолчанию. Это как «ссылка должна быть подчёркнута».
Сергей Чикин пишет: «Если ты Энгрибердс, то пухленькие — норм».
Это копипейст из канала в телеграме. Это бы попало в стенограмму за 5—11 февраля, но я выкусил и делаю отдельной заметкой. Заметку помог подготовить Вениамин Векк.
Полтора года назад я выпустил схему московского метро с Окружной линией — вам она известна под дебильным названием МЦК. Так вышло, что пока я рисовал схему, считалось, что Октябрьское Поле и Панфиловская никак не связаны, ну я так и нарисовал:
Но когда МЦК запустили, их вдруг решили считать пересадкой (там 750 метров по улице).
С тех пор открывались новые отрезки Марьина Роща — Петровско-Разумовская (Люблинская линия), Парк Победы — Раменки (Солнцевская линия), и я их добавлял на схему. Но это место не трогал, потому что там надо было всё взорвать, чтобы эту пересадку нарисовать.
А потом пришёл Илья Харитонов и буквально за годик всё сделал (пришлось даже Тверскую чуточку подвинуть):
Да ещё и алфавитный указатель заверстал:
В указателе используется система, которую я изобрёл пять лет назад:
Вместо антигуманной координатной сетки, тут просто показано на какой линии станция и в какой части схемы её искать. Ничего более удобного никто в мире не придумал.
Cкачайте ПДФ, проверьте плиз, где мы накосячили?
Я ещё обновил картинку на странице схемы. Но плакат, на который там ведёт кнопка «Купить», пока не обновился. Будем держать вас в курсе, в общем.
Илья тем временем написал пост про всю эту петрушку. Там есть листалка вариантов решения отрезка Полежаевская — Октябрькое Поле.
Ссылки по теме:
По образу и подобию классической челябинской схемы и её следующих версий дизайнеры делают разные другие схемы. В этом нет проблемы, нам даже приятно. Сама-то наша схема тоже опирается на достижения предыдущих поколений дизайнеров.
Вот смотрите какая классная схема движения общественного транспорта Севастополя:
Здесь используются похожие на наши графические приёмы, но в голову не придёт упрекнуть авторов в копировании. На любой вопрос «а почему именно так?» авторы могут ответить «ну а как?». Схему нарисовали исходя из задачи, использование всех приёмов оправдано целью.
Но вот на днях какой-то чувак опубликовал схему метро Софии:
Эта схема срисована с нашей схемы метро Минска. На любой вопрос «а почему именно так?» ответ один: «срисовал с Минска». Можно же было не повторять один-в-один вёрстку блочка с радиусом круга-центра? Можно было вообще иначе выделить центр, придумать свои деревья, выбрать чуть другие цвета линий, иконки другие нарисовать. Использование приёмов никак не оправдано целью.
Минскую схему мы делали с Ваней Звягиным и Костей Евстратенко. Смешно, что через какое-то время после публикации автор добавил упоминания меня и Вани (без ссылки и без слова «Минск», где-то между делом), а Костю не добавил. Хотя Костя, например, делал здания, которые этот чувак тоже нагло спёр. Костин стадион слева и его стадион справа:
Тут я хочу оговориться, что это не пост ненависти к её автору, мне до него дела нет. Просто не все понимают, где граница между заимствованием приёмов и воровством, и это прям отличная иллюстрация.
Ну а поржать над автором — наше святое право, я считаю.
Остерегайтесь подделок.
На курсе и в книге я рассказываю о повышении информативности. Большинство интерфейсов, которые мы видим вокруг, низкоинформативны: не показывают то, что нужно для принятия решения. Например, знаки вопроса в сложных формах, по которым открываются попапчики с объяснениями полей — что за тупизм? Объяснения должны быть прямо в форме.
Вот завалялась картинка:
Я сначала случайно прочитал day light вместо day flight и подумал: ого, они показывают, с какой стороны будет солнце! Вот вам пример повышения информативности. Это полезно, это влияет на выбор места (обычно я в уме представляю, как полетит самолёт и где будет солнце, чтобы ни дай бог не попасть под него).
Информативность — про полезную информацию, связанную с задачей пользователя, а не просто любые данные, которые можно вывалить. Очень часто дизайнеры показывают количество чего-нибудь, что не имеет никакого значения:
Что мне толку с того, что вариантов именно 26? Как это повлияет на моё желание перейти по ссылке? Меня-то интересует, есть ли там что-то подходящее. Лучше написать, что за варианты: со шнурками и без, с прорезиненной подошвой. Или показать превьюшечки.
Количество имеет смысл, например, тут:
Число позволяет мне оценить, сколько работы меня ждёт (а окружающим — умею ли я пользоваться почтой; это, конечно, не мой скриншот). Если я недавно видел 2, а теперь вижу 5, я понимаю, что пришла новая почта.
Но чаще всего количество элементов внутри не приносит никакой пользы. В одной из позапрошлых версий Эгеи я перестал показывать количество черновиков рядом с их иконкой — это просто мусор.
Больше десяти лет назад я сделал схему челябинских трамваев и троллейбусов. На этот дизайн решающим образом повлияли советы и комментарии Артёма Горбунова. Тогда мы нашли несколько хороших универсальных решений — на основе того дизайна десятки дизайнеров делали схемы разных транспортных систем.
Три года назад мы с Сашей Караваевым сделали новую версию схемы. В ней была целая куча схемодизайнерских изобретений: «карандашный» слой с автобусами и троллейбусами, «акварельные» водоёмы, 3Д-конечные, новая форма пеньков. Тогда же родился логотип челябинских трамваев в виде герба Челябинска с пантографом.
А потом к работе подключилась Полина Лесникова. Она перерисовала схему с учётом изменений в маршрутах, и вместе с Сашей они улучшили много деталей по результатам тестирования предыдущей версии. Получилась новая схема:
Слой с автобусами и троллейбусами добавлял интересного фарша, но практической пользы в нём было мало. Без него упростилась геометрия линий и графема стала сильнее. Добавились узнаваемые здания.
Полина рассказывает подробнее у себя на сайте, посмотрите.
Что ещё посмотреть:
Я вчера написал про замкнутость. Продолжаю в режиме черновиков.
Вот вопросы, которые дизайнер должен задать себе, глядя на каждый макет интерфейса:
Это довольно занудная фигня, непонятно, как её системно применять, но я ж говорю, это черновик. Дополняйте в комментариях, что ли.
Меня много лет волнует проблема, которая у меня в голове живёт под названием «замкнутость» интерфейса. Я всё время хочу написать про это что-то большое и сделать такую тему на курсе. Но это так же сложно, как спроектировать замкнутый интерфейс. Поэтому я попробую сделать первый подход, считайте это черновиком.
Замкнутость — это что-то вроде математически полной продуманности интерфейса, когда все случаи рассмотрены и противоречия разрулены. Может, не очень удачное слово, но пока такое. Я имею в виду, все пути в интерфейсе ведут в какие-то имеющиеся состояния внутри интерфейса.
Разумеется, когда интерфейс уже реализован, он неизбежно замкнутый — так уж работает компьютер, что всё к чему-то да приведёт. Но меня волнует именно процесс проектирования. У начинающих дизайнеров постоянно такая фигня, когда не продумываются даже самые очевидные случаи.
Давайте вот разберём пример.
Скажем, надо сделать поле с автодополнением. Дизайнер рисует поле и показывает, как работает автодополнение:
А потом где-нибудь в описании пишет:
В поле работает автодополнение. Оно помогает ввести значение, которое ранее уже вводили. Если подходящих значений несколько, подставляет в самом поле самое часто используемое, а снизу рисует выпадайку, в которой можно выбрать из них. Достаточно, чтобы совпало хотя бы одно слово, например если уже вводили «ремонт часов», предлагает этот вариант по «ча».
Вообще, дизайнер, который напишет даже такое описание — это уже большая находка, таких надо беречь. Но вот интересно, многие ли из вас сразу заметили прокол?
На самом деле их несколько, но разберём главный. Что конкретно будет в поле, когда я введу «ча»? Если автодополнение просто дописывает кусок в конце, то «ремонт часов» в поле никак не может появиться.
Дизайнер уходит думать и возвращается с уточнением в описании:
При этом если предлагаемый вариант не начинается с того, что уже ввёл пользователь, этот вариант показывается только в выпадайке, но не в самом поле.
А сейчас видите дыру?
Судя по первому описанию, выпадайка должна появляться, если подходит несколько вариантов. А раз в поле сразу что-то дописано, то какой-то из вариантов, выпавших в выпадайке, должен быть как бы сразу выбран:
Судя по добавленной к описанию мысли, выпадайка может появиться, даже если подходящий вариант — один, «ремонт часов». Получается, в выпадайке может быть ничего не выбрано:
То есть выпадайки должны как-то по-разному себя вести, что ли, в зависимости от того, в первом ли слове нашлось совпадение? Или в первой выпадайке тоже можно как-то развыбрать?
Вот, например, в первом случае я могу нажать бекспейс, и тогда у меня останется просто «а».
А могу нажать на стрелку вниз, и получится такое:
Так ведь? А что тогда во втором случае, если нажать на стрелку вниз, будет?
Так что ли?
Но это же странно. Он мне как бы с двух сторон дописал, но при этом с одной стороны предвыделил, а с другой нет. И сейчас если нажать бекспейс, уже не останется исходный текст. А могу ли я нажать стрелку вверх, и что при этом произойдёт, вернётся ли «ча» или останется «ремонт ча»? А если я стрелку влево нажму, выпадайка останется или пропадаёт?
Тут дизайнер перестаёт писать описание и начинает латать дыры на лету. Говорит, «давай в этом случае сделаем, чтобы бекспейс стирал всё дописанное и возвращал исходное „ча“, и стрелка вверх тоже».
Но такой патч ничего не замыкает, а только сильнее размыкает. Теперь у нас появляется какое-то особое состояние интерфейса, когда бекспейс работает не как обычно. И надолго ли это состояние сохраняется? Например, если я введу „с“, будет ведь вот так:
И это согласно исходному описанию, безо всяких поправок — ведь сейчас уже начало введённой строки совпадает с началом единственного подходящего варианта, и выпадайка не нужна. Но посмотрите ещё раз на предыдущую картинку. Какого хрена там делала выпадайка в точно такой же на вид ситуации? И почему выпадайка пропала при вводе буквы „с“? Уже совсем трудно предсказать, что сделает бекспейс. Помнит ли он ещё, что слово «ремонт» тут «ненастоящее»?
Это не то, чтобы неразрешимые проблемы. Тут нет никакой проблемы всё аккуратно распутать. Но просто маловероятно, что дизайнер хотя бы увидел сам этот ворох вопросов, если ему показалось, что добавленная им к исходному описанию мысль всё объясняет.
Действительно хороший дизайнер пошёл бы уже после первого вопроса изучать, как работают такие автодополнения с выпадайками в других местах, и увидел бы, что там куча вариантов. Даже в разных браузерах поля адреса умеют очень разное вспоминать и находить, и ведут себя очень по-разному.
Я на этом возьму паузу, а вам всем домашка: замкнуть этот интерфейс.
И ещё почитайте про автодополнение через выделение.
Хочу ещё рассказать про пару дизайнерских фокусов в новом Зерулсе.
Во-первых, у нас два стиля ссылок: синие для переходов внутри сайта и чёрные-подчёркнутые для уходов наружу. Мы решили не подчёркивать внутренние ссылки, как Википедия. Учитывая, что на сайте нет других цветов, путаницы между ссылкой и не ссылкой не возникнет.
Во-вторых, у сайта нет ни логотипа, ни даже заголовка. Кто бы мог подумать, что так можно? Роль логотипа-заголовка играет поле поиска сверху, в котором написано «Поиск по правилам русского языка». Этот текст работает и как подпись к полю, и как название сайта. Подобные подписи в полях обычно пишут бледно-серым, но мы тут сделали исключение именно из-за второй функции этого текста. Сравните со старым сайтом — там я ещё не догадался, что заголовка можно не делать.
В-третьих, смотрите, как это поле подвисает при прокрутке. В Сафари оно становится матово-прозрачным, но при этом в узкой полоске над полем прокручивающийся текст не просвечивает. Это нелогично, но так красивее.
В-четвёртых, смотрите, как ведёт себя этажик ссылок на Эгею-Раскладку-Главред снизу. При растягивании окна он не тянется, а выравнивается по центру. Но в окне 1024 он левым краем выравнивается строго по левой колонке оглавления. Если бы мы просто оставили так, то при ширине, скажем, 1038, этажик бы «почти, но не совсем» выравнивался с левой колонкой, а это отстой. Поэтому на самом деле он выравнивается с ней строго до некоторой ширины, а после этого уже резко прыгает в центровку. Попробуйте поизменять ширину окна.
В-пятых, поводите мышкой по ссылкам на главной. Обратите внимание, что там непрерывная зона клика, между ссылками нет дыр. Это чтобы Фиттс был доволен.
Наверняка что-то забыл.
См. также страничку о проекте.