Я собирался опубликовать заметку о ВВДЦ—2016 два года назад, но забыл. Я собирался опубликовать заметку о ВВДЦ—2017 год назад, но поленился. А теперь уже прошло ВВДЦ—2018, так что опубликую всё вместе. Если вам влом читать длинную заметку, то посмотрите хотя бы доклад 803 с ВВДЦ-2018, про анимации на десятом Айфоне.

Начнём с того, что ВВДЦ — недельная эпловская конференция, а не только доклад о новых продуктах, с которого она начинается. Кроме этого главного доклада (Keynote) там проходят ещё десятки других докладов о технологиях, дизайне, маркетинге и чёрт знает чём ещё. Поэтому после завершения недели ВВДЦ имеет смысл поставить приложение ВВДЦ из Апстора и посмотреть видосы всего, что покажется интересным.

Обязательная программа

На любой ВВДЦ я обязательно сначала смотрю вот эти доклады, которые проходят каждый год. Здесь ссылки ведут на 2018:

101. Keynote. Это то, что смотрят все. Тим Кук, анонсы для журналистов, все дела.

102. Platforms State of the Union. Это такой продвинутый кейноут. Тут рассказывают о том, какие новые фичи для разработчиков появились на всех платформах и как прикрутить к своим приложениям те новые штуки, о которых рассказали в главном докладе. В некоторых старых ВВДЦ это ещё называлось Platforms Kickoff.

209. What’s New in Cocoa for macOS. Раньше это просто называлось What’s New in Cocoa. Детально про всё новое в Макосе. В прошлом году из этого я узнал, что в Хай-Сьерре дали пользователю перетаскивать несистемные элементы правой стороны меню. В этом году было интересно про новый тёмный режим, который появится в Мохаве.

202. What’s New in Cocoa Touch. В этом году важно про Siri shortcuts. А вообще это про всё новое в Ай-ОСе.

Если вы разрабатываете для часов или ТВ, имеет смысл так же смотреть сессии What’s New про эти платформы.

ВВДЦ—2016

Самое интересное для меня:

403. Swift API Design Guidelines. The Grand Renaming. Это самая клёвая сессия, про дизайн АПИ:

712. Working with Wide Color. Посмотрел, чтобы быть лучше готовым к светлому будущему, когда основы перевернутся и в вебе тоже. Сколько же всего приходится взорвать в системе, чтобы поддержать другую цветовую модель!

701. Introducing Apple File System. A snapshot of the next generation in storage. Давно жду новую файловую систему, поэтому было интересно. Снэпшоты кайф, должны сильно улучшить тайм-машину, а ещё, вероятно, сделают возможным лёгкую реализацию многопользовательскости на айпадах.

Ещё разное:
208. What’s New in watchOS 3. Много интересного про дизайн и для дизайнеров. Порадовала идея вместо прогрессбара («делаем...») показывать галочку («задание принято!»), чтобы дать человеку спокойно опустить руку. Я потом про это рассказывал в каких-то своих докладах про обратную связь.

217. Introducing SiriKit. Hey Siri, say hello to apps. Было интересно, как оно спроектировано. Плата за простоту подключения — негибкость. Ни к Ангстрему, ни к Правилам русского языка, например, не прикрутить.

705. How iOS Security Really Works. Интересно для общего развития. Чувак порадовал: «Злоумышленники устанавливают на ваши телефоны кейлоггеры, шпионские программы, неотключаемую рекламу. Откуда мы это знаем? Мы это видим на других платформах».

ВВДЦ—2017

Самый запомнившийся доклад:

803. Designing Sound. Очень клёво! Чувак играет на живых инструментах рингтоны Айфона. Самый любимый момент — про звук уведомлений на часах:

Остальное:
823. Designing Glyphs.

802. Essential Design Principles. Ну прям почти по темам моей интерфейсной книги, начиная с человечности. Потом говорит о взгляде новичка, обратной связи, visibility (у нас более глубокая тема «Информативность»), consistency (у нас есть темы «Последовательное волшебство» и «Привычка»), теория близости и группировка (у нас это одна тема). Порядок, в котором он говорит о принципах, довольно случайный, а примеры — суперабстрактные. Лучше приходите на мой курс или подписывайтесь на книгу!

503. Introducing HEIF and HEVC. Подробно про новые форматы видео и картинок: почему они лучше, как система их поддерживает, как обеспечивается совместимость. Интересно для общего развития.

301. Introducing the New App Store. Подробно про большой редизайн Апстора.

715. What’s New in Apple File System. Как эплы незаметно и без проблем заменили файловую систему миллионов дивайсов.

815. How to Pick a Custom Font.

ВВДЦ—2018

Самое классное не про дизайн:
223. Embracing Algorithms. Очень понравилось. Обязательно смотреть всем программистам. Мне в работе, к сожалению, иногда попадались программисты, которые не хотели искать красивое решение задачи, разбираться в математике и физике, оптимизировать. Хотя ведь это и есть работа программиста, и если ему это не в кайф, то непонятно, что он делает в этой профессии.

703. Introducing Create ML. Как можно использовать машинное обучение в ваших программах. Рекомендую дизайнерам смотреть, чтобы понимать, что, оказывается, уже можно довольно легко делать, вовсе не будучи Гуглем или Яндексом (классифицировать фоточки и текст, например).

Самое классное про дизайн:
803. Designing Fluid Interfaces. Докладывает чувак, который дизайнил анимации для 10-го айфона. Разбирает по косточкам, показывает в слоумо. Когда я купил десятку, я сам очень долго пытался разобраться в том, что там происходит, а тут супернаглядно. Просто кадр:

801. The Qualities of Great Design. Интересно про самое понятие «качество» и про то, почему мы ценим качественное. А отдельно интересна сама форма доклада: девушка назадавала вопросов коллегам, ставит аудиофрагменты их ответов и комментирует. Зачем-то поставила два пробела между словами:

210. Introducing Dark Mode. Всё про новый тёмный режим: как подбираются цвета, как рисуются темы, как адаптируются иконки. Тёмный режим — это не просто инверсия светлого, там вообще всё по-другому.

218. Advanced Dark Mode. Более задротская версия предудыщего доклада.

Остальное:
239. Designing Web Content for watchOS. Вотч-ОС 5 научится показывать веб-странички на часах. Короткое видео о том, как к этому подготовиться.

804. The Life of a Button. Довольно занудный доклад про то, о чём нужно думать, когда дизайнишь кнопку. Но правда в том, что обо всём этом действительно нужно подумать.

811. Presenting Design Work.

233. Adding Delight to your iOS App. Не рекомендую. Добавил в список, потому что вас, как меня, могло подкупить название. Я ожидал, что там будет что-нибудь про клёвые анимации или звуки. А там про какие-то фичи типа использования внешнего экрана по Эйрплею. Лучше смотреть 803, короче.

713. Introducing Natural Language Framework. Можно научить программу понимать разное про текст: тему, настроение, упомянутые объекты и всё такое.

См. также заметку о докладе с ВВДЦ-2015 о новых системных шрифтах.

В поездках я много снимаю на фотик (у меня Фуджифильм X-T1). Проблема с фотиком в том, что чтобы на него получилось хорошо, нужно постараться всё правильно настроить. Особенно трудно снимать на улице днём — что-нибудь обязательно будет пересвечено. Где-нибудь между деревьями проступит абсолютно белое небо, которое потом ничем не спасти.

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

Производителям фотиков слабо сделать настолько же крутой софт, как у Эпла, чтобы само собирало хороший ХДР. Но мне бы хватило ровно одной, очень тупой фичи: «Никогда не пересвечивать». Где-то в угол кадра попало светлое небо? Отлично, уменьшай выдержку настолько, чтобы это небо стало нормальным, даже если всё остальное станет очень тёмным.

Вот фотка, которую я сделал в Хитроу, убавив свет:

Видите, за окном видно небо, облака? Если бы я дал фотику снять на автомате, он бы снял намного светлее, и небо было бы просто тупо белым. А мне надо, чтобы фотик на автомате снимал так, как снял я.

Конечно, на первый взгляд фотка выглядит плохо: внутри терминала очень темно. Но это снято на фотик, а не на Айфон — всё тёмное можно легко вытянуть в Лайтруме:

И я вот думаю. Вроде это настолько очевидно полезная и простая в реализации фича, что, может, я просто не знаю, а она есть? Как это может называться на языке фотографов? В каком меню можно поискать?

Кстати, у последней фотки ещё другой дефект. Из-за использования электронного затвора, она вся в полосах. Хорошо, что я увидел проблему сразу и переснял с механическим затвором:

После пары кликов в Лайтруме:

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

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

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

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

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

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

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

Когда кто-то заявляет благородную цель («Мы должны остановить войну!»), следите внимательно за тем, сам ли заявитель будет её реализовывать, или эта честь будет предоставлена кому-то другому, чьего мнения не спросят.

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

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

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

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

Вернёмся к Стокгольму.

Уличные таблички там такие:

1

2

3

Чтобы быть красивой, табличке совсем необязательно быть навороченной и дорогой.

4

5

6

7

8

9

Бывают не только гатаны, но и гранды:

10

11

12

13

Мост:

14

Не знаю, что:

15

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

Ещё Стокгольм:

• Вокзал и остановки
• Аэропорт и связь с городом
• Всё про метро (по ссылкам «Продолжение» пройдёте все заметки)
• Голосовые объявления в метро
• Шведское чтение

Ещё уличные таблички:

• Лондон (восемь частей)
• Берлин
• Штутгарт
• Киев

Я родился и прожил 33 года в Челябинске. Это город, в котором проспект Ленина, площадь Революции, улица Кирова; Центральный, Калининский и Тракторозаводский районы. Поэтому мне очень нравятся города с нормальной топонимикой. Уже за одно наличие Тверской улицы к Москве можно испытывать нежность. Я уж молчу про такое счастье, как Гороховая улица в Питере. Гороховая! Это невозможно в Челябинске. Самая более-менее нормальная улица на весь Челябинск — это Солнечная (она находится в жопе).

А в Лондоне что?

Во-первых, мне очень нравится, что целая куча улиц не имеют никаких родовых слов типа «улица» или «переулок»: Piccadilly, Pall Mall, The Mall, Haymarket, Strand, Broadway, Whitehall, Knightsbridge, Aldwych, Holborn, Moorgate, Cheapside, London Wall. Про это явление стоит ещё отдельно как-то поговорить, конечно.

Во-вторых, сами родовые слова удивительно многообразны. Кроме названий в сочетании с понятными всем словами типа street, avenue, road, drive или square может встретиться какой угодно walk, way, yard, court, lane, terrace, passage, gate, place, hill, gardens, mews, crescent и любые их сочетания (Hyde Park Gardens Mews, Berkeley Square Gardens).

В-третьих, как можно не радоваться названиям некоторых станций метро? Скажем, Бейкерлоо-лайн (коричневая) ходит по маршруту Elephant & Castle — Harrow & Wealdstone. Так называются станции. «This is a Bakerloo line train for Elephant & Castle», прям объявляют. Другие прекрасные названия станций: Angel, Temple, Monument. Ну и ещё Лондон — это город, где как ни в чём не бывало есть такие станции метро как Wimbledon и Greenwich.

См. также:

• Уличные таблички Лондона

В 2007 году я выпустил трек «Линкс» (прогрессив-хаус). У меня новая версия, с чуточку подтянутым звуком:

Для сравнения, как было:

Разница не настолько велика как при переделке «Карго» — «Линкс» сразу получился довольно чистым и звонким. Но всё-таки стало лучше. Особенно заметно на инструменте, которым играет основная тема (типа колокольчики) — он стал звучать ярче. Послушайте с 5:26 в обоих вариантах.

Обложка тоже претерпела ремастеринг.

В английском можно оставлять предлог без слова после него:

What are you talking about?
Where do you come from?

Предложение не обязано быть вопросительным:

London is the city I want to go to.
The review she insisted on has not been conducted.

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

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

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

Но главное в вашем случае — сделать так, чтобы страница рассказывала о, и показывала пользу валенок.

Так по-русски не бывает. Но я всё равно написал.

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

Но главное в вашем случае — сделать так, чтобы страница показывала и рассказывала о пользе валенок.

Но это не работает: мы всё равно считаем предлог частью дополнения («о пользе»), и воспринимаем однородные сказуемые как относящиеся к нему в равной степени. Получается «показывала о пользе». Именно для того, чтобы так не получалось, и чтобы подчеркнуть, что предлог относится только к одному из сказуемых, я и ставлю их в том порядке, в котором ставлю:

Но главное в вашем случае — сделать так, чтобы страница рассказывала о, и показывала пользу валенок.

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

Если посмотреть на это шире: отступления от правил, которые увеличивают выразительные возможности языка, я приветствую.

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

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

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

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

Меню в каждой программе в одном месте и ведёт себя одинаково — можно дополнительно не подсказывать. Точно так же написанное слово File в другом месте уже никто не воспримет как что-то, что можно нажать. Кнопки передают нажимаемость выпуклостью — их можно поставить где угодно, и человек поймёт. Никакой обратной связи при наведении не требовалось.

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

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

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

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

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

Получается, у нас есть три варианта. Обратная связь при наведении:

1. Отсутствует — объект своим видом однозначно передаёт нажимаемость.
2. Проявляется в самом объекте (подсветка, рамка).
3. Проявляется в курсоре мыши (пальчик, балка).

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

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

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

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

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

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

В предыдущей серии — общее ощущение от Дублина. Там среди прочего были двери:

1

Сегодня посмотрим на двери внимательнее.

2

3

4

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

5

Иногда сочетания не очень:

6

А иногда — очень:

7

8

9

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

10

Не знаю, верить ли легенде — соседние двери порой красят одинаково:

11

12

Ещё фотография из предыдущей заметки:

13

14

Очень красиво:

15

16

17

18

19

20

21

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