Зачем мы нарисовали концепцию
Стриминговые сервисы — очень популярный формат потребления музыкального контента у россиян. В лидерах — Яндекс Музыка, YouTube, ВКонтакте, Apple Music и Spotify.
Главное преимущество Apple Music и Spotify среди пользователей MacOS — нативное приложение. Оно позволяет скачивать музыку в кэш, потребляет меньше ресурсов и не занимает лишнюю вкладку браузера, который можно случайно закрыть. У Яндекс Музыки такого приложения нет, а очень хочется.
Так появилась идея переосмыслить интерфейс веб-версии Яндекс Музыки и адаптировать его под гайдлайн приложений на MacOS.
Что возьмём от Яндекс Музыки
Мы поставили перед собой задачу — перенести основные функции приложения, оптимизировать экраны на меньший размер окна и не сломать привычки и паттерны поведения пользователей.
Ориентировались на веб-версию и мобилку — собрали главные экраны, изучили расположение элементов, типографику и композицию. В мобильной версии — подсмотрели подход к навигации и оформлению обложки исполнителя.
Собрали ключевой визуал бренда Яндекс Музыки — логотипы, иконки и фирменный шрифт. Использование этих элементов позволяет сохранить айдентику приложения.
Собрали референсы
Самые популярные приложения музыки на MacOS — Apple Music и Spotify. Элементы там расположены плотнее, чем в веб-версии Яндекс Музыки. Такой приём позволяет предложить пользователю больше контента.
Ещё на доску референсов попали дизайн-концепции от независимых авторов (они придумывают редизайн даже для Winamp).
В референсах изучали отдельные элементы — например, смотрели на размер и поведение панели воспроизведения.
Нарисовали прототип
Выбрали для работы над концепцией два экрана – главный и карточку исполнителя.
Центральный блок на главном экране остался без значительных изменений. Сохранили акцент на преимуществах сервиса: «Моей волне» и ежедневных рекомендациях.
Дополнили его навигационными элементами. Левая панель перемещает пользователя по рубрикам сервиса и даёт быстрый доступ к личному каталогу музыки. Блок справа отображает историю прослушиваний, последние лайки на треках и топ за неделю по всем пользователям.
Что получилось
В дизайне использовали реальный контент из Яндекс Музыки, чтобы понимать, как выстраиваются обложки альбомов и названия в рамках приложения.
На экране с исполнителем сделали акцент на крупную фотографию и выделили по умолчанию блок с контентом, популярным у пользователей сервиса.
Спроектировали дизайн в стиле последних MacOS — приложение само адаптируется под фон рабочего стола пользователя и выглядит восхитительно в любом цвете.
И на сладкое — добавили минималистичный виджет, чтобы можно было переключать музыку, не отвлекаясь от других важных дел.
Для тех, кто не готов ждать (и кто хочет приложение на 100% совпадающее с сайтом), как сделал я:
1. Берете сборщик отсюда https://github.com/nativefier/nativefier
2. Собираете готовое приложение так:
nativefier https://music.yandex.ru "$BUILD_FOLDER" --name "Yandex Music"
Все! Решение работает у меня уже год
объясни пожалуйста по подробнее)) Я скачал архив с гитхаб и куда мне вписывать эту команду
Это все работа в Терминале (Terminal), то есть в командной строке.
1. Запустить программу Терминал
2. Установить Node.JS (или убедиться, что он установлен путем запуска команды `node --version` (здесь и далее без кавычек) в терминале. Если он не установлен, то ответ терминала будет что-то вроде `command not found` в этом случае установить Node.JS отсюда https://nodejs.org/en )
3. Имея установленный node у тебя появляется команда `nvm` (это пакетный менеджер для ноды.) Все в том же терминале запускаем установку пакета nativefier (ничего качать с гитхаба не нужно, оно все сделает само). Запускаешь следующую команду (потребует пароль для системы)
sudo npm install -g nativefier
4. Теперь у тебя есть в системе установленный nativefier (проверить можно командой `nativefier --version` - ответ будет отличный от not found).
5. Собираем итоговое приложение. Для этого нужно знать путь (каталог) КУДА будет записано готовое приложение. Например, создадим его в папку на рабочем столе MyCoolYandexApp вот такой командой
nativefier https://music.yandex.ru ~/Desktop/MyCoolYandexApp --name "Yandex Music"
Если все в порядке - то на твоем рабочем столе будет создана папка MyCoolYandexApp и там будет лежать готовое приложение Yandex Music. Можно его запустить, проверить, если все ок - то по желанию перенести в более удобное место, вплоть даже до /Applications
Если не получится, то пиши, могу выложить готовую сборку (но только для M1 процессора)
Большое спасибо ;)
вот это я охренел! Спасибо, Друже, даже у меня бестолкового получилось!
Спасибо, о чудесный человек!
Спасибо тебе добрый человек!
Все замечательно работает
блин, а что делать если node установил, терминал версию нода показывает а nvm когда вводу пишет "соmmand not found" =/ Помоги плиз
К сожалению, там была опечатка, которую я не могу исправить уже. Не nvm, а npm (Node Package Manager). Итоговая команда была указана верно, то есть вам надо выполнить
sudo npm install -g nativefier