🔨 Haiku

Помните Lottie — ту штуку, которая рендерит анимации из After Effects и при этом со стороны кода подключается не сложнее статической картинки? Так вот недавно появился Haiku. Он тоже работает с Lottie, но при этом заточен под анимацию интерфейсов. Возможностей пока не так много, как в AE, но разработчики собираются это исправить.
Одна из киллер-фич — Live Design. Если обновить деталь анимации в Sketch, она изменится в Haiku и во всех приложениях.

Бета-версия пока только для macOS, но планируются клиенты для Windows, Linux и веба.

Подробнее в блоге Haiku:
https://medium.com/haiku-blog/lottie-without-after-effects-9c5a8e74c239

#инструмент

Автор этой статьи сравнивает организацию Depedency Injection с помощью Dagger и нового фреймворка Koin.

Если коротко, то Koin круче, потому что:

- Подключается одной строчкой (вместо 7 у Dagger)
- Инициализируется тоже одной строчкой (вспомните свой класс Application)
- Не заставляет писать десятки аннотаций (потому что не использует кодогенерацию)
- Такой же быстрый, как Dagger

Выглядит очень лаконично, и я даже готов переписать на Koin свой заросший модулями пет проджект.

Разработчик из команды Runtastic пишет серию статей про устройство коллекций в Kotlin.
Первая статья про списки — сравниваем реализации, копаемся в байткоде и узнаём две вещи:

- Неизменяемые коллекции из Kotlin (List, EmptyList) могут быть неизменяемыми со стороны Java. Они выкидывают UnsupportedOperationException, если вызвать метод-мутатор из Java-кода. Это едиственный способ гарантировать immutability, если в проекте используются оба языка.
- Коллекции из Java (ArrayList) всегда изменяемы со стороны Kotlin.

https://www.runtastic.com/blog/en/tech/kotlin-collections-inside-part-1

Попросили рассказать о конференции:

9 декабря состоится пятый #ITsubbotnik в Санкт-Петербурге

В секции Mobile вас ждут 2 доклада:

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

Николай Ашанин расскажет о подходах к распознаванию лиц и о том, как их применить в мобильной разработке.

#ITsubbotnik - это бесплатная конференция для опытных разработчиков и инженеров.
Приходите!

Регистрация здесь: https://epa.ms/itsubbotnik-winter

Сегодня и завтра команда разработчиков Kotlin отвечает на вопросы.
Спрашивают про будущее языка, новые фичи и поддержку разных платформ, спросите и вы.

reddit.com/r/Kotlin/comments/7hoytl/kotlin_team_ama_ask_us_anything

Realm добавили first-class поддержку Kotlin:

- Результаты запросов теперь могут быть только nullable
- Аннотацию @Required можно заменить nullable или non-null типом поля
- Некоторые статические функции заменили экстеншн-функциями (dog.addChangeListener() вместо RealmObject.addChangeListener(dog, changeListener))
- Ключевое слово anyOf пришло на замену слову in, которое надо было брать в апострофы.
- Вместо передачи класса в метод можно использовать генерики (delete<Dog>() вместо delete(Dog::class.java))

https://realm.io/blog/realm-4-3-0-released-w-first-class-support-for-kotlin/

​​Spritz — делаем анимированный онбординг

Библиотека Spritz помогает использовать Lottie-анимации в онбординге. Анимация экспортируется из Affter Effects и привязывается к Lottie и ViewPager. Одни фрагменты анимации проигрываются автоматически, а другие — вместе со свайпом.
Выглядит лучше, чем статичные картинки, а реализовать это со стороны кода совсем не сложно — меньше 20 строк кода для трёх экранов.

Spritz на GitHub:
https://github.com/novoda/spritz

Статья-туториал:
https://www.novoda.com/blog/onboard-your-users-with-lottie-of-spritz/

Демо-приложение:
https://play.google.com/store/apps/details?id=com.novoda.spritz.sample

#библиотека

​​Классный туториал по ValueAnimator, который поможет анимировать любую часть вашего кастомного View.

Анимация, как на гифке, пишется в 10 строчек:

 
PropertyValuesHolder propertyRadius = PropertyValuesHolder.ofInt(PROPERTY_RADIUS, 0, 150);
PropertyValuesHolder propertyRotate = PropertyValuesHolder.ofInt(PROPERTY_ROTATE, 0, 360);

animator = new ValueAnimator();
animator.setValues(propertyRadius, propertyRotate);
animator.setDuration(2000);
animator.addUpdateListener(animation -> {
    radius = (int) animation.getAnimatedValue(PROPERTY_RADIUS);
    rotate = (int) animation.getAnimatedValue(PROPERTY_ROTATE);
    invalidate();
});
animator.start();

А во второй половине рассказывается об анимированных графиках. Сделать их не так сложно, как кажется.

Для практики можно закодить какую-нибудь красивую анимацию с Dribbble:
раз — dribbble.com/shots/3533668-Loading-Analytics-Chart-018
два — dribbble.com/shots/2924172-Line-Chart
посложнее, с кривыми Безье — dribbble.com/shots/2475280-Line-chart-graph-animation

#туториал

С новым годом, ребят 🎉
Вы классные, желаю вам продуктивности и крутых проектов в новом году!

Привет 👋

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

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

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

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

Сейчас решил ввести такой режим.

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

2-3 часа занимаюсь стартапом. Беседую с пользователями, организую заметки, рефлексирую.

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

В 9 вечера прекращаю работать. Отдыхаю, смотрю доклады, читаю книги и общаюсь с близкими.

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

Выводы из этой истории такие:

1. Если вы начинаете фрилансить, ищите проекты с почасовой оплатой.
2. Ставьте жесткие дедлайны и соблюдайте их. Если не успеваете, обсуждайте с заказчиком, ищите выход вместе. Фриланс — это круто и удобно, но расслабиться и стать непродуктивным так же легко, как привыкнуть к переработкам и выгореть.
3. Если вы хотите делать свой стартап параллельно с работой, хорошенько подумайте. Скорее всего, придётся отказаться от развлечений и меньше заниматься любимыми хобби.

В сегодняшней статье — гайд, как использовать делегаты и sealed-классы при работе с парами "ключ-значение". Они делают такие вещи, как сохранение стейта активити, удобнее и понятнее.
Например, bundle.putBoolean(Constants.KEY_SHOULD_SHOW_ONBOARDING, false) превращается в bundle.shouldShowOnboadring = false.

Кстати, не так давно Google выпустили Android KTX — набор экстеншн функций, с помощью которых можно причесать код. Главное здесь — поддержка самих Google, конечно, потому что похожих библиотек и до них было предостаточно.

medium.com/halcyon-mobile/simplify-your-android-code-by-delegating-to-sealed-classes-99304c509321

​​Фреймворк C.A.R.E. для идеального онбординга

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

Intercom предлагают разделить работу с пользователями на 4 этапа:

1) Перевести пользователей пробной версии продукта в платящих пользователей
На этом этапе мы показываем выгоду от использования продукта.

2) Помочь платящим пользователям извлечь выгоду из платной версии
Учим их пользоваться продвинутыми фичами.

3) Удержать платящих пользователей
Взаимодействуем с людьми до и после того, как они ушли.

4) Получить больше денег от платящих пользователей
Продаем им более дорогие версии продукта, которым они пользуются, или другие наши продукты.

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

https://blog.intercom.com/c-a-r-e-simple-framework-user-onboarding/

25 мая начнёт действовать Общий Регламент по Защите Данных. Он обязывает компании, у которых есть клиенты в Евросоюзе, быть более прозрачными в отношении персональных данных. Когда этот закон вступит в силу, пользователи смогут потребовать удалить свои данные или перенести их на другой сервис, а компании должны будут шифровать данные пользователей и уведомлять их о призошедших утечках в течение 72 часов.

AppTractor рассказали, что этот закон значит для дизайнеров и разработчиков.

https://apptractor.ru/info/articles/kak-podgotovitsya-k-gdpr-15-klyuchevyih-shagov.html

Отменить отмену

У нас есть попап для отмены заказа. Нам нужны две кнопки, одна из которых отменит заказ, а вторая закроет окно. Конечно, мы не можем назвать их "Отменить" и "Отмена".

Автор статьи предлагает, как назвать кнопку, которая закрывает окно:

1. Оставить заказ
Самый подходящий в большинстве случаев вариант.

2. Never mind
Формальный вариант, для которого тяжеловато подобрать подходящий русский перевод.

3. Закрыть, Назад, Нет, не отменять заказ, и подобные варианты.

Кнопка с деструктивным действием должна ясно выражать результат. Отмена этого действия в идеале должна быть помечена антонимом. Сбросить — Оставить, Удалить — Не удалять, Прервать загрузку — Продолжить загрузку.

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

https://uxdesign.cc/the-microcopyist-cancellation-confirmation-conflagration-8a6047a4cf9

​​Судя по Android P Developer Preview, нас ждёт обновлённый Material Design — много скруглённых углов, кнопки без теней и капса и новые цвета. В альфу Design Library уже завезли кнопки и скругленные карточки (и ещё много интересных изменений).

Уход от повсеместных теней (которые к тому же выглядят не слишком красиво) и выход контента на первый план могут означать, что Google наконец-то начнут думать об интерфейсе как об интерфейсе, а не как о бумаге.

На прошлой неделе Figma представили API для разработчиков. С его помощью можно скачать проект в формате JSON, читать и писать комментарии к файлам и экспортировать любой компонент в виде картинки. Пока что это все возможности, но разработчики обещают добавлять новые фичи.

В JSON-файле каждому экрану соотвествует объект CANVAS. В него входят элементы экрана с их свойствами — цвет, эффекты, шрифт и так далее. Можно работать с компонентами, сетками и констрейнтами.

В качестве юзкейсов Figma предлагают генерировать компоненты или стайлгайды, интегрировать спелл-чек для текстов в интерфейсе, делать живые мокапы и так далее.

Uber создали внутренний инструмент для того, чтобы сотрудники видели, над чем работают дизайнеры. Когда дизайнер готов показать свою работу, он перетаскивает макет в отдельный фрейм. Результат становится виден на телевизорах в офисе и в расширении для браузера.

Github сделали систему, которая автоматически обновляет иконки в проекте вслед за изменениями в макете. Сотрудник создаёт пулл-реквест со ссылкой на обновлённый макет, система continuous integration билдит проект, подтягивает иконки из макета в Фигме и нарезает их в подходящий для проекта формат.

Haiku представили интергацию с Фигмой и написали туториал про то, как анимировать элементы ваших макетов.

#figma #инструмент

​​Воу-воу, нас уже больше 800 человек! Привет всем, кто пришел из @sketchdesigner и @duiux. 👋

У меня два объявления.

Я ищу человека, который разнообразит канал постами об iOS.
Я не разрабатываю под эту платформу, поэтому писать что-то стоящее на тему iOS-разработки не могу. Если здесь есть желающие делиться классными материалами и мыслями — напишите мне в личку (@kondenko), будем вместе делать крутой канал про приложения.

По совету @okunev я решил обновить иконку канала и хочу услышать ваш фидбек. Ставьте лайки к этому посту или пишите, что не нравится — будем менять.

​​Я часто слышал о Protobuf, но плохо представлял себе, что это такое. Разобрался и рассказываю.

Сейчас мы используем JSON, чтобы передать или получить данные с сервера. Мы описываем объект в виде текста, передаем строку на клиентское устройство, парсим и переводим в объект.

Protobuf тоже помогает передавать данные. Для этого мы пишем proto-файлы (они напоминают обычные классы). На их основе мы создаём объекты, а Protobuf компилирует их в бинарный формат. Его уже нельзя прочитать, как JSON, но такие объекты занимают в 10 раз меньше места и обрабатываются в 100 раз быстрее.

Protobuf будет полезен, если мы обмениваемся данными с устройством по bluetooth, или работаем с большими объемами данных. В 2010 году Twitter перевели свою базу данных с XML на Protobuf. Это помогло им уменьшить размер 300 триллионов твитов с 10 петабайт до одного.

Если хотите попробовать сами — вот статья о том, как добавить Protobuf в Android-приложение (там же есть сравнение с JSON):
https://proandroiddev.com/how-to-setup-your-android-app-to-use-protobuf-96132340de5c

Документация для Java:
developers.google.com/protocol-buffers/docs/javatutorial

Завтра Telegram могут заблокировать, поэтому напоминаю, что у Мобайла есть странички в FB и ВК:
fb.me/mobiledesigndev
vk.com/mobiledesigndev

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

Google I/O 2018: что нового для разработчиков

На днях прошла конференция Google I/O, где показали много новинок мира Android-разработки. Рассказываю о некоторых из них.

Android Jetpack (g.co/androidjetpack)

Это обновлённый набор библиотек. Он объединил в себе уже известные (AppCompat, Architecture Components) и новые компоненты — например, Paging, Slices и WorkManager. Всё это поддерживается на 95% устройств (судя по всему, версия API 19+).

Navigation и редактор экранов (developer.android.com/topic/libraries/architecture/navigation)

Библиотека Navigation помогает визуально настраивать логику и анимации переходов между экранами. Да, теперь это выглядит как любой другой инструмент для прототипирования, но работает в Android Studio.

Вместе с этим добавили интерфейс анимирования элементов интерфейса, похожий на After Effects. Можно выбрать кнопку, перетащить её в новое место, привязать местоположение и свойства к фреймам, и посмотреть анимацию в редакторе экранов.

Android App Bundle и Dynamic Features (g.co/androidappbundle)

Новый вариант сборки приложения, который помогает уменшить размер apk-файла, вырезая ненужные ресурсы. Если вы соберете приложение с помощью App Bundle и загрузите его в Play Store, гугл соберет apk-файлы, в которых останутся только нужные для каждого конкретного устройства ресурсы.
Также в бандл можно включать модули с фичами, которые используются очень редко. Они будут подгружаться отдельно при необходимости.

Многие из этих инструментов ещё в альфе, поэтому не торопитесь добавлять их в свои приложения.

Презентация для разработчиков: https://www.youtube.com/watch?v=flU42CTF3MQ

Больше новинок с I/O: https://android-developers.googleblog.com/2018/05/google-io-2018-whats-new-in-android.html

#io #разработка

​​Google I/O 2018: что нового для дизайнеров

Material Design часто винили за то, что он слишком сильно ограничивал дизайнеров. Когда его представили, многие переделали приложения под гайдлайны, и это привело к тому, что интерфейсы стали похожими друг на друга. Обновленные гайдлайны предлагают больше способов выделиться.

Theme Editor — это плагин для Sketch, который помогает кастомизировать дизайн, при этом придерживаясь гайдлайнов.

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

У иконок теперь 5 стилей — Filled, Sharp, Rounded, Outlined и Two-tone.

В этом видео три визуально схожих продукта делают уникальными с помощью новых инструментов.

Скачать: material.io/tools/theme-editor/

Посмотреть: youtu.be/BLrgDgd_1c0

Gallery — Zeplin от Google.

В Gallery можно всей командой работать со скетчами, прототипами и готовыми макетами. Макеты можно выгрузить с помощью Theme Editor.

В Gallery есть свойства компонентов, синхронизация с библиотекой символов в Sketch. комментарии и другие фичи, которые мы ждём от подобного инструмента в 2018 году. Красиво, бесплатно, работает только на macOS High Sierra.

Скачать: material.io/tools/gallery

Посмотреть: youtu.be/TIB3q68ZHYw

#io #дизайн