Мобайл: дизайн и разработка – Telegram
Мобайл: дизайн и разработка
474 subscribers
8 photos
158 links
Android-разработчик и дизайнер делится своим опытом, полезными инструментами, выжимками статей и докладов.
Download Telegram
7 принципов хороших тестов

Выписал главное из неплохой статьи про тестирование. Себе взял на заметку то, что нужно реже мокать data-классы и по возможности писать функции, которые упрощают тест-кейсы. А если вы всё ещё не тестируете код, самое время начать. 😉 Недавно я покрывал свой проект тестами и в процессе обнаружил серьёзную логическую ошибку, которая проявила бы себя только в продакшене, внезапно сломав авторизацию в приложении.

Итак, хорошие тесты:

Быстрые

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

Чтобы ускорить их выполнение:

— Не полагайтесь на Robolectric и PowerMock

— Реже используйте Mockito. Мокать data-классы — явный оверкилл. От себя посоветую библиотеку Pojo Data Mocker, которая заполняет data-классы рандомными данными. Если вам не нужны реальные данные, она очень выручает.

Независимые

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

Исчерпывающие

Предусмотрите все возможные исходы работы кода. На каждое условие в тестируемом методе напишите тест, который покроет срабатывание этого условия.

Воспроизводимые

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

Профессиональные

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

Читаемые

Название и тело теста должны легко читаться. Если вы пишете на Kotlin, возьмите название тестовой функции в обратные кавычки, и простыми словами опишите, что происходит в тесте. А сам тест будет читаемым, если следовать предыдущему принципу.

Автоматизированные

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

https://www.activecampaign.com/blog/inside-activecampaign/seven-principles-great-unit-tests-android/
26 правил цифровой типографики для начинающих

Из этой статьи я узнал много вещей, которые хотел бы знать, когда только начинал заниматься дизайном:

- Когда подбираете шрифтовую пару, используйте комбинацию Serif и Sans Serif (с засечками и без засечек). Высота шрифтов в паре должна быть примерно одинаковой.
- Оптимальный размер текста — 14–18 пикселей.
- А длина строки — 45–75 символов.
- Высота строки — 150% от размера текста.
- Не выделяйте текст капсом. Используйте bold или italic и придерживайтесь выбранного стиля везде в тексте.
- Последний пункт призывает писать числа словами, но в комментах есть более разумная мысль. Пишите словами числа от одного до десяти, и числами — всё, что больше.

Остальные 20 советов про то, как не косячить и выдавать читабельный текст — в статье:

🇺🇸 https://medium.com/product-design-ux-ui/26-digital-typography-rules-for-beginners-a04c6a5aaff3

🇷🇺 http://deadsign.ru/tipografika/26\_typography\_rules/

#дизайн #типографика
——
Я всё время забывал добавлять теги к постам. Сегодня добавил напоминание о тегах в шаблон поста в Notion, теперь точно не буду забывать. 👌
​​Разработчик и дизайнер из Google рассказывает, как делали анимацию в приложении последней Google I/O.

Внутри четыре кейса:

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

Каждый из разделов сопровождается ссылками на реализацию из исходников приложения на гитхабе.

https://medium.com/androiddevelopers/animating-on-a-schedule-8a90d812ae4

#разработка #анимации
Airbnb представили Android-фреймворк MvRx ("мáверикс"). Он помогает избавиться от бойлерплейта и берет на себя работу со стейтом и жизненным циклом. По словам разработчиков, фреймворк сокращает код на 50-75%. MvRx заточен на работу с Kotlin и использует Architecture Components от Google.

В его основе лежат 4 сущности:

State — неизменяемый класс с данными, которые рендерит View

ViewModel — содержит бизнес-логику и хранит стейт

View — LifecycleOwner, который подписывается на изменения стейта

Async — класс, который отражает результат работы Observable (Uninitialized, Loading, Success, или Fail). Когда ViewModel уничтожается, механизм Async он автоматически отписывает ее от всех используемых Observable.

Здесь можно почитать, как пользоваться MvRx и как он устроен:
https://github.com/airbnb/MvRx/wiki

#разработка #архитектура #фреймворк
Привет 👏

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

1. Подписчик делится классным инструментом

Мы с командой на днях выпустили SDK для мобильных разработчиков — CleverPay.

CleverPay берет на себя все сложности работы с инаппами. Настройка валидации, кроссплатформенность покупок, безопасность и т.д. Все из коробки, и интеграция занимает часы, а не месяцы, как обычно. Поддерживаются Swift/Objective-C и Java/Kotlin.
https://cleverpay.io/developer/

2. В блоге Тобиаса ван Шнайдера вышла заметка про то, как улучшить взаимодействие разработчиков и дизайнеров.
http://www.vanschneider.com/10-tips-make-designers-developers-excel-team

3. AndroidX, замена SupportLibrary, вышел из беты
https://developer.android.com/topic/libraries/support-library/androidx-rn?linkId=57203177

4. Рассказ о Fabulous — приложении, которое помогает заводить полезные привычки. Как аккуратно и эффективно менять поведение пользователей.
https://phase.com/magazine/story-behind-the-fabulous-app/

5. Если во время загрузки картинки с помощью Picasso у пользователя пропадет интернет, вы получите не сообщение об ошибке, а наполовину черное изображение. Выход — использовать Glide или Universal Image Loader с костылями
¯\_(ツ)_/¯
https://proandroiddev.com/using-picasso-watch-out-for-half-black-images-957bc9550888
Классный обзор библиотеки Cicerone, которая помогает вынести логику навигации в отдельный компонент (например, презентер), не завязываясь при этом на Context.

Пользоваться ей просто:

1. Регистрируем Router в наследнике класса Application. Router переводит вызовы методов навигации в сущности Command.
2. Создаём и регистрируем Navigator’ы для нужных экранов. Они реагируют на поступающие Command и открывают активити или фрагменты.
3. В презентере вызываем App.instance.router.forward/back/backTo/replace(screenKey, transitionData).

https://habr.com/company/mobileup/blog/314838/

#разработка #инструмент
18 октября в московском офисе Яндекса пройдет митап Droid Party.

Доклады такие:

- «Сделайте погромче», или Аудио-приложения с точки зрения системы
- История внедрения VectorDrawable в Яндекс.Карты
- Работа с большим объёмом данных в Map Kit

Я тоже там буду, так что подходите пообщаться, особенно если мы вместе участвовали в Мобилизации 2017 ✌️

Регистрация: https://events.yandex.ru/events/meetings/18-oct-2018-1

#разработка #митап
Небольшая заметка про то, как использовать 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
Сделал конспект классного доклада о работе с тачами и жестами в Android.

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

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

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

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

https://twitter.com/i/moments/994601867987619840
В дополнение к предыдущему посту @product делится чеклистом для принятия выполненных дизайн-задач:
Forwarded from Дэйли 🎙
Когда-нибудь продакт менеджера заменят набором алгоритмов. А пока можно натренировать чеклист готовности дизайн задачи.

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

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 с учетом поддерживаемых платформ)
В 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
​​В марте моё приложение без предупреждения заблокировали в Play Store. Google посчитали, что я нарушил пункт соглашения, в котором шла речь об использовании рекламного идентификатора (Android Advertising ID). Это меня удивило, потому что в приложении не было рекламы. Я заподозрил во всем Crashlytics, который наверняка должен был оперировать данными юзеров. Оказалось, Firebase собирает ADID, если не отключить эту опцию вручную, но в документации это явно нигде не прописано.

Выходов два:

1) Добавить в приложение и в Play Store политику конфиденциальности. Этот инструмент поможет составить текст по шаблону, но на 100% доверять штуке из интернета я бы не стал и посоветовался бы с юристом.

2) Добавить в тэг <application> манифеста строчку
<meta-data android:name="google_analytics_adid_collection_enabled" android:value="false"/>

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

#android #googleplay
​​Google I/O 2019 еще идёт, а material.io уже обновился:

Гайды по дизайну темной темы для приложений
https://material.io/design/color/dark-theme.html

Инструменты для кастомизации material компонентов
https://material.io/tools/build-a-material-theme

Пара слов про звук в дизайне
https://material.io/design/sound/about-sound.html

#googleio
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

#дизайн #анимация
Как и обещал, делюсь конспектом 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) Переношу анимацию на экран, где она будет использоваться

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

#дизайн #анимация #конспект
​​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
​​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
Google добавили гайдлайны по визуализации данных — какие есть типы графиков и как выбрать подходящий, как графики выглядят и работают, и как объединять их в дашборды.
Ещё в блоге Google Design появилась статья о принципах визуализации данных.

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

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

#дизайн