{"id":14286,"url":"\/distributions\/14286\/click?bit=1&hash=d1e315456c2550b969eff5276b8894057db7c9f3635d69a38d108a0d3b909097","hash":"d1e315456c2550b969eff5276b8894057db7c9f3635d69a38d108a0d3b909097","title":"\u041f\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430\u0434 \u043a\u0440\u0443\u043f\u043d\u0435\u0439\u0448\u0438\u043c\u0438 \u0418\u0422-\u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c\u0438 \u0441\u0442\u0440\u0430\u043d\u044b","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"

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

Ответить
Развернуть ветку
Даниярани

это только на мак?

Ответить
Развернуть ветку
Murad Kakabaev

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

Там Яндекс уже выкатил бету приложения, так что рецепт может быть неактуальным уже.

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