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

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

Проблема в том, что медиалента — это не один виджет и не просто плеер внутри ячейки. Это система, которая живёт на пересечении сразу нескольких тяжёлых доменов: динамически собираемый интерфейс, сетевые ограничения, декодирование медиа, менеджмент памяти, жизненный цикл вложенных контейнеров, UX‑требования к мгновенному старту, интеграция в чужие экраны и такие сложные системы, как BDUI, рекомендации, пагинации, и при этом — высокий трафик на массовом сценарии. 

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

Самое интересное в таких задачах начинается не на этапе «как добавить медиаленту», а на этапе ограничений и деградаций. В статье я разберу именно эту сторону задачи на примере приложения Яндекс Еды: как мы проектировали медиаленту, какие архитектурные решения не сработали, какие баги всплыли только на реальных данных, как мы строили observability для дебага и какие компромиссы в итоге оказались эффективнее красивой реализации.

Это путешествие длиной в год началось 14 июня 2025 года. До этого я был счастливым обладателем вот этого андроид-телефона Xiaomi Duoqin F22 Pro с кнопочной клавиатурой и Android 12. Экран у него был 640x960 пикселей. Клавиатура как у любого старого телефона - с двумя контролируемыми под андроидом софт-клавишами и кнопкой "Взять трубку", цифровой клавиатурой и джойстиком. И хоть рисовать на нем с этой клавиатуры было удобно как на сименсах 20 лет назад - мощность у него была совсем средняя.

И с покупкой нового телефона помощней, с большим экраном и без клавиатуры - все поменялось так, что пришлось за прошедший год перелопатить весь мобильный PaintCAD.

Есть такая городская байка: если угадать правильную скорость, то можно проехать десяток светофоров подряд и ни разу не остановиться, поймав «зелёную волну». Водители из разных городов охотятся за этим ощущением десятилетиями. А мы взяли щепотку данных, немного технологической магии, дизайна и превратили эту байку в работающую фичу в навигаторе 2ГИС. 

Меня зовут Даня. Я продуктовый дизайнер команды Транспорт и сейчас расскажу, как мы собирали зелёную волну: от первого скетча до запуска.

Как сделать интернет-магазин мебели удобным для покупателя? В этой статье собрал 10 мебельных eCommerce-проектов с сильным UX и удачными решениями по юзабилити. Разобрал, как бренды выстраивают навигацию, оформляют каталог, помогают выбирать товары и упрощают путь до покупки.

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

Всем привет! Apple удалила «РСХБ Онлайн» из App Store в 2022 году. С тех пор мы выпустили пять новых iOS-приложений — «Учёт надоя», «Ягодный фест», «АгроСкан», «PRO Зерно» и «ПРО Жарка». Каждое рано или поздно удаляли. И каждый раз перед нами вставала одна и та же задача: перевести клиентскую базу со старого приложения на новое. Без App Store. Без возможности обновить бинарник. Без push-уведомлений в устаревшем клиенте.

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

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

Когда команда запускает витрину продукта — каталог, рекомендации или подборки, —  почти сразу возникают вопросы: «Будут ли пользователи что-то из неё скачивать или покупать и какая будет конверсия?»

До запуска на них сложно ответить честно: у пользователей ещё нет привычки, у продукта — стабильной выдачи, у витрины — накопленного доверия, а у команды — реальных данных поведения. Поэтому полезнее временно отложить вопрос «какая будет конверсия?» и спросить иначе: «Сможет ли витрина запустить выбор, когда у пользователя ещё нет сформулированного запроса?»

Меня зовут Таня Лескова, я ведущий UX-исследователь в магазине приложений RuStore. На примере исследований витрины RuStore расскажу, как мы проверяем такие сценарии до запуска: смотрим не на гипотетическое «скачал бы или не скачал», а на более раннюю цепочку — заметил, понял, поверил, захотел разобраться дальше.

Когда я впервые всерьёз сел писать AGSL под Android, ощущение было очень странное. С одной стороны - современный графический конвейер, RuntimeShader, RenderEffect, красивые эффекты и весь этот техно-киберпанк. С другой - шейдерный код живёт внутри строковых литералов, uniform-ы приходится объявлять и привязывать вручную, а отладка периодически начинается с философского вопроса: «в какой именно строке я сейчас всё сломал?»

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

Собственно, так и появился RedByteFX. Я сделал его не только ради собственного удобства. Мне хотелось решить ещё одну задачу: сделать AGSL более массовой и понятной технологией для Android-разработчиков. Потому что в нативном виде AGSL мощный, но психологически для многих выглядит как «не трогай, это на Новый год». А мне хотелось, чтобы к шейдерам можно было подойти без дрожи в коленях и без ощущения, что сейчас придётся разговаривать с господином ПЖ на древнем пацакском наречии.

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

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

Привет, Хабр! Я Александр, занимаюсь Flutter разработкой продукта Свой бизнес и Дизайн-системы в команде РСХБ.Цифра.  РСХБ это не только банк топ 5* по размеру активов, но и огромная экосистема Своё со множеством мобильных приложений разной тематики: банкинг, туризм, жильё, маркетплейс фермерских продуктов, поиск работы в агропромышленном комплексе и другие . 

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

Привет, Хабр! Меня зовут Андрей Юрин, я мобильный разработчик в онлайн-кинотеатре «КИОН». Недавно у нас произошел ребрендинг, который коснулся всех платформ, но ресурсов на весь идейный план не хватало. Было решено все делать в мини-команде супергероев из дизайнеров и разработчиков. Я был в зоне отвественности за Android TV и хочу поделиться, с какими проблемами пришлось столкнуться и как проходит ребрендинг в большой компании.

Привет, я — Александра, юрист для digital-агентств и фрилансеров. Сегодня на примере своего кейса расскажу о том, как мой договор спас веб-дизайнера в суде.

➡️ Начнём с небольшой предыстории.

Ко мне обратился основатель и арт-директор студии разработки сайтов & фирменного стиля для бизнеса и людей FRAMELAR[I] с запросом на создание детально проработанного договора на разработку сайта под ключ. Главный запрос на договор — закрыть риск неполучения исполнителем второй части оплаты после полного завершения проекта (студия работает по модели 50% оплаты до начала оказания услуг, 50% после сдачи проекта).

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

➡️ Начало сотрудничества студии с заказчиком или ничего не предвещало беды.

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

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

В 2013 году на Randomwire была опубликована интересная статья. В ней автор указал на интересные особенности японского дизайна. Японцы известны своим минимализмом, но в случае сайтов у них, почему-то, всё наоборот. Страницы пестрят всевозможными цветами, что уже нарушает 3 принципа дизайна, плюс на них используются мелкие иконки и мно-о-о-о-го текста.  Да вы и сами видите пример этого буйства фантазии на скриншоте выше, сделанном в ноябре 2022 года.

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

И вот мне стало интересно, как обстоят дела сейчас, и можно ли как-то количественно оценить дизайн японских сайтов? Собственно, этим я и занялся.

Всем привет! Меня зовут Саша, и последние 12 лет моя жизнь — это дизайн. Сегодня я руковожу дизайн-командой в KISLOROD, а в прошлом — помогал крупным брендам и миллионным сервисам обрести их уникальный голос и форму.

Сегодня расскажу о реализации удобного функционала фильтрации и сортировки товаров.

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

Февраль — месяц UX-тематики в нашем блоге. Сегодня рассмотрим рецензию на книгу  про презентацию UX-решения, и это будет вторая книга по UX вслед за рецензией на книгу «UX для бизнеса: как создавать цифровые решения, ценные для бизнеса и пользователей». В UX есть один неудобный факт, который редко признают вслух: качество дизайна почти не коррелирует с тем, попадет ли он в продукт. Можно сделать логичное, интуитивно-понятное и аккуратное решение — и увидеть, как продукт-оунер или другие боссы его упрощают, откладывают или выбрасывают из спринта на ближайшем совещании. И наоборот: слабые решения нередко проходят без сопротивления, если они правильно «проданы». Вот про продажу UX-решения внутри команды сегодня и поговорим.

Привет, Хабр! На связи Дима Мандельштам, мобильный разработчик в core‑команде Яндекс 360, и Лёша Карпенко, руководитель команды дизайн‑системы. Дизайн — часть повседневной работы наших команд, и он не живёт отдельно. Поэтому сегодня в статье мы вместе поговорим о том, как мы собирали компонент List‑item.

Мобильные разработчики в этой статье найдут метод, с которым можно достичь баланса между гибкостью кода и простотой поддержки. Мы расскажем, как применили data‑driven‑подход к рефакторингу UI: написали анализатор AST для поиска реальных паттернов использования и вывели математическую метрику сложности API. А ещё расскажем о том, как аргументировать и провести масштабную переработку legacy‑кода, не останавливая продуктовую разработку.

Продуктовым дизайнерам будет интересен альтернативный взгляд на проектирование List‑item в дизайн‑системе. Мы разберём, как собирать List‑item — как универсальный компонент с максимальной гибкостью или как набор семантических шаблонов под конкретные сценарии.

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

Привет! Меня зовут Евгений Шаламов, я продакт-менеджер в Битрикс24 и отвечаю за мобильное направление. В нашем основном продукте, в веб и десктопной версиях, реализованы десятки инструментов и сценариев, но весь этот масштаб сложно уместить в мобильный интерфейс. Да и сценарии работы в веб и на мобильном устройстве сильно отличаются. Поэтому мы актуализировали мобильное приложение и сделали из него рабочий инструмент, удобный для многих пользователей.

В последнем релизе мы представили обновленный интерфейс мобильного Битрикс24. Нам нужно было решить, как реализовать некий «обязательный минимум» для различных групп пользователей, ведь приложением пользуются сотрудники с совершенно разными ролями. 

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

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