Занудный, но важный для работы дизайнера кусочек. Участница курса придумала какой-то интерфейс с необычным поведением во время прокрутки. Проблем тут две: во-первых, даже просто понять, как именно она хочет, не так просто. Во-вторых, это ж ещё потом реализовать надо. А ради чего тратить на это ресурсы? 7 минут:
https://www.youtube.com/watch?v=Ew75feYtGMs
Приходите на курс, там кайф и польза. Следующий курс пройдёт с 1 по 30 июля. Все подробности, отзывы, программа и отзывы:
https://bureau.ru/courses/ui-online/
Стихи на всю жизнь
Поэзия занимает важное место в моём сердце. Кто-то наизусть помнит стихи Бродского, кто-то — Ахматовой. А я никогда не забуду стихотворение, написанное моим одноклассником Вадей во время одного из уроков в школе:
Я возжелал сегодня отожрать
Чего же боле мне ещё желать?
Но я сижу в паралепипедной коробке
И должен слушать эту лысину с бородкой
Вадим Кудабаев, около 2000 г.
Недавно я писал про «Презентер» — программу для создания презентаций с необычным, но очень клёвым подходом.
А вот другой пример — «Маймстрим»:
https://mimestream.com/
Это новый очень приятный почтовый клиент для Гмейла.
Тут революция в обратную сторону. За последние лет пятнадцать было несколько попыток «переизобрести» почту, полностью поменяв механику и представление. А «Маймстрим» впервые говорит: может, лучше, наконец, сделать то, что всем привычно, прямыми руками? Приложение даже внешне очень похоже на встроенный «Мейл», просто работает лучше и учитывает разные гмейловые нюансы.
Участник моего интерфейсного курса Никита Михайлов написал отзыв-тред в твиттере:
https://twitter.com/n__mikhaylov/status/1666022657702219776
Ещё и видео снял:
https://www.youtube.com/watch?v=wDzS44MQGzU
Программа курса и запись:
https://bureau.ru/courses/ui-online/
Никита, спасибо!
Ещё сказка на ночь — Design for spatial input:
https://developer.apple.com/videos/play/wwdc2023/10073/
Про глаза. Почему в пространственном интерфейсе окна нужно делать как можно меньше, а кнопки — круглыми. Рамки кнопкам не нужны: привлекают взгляд к краю вместо центра. Окна автоматически увеличиваются при удалении от пользователя, чтобы остаться такого же углового размера (но если надо это можно отключить). Ховер-эффекты как у мыши, даже тултипы есть, если смотреть чуть дольше.
Про руки. Жестов много, можно зумить двумя руками. Можно пододвинуть Сафари поближе и скролить пальцем как на Айпаде. И печатать на клавиатуре в воздухе. В таком случае пофиг, куда смотрят глаза. В каких случаях такое непосредственное взаимодействие подойдёт.
Визуальные манипуляции: диагональ ноутбука
Вот как можно показать диагональ, чтобы все подумали, что экран огромный, но при этом в суде можно было ткнуть, мол, вот же, написано, четырнадцать, ты чем смотрел. Картинка с главной Озона.
Сохранил себе пример в папочку лекции «Визуальные манипуляции». Вот трейлер соответствующей лекции, там ещё всякие примеры такого и мысль про круговые диаграммы:
https://bureau.ru/news/2021/lecture-ui-lies/
Может, у вас тоже есть хорошие примеры?
Эпл впервые официально выпустил всю свою интерфейсную фурнитуру (юай-кит) под Фигму. Пока только Айфон и Айпад:
apple" rel="nofollow">https://www.figma.com/@apple
Там все виды кнопок, меню, уведомлений, пикеров, клавиатур, турбаров, типовых виджетов и экранов в светлой и тёмной теме.
Нейроарт на тему «Если бы транспортные схемы рисовал Поллок, Пикассо, Эшер, Ван Гог, Мондриан, Климт, Баския, Бэнкси, Яёи Кусама, Фрида Кало». Отсюда:
https://twitter.com/AlexAIDaily/status/1666529209567662089
Поллок круче всех.
Интересно поизучать такое, чтобы каких-нибудь приёмчиков стырить себе.
Скидки в честь дня рождения «Журналуса»
Реклама · Текст предоставлен клиентом
🥳 Медиа для дизайнеров «Журналус» 10 июня празднует день рождения.
🎁 В честь дня рождения мы дарим промо-код B15 со скидкой 20% на годовую и 15% на месячную подписку. Он действует до 11 июня.
«Журналус» фильтрует инфошум, выбирая самое ценное, важное и полезное. Он помогает развиваться в профессии и быть в курсе трендов, но при этом не тратить часы на скроллинг лент.
А ещё подписчики могут:
— Собирать коллекцию избранных статей, проектов, инструментов и лекций
— Тусить в ламповом закрытом телеграм-чате, где делятся портфолио, ищут проекты и сотрудников
— Читать Журналус Daily — закрытый телеграм-канал ежедневного формата
Оформить подписку со скидкой можно по ссылке: zhurnalus.ru
Доступна оплата и российскими, и иностранными картами.
Сказка на ночь сегодня — Principles of spatial design:
https://developer.apple.com/videos/play/wwdc2023/10072/
Немного о стандартном поведении окон и тулбаров, а также как выбирать размеры и пространственное расположение окон, когда и насколько выходить за их пределы.
Картинки какие попало.
В «Киноуте» можно репетировать доклад как бы в пустом зрительном зале.
Если программа занимает всё пространство вокруг, а не просто окно, то она растворяется как туман, когда ты начинаешь двигаться, чтобы ты не запнулся, пока идёшь поставить чайник.
Бирман не стал исправлять клёвую таблицу:
https://bureau.ru/soviet/20230606/?utm_source=tg-s-s-060623
Ну и традиционный набор итоговых картинок по темам. ТВ-ОС настолько в пролёте, что ему даже на картинку фич не наскребли.
Читать полностью…Снова меня выручил этот шаблон.
В русской версии книги о транспортных схемах:
На схеме можно показать не все, а только избранные маршруты.
Дипл:
You can show not all, but only selected routes on the map.
Дипл, ну ты чё.
Я:
Instead of showing all existing routes, you can cherry-pick routes to put on the map.
А как бы написали вы?
Как Фигма выходила на рынок, Харрис о свободе воли, антидепрессанты — не решение, а конкуренция — для неудачников. Что послушать:
https://ilyabirman.ru/meanwhile/all/listening-64/
Может, вы видели iA Writer — минималистичный текстовый редактор. Эти же авторы выпустили свой паверпоинт — iA Presenter:
https://ia.net/presenter
В основе ровно тот процесс, который я использую, когда готовлю доклады. Я пишу текст в Ноутсе, а потом уже разбиваю его на слайды, и тогда уже рисую их в Фигме. А с «Презентером» и делать ничего не надо: он превращает текст в слайды прямо на лету.
Я ещё не попробовал, но мне очень нравится, что можно вообще взорвать всё и сделать по-другому, отталкиваясь не от фич, а от сценария. Программа — не просто инструмент, чтобы сделать слайды; она даёт методологию, как подготовиться к докладу.
Даже если сценарий не для вас, сам подход очень сильный. Хочется больше таких продуктов.
Расширение экранов в Вижене
Во время презентации Вижена Эплы показали, что ты можешь прямо в нём посмотреть на часы или телефон, и всё будет нормально видно — это была просто ещё одна демонстрация того, что ты не изолирован от остального мира, и можешь пользоваться всеми привычными вещами как обычно.
А я подумал, что это недостаточно круто. Обычные вещи могут приобретать волшебные свойства при взгляде через очки. Например, на телефоне или часах может начать без прокрутки влезать то, что требовало прокрутки.
Собирался залить очередной видеофрагмент со своего интерфейсного курса, но понял, что в данном случае достаточно картинки. Разбираем работу участника, я выделяю кусок и говорю:
— А ещё теория близости. Смотри, у тебя вот эта штука выглядит как будто это надо заполнить и нажать синюю кнопку. А что там справа — вообще не волнует, оно даже цвета другого.
Приходите на курс, там кайф и польза. Следующий курс пройдёт с 1 по 30 июля. Все подробности, программа и отзывы:
https://bureau.ru/courses/ui-online/
Два месяца назад я сыграл лайв в РМЦ, но только сейчас дошли руки написать его «треклист»:
https://soundcloud.com/ilyabirman/live-session-2/
Это большая работа, потому что там использовано огромное количество материала. Частью треков ещё пришлось пожертвовать, потому что полный треклист не влез в саундклаудное ограничение в 4000 символов.
Ни один из этих треков не играл целиком — из каждого использовался лишь луп длиной в несколько секунд и только часть спектра частот. Откуда-то я брал бочку и бас, откуда-то — перкуссию, откуда-то — понравившийся семпл.
Зовите поиграть!
Кажется, следующий Макос обещает не очень охотно давать приложениям воровать фокус. Возможно, это хорошо. Но уверенности в победе нет.
Во-первых, звучит так, будто в некоторых случаях он будет игнорировать запрос на активацию, но по умолчанию он всё-таки будет уважаться. А я хочу игнорировать во всех случаях.
Во-вторых, в комментариях мне писали, что за воровство фокуса при запуске приложений отвечают не эти приложения, а сам Макос: якобы он насильно передаёт фокус в приложение, у которого появилось новое окно.
Ну, посмотрим.
Проблемный скеоморфизм
Рассмотрим такой фрагмент ↑ студенческой работы. Пицца лежит на листке в клетку, точнее, не лежит, а, судя по тени, парит над ним. Со школы мы хорошо знаем, что клетка имеет размеры 5×5 мм, поэтому пицца у нас получается диаметром с ширину со средний Айфон. Это никто не считает специально, но просто эта клетка на фоне делает пиццу маленькой. Там, конечно, и выбрана «Маленькая» внизу, но всё-таки даже очень маленькую пиццу я представляю как в два-три раза большую, чем эта.
К самой переключалке размеров вопросов ещё больше. Переключалка нарисована на бумаге тем же способом, что клетка, но при этом выбранный вариант «Маленькая» отбрасывает тень, то есть находится выше бумаги. Но тень он отбрасывает только внутрь шахты переключалки, а за её пределы не отбрасывает. Получается, что на самом деле эта шахта утоплена, а лифт «Маленькая» находится на том же уровне, что бумага? Нет, такого тоже быть не может, ведь внутри самой шахты никакой тени нет. Ладно, может это всё плоское, от лифта никакая тень не падает, просто вот такой эффект нарисован на бумаге? Но этого тоже не может быть, ведь это интерактивный, двигающийся элемент. Напечатанное на бумаге так не может.
Отдельный вопрос — нафига этой «плоской» штуке на бумаге понадобилась тень, когда рядом есть рыжая кнопка «Добавить в корзину», под которую явно уплывают ингредиенты, но она легко обходится без тени.
Если вы взялись играть в скеоморфизм, нужно быть внимательными. Недостаточно просто сделать какие-то текстуры и тени. В скеоморфическом мире есть свои законы и правила, которые нужно соблюдать, чтобы получалось хорошо и последовательно.
Кстати, это ещё и очередной пример тесного интерфейса:
https://ilyabirman.ru/meanwhile/all/tight-ui-pizza-ingredients/
Такой вот вам тёмный паттерн в коллекцию.
1. Идёшь регистрироваться на рейс, смотришь, что включена только ручная кладь 5 кг, и можно добавить 10 кг или багаж 20 кг. Удивляешься, как это тебя угораздило купить такие билеты, с которыми ничего с собой не взять. Готовишься расстаться с 1000 ₽.
2. Потом случайно замечаешь листалку в левой верхей клетке, и оказывается, что багаж у тебя всё-таки включён. Интересно, сколько людей покупают себе багаж два раза «благодаря» такому дизайну?
Дизайн-просмотр выложил фотки с моего доклада. Выхватили слайд со схемой метро, хотя я даже не про неё рассказывал. Но она красивая, что тут скажешь:
https://ilyabirman.ru/moscow/metro/map/2023/
Ильяхов показывает, как нормально написать письмо:
https://www.youtube.com/watch?v=w4qTpc7mE_k
Я обычно выкладываю фрагменты своего интерфейсного курса и зову вас на него. Но мы ж тут с Мишей Нозиком теперь ещё и запустили курс о презентациях. И прямо сейчас у нас идёт первый поток. Вырезали для вас кусочек из самого первого семинара. Он бодренько прошёл!
Участник курса Максим Бугайчук презентует коллегам идею продвижения порошка «Дося» через умное приложение. Это учебное задание. Максим бодро и весело рассказывает, а потом мы разбираем сильные и слабые стороны такой презентации, в том числе говорим об опасности излишнего веселья. 13 минут:
https://www.youtube.com/watch?v=CRehjUaUpGE
00:00 Презентация
04:53 Разбор
Все подробности про курс, включая подробную программу и кнопку «Запись»:
https://bureau.ru/courses/presentation-online/
Следующий курс пройдёт в июле, приходите.
Отзывов пока нет, потому что, говорю же, только первый поток идёт. Но соберём и покажем потом.
Вещь, которую не понимают большинство производителей чего угодно: просто уберите своё говно с предмета! Просто уберите «Pro Sport» с футболки, и она будет ок. Нафига эта надпись, вот просто зачем, почему? Ладно бы это ещё был бренд ваш, который вы не можете держать при себе, но это просто надпись, которую кому-то всралось сюда поставить. Увольте этого человека заодно, кстати, чтобы он больше не лез со своей фигнёй в вашу продукцию.
Читать полностью…Коротко об Эпл-ивенте
Так, несколько комментариев про сегодняший Эпл-ивент.
Мак-про какой-то совсем странный. 192 ГБ памяти — это, конечно, много, но у предыдущего Мака-про было 1,5 ТБ, и Эплы об этом скромно промолчали.
Ай-ОС 17 ни о чём. Они реально показали иконки телефона, Фейстайма и Месседжеса в начале! «The Phone app is essential to iPhone experience». Ну да, оно где-то в подпапках третьего экрана зарыто как раз. Стендбай красивый, ладно. «We truly live in the age of wonders» про множественные таймеры — смешно!
Виджеты на десктопе на Маке — это то, о чём я мечтал с того момента, как убили Дэшборд и на кой-то хер запрятали виджеты в тупую выезжалку с прокруткой. Но надо будет понять, как они взаимодействуют с файлами на рабочем столе.
Веб-приложения в доке — хочется, но много уже кто пытался, получалось плохо. Посмотрим, получилось ли у Эпла.
Листалка виджетов на часах выглядит приятно.
А насчёт очков — я получил всё, чего ждал:
/channel/ilyabirman_channel/9124
Разбираем форму из нескольких шагов. Там и про кирпичную кладку, и про лишние поля, и про пространственное-сценарное решение, и про правило 7 элементов, и про инфомусор, и про расположение подписей полей, и про размеры полей, и про разделение на шаги. Целых 15 минут:
https://www.youtube.com/watch?v=dqnYrhXSMms
Приходите на курс, там кайф и польза. Следующий курс пройдёт с 1 по 30 июля. Все подробности, программа и отзывы:
https://bureau.ru/courses/ui-online/
Традиционный плейлист лайков за апрель и май:
https://soundcloud.com/ilyabirman/sets/2023-apr-may
Red Rooms и Jen Series — классные-тёплые.
Лайкли — клёвые социокнопки. В третьей версии улучшена доступность — по социокнопкам можно ходить табом, а кнопка Вотсапа теперь работает, когда не установлено приложение.
Теперь сами кнопки — это элементы <a>. Чтобы в них не просачивались ваши стили, там занулено всё, поэтому если вам нужно, чтобы они наследовали какие-то стили у вашего документа, придётся это более явно прописать.
О проекте и зип-архив:
http://ilyabirman.ru/projects/likely/
Гитхаб:
https://github.com/NikolayRys/Likely/releases/tag/v3.1.0
Лайкли ведёт Николай Рысь:
http://linkedin.com/in/nikolay-rys