Базовые знания

Всегда есть какие-то базовые знания сформированные умными людьми с чёрно-белых портретов. Никто не даст забыть о важности «базы» дерзкому новичку, учившему ремесло самостоятельно на Ютубе. Недавно и мне довелось напомнить новому коллеге о безусловных, на мой взгляд, навыках для дизайнера. О той меметичной и пресловутой стороне типографики: кавычки, тире, разные и неразрывные пробелы, висячая пунктуация и прочий Мильчин в обнимку с ГОСТом.

Взывать к этому знанию не менее пошло, чем удить соискателя печеньками. Но как не крути, всегда есть новичок, которому это незнакомо и надо объяснить. Показал неразрывный пробел, пересказал лебедевский § 97.

— Ну да, ну да… но я не замечаю эти вещи. Я вот люблю прорабатывать пользовательский опыт, а не такие мелочи.

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

Но потом я подумал ещё. А как оказалось, что для человека эти сущности — предмет торга? Почему из микро и макро-уровней надо выбирать что-то одно? Как внимание к типографике отнимает очки из других навыков?

Полагаю, дело во времени, которое можно уделить. Наверное, коллега полагает, что торг уместен как раз здесь. Можно потратить время на выверку текста, пиксель-пёрфект, порядок в слоях… Ну вот эти, «неважные» вещи. А можно ещё подумать над пользовательским опытом.

Но почему же для меня бацнуть неразрывный пробел после предлога не убавляет из чаши «важной» части работы?

Да просто потому что от пальцев отлетает. Я не трачу на это время. Я даже не думаю об этом. Влепить длинную тирешку — естественное движение рук после нажатия на пробел. Не дефис же — руки так просто не двигаются.

Так и понял, почему важно однажды уяснить базу. Чтобы мозоли как мозаика подходили к нужным рычагам. Чтобы оставить мелочи привычке, а мозг занять важным.

Дизайн-процесс в YouDo

Построили с ребятами в YouDo прочный дизайн-процесс. Не стыдно и рассказать.

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

Тут и там использую эмоджи, потому что весело :)

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

В отдельном проекте храним задания. Одной таске — один файл. Файлы имеют обложки с цветами закреплёнными за дизайнерами :з Обложки костылятся так: Фигма берёт первый холст на первой странице файла. Таким образом, в каждом файле есть первая страница с обложкой. Вся работа ведётся на второй странице. Да, костыль, ведь при открытии файла всегда приходится переключатся на вторую страницу. Но с обложкой найти нужный файл сильно проще. Надеюсь, в будущем файлу можно будет назначать миниатюрку, как проектам в Цеплине.

Кстати про Цеплин. Благодаря Фигме, веб-разработчикам больше эта прослойка не нужна. Сами берут всё что им нужно прямо из макета. Никаких больше «Сделай вот эту иконку выгружаемой и обнови Цеплин».

А вот мобильным разработчикам Фигма не по душе. Для них всё ещё выгружаем в Цеплин. Причины есть. Пока что Фигма не умеет отдавать ассеты в правильной конвенции имён для конкретной платформы. Особенно неприятно андроидерам: Фигма пока не может распихивать графику по drawable-папочкам. Для iOS буквально на неделе появился экспорт в PDF.

Фигма удобно работает с текстовыми стилями. Параметр выравнивания текста по краям или центру не является неотъёмлемым свойством стиля. Цеплин умеет понимать это и правильно показывает название стиля в независимости от выравнивания абзаца. В итоге не надо иметь копии каждого стиля для разных выравниваний, как это было при экспорте в Цеплин из Скетча.

Разве что оставляет желать лучшего скорость экспорта в Цеплин из Фигмы. Скетч в этом вопросе пока обгоняет.

Ещё недавно нашёл такую штуку. Иногда тебе скидывают ссылку на документ Фигмы, а ты хотел бы открыть его не в бразуере, а в десктопном приложении. Теперь можно.

Для анимаций в обоих приложениях используем библиотеку Lottie от Airbnb. Скоро будем и на вебе. Раньше в приложениях анимашки можно было сделать двумя способами. Либо просить разработчика закодить всю анимацию вручную, либо гифкой. Первое совсем маловероятно: у программиста и своих дел хватает, слишком долго и дорого. Гифка тоже не канает: тяжёлая, ограничена в цветах, запаривательная работа с прозрачностями.

Разок позволили себе одну гифку. Когда человек проходил тестирование в приложении, чтобы стать исполнителем, в конце он вознаграждался радостной анимашкой. Весила эта сволочь 4 мегабайта. Само приложение весило что-то типа 40 мегабайт. Отдавать десятую часть всего веса на одну анимашку преступно.

Airbnb разработали Lottie и любезно выдали его в свободное использование. Теперь каждая анимашка это json-файл, генерируемый из After Effects. Да, делать мелкие интерфейсные анимашки в Афтере какой-то оверкил, но выигрыш стоит того. Lottie-анимации весят 10−20 килобайт, векторные и динамические. Под последним я имею в виду, что они не только для чтения, как гифки. Lottie-анимашка управляема прям по ходу пьесы, в приложении. Можно менять её скорость, цикличность, масштаб, да хоть вспять воспроизводить. Разработчик может даже залезть в json-файл и поменять там какой-нибудь цвет. Считай, анимируемое svg. А самое главное, такая анимашка это один единственный json-файл. Благодаря этому мы за три часа заменили загрузочную анимацию на новогоднюю :з Без такого инструмента, наверное, и не брались бы.

Прототипируем по-разному. На низком уровне в Realtime Board. На высоком — сразу в Фигме или, если надо совсем красиво, в Principle. Недавно купили 5-ю версию: там теперь радует экспорт в видео или гифки. Ещё толкаю ребятам Origami, но это по праздникам: когда нужно запрототипировать что-нибудь совсем диковинное, вроде использования камеры или Force Touch на айфоне.

Пытаемся приучиться проверять гипотезы в Фабузе. Пока идёт со скрипом.

Купил себе личную копию Framer X. Ну фиииг знает. Вроде, очень перспективно. Плевок в будущее, когда дизайнер выдаёт разработчику не только лишь готовую к употреблению пнг-шку, но и компонент с выверенными пикселями, прозрачностями тенюшек и состояниями. Нас интересует не макетирование во Фреймере, а сборка компонентов на Реакте. Надеюсь, что-то из этого продукта выйдет. Пока не более чем излишняя заумь для дизайнера. Разве что мозг размять.

Ещё для Фреймера уже нормально так пишут сторонние компоненты. Даже сами Airbnb сделали для него плеер Lottie-анимаций. Можно прототипировать сразу с ними. Кайф.

Профессиональная гостеприимность

Когда вы покупаете свой первый тюбик краски, у вас появляется лицензия нарисовать всё, что делает вас счастливым.

Это слова Боба Росса. Такой знаменитый дядька на американском телевидении. В течение получасовых передач он просто рисовал пейзажи. Эта фраза нравится мне тем, что художник не ограждает от людей ремесло, в котором он преуспел.

Очень не люблю «Валите из профессии»™. Худшая гадость, которую может сказать опытный спец начинающему. Считаю, умение помочь новичку разобраться, такая же часть профессионализма, как и остальные, прикладные навыки. Наверное, это уже учтено в табеле о софт и хард скилах, но что ж мне, не писать что ль теперь :)

Люблю наставления Андрея Ситника не бояться своего английского или неопытности в презентациях и всё равно выступать.

Люблю пост Сергея Короля о вине. Без снобизма: зацепила этикетка? Берите. Со временем разберётесь.

Люблю рассказ Бенджамина Цандера о классической музыке: без элитарности, без зауми. Смешно и для всех. Собственно, у него и подрезал свою дежурную идею о музыке: музыка — для всех.

Люблю цикл уроков Алексея Саватеева «Математика для гуманитариев». Уж этому племени совсем тяжело вешать эго на гвоздик и опускаться до уровня обывателя. Но у Алексея пылают глаза, словно он рассказывает для молодого себя.

Умение видеть ремесло глазами начинающего — драгоценно. Думаю, потерять этот навык и значит постареть.

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

Кто рано встаёт

Последние три недели ставлю эксперимент над здоровьем: просыпаюсь в 6:30, работаю с 8:00, ухожу домой в 17:00. Засыпаю где-то в 23 часа.

Время чувствуется по-другому. Может световой день обманывает голову. Кажется, что между уходом с работы и сном умещается ещё целый день. Времени действительно кажется больше.

Самый кайф это первые 2−3 часа на работе, когда ещё никого нет. Никаких «Есть 5 минут?» длиной в полчаса. Успеваю переделывать как за весь последующий день :)

Когда ухожу в 17 часов, станция метро ещё не так востребована. Толпа не успевает в полном составе ломануться в транспорт: большинство всё-таки уходит в 18.

Солнечный свет какой-то магический. Заставляет шевелиться. Во времена, когда вертался с работы под 10 вечера не хотелось ничего делать, кроме как позалипать в комп и спать. Теперь же свет за окном просто не позволяет: давай, делай что-нибудь, у гомосапиенсов сейчас движняк.

Из минусов: идти спать в 11 вечера как-то обидно. Ещё, когда рано утром едешь в транспорте (пустом!), в твиттеро-контакте ещё не успело понаписаться контента и прочитываешь сильно быстро.

Кстати, с ребятками из Томска временной сдвиг сгладил :)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мысли.

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

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

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