У меня ещё одна схема московского метро — Наносхема 2.0. Ну, что поделаешь.

Вторая версия наносхемы адаптирована для Эпл-часов:

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

Чтобы установить, надо сохранить картинку на Айфон и включить ей сердечко:

Сильно нажать на часы, чтобы вылезла настройка циферблата, добавить циферблат «Фото», выбрав в нём эту картинку, потом снова зайти в настройку циферблата, переместить часы вниз и настроить компликейшены на свой вкус:

Снизу ещё остаётся строчка для большого комликейшена типа следующей встречи или играющей песни.

Ещё если пропустили, на днях обновилась основная большая схема метро и появился в продаже её новый плакат.

Недавно писал, что вылечить текст от капслока — стандартная фича любого текстового поля на Маке. Мне пишут: «Да, но в Пунто-свитчере это можно повесить на сочетание клавиш!».

Ребят, ну вы чё.

На Маке любую команду меню можно повесить на сочетание клавиш. Идём в настройку системы, открываем клавиатуру:

Видите у меня тут настроено, чтобы выход из браузеров был не по комманду, а по контролю. Это чтобы случайно не закрывать. А ещё настроены Гугль-доковские сочетания клавиш на стили текста в Ноутсах (не понимаю, как можно это мышью делать).

Короче, добавляем всем приложениям команду «Make Lower Case» (или как это будет по-русски, если вы мазохист и используете русский язык системы) и ставим любое сочетание клавиш:

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

Тут у некоторых может возникнуть вопрос: как я снял последний скриншот в режиме ввода сочетания клавиш? Почему ⇧⌘4 не вписалось в поле? Ребят, ну вы чё. Есть же программа Grab для этого. Встроенная, да.

Когда я выпустил в сентябре обновлённую схему метро с Окружной линией — вам она известна под дебильным названием МЦК — я поленился сделать ПДФ-версию и не обновил плакат. С тех пор открылись новые станции Люблинской и Солнцевской (на днях) линии.

Я добавил станции и сделал новый плакат:

Плакат 60 × 75 см (по ширине как экран 27-дюймового Аймака) на «Принтдиректе» за 890 ₽:
Пойти купить

Ну и на странице о схеме в портфолио добавилось ПДФ для скачивания — если вдруг хотите сами себе напечатать. За подготовку ПДФ большое спасибо Илье Харитонову.

Ссылки по теме:

• анонс пятой версии схемы в блоге;
• о Боровицком саде имени Арбатской;
• про изгибы линий;
• про чёрно-белые схемы и проблемы дальтоников.

Это самая внятная схема московского метро. Пока всем остальным так слабо.

Назрела необходимость переворота в мобильном интерфейсе.

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

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

Спрашивается: нафига ставить кнопки наверх, а потом придумывать костыли, если можно сразу их поставить снизу?

На Виндоус-фонах адресная строка браузера снизу:

Правда, там непонятно: на половине скриншотов всё-таки сверху. Эпл, когда сделаешь так же?

Интересно, что переворот уже коснулся приложения «Карты». Было-стало:

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

В Сейви (умный диктофон) мы тоже заморочились, чтобы важное прибивалось к низу. Пара промежуточных макетов:

Сначала управление записью жило наверху (слева). Потом плей переехал вниз (справа).

Но в итоге вообще весь интерфейс стал стремиться к низу:

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

Правило: в мобильных интерфейсах важные элементы управления ставьте вниз.

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

Edit → Transformations → Make Lower Case:

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

Вспомнить хотя бы мою заметку Ускорить клавиатуру на Маке, за которую меня лично поблагодарили десятки людей. Или совет отключить «Капслок».

Веб-приложения состоят из фронтенда (того, что работает у пользователя в браузере) и бэкенда (того, что происходит на сервере). Эти части разрабатывают с разной скоростью. Если при создании браузерной части сервер недоступен, разработчик обычно сильно ограничен.

Я сделал интерфейс для второй версии Мимика — инструмента веб-разработчика для имитации ответов сервера. Можно работать, как будто сервер доступен. Настроить поддельный ответ («мок») очень легко. Например, вы хотите сделать вид, что сервер ответил строчкой джейсона:

Можно настроить навороченные моки, с хитрыми ХТТП-заголовками, задержкой и чем угодно ещё:

Кайф Мимика в том, что не нужно даже поднимать локальный сервер или менять урлы в своём приложении. Он работает прямо с тем, что есть, прямо в браузере. Но даже расширения браузера не нужно, он подключается просто как скрипт к приложению.

Подробнее об интерфейсе — на странице проекта.

Главный секрет всех дизайнерских правил — их не обязательно соблюдать, но обязательно понимать.

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

Это какие-то дворы. Кайф их в том, что они очень рельефные: какие-то части сильно ниже или выше. Из-за такой «неприступности» там очень мало машин.

1

2

3

4

5

6

7

8

9

10

11

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

Это в первую очередь для студентов Школы стажёров, но вообще для всех.

Начинающие дизайнеры интерфейса порой рисуют подделки:

Вот что это за батарейка в ПВУ? Что за поле поиска такое невозможное? В нём всё не настоящее: размеры, углы, тень, расположение иконки и текста.

Или мишень в центре. Откуда она такая? Зачем?

Ещё и от самого телефона тень куда-то вбок падает.

Другой вариант:

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

Тут сам телефон поддельный:

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

Андроид:

В Андроиде я меньше понимаю, но шрифт точно поддельный, да ещё и порендерен чуть ли не на Виндоусе с «Клиртайпом». И поиск на Андроидах выглядит не так.

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

Ещё студентам:

• Почти, но не совсем (к последней картинке относится в полной мере)
• Не используйте Мирьяд-про
• Дизайнеры, рисуйте клавиатуру на айфонах
• Продолжение полуовала у знака рубля
• Как подчеркнуть ссылку пунктиром

Я обрабатываю фотографии в Лайтруме и слабо ориентируюсь в этой части Фотошопа. В Лайтруме чинить баланс белого просто: тыкаешь в серую, на твой вкус, область картинки, и он правит цвета всей фотки. Меня всегда удивляло отсутствие аджастмента White Balance в Фотошопе.

В общем, оказалось, что это умеют делать обычные кривые. Есть у вас, допустим, слишком жёлтая фотка будапештской кофейни «Мадал»:

Кладём над слоем кривые:

Берём там вот эту пипетку:

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

Было-стало:

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

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