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

Автор: <a href="https://api.vc.ru/v2.8/redirect?to=http%3A%2F%2Fttttt.me%2Frktvru&postId=624291" rel="nofollow noreferrer noopener" target="_blank">Reactive</a>
Автор: Reactive

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: <a href="https://api.vc.ru/v2.8/redirect?to=http%3A%2F%2Fttttt.me%2Frktvru&postId=624291" rel="nofollow noreferrer noopener" target="_blank">Reactive</a>
Автор: Reactive

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

Автор: <a href="https://api.vc.ru/v2.8/redirect?to=http%3A%2F%2Fttttt.me%2Frktvru&postId=624291" rel="nofollow noreferrer noopener" target="_blank">Reactive</a>
Автор: Reactive

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

Автор: <a href="https://api.vc.ru/v2.8/redirect?to=http%3A%2F%2Fttttt.me%2Frktvru&postId=624291" rel="nofollow noreferrer noopener" target="_blank">Reactive</a>
Автор: Reactive

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

Автор: <a href="https://api.vc.ru/v2.8/redirect?to=http%3A%2F%2Fttttt.me%2Frktvru&postId=624291" rel="nofollow noreferrer noopener" target="_blank">Reactive</a>
Автор: Reactive

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

6565
59 комментариев

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

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

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

10

объясни пожалуйста по подробнее)) Я скачал архив с гитхаб и куда мне вписывать эту команду

Эта хрень настолько хорошо работает что даже реагирует на мультимедийные клавиши клавиатуры

1

npm команда у меня на маке не зараналась, поэтому решил не париться и просто создать ярлык на Я.Музыку через Сафари, работает отлично (https://support.apple.com/guide/safari/add-to-dock-ibrw9e991864/mac)

1

Низкий поклон добрый человек 👍

1

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

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

Раскрывать всегда
Стартап Mark Engineering представил книжную ИИ-закладку за $129 — но пользователи не поняли, как она работает и какую проблему решает

Заодно пошутили, что устройству уготовано место рядом с «умной» брошью от Humane.

88
66
22
11
реклама
разместить
Xiaomi открыла продажи спортивного электромобиля SU7 Ultra

Пока в Китае, по цене от 529,9 тысячи юаней (около 6,2 млн рублей).

Источник здесь и далее: Xiaomi, Carnewschina
1010
66
11
11
Добро пожаловать в век воли к невежеству
Добро пожаловать в век воли к невежеству

Как выразился Джордж Элиот: «Общепринятым утверждением является утверждение, что знание есть сила, но кто должным образом рассмотрел или изложил силу невежества?

«Абсолютно неинтересно, какие там придумывают санкции»: Герман Греф — о дивидендах «Сбера», санкциях и благодарности Apple за уход из России

Выжимка заявлений главы банка со звонка с аналитиками и инвесторами.

Источник: ТАСС
3636
1818
55
Отсутствие на рынке РФ качественных банковских сервисов - конечно же благо для Грефа, кто бы спорил
Анализ договора за 10 секунд с помощью AI

________________
Время настройки бота: 1 минута
Время анализа договора: 10 секунд
________________
▪ — Прописываем инструкцию (промт)
▪ — Тестируем
▪ — Используем

Анализ договора за 10 секунд с помощью AI
1919
1111
33
22
11
От лапши до смартфона: 13 культовых компаний, которые начинали вообще с другого

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

От лапши до смартфона: 13 культовых компаний, которые начинали вообще с другого
11
11
В VK никто не покупает? Клиент Vitamin.tools объясняет, что вы делаете не так

«VK пользуются все: и подростки, и пенсионеры. И среди них много платёжеспособных людей. Им можно продать почти любой продукт, если работать вдолгую: заинтересовывать, прогревать, отвечать на вопросы, напоминать о себе». — Рассказывает клиент рекламной экосистемы Vitamin.tools, возвращающей до 18% от пополнения рекламы, маркетолог Кирилл Чарушин.

В VK никто не покупает? Клиент Vitamin.tools объясняет, что вы делаете не так
3737
1010
55
22
ВК дно, это такой же хладеющий труп как и однокласники.
[]