Подписка на блог

В Телеграме помимо ссылок на заметки делюсь околодизайнерскими наблюдениями.

В Твиттере помимо ссылок на заметки пишу всякую чушь.

В Тумблере и Же-же есть автоматические трансляции. Если не работает, напишите мне: ilyabirman@ilyabirman.ru.

По РСС и Джейсон-фиду трансляции для автоматических читалок

Айфон

Что почитать на выходных — 165

Вот:

  1. Designing Hebrew Type.
  2. Reachability by overscrolling. Написал в английском блоге о том, как делать интерфейс для Айфона ещё лучше.
  3. Software 2.0. Нейросети — это не просто ещё один инструмент в арсенале программиста, а вообще другой вид софта.
  4. Как объяснить дедушке веб-аналитику за 5 минут с картинками.
  5. «Я вижу в сети много эмоциональных комментариев на мою критику экономической программы Навального». Андрей Мовчан сильно про Навального.

Хотите стать спонсором рубрики? Пишите: ilyabirman@ilyabirman.ru

Неделя с десятым айфоном

10-й Айфон — кайф.

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

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

Бывает, проснёшься утром и читаешь что-нибудь, и тут срабатывает будильник. Теперь телефон видит, что ты на него и так смотришь, поэтому играет звук будильника совсем тихо. Это, конечно, можно было сделать сто лет назад до всякого фейс-айди — телефон и так много знает о том, что я делаю, но всё же. Так к 2027-му году будильник научится не срабатывать, когда я уже проснулся и ушёл в душ. У меня на руке часы и я двигаюсь, не ори, я давно проснулся!

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

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

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

Я ещё не попробовал Эпл-пей с ним (потому что в Израиле никто не знает про современные технологии) но уже понял, что все мои переживания были напрасными. Сейчас в Москве настрою.

Отсутствие кнопки хоум — не проблема совсем. Писали, что нужно два-три дня, чтобы привыкнуть. Я привык просто сразу; не помню, чтобы я хоть раз пытался просто нажать в нижнюю часть телефона. Переключение между программами стало в пять раз проще и быстрее, особенно я тащусь от возможность просто провести слева направо по хоум-индикатору, чтобы перелистнуть в предыдущее приложение.

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

С ОЛЕД-экраном чёрный цвет, наконец-то, по-настоящему чёрный. Читать в полной темноте очень приятно, а интерфейс на чёрном фоне выглядит красивее. К сожалению, правда, не все программы ещё научились использовать чистый чёрный. Например, эпловский Айбукс в режиме чтения на тёмном фоне использует тёмно-тёмно-серый.

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

После 6S-плюс экран не кажется маленьким, а оттого, что сам телефон стал меньше, сплошная радость.

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

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

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

15 декабря   Айфон

Что почитать на выходных — 162

Вот:

  1. Как стать дизайнером. Женя Арутюнов объяснил.
  2. Вероломные методы хедхантинга в соцсетях.
  3. Courage. Марко Армент комментирует форму экрана Айфона 10: «This is the new shape of the iPhone. As long as the notch is clearly present and of approximately these proportions, it’s unique, simple, and recognizable».
  4. Thoughts and Observations on the Products Announced at This Week’s iPhone X Introductory Event. Грубер: «They stopped pursuing Touch ID under the display not because they couldn’t do it, but because they decided they didn’t need it».

Хотите стать спонсором рубрики? Пишите: ilyabirman@ilyabirman.ru

3 ноября   Айфон   дизайн   чтиво

Несколько мыслей про фейс-айди

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

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

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

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

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

Конечно, это должно приехать на ноутбуки скорее тоже.

Ещё есть ощущение, что я даже близко не могу представить, что это штука вообще сможет делать через пару лет.

Телеграм за неделю 11—15 сентября 2017

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

Понедельник, 11 сентября

Илья Страйков показывает невероятно красивую неведомую панель управления:

Смотрите, мы опубликовали карты Московского марафона и других забегов серии:
http://bureau.ru/projects/moscow-marathon/

Обязательно идите смотреть в ведро (кажется, одно из самых длинных на сайте). Начало всегда смотрится особенно страшно:
http://bureau.ru/projects/moscow-marathon/recycled/

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

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

Вторник, 12 сентября

Номер дома можно написать вот так:

Читатель Антон Репушко: «Привет. По поводу номеров домов: так уже делают где-то в России. Не знаю, что за город на фото» —

Ну, не совсем так, конечно. Но тоже можно.

В сегодняшнем совете про транспортные схемы расказываю штуку про планирование маршрутов:
http://bureau.ru/bb/soviet/20170912/

При этом забыл рассказать Александру, что у него прикольное обозначение парков:

Новости веб-дизайна. Эпл осознал, что прокрутка круче карусели, и выпустил нормальную главную страницу:
https://apple.com/

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

Но вот во всяких таких штуках я не был уверен до презентации:

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

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

О, спасибо всем, кто прислал картинку. Я вот эту имел в виду:

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

Надеюсь, к Ай-ОСу 12 сделают редизайн статус-ушей такой, чтобы смотрелись получше.

Ещё картинка:

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

Бонус: видимо, на Айфоне 10 нельзя включить отображение батарейки в процентах. Отлично! А что с остальными индикаторами? Я пока не знаю, но геолокацию, например, можно показывать вместо сигнала, когда она используется. Блокировку поворота можно и не показывать. Блутус должен быть просто всегда включён, и нефиг это показывать.

А вот другая картинка, которая кажется ещё более странной:

Это кадр из видоса Эпла, где они объясняют, как горизонтальным приложениями себя вести (тут речь о полях слева и справа, чтобы текст не подлез под выкус). Тоже сначала кажется, что пипец. Самое некрасивое тут — это как верхняя полоска отрезается скруглениями. Хочется её сделать побольше в высоту, и тогда вроде будет окей.

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

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

Читатель Иван Акулов: «А это в новых айфонах ты видел, кстати?».

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

Воскресенье, 17 сентября

Студия Лебедева издала книгу Пола Рэнда «Искусство дизайнера» (я не читал):
https://www.artlebedev.ru/izdal/iskusstvo-dizaynera/

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

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

Читателю этот излом в абзаце на правой странице в теории должен говорить «это продолжение текста из левой страницы». На практике же он говорит «у верстальщика руки из жопы».

В Студии Лебедева верстальщики в сто раз круче, чем я, разумеется, и об их профессионализме вообще речь не идёт. Но просто следование этой нелепой традиции приводит к фиговому результату.

Как быть? Есть два железобетонных варианта.

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

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

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

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

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

Выглядит так:

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

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

После заголовка абзацу тоже не нужен выкус, только после абзаца (p):

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

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

Теперь я понял, что я бы хотел, чтобы архив телеграма оставался у меня в блоге. Хорошо бы, чтобы в каждый воскресный вечер выходила заметка. Ну или раз в две недели, если неделя выдалась не очень активная. Собирать такую заметку регулярно мне некогда. Если вы вдруг готовы вечером воскресенья приносить мне заметку, чтобы я просто опубликовал, напишите, пожалуйста. Я вам расскажу, как всё делать. И да, я бы опубликовал задним числом более ранние недели тоже.

Прицеливалка в мобильном веб-инспекторе

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

Прицеливалка в мобильном веб-инспекторе

Когда наводишь на что-то в веб-инспекторе —

Прицеливалка в мобильном веб-инспекторе

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

Прицеливалка в мобильном веб-инспекторе

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

Прицеливалка в мобильном веб-инспекторе

Если на неё нажать (Шифт-Комманд-C), потом можно кликнуть в нужный элемент на самой странице, и тогда в инспекторе покажут именно его.

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

Долина монументов 2

На ВВДЦ вышла новая «Долина монументов» — это самая прекрасная компьютерная игра в мире. Я её прошёл и наскриншотил по пути:

Долина монументов 2

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

2017   Айфон   дизайн

Переворот в мобильном интерфейсе

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

Переворот в мобильном интерфейсе

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

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

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

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

Переворот в мобильном интерфейсе

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

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

Переворот в телефонном интерфейсе

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

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

Переворот в мобильном интерфейсе

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

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

Переворот в мобильном интерфейсе

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

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

Поддельный интерфейс не катит

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

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

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

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

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

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

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

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

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

Андроид:

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

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

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

Описания обновлений Альфа-банка для Айфона

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

Особое место среди шутников занимает Альфа-банк.

Описания обновления Альфа-банка для Айфона

Их описания не просто не смешные. Они беспомощно, нелепо тупые. Знаете, бывает, рядом с вами незнакомый человек себя настолько глупо ведёт, что вам самому за него стыдно становится? Вот примерно такие чувства я испытываю, читая эту хренотень.

Альфа-банк, не позорься, это же дичь запредельная.

2017   Айфон   идиоты
Ранее Ctrl + ↓