Объясняю по элементам, что не так с вёрсткой, почему она выглядит не очень. А ещё есть путаница с ролью элементов: то ли там заголовок, то ли переключалка какая-то. Заодно касаемся темы различий между вкладками и переключалками. 4 минуты:
Это фрагмент № 99 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 9 декабря 2022 года.
До 26 мая идёт запись на курс, который пройдёт с 27 мая по 25 июня.
Программа, отзывы, запись
Небольшой видос про то, как сделать анимированное сердечко в Фигме:
Сама анимация простенькая, но во второй части идёт полезный разбор того почему она была сделана именно таким образом. В частности, о разнице между ховером и маусэнтером и о том, как избежать ховер-эффекта сразу после клика (ведь курсор в этот момент по-прежнему над иконкой). Это всё полезно учитывать и при разработке.
Ещё один спич про то, когда нужна, а когда не нужна визуализация. Например, визуализация иногда помогает выявить манипуляции с данными. 4 минуты:
Это фрагмент № 98 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 11 ноября 2022 года.
До 26 мая идёт запись на курс, который пройдёт с 27 мая по 25 июня.
Программа, отзывы, запись
Пришло время для традиционного вопроса.
Что делать в Берлине 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 мая.
Программа, отзывы, запись
Всё, что можно слушать, я стараюсь слушать, а не читать и не смотреть. Потому что когда у меня свободны глаза, я предпочитаю делать что-то более полезное.
Вот что я слушал в последнее время, что мне понравилось: