Пришло время для традиционного вопроса.
Что делать в Берлине 11—16 мая? Куда сходить, на что посмотреть, с кем встретиться, где попить кофе? В Берлине буду шестой, кажется, раз, так что всё очевидное знаю. Рассказывайте неочевидное!
Пишите в комментарии или на почту: ilyabirman@ilyabirman.ru. Спасибо.
В школе бюро есть задание — сделать интерфейс заказа пиццы. В частности, там можно выбрать ингредиенты. Почему-то у очень многих студентов одна и та же проблема: в настройке ингредиентов очень тесно безо всяких на то причин.
Вот, например, неплохо всё нарисовано:
Но почему вместилось только три ингредиента? Этот экран существует для выбора ингредиентов, так почему он мешает мне их выбирать?
Или вот:
Это ещё хуже: вместо прокрутки тут листание мучительными стрелочками. Ну и не так красиво.
Или вот:
Тут совсем некрасиво, но мы сейчас не об эстетике. Я пишу студенту:
В настройке ингредиентов тоже всё мелко, тесно и задисейблено. Вдумайтесь: на экране настройки ингредиентов настройка ингредиентов занимает где-то 20-ю часть площади попапа, который сам занимает где-то четверть площади экрана. Почему бы не увеличить её в восемьдесят раз? Это не гипербола.
А вот снова приятный визуальный дизайн, но ингредиентам снова нет места:
В дизайне интерфейса полно случаев, когда мало места и приходится искать сложное пространственное решение. Но тут-то места полно! Студенты зачем-то сами себе создают тесноту и мучаются с ней.
Когда думаешь, как распределить пространство между разными фичами, полезно задать себе вопрос: зачем этот экран есть, зачем сюда приходит человек. Ответ на этот вопрос не всегда однозначный — бывают экраны, на которых можно много чего разного делать. Но если однозначный ответ есть, то стоит отдать максимум места именно тому, про что этот ответ.
Рассказываю основные принципы и приёмы, используемые при подготовке карт с информацией о челябинском транспорте. Показываю на примерах. Перерисовываю одну карту из внутреннего документа, чтобы показать, что это быстро. Заодно какие-то штуке в Фигми комментирую базовые:
| 00:00 | Интро |
| 00:52 | Масштаб и пропорции. Откуда взялись и почему стоит соблюдать |
| 05:29 | Максимизация площади смысловой части |
| 12:55 | Десятипиксельные поля |
| 13:41 | Правило якорных объектов и важность углов |
| 14:58 | Неизменяемость стилей: толщин линий, размеров подписей, символов видов транспорта и номеров маршрутов. Лучше копировать и редактировать объекты, чем создавать новые |
| 21:08 | Неудачные примеры. Ошибки: неправильные пропорции, изменённые размеры элементов, использование неподходящих текстовых стилей, изломы линий, центровка подписей |
| 29:25 | Практика: рисуем маршрут автобуса 22а. Грубо срисовываем из внутренней документации |
| 36:29 | Настраиваем попадание в улицы и скругления на поворотах, рисуем и подписываем конечные |
| 42:10 | Подписываем районы и улицы, дорабатываем макет |
| 46:10 | Экспорт файла |
Это видео не только для сотрудников транспортных ведомств и служб, которым предстоит рисовать карты и схемы, но и для всех любопытных дизайнеров.
Хорошая новость — наша с Алексеем Блиновым программа Эмси заработала в Вентуре:
Если вы не знали, что такое Эмси, узнайте:
Другие программы мешают работать яркими выезжающими плашками. При этом когда возникает вопрос, что играет, ответа на экране нет.
Эмси всегда на виду. Название песни не скроллится взад-вперёд, а стоит на месте.
В выпадающем меню — управление воспроизведением. Альт-клик по меню мгновенно перематывает трек в нужную точку.
Меню на Маке работает так: если какие-то элементы справа перестают влезать, они просто исчезают. Чтобы система не скрывала Эмси целиком чуть что, он адаптировался исходя из доступного места. Например, если название исполнителя и трека не влезает целиком, он показывал только название трека; если и оно не влезало, показывал хотя бы свою иконку.
В Вентуре больше нельзя определить, сколько места тебе доступно в меню, поэтому эта логика сломалась — Эмси всегда показывал только иконку. В новой версии под Вентурой мы ничего не адаптируем. Если текст не влезает целиком, пункт меню исчезает полностью. На предыдущих версиях Макоса поведение не изменилось.
А ещё мы иконку обновили.
В Ютюбе миллион видосов со сравнением размеров планет, звёзд и галактик, но вот этот мне особенно понравился:
Понравился тем, что сравнивает объекты, которые обычно не сравнивают друг с другом. На 4:55 рядом с Марианской впадиной появляется ммарафон, а тут уже рядом пульсар Краба давно стоит. Или вот в 5:30 перед нами Седна и другие планета, а тут вдруг бац — Мадагаскар! Космические объекты редко сравниваются с земными, а это и даёт более полное представление, и немного удивляет. Когда вышли за размеры Солнца, казалось, что уже ничто земное тут не может оказаться рядом, но вдруг в 8:25 появляются «все люди, если их поставить на голову друг другу»!
Отложил себе в папочку «Сравнения». См. также трейлеры разных лекций, включая «Сравнения».
Рассказываю, что ширина на десктопе — дешёвый ресурс, а высота дорогой, поэтому мобайл-фёрст интерфейсы часто на десктопе получаются неудачными. 4 минуты:
Это фрагмент № 97 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 11 ноября 2022 года.
До 21 апреля идёт запись на курс, который пройдёт с 22 апреля по 21 мая.
Программа, отзывы, запись
Всё, что можно слушать, я стараюсь слушать, а не читать и не смотреть. Потому что когда у меня свободны глаза, я предпочитаю делать что-то более полезное.
Вот что я слушал в последнее время, что мне понравилось:
Непонятно, в «видео по вторникам» это постить или в «аудио по четвергам», но по четвергам вроде обычно всё-таки музкальные произведения, а не видосы про звук, так что пусть будет вторник. Человек показывает, сколько всего можно делать со звуком просто меняя параметры сэмплера:
Моё любимое начинается с 5:57, а звук в 6:12 вообще нужно срочно куда-то слизать.
Подписался на канал.
Вы идёте вечером по городу и думаете перекусить. Как думаете, открыто ли это заведение с игреком?
А так?
Свет — важнейший индикатор доступности и гостеприимности пространства, так что в предбаннике тоже нужно было вкрутить лампочку.
Бо́льшую часть времени, что идёшь по тротуару и видишь эту дверь, за ней глухая темнота — уже успеваешь придумать себе другой вариант, где поесть.
Добавлено через час. Судя по комментариям в телеге, я не умею объяснять. Это фотки одной и той же двери в одно и то же время с чуть разного ракурса. На обеих фотках света в предбаннике нет. Из-за этого о работе заведения можно догадаться только с необольшого диапазона углов.
Эпл придумал такое поведение интерфейсов, которое раньше казалось бы странным.
Когда возможна биометрическая аутентификация, они не показывают поле ввода пароля. Но если что-то не срабатывает, пароль можно ввести. Так вот, пароль можно начать вводить даже не нажимая кнопку Use Password... — любой ввод переведёт окно в следующее состояние.
Видимо, изначально интерфейс ввода пароля скрывают «для красоты», ну и чтобы не создавать у человека ощущения, что пароль надо ввести.
Бесит только, что эти два состояния окна — разной высоты, то есть, когда начинаешь вводить пароль, окно увеличивается. Как такой разработчик интерфейсов смог устроиться в Эпл — непонятно.