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

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

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

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

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

Айфон

Телеграм за неделю 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), потом можно кликнуть в нужный элемент на самой странице, и тогда в инспекторе покажут именно его.

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

5 июля   Айфон   веб-разработка   лайфхак   Сафари

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Андроид:

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

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

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

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

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

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

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

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

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

2017   Айфон   идиоты

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

Айфону 10 лет:

  1. Ten years of iPhone. Марко Армент: «I don’t expect it to be surpassed in my lifetime».
  2. The Moment of Awe. Дастин Кертис: «The moment of awe occurred when he placed his finger on the screen and flicked it upward».

А также:

  1. Кто здесь главный. Про ругань в дизайнерской среде.
  2. Why violin makers adopted the f-shaped hole.
  3. Павел Кац заказывает цветы. Интересная тема. Все же сейчас думают про разных умных чатботов. А ведь в чате могут быть просто живые люди.
  4. This Russian city says: «Don’t call us Siberia».

Спасибо спонсору рубрики — рассылке «Дизайнерский дайджест».

2017   Айфон   дизайн   чтиво

10 лет Айфону

Трудно себе представить, насколько другим был мир ещё 10 лет и 1 день назад. Кадры исторической хроники:

Если вы вдруг не видели это, то стоит посмотреть, особенно первые минут 15. Даже если вы предпочитаете Андроид, посмотрите, хоть узнаете, откуда он взялся. Лучшая презентация Джобса, из-за которой «аналитики» оказывались «разочарованными» всеми последующими.

См. также: 5 лет Айфону (кажется, вообще вчера было).

2017   Айфон   видео   Эпл
2016   Айфон   видео   реклама

Пожелания к ВВДЦ-2016

Значит, чего я хочу от Эпла завтра.

Хочу, чтобы они рассказывали о том, как всё, что уже есть, стало работать лучше, а не о том, сколько новой хрени они наворотили.

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

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

С Мак-ОСом — примерно так же. Хочу, чтобы починили всё то, что поломали за последние годы. Говорят, что систему переименуют в macOS (по аналогии с iOS, tvOS и watchOS). Это жопа. Надеюсь, что всё-таки врут.

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

2016   Айфон   Мак   Эпл
Ранее Ctrl + ↓