Дизайн мобильных приложений *

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

О чем будет в этой статье

Я хочу раскрыть на конкретных примерах следующие моменты:

1. Почему второй слой разработки?
2. Отзывчивость интерфейса
3. Микроанимации
4. Визуальная логика

Рассмотрим на примере в том числе и этого проекта

Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-июнь 2019.

Шок и трепет

В мае сего года мне позвонил ведущий программист проекта DO-RA, ранее работавший в крупных международных компаниях и оперирующий с мобильной платформой iOS. Его через Apple connect любезно предупредили, что: в действиях, программах, отчётах и, по-видимому, в его замыслах идентифицированы признаки мошенничества, спама, нарушения авторских и иных прав с их монотонным перечислением на юридическом английском.

Наш программист написал апелляцию в компанию, в том духе, что лицензиат не совершал никаких порочащих его действий, способных повредить ему самому, его аккаунту и, тем более, компании Apple. И стал ожидать ответа. По регламенту рассмотрение подобных обращений происходит за 10-30 дней.

Привет, Хабр! Меня зовут Николай, и я занимаюсь построением и внедрением моделей машинного обучения в Сбербанке. Сегодня расскажу о разработке рекомендательной системы для платежей и переводов в приложении на ваших смартфонах.


Дизайн главного экрана мобильного приложения с рекомендациями

У нас было 2 сотни тысяч возможных вариантов платежей, 55 миллионов клиентов, 5 различных банковских источников, полсолонки разработчиков и гора банковской активности, алгоритмов и всего такого, всех цветов, а ещё литр рандомных сидов, ящик гиперпараметров, пол-литра поправочных коэффициентов и две дюжины библиотек. Не то чтобы это всё было нужно в работе, но раз начал улучшать жизнь клиентов, то иди в своём увлечении до конца. Под катом история о сражении за UX, о правильной постановке задачи, о борьбе с размерностью данных, о вкладе в open-source и наших результатах.

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

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

Привет, Хабр!

В этой статье мы рассмотрим процесс создания экранов, опираясь на макеты из первой части.

Раньше для поддержки iPad делали отдельный xib. Чтобы унифицировать лейаут, в 2014 году Apple представила Auto Layout и Size Classes, а для адаптивной навигации UISplitViewController.

Split-контроллер — это контейнер, который разместит два контроллера рядом. Слева будет навигационный контроллер (речь не про Navigation Controller), справа соответсвующий выбору в навигационном. Короче, как в Настройках.

Разберем как настроить UISplitViewController и его поведение на экранах.

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

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



Ответ прост: нам мешает традиционный взгляд. Мы в ВТБ совместно со студией визуальных коммуникаций «Амперсанд» решили создать банковское приложение нового типа, которое и банковским приложением уже не назовешь. Чтобы оно увидело свет именно в том виде, в котором мы задумывали, нужно было изменить традиционные процессы разработки. О том, как мы это сделали, читайте далее.

Материал этой статьи является следствием моих дизайн-экспериментов и выводов за последний год-полтора непрерывного дизайн гринда. Я неустанно собирал ui kit’ы, экспериментировал с контентом в плейсхолдерах, стилями, тенями текстами и состояниями, чтобы понять влияет ли это на конверсию. Иначе говоря, смогу ли я увеличить продажи дизайн-продуктов для Figma, если добавлю немного визуальной динамики в статичные дизайн-макеты, чтобы сделать темплейты интереснее и функциональнее.

ГЛАВА 1. Амбиции

Конец февраля 2018



Мы, как адепты идеологии свободного ПО и свободного рынка считаем, что монополия — это плохо.

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

Команда: в разное время от 2х до 4х человек.

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

ГЛАВА 2. Маршрут во мраке

Март – июнь 2018.

Нужна карта. Берем SVG, пихаем в SVGView, все отлично. Лагает ужасно, но мы радостные. Как рисовать отдельные маршруты? Никто не знает.

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

К тому же нам было нужно, чтобы приложение работало как можно быстрее. Использование WebView сразу отпадает, нужна GL-поверхность. Решили попробовать с SurfaceView (opengl поверхность, которую можно использовать как канвас) – всё не то. Она может производить изменения внутри себя, мигая черным цветом, так как она просто плохо реализована и не может выдержать нагрузку больше отрисовки кубика 20х20. Она может увеличиваться, пропадая через раз. Нам нужно было другое решение, но такое, которое было бы не так далеко от SurfaceView, так как по интерфейсу нам она полностью подходила.


Вкратце про баги драйверов на Android

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



Собственно, к версии приложения 3.0 наконец получилось реализовать все основные функции, которые хотелось. После прошлой статьи из этой серии его скачало некоторое количество людей, и даже написали отзывы — спасибо, ко всем прислушался. Работал над новой версией месяца два интенсивно, все мелкие изменения не перечислить — по сути это на 80% новое приложение. С кардинально улучшенным интерфейсом, раза в 2 быстрее и значительно стабильнее. Опять же, приглашаю сочувствующих оценить и поругать. А под катом снова технические моменты.

Вот тут ссылки на айфон и андроид

На седьмой встрече iOS-разработчиков в нашем офисе обсуждали самописный remote cache для iOS, feature toggles, как использовать proxy-объекты в разработке тёмных тем для приложений, и рассмотрели разные варианты развития карьеры разработчика (фриланс, работа на корпорацию, работа на свой проект). Этот пост — отчёт о том, как прошёл митап. Внутри — видеозаписи, презентации спикеров, ссылки на фотоотчёт и отзывы участников встречи.

Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-май 2019.

Google продолжает улучшать нашу жизнь, выпуская новые удобные библиотеки и API. Среди которых оказался и новый MotionLayout. Учитывая обилие анимаций в наших приложениях, мой коллега Cedric Holtz сразу же реализовал важнейшую анимацию нашего приложения — голосование в знакомствах — с использованием нового API, сэкономив при этом огромное количество кода. Делюсь переводом его статьи. 

Недавно закончилась конференция Google I/O 2019, на которой анонсировали обновления и самые свежие улучшения нашего любимого SDK. Лично мне особенно интересна была презентация Николаса Роарда и Джона Хофорда о будущей функциональности ConstraintLayout. А точнее, о его расширении в виде MotionLayout. 

После выпуска бета-версии мне захотелось реализовать анимацию знакомств на основе этой библиотеки.

Сделаем на SwiftUI анимированные карточки с поддержкой жестов:

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

Потребуется

SwiftUI сейчас в beta, и устанавливается вместе с новым Xcode, который тоже в beta. Хорошая новость — новый Xcode можно поставить рядом со старым, и практически не почувствовать боли.

Скачать его можно по ссылке в разделе Applications.

Вы могли встречать риалтайм-превью во время работы со SwiftUI. Чтобы активировать его, а так же некоторые контекстные меню, нужно установить бету macOS Catalina. Тут без боли не обойдется. Я бету не ставил, поэтому буду по старинке запускать симулятор.

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

А что если уйти еще дальше и помимо контента предоставлять людям персонализированный UI?!

Опыт онлайн-кинотеатра Иви

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

Меж тем компания год от года удваивала штат — нужно было масштабировать отдел дизайна и оптимизировать процессы создания и передачи макетов в разработку. Умножаем всё это на «зоопарк» платформ, которые нужно поддерживать, и получаем подобие вавилонского столпотворения, которое просто не способно «нормально делать» и приносить доход. Развитие платформ часто шло параллельно, и один и тот же функционал мог выходить на разных платформах с лагом в несколько месяцев.

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



Гляньте короткое видео, как работает с плагин.

Всем привет! Меня зовут Анатолий Варивончик. Я работаю в Badoo уже больше года, а мой общий стаж Android-разработки — более пяти лет.

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

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