Мобайл: дизайн и разработка

LottieFiles анонсировали плагин для After Effects.

Он позволяет:
• Экспортировать анимации для Lottie и анимированные стикеры для Telegram (вау)
• Показывать превью анимации на iOS, Android и в вебе
• Заливать свои файлы в LottieFiles и скачивать чужие
• Улучшать перформанс анимации с помощью графика отрисовки (как в приложении Lottie)

По этой рефералке можно записаться на ранний доступ:
https://lottiefiles.com/plugins/after-effects?id=r0fxd

Если запишется много людей и меня возьмут в бета-тест, напишу обзор и поделюсь впечатлениями от плагина 😉

#анимация #lottie

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

Команда Safe Delete удаляет компонент, только если его экземпляров нет в проекте. Бонусом я добавил команду Delete Unused Components — она удаляет компоненты, которые нигде не используется. Плагин показывает, какие компоненты он удалил, и в случае ошибки их можно вернуть с помощью ⌘+Z.
Пока плагин работает, интерфейс фигмы может зависнуть, поэтому не советую запускать его на очень больших проектах.

Установить:
https://www.figma.com/c/plugin/746849770992339499/Safely-Delete-Components

Плагины в Figma работают на главном потоке и вешают интерфейс на время работы. Если вы пишите плагин, который обходит все объекты в документе, советую подсмотреть у меня реализацию функции hasInstances(). Она позволяет главному потоку хоть немного продохнуть и откликнуться на нажатие кнопки Cancel (но этот способ работает не всегда).

Код плагина на Github:
https://github.com/Kondenko/SafelyDeleteComponents

#плагин #figma

Intercom запустили intercom.design. На этом сайте они рассказывают о своей команде, процессах и проблемах, которые решают.

Из интересного:

• принципы, которых Intercom придерживаются в дизайне и разработке продуктов:
https://www.intercom.com/blog/intercom-product-principles

• основы хорошего интерфейса:
https://docs.google.com/document/d/1d1GC04i0EXUAMcynr8Wj8CJ5cx4i9urooeBiqubT_4A/edit

• про работу в англоязычной компании:
https://www.intercom.com/blog/working-as-a-designer-in-a-foreign-language/

#дизайн

useAnimations — каталог анимированных иконок. Каждую иконку можно скачать в формате svg, json (Lottie) и aep (After Effects). Обновляется еженедельно.

#анимация

HttpMocker — это библиотека, которая подменяет реальные ответы сервера на заранее заготовленные. Полезно, если бэкенд для вашего приложения ещё не готов, вы хотите потестить специфичные сценарии и ошибки или просто подготовить красивые скриншоты для Google Play.

Кроме подмены, эта библиотека может записывать в файл реальные ответы сервера, чтобы их можно было использовать в качестве mock'ов.

Библиотека:
https://github.com/speekha/httpmocker

Туториал:
https://blog.kotlin-academy.com/httpmock-my-first-oss-library-5bae8adbccf4

#разработка #android #инструмент #тестирование

⁠Если вы пользуетесь приложениями не на английском языке, вы наверняка замечали как интерфейс иногда разъезжается от слишком длинных надписей. Макеты, которые я верстал, грешили тем, что перевод на другие языки в них никак не продумали. Я вооружился Гугл табличками и сделал инструмент, который поможет проверить, что перевод слова не длиннее, чем оригинал.

Как это работает:

1. Скопируйте табличку к себе в Google Sheets (File > Make a copy).

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

3. Вставьте текст в желтую ячейку рядом с Your text и укажите языковой код, если автоопределение языка не справляется.

4. Табличка подсветит красным переводы, которые длиннее оригинала. Если ячейка насыщенно красная — стоит выбрать другой текст или подумать о том, как кнопка будет выглядеть в переводе.

Я хочу развить эту идею дальше и сейчас понемногу пишу линтер для Android Studio, который предупредит о длинных локализациях в strings.xml. Возможно, когда-нибудь я напишу плагин для Sketch или Figma, а пока буду рад услышать ваш фидбек о табличке и самой идее в комментариях.

#дизайн #локализация

Google добавили гайдлайны по визуализации данных — какие есть типы графиков и как выбрать подходящий, как графики выглядят и работают, и как объединять их в дашборды.
Ещё в блоге Google Design появилась статья о принципах визуализации данных.

Месяц назад я безуспешно искал гайды по дизайну графиков на мобильных устройствах, более или менее подходящей оказалась вот эта статья: Часть 1 | Часть 2

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

#дизайн

Актуальные версии библиотек AndroidX собрали в одну табличку:

https://developer.android.com/jetpack/androidx/versions

​​WWDC 2019 — Что нового для дизайнеров

SF Symbols — это набор настраиваемых иконок от Apple. В него входят больше 1500 символов в 6 стилях и с 9 вариантами жирности. Найти их можно в одноименном приложении для macOS.


В Human Interface Guidelines добавили новые разделы:

— темная тема для iOS

— адаптация iPad-приложений для iPad под macOS

— многооконный режим на iPad

— материалы — полупрозрачные элементы интерфейса, которые создают ощущение глубины

— контекстные меню

— машинное обучение

Обновились разделы про цвет, модульность, навигационные меню, тактильный фидбек и другие. Все обновления можно посмотреть тут — https://developer.apple.com/design/whats-new.


Также Apple объявили победителей Apple Design Awards. Помимо дизайна приложения отличились использованием технологий Apple — CoreML и Apple Pencil.


И если вы пропустили, то недавно Apple представили шрифт с засечками New York. Он хорошо работает как в паре с San Francisco, так и отдельно. Лицензия предупреждает, что использовать его можно только в мокапах интерфейса для платформ Apple.
Скачать New York: https://developer.apple.com/fonts/

#apple #wwdc #design

​​WWDC 2019 — Что нового для разработчиков

— SwiftUI — декларативный фреймворк для создания интерфейсов. Очень похож на Jetpack Compose, который показали на последней Google I/O.

Такой подход всегда казался мне неудобным по двум причинам: во-первых, мы раздуваем и без того большие классы экранов; во-вторых, мы увидим результат только после того, как сбилдим приложение. В Android Studio Hot Reload работает так же медленно, как обычный билд, поэтому на него рассчитывать не стоит. Но на презентации SwiftUI работал довольно быстро, а в новой Android Studio обещают улучшенный Hot Reload, поэтому попробовать выйти из зоны комфорта однозначно стоит.

— У приложений для iPad можно включить поддержку macOS одним чекбоксом в настройках проекта.

— Обновился фреймворк ARKit:

People Occlusion — люди теперь полностью "вписываются" в AR-сцены.

Motion Capture помогает отслеживать движения людей в AR.

RealityKit упрощает создание и анимацию AR-сцен.

— Core ML тоже обновился:

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

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

CreateML — приложение для Mac, с помощью которого можно создать и обучить ML-модель без опыта в машинном обучении.

— В Siri добавили поддержку диалогов в шорткатах, и подсказки, которые основаны на том, что происходит в приложениях.

— Sign In with Apple — это замена авторизации через соцсети. Теперь при входе в сервисы они получат только ваше имя и фейковую почту, через которую будут перенаправляться письма на вашу личную почту.

#apple #wwdc

Как и обещал, делюсь конспектом Animation Handbook. Я собрал идеи, которые не повторяются в самой статье и то, чего не знал сам.

На самом деле лонгрид стоит прочитать целиком, потому что это отличное введение в моушн-дизайн. Суть в том, что анимации — не украшательство, а фундаментальная составляющая дизайна наряду с типографикой и цветами.

Telegraph: https://telegra.ph/Animation-Handbook-konspekt-05-26

Notion: https://www.notion.so/Animation-Handbook-791e3972faf34efc93ed6c8ee43bd343

Приятно было увидеть в статье такой же воркфлоу, какой я выработал для своего проекта:

1) Рисую макет в Sketch, параллельно держу в голове то, как буду его анимировать
2) Экспортирую макет в After Effects с помощью aeux.io и анимирую
3) Завожу в приложении отдельную активити, перевожу анимацию в код и слежу, чтобы она смотрелась естественно
4) Переношу анимацию на экран, где она будет использоваться

Эта тема меня захватывает всё сильнее, поэтому буду дальше прокачивать свои анимационные скиллы и делиться опытом 👌

#дизайн #анимация #конспект

InVision выложили книгу Animation Handbook — набор лучших практик анимации в интерфейсах. Её написал Ryan McLeod, дизайнер и разработчик игры Blackbox, которая выиграла Apple Design Award в 2017 году.

В книге 4 главы:

— Purpose — зачем нужны анимации

— Principles — составляющие части хорошей анимации

— Collaboration — подход разных команд к созданию анимаций (Google с их Material Design и Zova Fitness, тоже выигравших Apple Design Award)

— Taking animation further — нюансы, которые выводят анимации на новый уровень

Если найду неочевидные мысли и клёвые идеи, соберу в заметку и поделюсь, а пока убежал читать 🏃‍♂️

Скачать (придёт на почту): https://www.designbetter.co/animation-handbook

Читать: https://www.designbetter.co/animation-handbook/purpose

#дизайн #анимация

В Android 8 появились адаптивные иконки приложений, которые по-разному отображаются на разных устройствах. Недавно Google объявили, что похожий механизм будет работать и на страницах приложений в Google Play Store. У всех иконок в магазине появится тень и скругление углов на 20%.

Чтобы подготовиться к обновлению, можно почитать этот гайд —
https://developer.android.com/google-play/resources/icon-design-specifications. Иконка должна быть квадратной и без теней — всю красоту Play Store сделает за нас.

Начиная с 1 мая, обновления иконок в Play Store должны будут подходить под новые требования, а 24 июня все иконки переведут в легаси-режим — наложат их на белый квадрат с тенью. Загрузить иконку в новом стиле можно будет уже в начале апреля.

Анонс обновления в блоге:
https://android-developers.googleblog.com/2019/03/introducing-new-google-play-app-and.html

#android #googleplay

Когда-нибудь продакт менеджера заменят набором алгоритмов. А пока можно натренировать чеклист готовности дизайн задачи.

Описание
🧯 Какую проблему решаем?
🚪 Как пользователь попадает сюда?

Big picture
🗺 Карта кликов (все кликабельные элементы и переходы)
🌐 Big picture (вставить дизайн решение в весь видимый пользователю UI)

Состояния экранов
🖥 Breakpoints, например, 0+, 600+, 960+, 1280+, 1920+
💻 Дополнительное поведение между брэйкпойнтами при необходимости
📱 Ограничение экрана по высоте, portrait vs landscape

Состояния элементов
🖱 Active, hover, clickable area
☀️ Светлая и тёмная темы
💬 Положительные и отрицательные сценарии, например, при вводе пользователем полей

Состояния контента
⏱ Пограничные состояния количества элементов контента (0, 1, несколько, сотня)
💾 Объём контента внутри элемента, например, мало или много текста
🎬 Первый шаг взаимодействия (что произойдёт в самом начале у пользователя без истории взаимодействия)
🏁 Последний шаг взаимодействия (что произойдёт, когда всё, что надо было показать, закончилось)
🦖 Заглушки, когда какая-то часть данных не придёт с сервера, например, изображение

Локализация
🇮🇩 Текст с большим количеством букв, например, индонезийский
🇨🇳 Иероглифы, например, simple chinese
🇦🇪 Right to left, например, арабский

Самоконтроль
📍 Масштабируемость (насколько сложно в дальнейшем будет поменять и добавить будущие решения)
✏️ Дальнейшее наполнение (как будет добавляться контент)
🔗 Консистентность с уже существующими дизайн решениями в продукте
🔧 Проверка технического решения (на реализуемость, на сроки, на переиспользование, caniuse с учетом поддерживаемых платформ)

В дополнение к предыдущему посту @product делится чеклистом для принятия выполненных дизайн-задач:

Бывает, что рисуешь интерфейс, и он кажется каким-то "не таким". Зачастую это можно исправить без особых усилий. Поменять размер шрифта, увеличить отступы, переставить местами блоки, и вот уже другое дело. Подписчик @vintr_hd поделился списком советов, как сделать интерфейс лучше с помощью таких небольших изменений. 

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

https://twitter.com/i/moments/994601867987619840

Сделал конспект классного доклада о работе с тачами и жестами в Android.

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

https://medium.com/@kondenko/mastering-the-android-touch-system-fdcca4468c31

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

Небольшая заметка про то, как использовать Architecture Components и не косячить:

1. Когда подписываетесь на обновления LiveData во фрагменте, передавайте в метод observe не сам фрагмент (this), а viewLifecycleOwner. Это предотвратит создание новых Observer'ов при пересоздании view фрагмента, если сам фрагмент сохраняется во время смены конфигурации.

2. Загружайте данные для экрана не в методе onCreate/onCreateView, а в конструкторе ViewModel. Благодаря этому данные не будут загружаться заново каждый раз при смене конфигурации.

3. Если вы передаете ссылку на ViewModel объекту, который живет дольше, обнуляйте её в методе onCleared, чтобы Garbage Collector смог её уничтожить.

4. Убедитесь, что View из ViewModel получают LiveData, а не на MutableLiveData. View не должны изменять данные в LiveData.

5. Передавайте во ViewModelProvider не сами зависимости, а их провайдеры (class MyViewModelFactory(private val repository: Provider<MyRepository>)). Тогда зависимости не будут создаваться каждый раз, когда ViewModelFactory пересоздается при смене конфигурации.

https://proandroiddev.com/5-common-mistakes-when-using-architecture-components-403e9899f4cb

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