Город IT

Выступил на конференции Город IT. Дело было в сентябре, а вот и видео подъехало. Я там рассказываю как классно и быстро передавать анимации в разработку с помощью библиотеки Lottie.

Интефейс футбола

Тем временем технологии скакнули. Ну ладно, на самом деле они давно уже скакнули и американцы смотрят бейсбол с дополненной реальностью ещё со времён, когда аббревиатуры AR не было, но это не мешает мне офигевать.

Плеер на сайте первого канала умеет в разные камеры и статистику матча.

Внизу таймлайн с зарубками важных моментов.

Кайф.

Новое приложение YouDo

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

Недавно закончили новую версию приложения. Пока только под Андроид. Где-то летом выйдёт под Иос. Ну и конечно обязательный дисклеймер о том, что ставить приложение YouDo полезно только в этих городах:

А вот и первый скриншотик вам. Только посмотрите на эти милейшие иконочки :з Навести милоту-няшкоту было личным челенджем окромя требований бизнеса. Новое приложение круглое, пушистое и вообще бро.

Заменили аватарку? Сообщение-выпускник курсов пикапа тут как тут (внизу экрана).

Анимашечки :з

Лесть поддержка.

Больше всего горжусь новым экраном профиля. Пришлось повоевать за это скругление, но больно уж люблю эту «улыбку».

Иконочки! Мои любимые это свинка, рупор, машинка и гаечный ключ.

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

А вообще, кучу-тьму экранов передумали и перерисовали. На этой карте дай бог чтоб половина всего.

Специалист скажет: ну да, скинчик новый навернули, а что UX? Во-первых, мистер специалист, у меня в бложеке не матерятся. Во-вторых, переработка пользовательского опыта будет, но позже. Сейчас нашим программистам нужно было переписать былое кладбище костылей, чтобы экспериментировать с уксом вообще можно было. А так да: сейчас пойдут тесты шо ваш Фейсбук.

Кто совсем не в курсе: YouDo это Uber мира услуг. Если вам нужно починить/доставить/перевезти/научиться/намарафетиться — пишите чего хотите, умная строка вас поймёт, а далее уточняете детали.

Через некоторое время на ваше задание откликнется кто-нибудь из 500 000 зарегистрированных исполнителей, а вы выберите понравившегося. Собсна и всё. С вас никакой комиссии. Только оплата труда выбранного человека, но это уже ваши тёрки: мы только соединяем заказчиков и исполнителей. Ну если наликом решите рассчитаться. С безнала таки процент хапаем. Матвейке на пиццу, чо жопитесь то.

Врата Штейна и часы

Во «Вратах Штейна» были «часы» показывающие смещение текущей временной линии… Если честно я слабо понимаю конкретно эту часть аниме, но устройство миленькое, ламповое. Серёжа нашёл шрифт в точности как на этих часах. Захотелось что‑нибудь с этим сделать… Да хоть бы и часы!

Ну и вот, сделал:
sg.greatmatis.com — показывает время.
sg.greatmatis.com/ns — no seconds, то же, но без секунд.
sg.greatmatis.com/a — для фанатов этого аниме :)

Симпотненько запускать на полный экран и держать как скринсейвер. Мокапов вам.

Фиттс и угловые контролы

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

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

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

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

Полезно спрашивать себя. Почему я хочу очертить область срабатывания именно здесь? Почему какие-то 4−5 пикселей между контролом и пассивной сущностью (например заголовок экрана) не должны реагировать в данном случае? Зачем вообще человек устремляет палец в эту область экрана, и как сильно мы разрешаем недотёпе промазать?

Мысли.

1. Крайние контролы имеют все права реагировать по всей области до ближайших краёв.

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

3. Области срабатывания у визуально равных контролов не обязаны быть равными.

Новый рабочий процесс

В Юду у меня кардинально поменялся рабочий процесс. В основном, конечно, из-за перехода на Скетч. По рабочим и этическим причинам не смогу показать на примере наших боевых дизайнов. Уверяю, что описанные процессы использую постоянно, без надуманной рекламной выдумки.

Понял, какой подлог «векторность» Фотошопа. Ещё в Юзерстори ПМ Женя (в прошлом дизайнер, но показавший мне, что бывших дизайнеров не бывает) приучил меня использовать векторные маски. То было давненько, я много чего не знал, в том числе о таких векторных инструментах в Фотошопе. Женя так и говорил — векторные маски. Я не понимал, почему он так называет эти сущности: вот обычный прямоугольник, вот обычный круг. Понятно почему векторные, но почему маски? Что маскируется-то?

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

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

Отсюда вес фотошоповских макетов, отсюда его неповоротливость по сравнению с Иллюстратором при схожих операциях. Считай векторные маски просто помогают тебе редактировать тот же тяжеловесный растр. Рисовать интерфейсы таким инструментом начинает казаться неуместным. Да, Фотошоп может это делать. Да, при наличии сильного аппарата он может это делать шустро. А в голове всё равно свербит, что работаешь не тем инструментом.

sketch

Это такое долгое приветствие Скетча. Честный вектор. Смешной вес макетов. Лёгкость проектного файла позволяет создавать большое количество артбордов. Можешь хоть всё приложение/сайт в одном файле хранить: на микроуровне распределять контент артбордами, на макроуровне раскидывать по страницам.

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

После Скетча, где у тебя весь продукт на артбордах в одном лёгком файле, открывать по одному экрану тяжеленным проектным файлом Фотошопа кажется абсурдным. Хочешь поменять что-то общее для всех экранов? В Фотошопе есть вложенные смарт-объекты, но это изменения в разных файлах, а не в одном, как у Скетча. Здесь у Фотошопа проблема на уровне философии. Это лишний раз наталкивает мысль: Фотошоп просто не для того.

Да, в Скетче пока кое-чего нет. Без плагинов геморройно работать с абзацами: нет абзацного отступа, нет настройки интерлиньяжа для конкретной строки блока тектса. Работа с шейпами пока непонятная: не могу на 100% понять как работают булевы операции в Скетче — для рисования иконок использую Иллюстратор, где эта же вещь предсказуема. Да и вообще в каждом чейнджлоге нет-нет да найдёшь фичку, о которой думаешь: «А как они раньше то без этого работали в Скетче?».

Всё ещё не считаю эти проблемы перевешивающими в сторону Фотошопа. С какой-то стороны, и я серьёзно, эти изъяны Скетча можно разглядывать как пользу. Ведь кастумизация каждой конкретной строки абзаца в Фотошопе лишний раз загадывает загадку верстальщику: что за надстроек дизайнер туда понапихал? Скетч заставляет тебя показывать явно. Тупо приходится выделять отдельный текстовый слой: отодвигать его вправо, если это красная строка, двигать текст под ним, если он подразумевает свой особенный отступ. Гемор? Так-то да. Но вот верстальщик пропустил особенность очередного хитронастроенного абзаца, и вот он ты уже тратишь время на объяснение.

Рядом ещё одна тема: связка Скетча и Zeplin. Цеплин расшифровывает макет для верстальщика. Выдаёт ему CSS и ассеты. Цеплиновское представление макета висит в облаке: любой участник цикла может смотреть дизайн где угодно. Таким образом Цеплин выполняет ещё и роль показывалки дизайна: cmd+E из Скетча и все специалисты видят выбранный в Скетче холст.

Фотошоп тоже подключается к Цеплину, но фотошоповские макеты весят по 50–100 мегабайт, а то и больше — экспорт в Цеплин занимает вечность. Скетчевские пара мегабайт прыгают в Цеплин на счёт раз.

Моя любимая фишка Цеплина это выдача графики верстальщику или ещё какому технарю. Наш иос-программист работает в Икскоде. По неведанным причинам эта среда понимает векторную графику только в ПДФ. Мне казалось, что это формат для больших многостраничных документов. Причём тут графика для приложений? Ну может я предвзят и не знаю чего. Как бы там ни было, это не проблема. Указываю в Скетче какую графику отдавать в ПДФ. В качестве фолбека указываю нарезать ещё несколько ПНГ разных разрешений — всё это за 4 клика. Цеплин понимает эти указания, и, где бы я или программист не были, графика легко достаётся из цеплиновского облака. Технарь не ищет в какой группе слоёв у меня спрятана иконка. Он кликает в Цеплине на иконку и получает её во всех нужных форматах.

zeplin

Ещё в инструментарии появился Framer. Ранее, чтобы не объяснять анимации на пальцах, я использовал Афтер Эффектс. Это лучше чем ничего — не прибегаешь к словесному описанию: вот эта фигнюшка сюда вжих, а вон та хреновина такая прыг-прыг… Но технарю по-хорошему этого всё ещё недостаточно. Надо ж увиденную анимацию в код перенести, а гифка применима не всегда. И тут ты либо оставляешь анимацию на откуп его пониманию, либо таки чётко указываешь начальные/конечные координаты, тайминги и кривые анимаций. Здесь и помогает Фреймер. Он позволяет на простом псевдокоде смоделировать анимацию и даже простенькую интерактивность. Технарь смотрит листинг и забирает из него всё что ему нужно.

framer

Что Скетч, что Фреймер быстро показывают дизайн прямо на устройстве. Это совсем кайф. Об удобной области тапа или удобоваримом кегле больше не догадываешься, сразу смотришь на аппарате.

device

Вот такие перевороты, а это только второй месяц на новом месте. То ли ещё будет.