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

В Сити таблички такие:

Чёрная рамка, герб и ленточная антиква:

Обещанный виадук:

Лейн:

Флит-стрит:

Силк-стрит:

Слово «авеню» даже близко не значит «проспект». Подворотня может быть авеню. Западное авеню мяса домашней птицы:

Тут реально какие-то мясные ангары. А если повернуть голову чуть левее, там будет клуб «Фабрик».

Бывает ещё вертикальная версия таблички:

В иннах всем пофиг на стандарты табличек, там свои законы. Кингс-бенч-вок в Темпле:

Олд-сквер в Линкольнс-инн:

Не совсем уличные таблички, но для полноты картины. Герб Корпорации Сити (это что-то вроде муниципалитета, но Сити — слишком крутой, поэтому у него Корпорация):

Табличка на Тауэрском мосту:

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

Продолжение: Кемден

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

Проблема

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

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

Голосовые объявления как основной источник информации вообще не катят: я могу быть глухим, а могу (и хочу) быть в наушниках. Их можно просто прослушать случайно — когда тебе их бубнят всю дорогу, это вызывает привыкание. Бегущая строка есть не везде, и это костыль. Разрыв между станцией снаружи поезда и бегущей строкой внутри никогда не позволит доверять ей и воспринимать так же естественно, как просто знакомый вид из окна.

Здесь единственное название, которое могло бы попасться на глаза, скрыто встречным поездом — приходится догадываться по висящим молекулам. Угадай станцию:

В Лондоне название станции написано столько раз, что не увидеть невозможно. Угадай станцию:

В Барселоне градус настойчивости чуть ниже, но всё ещё достаточен. Угадай станцию:

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

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

Вот на некоторых станциях в Москве начали наклеивать наклейки, дублирующие названия на путевой стене:

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

Добавить на видимое место полосы в духе Лондона или Барселоны с повторяющимися названиями — тоже не вариант для Москвы:

Решение

Но это не значит, что проблему не надо решать. Чтобы сделать хорошо, нужно представить, как её решили бы люди, которые проектировали станции изначально.

И тогда получится проект «Умножение»:

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

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

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

Если вас это не пугает, и вы видите возможную пользу в разговоре, буду рад помочь. Пишите: ilyabirman@ilyabirman.ru.

Одно дело поговорить, а совсем другое — сделать. Если вам нужно сделать, приходите в бюро. Лучше нас в этом нет никого.

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

Пассаж (удивительно, что у меня самого его нет, ведь я его знаю):

Пьяцца (мог бы и почётче для сына-то сфоткать, пап):

Только вот эта Пьяцца находится в Сазерке, а вовсе не в Вестминстере, несмотря на совершенно вестминстерский дизайн.

Эпл любит нативные приложения: они быстрее, работают без интернета, лучше взаимодействуют с системой и ощущаются «настоящими». Гугль любит веб-приложения: они не требуют установки, работают на любой ОС и получают бесплатно все фичи браузера.

Но в будущем не будет разницы между нативными и веб-приложениями. Лучшее из обоих миров соединится.

Гугль куда быстрее движется в это светлое будущее, чем Эпл. Такое ощущение, что Эпл даже не врубается, почему нативные приложения — говно. А Гугль врубается в то, что не так с вебом, и помаленьку всё это исправляет. Скорее всего, веб дорастёт до универсальной платформы будущего, а натив постепенно сойдёт на нет.

Производительность и доступ к системе

Нативные приложения быстрее, потому что написаны на низкоуровневом языке и работают с железом более напрямую. А веб — виртуальная машина, в которой всё тормозит (особенно если настал рефлоу).

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

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

Урлы

Урлы — сила веба. Адресная строка в браузере, конечно, умрёт, но урлы намного важнее, чем адресная строка: они уникально идентифицируют (ну лоцируют, ок) ресурс. Это делает возможным ссылки — главный инструмент навигации. Ссылки можно открывать в табах, сохранять в избранное, находить роботами, передавать другу. Нативные приложение ничего такого не умеют, что делает их тупыми как полено.

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

Нативные приложения пытаются поддержать дип-линкинг, но это всё костыли, которым по гибкости и выразительности до веба — как до луны.

Табы

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

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

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

Мне жутко недостаёт табов в Лайтруме, в Айтюнсе, в почте, в Эверноуте. Конечно, может, эти приложения и научатся всё это поддерживать, но если они это будут делать сами, то у каждого будет свой набор ненужных ограничений. Это должна быть забота операционной системы. Кроме того, если Айтюнс и Эверноут поддержат табы, я всё равно не смогу открыть их табами одного окна. А Фейсбук и Википедию могу, и им ничего для этого делать не надо.

Букмарки и история

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

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

Установка

Установка — это типичный пример интерфейса-зла, как регистрация на сайте. Если я просто хочу купить книгу, зачем мне регистрироваться? А если я просто хочу отредактировать картинку, зачем мне ставить Фотошоп? Сегодня этот вопрос может звучать странно, но через сколько-то лет люди правда перестанут понимать смысл этого ритуала «установки программы», это просто пустая трата времени жизни.

На Айфоне вот бесит необходимость держать сотни иконок приложений в папках. Нафига мне приложение Аэроэкспресса, почему я просто не могу купить на него билет, когда мне понадобится, вписав в поиск «Аэро»? Да потому что это тупой натив, работающий на перфокартах, вот почему.

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

Доступность

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

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

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

Работа в офлайне

Конечно, все знают, что вебу нужен интернет, а нативные приложение запускаются и без него. Но последнее время нативным приложениям тоже нужен интернет почти для всего, и их «запускание» мало что даёт без интернета.

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

Но веб-приложения уже почти научились работать без интернета на уровне нативных — посмотрите доклад Джейка Аркибальда про Сервис-воркер (оно и пуш-уведомления умеет!). Гугль уже поддерживает это в Хроме.

Браузеры

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

Тут производители браузеров ужасно, ужасно тупят. Реально, все браузеры — говно. Сколько бы Яндекс ни старался сделать браузер без рамок, он даже «белый экран ожидания» победить не может. А этот белый экран громче любых рамок кричит: «Я голимый веб! Если у тебя сейчас затупит интернет, хрен ты чё получишь!».

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

Операционные системы будущего

В будущем в операционных системах будут просто окна, которые умеют отображать в себе веб-контент и собираться в кучки с табами. Как никто не думает про WindowServer на Маке сейчас, так никто не будет думать, что есть какой-то «браузер». Если ты производитель браузера, то идеальный браузер ты не сделаешь никогда. Надо быть производителем ОС.

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

По мере того, как понятие «браузер» будет умирать, кнопки «назад» и «вперёд» станут неотъемлемой частью любого окна в ОС, как кнопки «свернуть» и «закрыть». Все окна научатся группироваться в табы. Адресной строки постоянно на экране не будет, но будет какая-нибудь выпадаечка, откуда адрес можно будет достать.

Вот тогда заживём.

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

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

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

Всё же, в последнее время стал популярен другой вид автодополнения, когда предлагаемое окончание пишут просто бледным цветом:

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

Сайт «Авито» постоянно обламывает меня своим поиском. Пишешь, например, «сно», он дописывает «уборд», ты жмёшь Энтер, а он ничего не находит по запросу «сно». Классическое автодополнение такой лажи себе бы не позволило.

Контролам нужны годы, чтобы их поведение утряслось и стало стандартом. Пока реализации этого модного варианта отличаются. Нужно делать, чтобы такое автодополнение вело себя в точности как обычное. Подозреваю, что этого можно добиться, оставляя это выделение технически обычным, но своевременно изменяя стиль текстового выделения ЦССом.

В недавнем обновлении Ангстрема мы перешли на такое автодополнение:

Я бы, наверное, ещё год с этим тупил, если бы Шурик не предложил. Смысл не пострадал, а чище стало.

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

Обещанный «маркет»:

Тут под названием места указаны улицы, на которые ведёт эта.

Выходишь на Пикадилли, а там ещё указатель номеров домов:

Редкий экспонат — табличка прикреплена к столбу:

Стрелки:

Ещё вариант двух названий в одном, и заодно обещанная «террас»:

И Ланкастер-гейт, и Альберт-гейт из прошлой заметки называются по воротам Гайд-парка, к которым выходят.

Все эти таблички с лидингом куда-то оформлены по-разному, стандарта явно нет. Тут аж ссылка подчёркнута:

Ещё пара обещанных «плейсов»:

Эта табличка стоит перед двориком с несколькими домами и вдруг перечисляет их номера:

Это уже показывал в рассказе в «Мире». Две стороны улицы называются по-разному:

В чайнатауне не в облом продублировать название иероглифами:

Несколько особенно театральных улиц имею шапку theatreland:

Обещанный «сёркус»:

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

А тут вообще что-то странное:

Табличка Гентон-стрит просто кривая. У Карнаби-стрит конструкция похожа скорее на таблички Холборна или Финсбери, а красный текст City of Westminster сверху (еле видно) набран так, как если бы она висела в Кенсингтоне-Челси.

В следующей серии двинемся в Сити.

Сыграл в четверг двухчасовой сет на «Промодиджее»:

В первой части было что-то поумнее, а во второй — попроще.

0:00:03 Planum: Aspect

0:01:24 В путь

0:06:43 Black & White: Soul (Original Mix)

0:10:00 Audialize: Plasma Glow

0:11:48 Нравится такое

0:15:34 Talpa: Rebirth

0:15:59 Нахально так

0:20:10 Filteria: The Lights of Shibuya

0:22:22 По олдскулу

0:26:24 Arronax: Lightning Bolt

0:29:40 И ещё

0:32:52 The Misted Muppet: The Mist

0:36:56 Slum: Make Rainbow in Your Slum (это мощнейший трек, японский хард-гоа)

0:41:41 Люблю, когда нет разрешения

0:43:00 Intriga: Awake

0:44:20 Прекрасная мелодия

0:49:15 Mystical Complex: Night Light

0:54:08 Красота!

0:55:30 Hypersonic: I Can Feel It (Ilya Birman Edit)

0:56:06 Вот это праздник же какой-то

0:58:51 Гиперсоник эт хиз бест

0:59:57 Не щадит

1:00:24 Sabretooth: Smooth Hound

1:03:25 Сто раз этот трек ставил, и ещё сто раз поставлю наверное за вот этот финал

1:05:05 Subconsciousmind: (Out-In)Side (могучее достижение нью-скула)

1:07:55 Сначала может показаться, что он втупую рубит

1:10:50 Но тут такое...

1:12:48 Ananda Shake: Street Fighters

1:16:35 Романтика

1:19:03 Mitsumoto: Quasar

1:25:26 Theoreme: Less is More (ещё немного нежных прикосновений вместо бочки)

1:30:30 (криво)

1:31:00 Team 18: 9+9

1:32:31 Бесстыжая попса

1:34:58 Совсем бесстыжая попса

1:36:57 Infected Mushroom: Pink Nightmares

1:39:20 Keeping you sane... and you fade away

1:39:23 Just enough, you felt the edge again

1:39:27 You took two pills and you fell asleep

1:39:30 Hugging six rabbits and having pink nightmares

1:41:48 Talamasca & Skazi: Imaginary Friend

1:45:49 Немного отвязной жести

1:46:30 Ananda Shake: Scarface

1:48:40 Пляжный фулон

1:51:09 :-)

1:52:13 (чистенько вышло)

1:52:25 Beat Hackers: Notes Junky

1:56:37 Шесть тактов в квадрате вместо четырёх — круто. Ну и вообще

1:57:47 (очень криво)

1:58:07 Itchy Vibes: Vem Vet Remix

2:02:37 Мёд. Весь сет был ради этого

Иногда делают так:

Фичи:
Вайфай
Батарея на 10 часов
Ретина
Плюшки

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

Заголовку не нужно двоеточие:

Фичи
Вайфай
Батарея на 10 часов
Ретина
Плюшки

Обобщающему абзацу не нужно жирноты:

Фичи:
вайфай,
батарея на 10 часов,
ретина,
плюшки.

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

У нас для вас апдейт Ангстрема — версия 1.4:

Этот апдейт посвящён наведению порядка после не очень удачного 1.3. Мы даже кодовое название не придумали — упорно чинили всё, что сломали.

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

Улучшили ввод. Когда меняешь единицу с «метров» на «Московское время», введённое 3,57 раньше превращалось в 3:34, а теперь превратится в 3:57 (нечего было умничать, так удобнее). 357мск тоже автоматом превратится в 3:57 Москвы. Ещё можно писать 007 без десятичной точки, само превратится в 0,07 или 0:07 в зависимости от выбранной единицы. Меньше тапов — это клёво.

У кого большой Айфон 6 или 6 Плюс, мы теперь используем площадь экрана более толково.

Гривны теперь включены в бесплатный набор единиц.

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

Если вы ещё не используете Ангстрем, то вот кнопка:

Скачать в Апсторе бесплатно