Избранное

Позднее Ctrl + ↑

Почему Фотошоп важен для дизайнера интерфейса

В Скетче можно одним кликом скруглить края по-нормальному, а не радиусом. И очень легко сделать матовую поверхность, так как кроме прозрачности там настраивается размытие фона:

Иллюстрация Константина Дубровского

Любить и пользоваться Скетчем — это прекрасно. Прогресс должен идти, рутина должна ускоряться. Но дизайнер, который всерьёз говорит, что Фотошоп теперь не нужен, второсортен.

Эти фичи есть в Скетче, потому что дизайнеры с Фотошопом их придумали.

Пример незамкнутости интерфейса

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

Замкнутость — это что-то вроде математически полной продуманности интерфейса, когда все случаи рассмотрены и противоречия разрулены. Может, не очень удачное слово, но пока такое. Я имею в виду, все пути в интерфейсе ведут в какие-то имеющиеся состояния внутри интерфейса.

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

Давайте вот разберём пример.

Скажем, надо сделать поле с автодополнением. Дизайнер рисует поле и показывает, как работает автодополнение:

А потом где-нибудь в описании пишет:

В поле работает автодополнение. Оно помогает ввести значение, которое ранее уже вводили. Если подходящих значений несколько, подставляет в самом поле самое часто используемое, а снизу рисует выпадайку, в которой можно выбрать из них. Достаточно, чтобы совпало хотя бы одно слово, например если уже вводили «ремонт часов», предлагает этот вариант по «ча».

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

На самом деле их несколько, но разберём главный. Что конкретно будет в поле, когда я введу «ча»? Если автодополнение просто дописывает кусок в конце, то «ремонт часов» в поле никак не может появиться.

Дизайнер уходит думать и возвращается с уточнением в описании:

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

А сейчас видите дыру?

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

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

То есть выпадайки должны как-то по-разному себя вести, что ли, в зависимости от того, в первом ли слове нашлось совпадение? Или в первой выпадайке тоже можно как-то развыбрать?

Вот, например, в первом случае я могу нажать бекспейс, и тогда у меня останется просто «а».

А могу нажать на стрелку вниз, и получится такое:

Так ведь? А что тогда во втором случае, если нажать на стрелку вниз, будет?

Так что ли?

Но это же странно. Он мне как бы с двух сторон дописал, но при этом с одной стороны предвыделил, а с другой нет. И сейчас если нажать бекспейс, уже не останется исходный текст. А могу ли я нажать стрелку вверх, и что при этом произойдёт, вернётся ли «ча» или останется «ремонт ча»? А если я стрелку влево нажму, выпадайка останется или пропадаёт?

Тут дизайнер перестаёт писать описание и начинает латать дыры на лету. Говорит, «давай в этом случае сделаем, чтобы бекспейс стирал всё дописанное и возвращал исходное „ча“, и стрелка вверх тоже».

Но такой патч ничего не замыкает, а только сильнее размыкает. Теперь у нас появляется какое-то особое состояние интерфейса, когда бекспейс работает не как обычно. И надолго ли это состояние сохраняется? Например, если я введу „с“, будет ведь вот так:

И это согласно исходному описанию, безо всяких поправок — ведь сейчас уже начало введённой строки совпадает с началом единственного подходящего варианта, и выпадайка не нужна. Но посмотрите ещё раз на предыдущую картинку. Какого хрена там делала выпадайка в точно такой же на вид ситуации? И почему выпадайка пропала при вводе буквы „с“? Уже совсем трудно предсказать, что сделает бекспейс. Помнит ли он ещё, что слово «ремонт» тут «ненастоящее»?

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

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

Я на этом возьму паузу, а вам всем домашка: замкнуть этот интерфейс.

И ещё почитайте про автодополнение через выделение.

Второе издание правил русского языка

Запущена вторая версия сайта «Зерулс» — лучшего веб-издания правил русского языка.

Вместе с Вадимом Юмадиловым мы сделали новый дизайн. Аня Данилова нарисовала прекрасные знаки параграфов. А Виктор Корейша всё сверстал и запрограммировал:

Под капотом по-прежнему умный поисковый движок, который мы с Романом Парпалаком сделали в 2010 году (с ума сойти, как давно это было).

Пользуйтесь на здоровье.

Приём кредитов
Фотография Романа Баранова

Ссылки на всех, у кого есть куда:

На Аню некуда поставить ссылку, поэтому ей просто большое спасибо.

Смотрите также страничку проекта.

Ну и заодно напоминаю, что работает приложение «Зерулса» для Айфона, которое мы сделали с Шуриком Бабаевым.

Обработка фотографий

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

Вот просто пример того, как фоточка становится веселее от нескольких действий в Лайтруме (это остановка в аэропорту Стокгольма).

Было:

Стало:

Не вижу никаких причин не делать лучше.

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

Жуэль-про

Жуэль-про

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

Вы можете подумать, что для этого пришлось писать гору Джаваскрипта. Но на самом деле нет, просто я использую новый Жуэль-про. Гору Джаваскрипта пришлось писать Жене Лазареву, который запрограммировал Жуэль-про. А мне осталось только воспользоваться новым супермощным декларативным АПИ, которое мы придумали.

Рассказываю.

Если вы использовали Жуэль, вы знаете, что чтобы вставить на страницу аудиоплеер, достаточно просто поставить ссылку на МП3-файл и дать ей класс jouele:

<a href="ilya-birman-use-me-mix.mp3" class="jouele">
  Илья Бирман: Юз ми
</a>

Но что, если рядом с плеером стоит обложка, и я хочу, чтобы микс начинал играть по клику в обложку? С Жуэлем-про это делается так:

<img
  src="cover.jpg"
  class="jouele-control"
  data-type="play-pause"
/>

Теперь в обложку можно кликать, и микс заиграет. И запаузится, если кликнуть ещё раз.

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

<tr class="jouele-control"
  data-type="seek" data-to="0:45:38"
>
  <td>0:45:38</td>
  <td>Tensal</td>
  <td>Achievement 3</td>
</tr>

Теперь клик в эту строчку таблицы будет перематывать микс куда надо.

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

img.jouele-is-playing {
  outline: rgba(255, 255, 255, .2) 10px solid;
}

Всё! Жуэль-про сам даёт класс jouele-is-playing своим элементам управления во время воспроизведения, поэтому подсветка просто работает независимо от того, как именно я включил музыку — из плеера, обложкой или вообще клавиатурой. Мне снова не нужен Джаваскрипт.

И точно так же работает подсветка активной строчки в плейлисте. На самом деле ХТМЛ-код каждой строчки выглядит не так, как я показал выше, а вот так:

<tr class="jouele-control"
  data-type="seek" data-range="0:45:38...0:48:55"
>
  <td>0:45:38</td>
  <td>Tensal</td>
  <td>Achievement 3</td>
</tr>

То есть строчка не только перематывает в определённую точку, но ещё и соответствует некоему отрезку. Чтобы она подсветилась, снова достаточно только ЦССа:

tr.jouele-is-within {
  background: rgba(255, 255, 255, .2);
  color: #fd0093;
}

Всё! Жуэль-про сам даёт класс jouele-is-within своим элементам управления, соответствующим диапазону, когда позиция воспроизведения находится внутри этого диапазона.

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

.jouele-is-interactive {
  cursor: pointer;
}

Если плееров на странице несколько, то элементы управления управляют тем, который играет или играл последним. А если такого ещё нет, то запустит первый на странице. Чтобы привязать к конкретному плееру, есть data-href:

<img
  src="cover.jpg"
  class="jouele-control"
  data-type="play-pause"
  data-href="ilya-birman-use-me-mix.mp3"
/>

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

Жуэль-про стоит 1890 рублей на один домен. Обычный бесплатный Жуэль доступен как раньше.

Что посмотреть:

Рабочая неделя в Израиле

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

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

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

«Шаббат шалом» (буквально: «суббота мир») — это не столько приветствие субботы, сколько пожелание хороших выходных. В четверг, уходя с работы, люди говорят друг другу «Шаббат шалом». Ни разу не слышал, чтобы «шаббат шалом» кто-нибудь кому-нибудь сказал в сам шаббат.

Большинство магазинов и кафе в шаббат не работают. Это бы ещё полбеды, но не работает и общественный транспорт (кроме Хайфы).

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

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

Ближайший супермаркет закрывается в пятницу в 18:30 и открывается обратно в 18:30 в субботу. Одна из хороших кофеен, «Нахат», работает каждый день с утра и до 22, но в пятницу — до 18. То есть их нисколько не смущает работа в субботу, но вечер пятницы — это святое. Подобное же расписание у соседней аптеки. А другая кофейня, «Кафеликс», в субботу закрыта весь день, а в пятницу официально работает до 15:30. Но вчера меня оттуда выгнали около трёх, объяснив, что щас зима и шаббат наступает раньше.

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

В результате пятница, суббота и воскресенье — это такая зона неопределённости. Перед тем, как куда-то пойти, нужно посмотреть расписание, и оно ещё может оказаться неверным, «потому что зима».

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

Только с транспортом засада. Так что если вы планируете съездить в Израиль, постарайтесь прилететь и улететь не в шаббат, а то из аэропорта и в аэропорт вы сможете доехать только на такси (где-то по 2,5 тысячи рублей в одну сторону) — поезда не ходят с середины пятницы до вечера субботы.

Своя расцветка кода в Эгее

Заметка обновлена 9 янв 2020

Я обещал рассказать, как поменять цветовую схему для подсветки кода в Эгее.

Начнём с примера. Комплектная тема оформления «Дуглас» использует цветовую схему Tomorrow Night Eighties, нестандартную для Эгеи. Посмотрите в её файл стилей: .../themes/douglas/styles/main.css. В его конце есть несколько правил с префиксом hljs-. Они и определяют подсветку кода.

Чтобы сделать свою расцветку кода, нужно сделать новую тему оформления. Достаточно скопировать папку той темы, которую вы используете, и дать новой теме уникальное название в файле theme-info.php. Теперь переключите тему в «Настройке» и напишите в main.css любые свои правила по аналогии с «Дугласом».

Для подсветки кода у меня используется библиотека «Хайлайт» Ивана Сагалаева, которая включает целую кучу разных популярных цветовых схем (там слева можно примерить к разным языкам). Если вам лень сочинять свои цвета, вы можете просто прикрутить какую-нибудь из этих схем, взяв её ЦСС-файл с Гитхаба и вставив его в конец своего main.css. Ну или взять и докрутить по вкусу.

Станция «Кунгстредгорден» стокгольмского метро

В прошлой части смотрели на станции «Текниска хёгсколан» и «Унивешитетет» (Tekniska högskolan, Universitetet).

Последняя станция, которую я хотел показать — «Кунгстредгорден» (Kungsträdgården). Это конечная синей линии в центре:

Красота:

На каменных стенах тут аж вот такие горельефы (или что это):

Стены влажные, а местами прямо видно, как вода течёт:

Имеется мох:

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

Полосатые ленточки повсюду:

Скамейки:

Компас:

Штуки на путевой стене:

Выход в город:

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

Фотографии из поездки в июне 2016 года. Во всех заметках про путешествия снизу есть поиск дешёвых авиабилетов. Слетайте в Стокгольм!

Про Стокгольм будет ещё разное, но с метро у меня на этом, наконец, всё.

Ещё стокгольмское метро:

Станции «Текниска хёгсколан» и «Унивешитетет» стокгольмского метро

В прошлой части смотрели на станции «Т-Централен» и «Стадион» (T-Centralen, Stadion).

Следующая станция красной линии после «Стадиона» — «Текниска хёгсколан» (Tekniska högskolan):

Яблоко:

Кратер:

Слои чего-то там:

Следующая станция — «Унивешитетет» (Universitetet):

Куда ведут двери — неизвестно:

Буквы на плитке:

Ещё цвета:

Эскалаторы:

Идёт:

Фотографии из поездки в июне 2016 года. Во всех заметках про путешествия снизу есть поиск дешёвых авиабилетов. Слетайте в Стокгольм!

Продолжение

Ещё стокгольмское метро:

Станции «Т-Централен» и «Стадион» стокгольмского метро

В прошлой части смотрели на станцию «Родхусет» (Rådhuset).

Следующая станция — «Т-Централен» (T-Centralen). Это синяя линия:

Переход:

Эскалатор:

Платформа:

Компас:

Развилка:

Теперь красная линия. Станция «Стадион» (Stadion):

Эту фотку вы уже видели в заметке про поезда:

Красота:

Штучки:

Штуки на стенах. М:

Стрелка влево:

Стрелка вправо:

Самая красивая штука:

Фотографии из поездки в июне 2016 года. Во всех заметках про путешествия снизу есть поиск дешёвых авиабилетов. Слетайте в Стокгольм!

Продолжение

Ещё стокгольмское метро:

Ранее Ctrl + ↓