Как стать автором
Обновить
57.85

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

Приложения для iOS, Android, Windows Phone

Сначала показывать
Порог рейтинга

Преимущества Rive при разработке Flutter-приложений

При разработке Flutter-приложений используют много типов анимации, о чем мы ранее уже писали. Но Rive всё-таки превосходит большинство из них. Во-первых, у него удобный встроенный UI-интерфейс. Во-вторых, в Rive есть раздел Community, где авторы выкладывают бесплатные анимации.

В-третьих, — и это главное преимущество — в Rive есть State Machine. Это визуальный способ связать анимацию воедино и определить логику, которая управляет переходами. State Machine позволяет создавать интерактивную графику движения, готовую к внедрению в ваш продукт, приложение, игру или веб-сайт.

State Machine включает несколько уровней:

  • Graph — пространство, в котором мы добавляем состояния и соединяем переходы.

  • State — анимации временной шкалы, которые могут воспроизводиться в нашей машине состояний.

  • Transaction — переходы представляют собой логическую карту для State Machine.

  • Inputs — договор между дизайнерами и разработчиками. Как дизайнеры, мы используем входы как способ управления переходами в нашей машине состояний, назначая их в качестве условий. Разработчики связываются с входами во время выполнения и определяют условия с помощью кода, который может изменить эти входы.

  • Layers — слой State Machine, который позволяет воспроизводить одну анимацию за раз.

Подробнее о том, как работает Rive и как интегрировать его в проект, в нашем блоге.

Теги:
Всего голосов 3: ↑3 и ↓0+5
Комментарии0

Дизейнеры заметили, что ранее анонсированный сервис Figma AI обучен на существующих приложениях. Например, «погодное приложение», созданное в с помощью новой функции «Создать дизайн» о Figma AI в результате в основном аналогична приложению «Погода» от Apple (слева). Дизайнеры пробовали три раза выполнить этот запрос, результат тот же.

Теги:
Всего голосов 1: ↑1 и ↓0+1
Комментарии0

Как развивать софт-скиллы, чтобы продвигаться в карьере (и когда они могут стать важнее твоих хардов) — узнай из записи встречи с Вовой Зиминым, дизайн-директором Яндекс Плюс. 

Вова заглянул в гости в Garage Eight и провел живой диалог с нашим дизайн-комьюнити. Получилась не лекция, а спич-импровизация, из которой мы узнали: 

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

А еще спикер поделился инсайтами разработки дизайна в Яндексе, своими собственными факапами и выводами, к которым они привели. Смотри запись встречи!

А если ты уже преисполнился во всех этих вопросах, может, тебя заинтересует вакансия дизайн-лида? ;-)

Теги:
Всего голосов 1: ↑1 и ↓0+3
Комментарии0

#статья Как безболезненно внедрить исследования в продуктовую разработку

Дизайнеры Samokat.tech начали проводить продуктовые исследования внутренними силами команды. «‎Что из этого вышло?» и «‎Как внедрить такой подход?» – разбираем на конкретных примерах от первого лица.

Примерное время прочтения: 10 минут.

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

– Глубинные исследования пользователей сайта

– Немодерируемые UX-тесты на сотрудниках и пользователях

– Физические исследования при работе на складе

Читать статью

Теги:
Всего голосов 1: ↑1 и ↓0+1
Комментарии0

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

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

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

Формировать подборки позволяет технология компьютерного зрения. Она распознаёт на снимках повторяющиеся сюжеты и собирает их в одну подборку. Подборки бывают не только тематические, но и периодические или по локациям. Например, с летними снимками и фотографиями из поездок. Для этого алгоритм учитывает мета‑информацию о датах и координатах, которая зашита в каждое фото.

Теги:
Всего голосов 2: ↑2 и ↓0+6
Комментарии0

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

Теги:
Всего голосов 1: ↑1 и ↓0+2
Комментарии3

«AI-инструменты для дизайнеров» — новый курс Яндекс Практикума

Курс для дизайнеров с опытом: вы не будете тратить время на освоение базовых инструментов, а сосредоточитесь на главном — работе с нейросетями. По итогу обучения вы научитесь подбирать и применять AI-инструменты, а не просто пользоваться набором готовых решений.

В программе минимум теории — вас ждут воркшопы с практикующими дизайнерами, а также индивидуальная и групповая работа над учебными кейсами. Воркшопы проходят с 12:00 до 16:00 мск, сессии ответов на вопросы — по средам с 19:00 до 20:00 мск. 

Курс рассчитан на 4 недели. Чтобы процесс обучения был комфортным, мы рекомендуем уделять ему не менее 7 часов в неделю: 4 часа на воркшоп, 1 час на сессию Q&A и не меньше 2 часов на самостоятельную работу.

Будете практиковаться сразу в нескольких нейросетях, с фокусом на Midjourney— доступ мы предоставим. Начнёте с неё и Stable Diffusion в оболочке Fooocus, а потом постепенно добавите и другие нейросети, чтобы сформировать устойчивый навык работы с ИИ. В конце обучения у вас будет 2 групповых проекта, которые можно добавить в портфолио.

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

Узнать все подробности и записаться на курс

Теги:
Всего голосов 3: ↑3 и ↓0+7
Комментарии0

Должен ли дизайнер думать об этике приложений, которые он создает?

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

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

В новом выпуске подкаста «Бремя технологий» Артур Арсенов, Product design lead Garage Eight, рассказал, почему специалистам не стоит пытаться решать краткосрочные цели бизнеса манипулятивными методами, и как простым пользователям защищаться от такого абьюза. 

Слушай подкаст по ссылке и делись в комментариях своим мнением по теме :-)

Теги:
Всего голосов 1: ↑1 и ↓0+3
Комментарии0

OpenAI обновила интерфейс приложения ChatGPT, сделав его минималистичным. Теперь пользователь общается с большим чёрным кругом, который изменяет свои формы и размеры в зависимости от происходящих событий. Когда ИИ говорит, то круг меняется, визуально усиливая ощущение диалога и взаимодействия.

По словам технического директора OpenAI Миры Мурати, новый интерфейс ChatGPT должен свести к минимуму отвлекающие факторы, чтобы пользователи могли полностью сосредоточиться на диалоге с ИИ.

Чёрный круг, выступающий в роли ИИ-собеседника, превращается в стилизованные волны звука, когда ChatGPT даёт ответ. Это визуально усиливает у пользователя ощущение коммуникации.

В настоящее время обновлённый интерфейс ChatGPT доступен только для настольных и мобильных приложений ChatGPT. В веб-версии сервиса по-прежнему используется стандартный текстовый интерфейс.

Теги:
Всего голосов 1: ↑1 и ↓0+3
Комментарии0

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

Теги:
Всего голосов 2: ↑2 и ↓0+3
Комментарии0

Apple пополнила свою библиотеку макетов для Figma. Дизайнерам стали доступны следующие шаблоны:

Теги:
Всего голосов 4: ↑4 и ↓0+6
Комментарии0

На YouTube-канале DesignCode опубликовали бесплатный курс по созданию 3D-моделей для iOS и visionOS в Spline. В двухчасовом ролике обсуждают следующие темы:

  • Базовые формы;

  • Материалы, свет и эффекты;

  • Камера, анимации и состояния;

  • Кнопки и компоненты;

  • Пошаговая анимация;

  • Создание 3D-иконки для iOS-приложения;

  • Создание 3D-иконки для visionOS-приложения;

  • Создание 3D-сцены;

  • Анимация частиц;

  • Экспорт моделей в SwiftUI-проекты.

Теги:
Всего голосов 6: ↑6 и ↓0+6
Комментарии0

Главные принципы инклюзивного дизайна 

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

Чтобы соответствовать высокому уровню доступности по WCAG, необходимо придерживаться 4 принципов.

1. Воспринимаемость

  • Всегда должна быть текстовая альтернатива нетекстовому контенту.

Кнопка-иконка в коде непонятно названа, и скринридер ее пропустил/непонятно произнес — человек не понял, что сделать
Кнопка-иконка в коде непонятно названа, и скринридер ее пропустил/непонятно произнес — человек не понял, что сделать
  • Капча должна быть представлена в нескольких формах.

  • Нельзя пренебрегать контрастностью.

2. Понятность

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

3. Управляемость

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

4. Надежность

Интерфейс должен оставаться доступным при изменении версий продукта или операционной системы.

Больше примеров доступных и недоступных интерфейсов найдете в нашей статье. А за вдохновением приглашаем в тг-канал нашей дизайн-команды

Теги:
Всего голосов 11: ↑9 и ↓2+7
Комментарии1

Ближайшие события

19 сентября
CDI Conf 2024
Москва
24 сентября
Конференция Fin.Bot 2024
МоскваОнлайн
30 сентября – 1 октября
Конференция фронтенд-разработчиков FrontendConf 2024
МоскваОнлайн

«Яндекс Еда» заявила о расширении функционала. В сервисе появилась новая вкладка «Гид» для пользователей с возможностью выбрать заведения для посещения офлайн в зависимости от предпочтений. Для ресторанов новая вкладка станет точкой соприкосновения с целевой аудиторией, и заведения получат дополнительный источник трафика не только в онлайн, рассказали информационной службе Хабра в пресс‑службе сервиса.

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

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

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

Теги:
Рейтинг0
Комментарии0

В магазине приложений RuStore появился новый формат сервисов и игр с быстрым доступом к контенту — мини‑приложения. Эти приложения не нужно устанавливать на устройство и обновлять, а для работы достаточно аккаунта VK ID, рассказали информационной службе Хабра в пресс‑службе RuStore.

В каталоге RuStore уже представлено 4 тысячи мини‑приложений и игр, они доступны в разделе «Мини». По словам разработчиков маркетплейса, сервисы созданы на платформе VK Mini Apps, среди них есть мини‑приложения от VK и от сторонних разработчиков. Эти предложения можно добавить на главный экран смартфона для быстрого запуска. Как заявили RuStore, мини‑приложения не занимают места и обновляются автоматически.

Теги:
Всего голосов 7: ↑7 и ↓0+7
Комментарии0

Мы выпустили 6-ую версию UIKit — ключевой библиотеки дизайн‑системы Gravity UI.

Что нового:

  1. Компонент List 2.0. В UIKit изначально был List, но в нём хотелось кое‑что доработать. При сборе запросов собрали список:

    • поддержка разных размеров и ширины;

    • иконка у элемента списка; разное количество и положение иконок;

    • поддержка стейтов;

    • разный контент в элементах списка (однострочный, многострочный или список пользователей);

    • поддержка разных видов разделителей и группировок.

    Это существенные изменения, поэтому мы создали List 2.0. Пока он выходит в prestable версии, но рекомендуем пользователям переходить на него и приносить фидбек.

  1. RTL. Если ваши приложения/сайты должны отображаться на иврите, арабском и других языках с направлением письма справа налево, нужна поддержка RTL‑стандартов. При этом в RTL:

    • вставленное слово на латинице пишется слева направо;

    • цифры пишутся слева направо;

    • знаки препинания в арабском также пишутся слева направо и т. д.

    Во всех компонентах мы поддержали параметр RTL. Чтобы под рукой был полный пример, сделали промостраницу на арабском. Посмотреть, как реализовано, можно в исходном коде landing. Также за примерами можно заглянуть в storybook.

  2. Доступность (a11y):

    • добавили в проект плагин eslint;

    • поддержали клавиатуру для clickable и closable состояния компонента Persona;

    • отключили onClick у 15 неинтерактивных компонент;

    • поддержали клавиатуру в компоненте SelectionTable.

Если есть запрос на доработку — приходите к нам в GitHub с issue или даже с PR. И используйте Gravity UI!

Теги:
Всего голосов 11: ↑11 и ↓0+11
Комментарии2

Для Figma вышел плагин Trace, с помощью которого можно сконвертировать дизайн в live-прототип приложения на SwifUI. Есть возможность просматривать код вёрстки, изменять его, видеть как это влияет на поведение приложения и переносить изменения в IDE. Для всего этого плагин подгружает полноценный симулятор iOS. Для преобразования дизайна в код SwiftUI используется нейросеть.

Изначально Trace появился в качестве сервиса для генерации экранов приложений по текстовому запросу с поддержкой только SwiftUI.

Теги:
Всего голосов 3: ↑3 и ↓0+3
Комментарии0

Oops! Something went wrong.

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

Проблема не в том, что верхушку с часами отрезали. И не в том, что время не указано в багрепорте. Она в том, что не задействовано то самое пространство на экране, которое пользователь показывает как доказательство бага. Это самая живучая часть багрепорта. Можно сколько угодно заставлять пользователя заполнять формы об ошибках - это никогда не будет так же надёжно, как самому себе подстелить соломку.

Поэтому, пожалуйста, показывайте вместе с "Oops" хоть что-то. И делайте это изначально. Вам как минимум известно текущее время - покажите его, причём лучше в UTC. Если от сервера пришёл заголовок с идентификатором запроса - покажите его тоже. Эти зацепки не должны потеряться в акте съёмки.

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

Oops! Something went wrong.
2024-02-29T12:19:19.883Z
c26e35c0-51c0-4cf0-a7af-1b40fde02fbc
GET https://example.com/user, 500

Теги:
Всего голосов 1: ↑1 и ↓0+1
Комментарии1

Приложения для часов Apple Watch. Ну или других часов.


Почему их так мало? Как спортивный калькулятор калорий многие используют. Или сообщения читают (а ответить крайне сложно и неудобно. особенно на совещаниях).
Неужели вот такой формат маленького экрана так ограничивает фантазию и никто не может придумать приличного варианта использования? Некие новые полезные функции или функции старые, но полезные и удобные именно в часах?
Ведь часов уже много поколений, а приложений для них буквально минимум.
Конечно по сравнению со смартфонами?
Или экран настолько ограничивает, что вариантов использования действительно мало?
Платить на кассе в странах где это работает? И читать сообщения?
У меня много знакомых с такими часами, но я не вижу, чтобы они пользовались кроме часов чем-то еще.
А ведь если мало приложений, то это большие перспективы? Рынок открыт и свободен. На смартфонах не пробиться со своим приложением. А тут открытый рынок. И никого на нем нет.
На Хабре последнее упоминание о часах apple в 2020

Теги:
Всего голосов 3: ↑3 и ↓0+3
Комментарии2

Сложности прокачки UI

Подписывайтесь на мой канал: t.me/designtusovka

Вы наверняка замечаете тренд на 100% понимание всего что связанно с UX?

Я стал задаваться вопросом “Почему так происходит?”. В последние годы я стал чаще и чаще замечать, что компании уделяют всё больше внимания UI-дизайну, нанимают специалистов заточенных под UI дизайн.

Неужели до СНГ компаний дошло что UX и UI это две разные позиции?

Тенденция показывает, что народ просто забил на UI, ведь каждый курс пестрит методологиями, сложными аббревиатурами, способами исследования. А выпускники знают только слова JTBD, RICE, Mindmap, custdev и тд. (Про умение применять это всё в жизни я молчу)

Почему-то все позабыли, что главный навык дизайнера — делать красиво.

Давайте разберём, почему же так мало реально мощных курсов / уроков по UI дизайну и почему это самый сложный навык в дизайне:

Насмотренность
Супер важна, чтобы стать хорошим UI-дизайнером. Это и про то, чтобы научиться видеть детали/фишки, и чтобы со временем научиться сразу интегрировать классные решения в свой продукт.

Время
Анализ, изучение других работ, коммуникация с дизайнерами — все это необходимо на постоянной основе.

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

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

Наставники
Очень нужны, особенно на старте. Они вас направят и помогут скорректировать курс.

Теги:
Всего голосов 1: ↑1 и ↓0+1
Комментарии1
1

Вклад авторов