Страница телеграм канала Мобайл: дизайн и разработка

aboutmobile logo

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

862 подписчиков

Канал про мобильные приложения. Выжимки толковых статей, инструменты, нескучные доклады и собственный опыт Владимир Конденко, фриланс-разработчик. @kondenko Не размещаю рекламу, но если вы делаете что-то годное, поделюсь бесплатно.


Входит в категории: Технологии
Мобайл: дизайн и разработка
27.08.2019 15:08
Когда вы удаляете мастер-компонент в Sketch, он предупреждает, что экземпляры компонента превратятся в группы. Figma сразу удаляет компонент, но его можно восстановить из экземпляра. У обоих подходов есть минусы — я не хочу видеть модалки и не хочу случайно потерять компонент, который где-то используется. Поэтому я написал плагин для Figma, который предлагает компромисс. Команда Safe удаляет компонент, только если его экземпляров нет в проекте. Бонусом я добавил команду Unused Components — она удаляет компоненты, которые нигде не используется. Плагин показывает, какие компоненты он удалил, и в случае ошибки их можно вернуть с помощью +Z. Пока плагин работает, интерфейс фигмы может зависнуть, поэтому не советую запускать его на очень больших проектах. Установить: https://www.figma.com/c/plugin/746849770992339499/Safely--Components Плагины в Figma работают на главном потоке и вешают интерфейс на время работы. Если вы пишите плагин, который обходит все объекты в документе, советую подсмотреть у меня реализацию функции hasInstances(). Она позволяет главному потоку хоть немного продохнуть и откликнуться на нажатие кнопки Cancel (но этот способ работает не всегда). Код плагина на Github: https://github.com/Kondenko/SafelyComponents #плагин #figma
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Мобайл: дизайн и разработка
22.08.2019 15:08
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/ #дизайн
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Мобайл: дизайн и разработка
27.07.2019 13:07
useAnimations — каталог анимированных иконок. Каждую иконку можно скачать в формате svg, json (Lottie) и aep (After Effects). Обновляется еженедельно. #анимация
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Мобайл: дизайн и разработка
16.07.2019 15:07
HttpMocker — это библиотека, которая подменяет реальные ответы сервера на заранее заготовленные. Полезно, если бэкенд для вашего приложения ещё не готов, вы хотите потестить специфичные сценарии и ошибки или просто подготовить красивые скриншоты для Google Play. Кроме подмены, эта библиотека может записывать в файл реальные ответы сервера, чтобы их можно было использовать в качестве mockов. Библиотека: https://github.com/speekha/httpmocker Туториал: https://blog.kotlin-academy.com/httpmock-my-first-oss-library-5bae8adbccf4 #разработка #android #инструмент #тестирование
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Мобайл: дизайн и разработка
09.07.2019 16:07
Если вы пользуетесь приложениями не на английском языке, вы наверняка замечали как интерфейс иногда разъезжается от слишком длинных надписей. Макеты, которые я верстал, грешили тем, что перевод на другие языки в них никак не продумали. Я вооружился Гугл табличками и сделал инструмент, который поможет проверить, что перевод слова не длиннее, чем оригинал. Как это работает: 1. Скопируйте табличку к себе в Google Sheets (File > Make a copy). 2. Выберите текст для кнопки или другого контрола, который не должен сильно меняться в размерах. 3. Вставьте текст в желтую ячейку рядом с Your text и укажите языковой код, если автоопределение языка не справляется. 4. Табличка подсветит красным переводы, которые длиннее оригинала. Если ячейка насыщенно красная — стоит выбрать другой текст или подумать о том, как кнопка будет выглядеть в переводе. Я хочу развить эту идею дальше и сейчас понемногу пишу линтер для Android Studio, который предупредит о длинных локализациях в strings.xml. Возможно, когда-нибудь я напишу плагин для Sketch или Figma, а пока буду рад услышать ваш фидбек о табличке и самой идее в комментариях. #дизайн #локализация
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Мобайл: дизайн и разработка
04.07.2019 13:07
Google добавили гайдлайны по визуализации данных — какие есть типы графиков и как выбрать подходящий, как графики выглядят и работают, и как объединять их в дашборды. Ещё в блоге Google Design появилась статья о принципах визуализации данных. Месяц назад я безуспешно искал гайды по дизайну графиков на мобильных устройствах, более или менее подходящей оказалась вот эта статья: Часть 1 | Часть 2 Если вы видели похожие материалы, но заточенные под мобайл, или сами дизайнили графики и вам есть, чем поделиться — напишите в личку (@kondenko), добавлю в пост #дизайн
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Мобайл: дизайн и разработка
07.06.2019 14:06
Актуальные версии библиотек AndroidX собрали в одну табличку: https://developer.android.com/jetpack/androidx/versions
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Мобайл: дизайн и разработка
05.06.2019 16:06
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
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Мобайл: дизайн и разработка
04.06.2019 16:06
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
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


26.05.2019 20:05
Как и обещал, делюсь конспектом 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) Переношу анимацию на экран, где она будет использоваться Эта тема меня захватывает всё сильнее, поэтому буду дальше прокачивать свои анимационные скиллы и делиться опытом #дизайн #анимация #конспект
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Мобайл: дизайн и разработка
23.05.2019 13:05
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 #дизайн #анимация
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Мобайл: дизайн и разработка
07.05.2019 21:05
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
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Мобайл: дизайн и разработка
08.04.2019 15:04
В марте моё приложение без предупреждения заблокировали в Play Store. Google посчитали, что я нарушил пункт соглашения, в котором шла речь об использовании рекламного идентификатора (Android Advertising ID). Это меня удивило, потому что в приложении не было рекламы. Я заподозрил во всем Crashlytics, который наверняка должен был оперировать данными юзеров. Оказалось, Firebase собирает ADID, если не отключить эту опцию вручную, но в документации это явно нигде не прописано. Выходов два: 1) Добавить в приложение и в Play Store политику конфиденциальности. Этот инструмент поможет составить текст по шаблону, но на 100% доверять штуке из интернета я бы не стал и посоветовался бы с юристом. 2) Добавить в тэг манифеста строчку <meta-data android:name="google_analytics_adid_collection_enabled" android:value="false"/> Для моего приложения политика конфиденциальности была лишней, поэтому я отключил сбор ADID. В комментариях на StackOverflow писали, что после такого приложение могут снова удалить, но всё обошлось — приложение восстановили через пару часов после обновления и оно уже месяц в Play Store без инцидентов. #android #googleplay
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Мобайл: дизайн и разработка
19.03.2019 13:03
В 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
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме


Мобайл: дизайн и разработка
21.01.2019 15:01
Когда-нибудь продакт менеджера заменят набором алгоритмов. А пока можно натренировать чеклист готовности дизайн задачи. Описание Какую проблему решаем? Как пользователь попадает сюда? 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 с учетом поддерживаемых платформ)
Читать

Обращаем внимание, что мы не несем ответственности за содержимое(content) того или иного канала размещенный на нашем сайте так как не мы являемся авторами этой информации и на сайте она размещается в автоматическом режиме