{"id":14289,"url":"\/distributions\/14289\/click?bit=1&hash=892464fe46102746d8d05914a41d0a54b0756f476a912469a2c12e8168d8a933","title":"\u041e\u0434\u0438\u043d \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043b \u043f\u0440\u043e\u0434\u0430\u0436\u0438 \u043d\u0430 5%, \u0430 \u0441\u0440\u0435\u0434\u043d\u0438\u0439 \u0447\u0435\u043a \u2014 \u043d\u0430 20%","buttonText":"","imageUuid":""}

Так сильно хотим Яндекс Музыку на MacOS, что уже задизайнили приложение

Автор: Reactive

Зачем мы нарисовали концепцию

Стриминговые сервисы — очень популярный формат потребления музыкального контента у россиян. В лидерах — Яндекс Музыка, YouTube, ВКонтакте, Apple Music и Spotify.

Главное преимущество Apple Music и Spotify среди пользователей MacOS — нативное приложение. Оно позволяет скачивать музыку в кэш, потребляет меньше ресурсов и не занимает лишнюю вкладку браузера, который можно случайно закрыть. У Яндекс Музыки такого приложения нет, а очень хочется.

Так появилась идея переосмыслить интерфейс веб-версии Яндекс Музыки и адаптировать его под гайдлайн приложений на MacOS.

Что возьмём от Яндекс Музыки

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

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

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

Собрали референсы

Самые популярные приложения музыки на MacOS — Apple Music и Spotify. Элементы там расположены плотнее, чем в веб-версии Яндекс Музыки. Такой приём позволяет предложить пользователю больше контента.

Ещё на доску референсов попали дизайн-концепции от независимых авторов (они придумывают редизайн даже для Winamp).

В референсах изучали отдельные элементы — например, смотрели на размер и поведение панели воспроизведения.

Нарисовали прототип

Выбрали для работы над концепцией два экрана – главный и карточку исполнителя.

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

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

Что получилось

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

Автор: Reactive

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

Автор: Reactive

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

Автор: Reactive

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

Автор: Reactive

С радостью обсудим концепцию здесь!

0
59 комментариев
Написать комментарий...
Murad Kakabaev

Для тех, кто не готов ждать (и кто хочет приложение на 100% совпадающее с сайтом), как сделал я:

1. Берете сборщик отсюда https://github.com/nativefier/nativefier
2. Собираете готовое приложение так:
nativefier https://music.yandex.ru "$BUILD_FOLDER" --name "Yandex Music"

Все! Решение работает у меня уже год

Ответить
Развернуть ветку
Уктам Хамидов

Почему в итоговом билде иконка от Google Play Music?🤣

Ответить
Развернуть ветку
Уктам Хамидов
Ответить
Развернуть ветку
Murad Kakabaev

Мне даже в голову не приходило так далеко копать )

Ответить
Развернуть ветку
56 комментариев
Раскрывать всегда