Analyse und Neugestaltung von Musikplayer-Apps (Anwendungssoftware) So gestalten Sie eine ansprechende Musikplayer-Oberfläche

Analyse und Neugestaltung der Musikwiedergabe-App Sanlian Tutorial

Ich habe mich schon immer für drahtlose Interaktion interessiert, deshalb werde ich es dieses Mal üben ~
Diese Analyse und Bewertung basiert auf der iOS-Plattform und wählt zwei repräsentative Musikplayer aus, QQ Music und Douban FM. Da diese beiden Produkte bereits über eine riesige Benutzerbasis im Web verfügen und eine gewisse Benutzerbindung aufweisen, stellt die mobile Version eine Erweiterung der Webversion dar und die Zielbenutzer, die Informationsarchitektur, das Kernerlebnis usw. erben auch den unverwechselbaren Stil der Webversion. Diese beiden Produkte können zwei Kategorien von Musikplayern mit unterschiedlicher Positionierung darstellen. Eines ist groß und umfassend, mit umfassenden Funktionen, die den verschiedenen Bedürfnissen der Benutzer gerecht werden können, wie etwa der Verwaltung lokaler Musik, der Synchronisierung von Musik von anderen Geräten, dem Entdecken guter Musik usw. (ähnliche Anwendungen: Baidu Ting, Kuwo Music Box, iScrob). Eines ist klein und einfach, leicht zu bedienen, genau wie ein Radio: Einfach einschalten und zuhören, und wenn es Ihnen nicht gefällt, den Kanal wechseln (ähnliche Anwendungen: Xiami FM, Console.fm).
QQ Music 1. Übersicht über die Benutzeroberfläche

2. Bedarfsanalyse. Zielbenutzer: normale junge Leute, die Musik lieben und treue Benutzer von QQ-Produkten sind.
Benutzeranforderungen: Hören Sie jederzeit und überall Musik. Sie können lokale Musik hören, wenn kein WLAN verfügbar ist, und online, wenn WLAN verfügbar ist. Sie können Songs herunterladen, die Ihnen gefallen, und auf anderen Geräten gesammelte Songs synchronisieren.
Designziel: Bereitstellung von Funktionen wie lokales Abspielen von Musik, Kontosynchronisierung, Online-Hören und Musiksuche.
3. Informationsarchitektur QQ Music integriert Informationen aus vier Aspekten: lokale Musik, meine Musik, Online-Musik und mehr.

„Local Music“ kann lokale Musik verschiedener Sänger und Alben abspielen, Sie können auch Ihre eigene lokale Musikwiedergabeliste erstellen und nach zwischengespeicherten Songs suchen, die heruntergeladen wurden.
„Meine Musik“ synchronisiert die vom QQ-Konto gesammelten Songs und erstellten Wiedergabelisten auf verschiedenen Geräten. Dieser Synchronisierungsdienst kann die Benutzerbindung verbessern und die gute Angewohnheit der Benutzer fördern, sich rechtzeitig anzumelden. Um die sozialen Eigenschaften zu verbessern, gibt es auch ein sekundäres Menü „Songs bestellen“. QQ-Benutzer können Songs für ihre Freunde bestellen und die an Sie gesendeten Songs werden hier angezeigt.
„Online Music“ ist der Ort, um großartige Musik zu entdecken. Das „Radio“ ähnelt „Douban FM“, wo Sie zufällig Musik zu verschiedenen Themen hören können. Das System kann auch anhand Ihrer Sammlungen und Hörgewohnheiten erraten, was Ihnen gefällt. Hier stellen wir Diagramme mit neuen und beliebten Liedern bereit, um Benutzern zu helfen, Musiktrends so schnell wie möglich zu erkennen. Es gibt auch eine Sammlung ähnlich wie Xiami Music, die gute Musik mit Themen für Benutzer auswählt.
„Mehr“ integriert einige kleinere Informationen, darunter persönliches Konto, Cache-Einstellungen, geplante Nachrichtenbenachrichtigungen und Softwareinformationen.
4. Seitenlayout

Ähnlich wie die meisten iOS-basierten App-Layouts verwendet die Listenseite von QQ Music ein Layout im Listenstil zum einfachen Suchen und Erweitern. Die Hauptnavigation ist unten auf dem Bildschirm festgelegt, die sekundäre Navigation befindet sich oben, in der oberen linken Ecke gibt es eine einheitliche Zurück-Schaltfläche und in der oberen rechten Ecke befindet sich die Detailseite des wiedergegebenen Songs, auf der Benutzer die wiedergegebene Musik schnell finden und Vorgänge wie Stoppen, Abspielen, Favorit markieren, Herunterladen und Teilen ausführen können.

Die Songwiedergabeoberfläche wird im Vollbildmodus angezeigt und die am häufigsten verwendeten Schaltflächen für Wiedergabe/Pause, vorheriges Lied/nächstes Lied und Lautstärkeregelung werden standardmäßig angezeigt. Wenn der Benutzer auf das Songcover klickt, werden die Schaltflächen für den Songfortschritt, den Wiedergabemodus, die Favoriten, den Download und das Teilen angezeigt und der Benutzer kann hier entsprechende Vorgänge ausführen.
5. Gestensteuerung

Die Bedienung der Songs ist nicht kompliziert. QQ Music verwendet Online-Schiebe-, Links- und Rechtsschiebe- und Einzelklick-Bediengesten, von denen die meisten häufig verwendete und für Benutzer offensichtliche Gestenbedienungen sind. Nur beim Überprüfen der Liedtexte muss der Benutzer das Albumcover nach links wischen und das Bild nach unten links wischen, und die Liedtexte werden angezeigt. Dieser Vorgang ist nicht sehr leicht zu finden.
DoubanFM
1. Schnittstellenübersicht

2. Bedarfsanalyse. Zielgruppe: junge Menschen, die Musik lieben und treue Nutzer von Douban-Produkten.
Benutzeranforderungen: Wie bei Douban FM kann ich, sobald ich es öffne, die literarischen Lieder abspielen, die mir gefallen, ohne dass ich etwas tun muss.
Designziele: übersichtliche Benutzeroberfläche, einfache Bedienung, präzise Empfehlungen und verkürzter Pfad zum Abspielen von Songs.
3. Informationsarchitektur

Die Informationsarchitektur von Douban FM ist viel einfacher, mit flachen Ebenen und einfacher Bedienung. Sobald Sie das Radio einschalten, werden Lieder gespielt. Benutzer können über dem Song wischen, um MHz auszuwählen, oder aus einer Liste auswählen. Bei Douban müssen sich die Benutzer nicht die Mühe machen, auszuwählen, welches Lied sie hören möchten. Sie müssen nur die Kategorie auswählen, die sie hören möchten, und Douban empfiehlt sie automatisch. Douban hofft, dass die Benutzer den Radiosender „sorgfältig pflegen“ und auf der Grundlage ihrer langfristigen Nutzungsgewohnheiten die Lieder analysieren können, die sie zu ihren Favoriten hinzugefügt haben oder die sie nicht erneut abspielen möchten, und ihnen Lieder empfehlen können, die den Vorlieben der Benutzer entsprechen.
4. Schnittstellenlayout

Die Benutzeroberfläche von Douban FM ist sehr einfach. Wenn Sie die App öffnen, sehen Sie die Benutzeroberfläche zur Songwiedergabe mit nur den Schaltflächen „Gefällt mir“, „Wiedergabe beenden“ und „Nächster Song“. Sie können Hz auswählen, indem Sie über den Song gleiten. Der aktuell gespielte Song verschwindet allmählich und der neue Song wird allmählich mit einem sehr sanften Übergang erklingen.
Da Douban als Radiosender positioniert ist, können Sie ihn einschalten, wenn Sie zuhören möchten, und ausschalten, wenn Sie nicht zuhören möchten. Daher sind sogar die Wiedergabe- und Pausentasten vereinfacht. Wenn Sie auf ein Album klicken, wird das Cover umgedreht und die Bewertung des Songs angezeigt.

Klicken Sie auf die Schaltfläche in der oberen linken Ecke, um die Listenseite zur Kategorieauswahl der Songs aufzurufen. Die Listenseite ist in private MHz und öffentliche MHz unterteilt. Private MHz bezieht sich auf von Douban empfohlene Songs basierend auf Benutzergewohnheiten und von Benutzern gesammelten Songs, während öffentliche MHz gute Songs mit bestimmten Themen empfiehlt.
Klicken Sie oben rechts auf die Schaltfläche „Einstellungen“. Die Einstellungen werden in Form einer Erinnerungsnachricht angezeigt, wodurch Douban eine Benutzeroberfläche spart. Daher hat Douban FM mit nur zwei Seiten, der Song-Wiedergabeseite und der Listenseite, wirklich Minimalismus erreicht.

Auch die Benutzeroberfläche von Douban FM bedient sich skeuomorpher Designmetaphern. So sieht der Hintergrund, wenn keine Musik läuft, beispielsweise wie ein Radiolautsprecher aus, und die Details auf der Rückseite des Albums sind so gestaltet, dass sie wie die Rückseite einer echten CD aussehen.
Neugestaltung des Musik-Players 1. Produktpositionierung und Informationsarchitektur Die Neugestaltung dieses Musik-Players positioniert ihn als umfassenden Musik-Player, der die Bedürfnisse der Benutzer in verschiedenen Szenarien erfüllen kann. Er kann gute Musik online entdecken, Songs sammeln und herunterladen, lokale Musik verwalten und abspielen, nach Musik suchen usw.
Durch die Analyse bestehender Produkte wurde festgestellt, dass die Informationsarchitektur umfangreich ist und mehr empfohlene Musikinhalte enthält. Aus der Perspektive der Benutzerbedürfnisse hoffen Benutzer, wenn sie ziellos Musik hören, dass ihnen gute Musik empfohlen wird und dass sie sehen, welche die neueste populäre Musik ist. Wenn Benutzer Musik mit einem bestimmten Ziel hören, hoffen sie, schnell ihre Lieblingsmusik oder lokale Musik zu finden oder nach den Songs zu suchen, die sie hören möchten. Bei der Analyse bestehender Produkte stellten wir fest, dass viele Apps eine überwältigende Vielfalt an Empfehlungen wie verschiedene Radiosender, Sammlungen, Rankings usw. bieten, was die Benutzer nicht nur verwirrt, sondern die Produkte auch aufbläht.
Bei der Neudefinition der Produktfunktionen hoffen wir, Empfehlungen mit ähnlichen Funktionen, wie etwa Radiosendern und Sammlungen, zusammenzuführen und Empfehlungen aus unterschiedlichen Themen- und Musikerdimensionen abzugeben. Gleichzeitig hoffen wir, die Informationsarchitektur zu vereinfachen und den Benutzeroperationspfad zu verkürzen. Platzieren Sie weniger häufig verwendete sekundäre Aktionen unter „Mehr“, um primäre Aufgaben hervorzuheben. Nachfolgend sehen Sie eine Zusammenfassung der Informationsarchitektur:

2. Entwurf eines Produktprototyps Nach der Produktauswahl wird der Prototyp wie folgt hergestellt:

Beachten Sie die Informationsarchitektur und platzieren Sie die primäre Produktnavigation unten auf dem Bildschirm und die sekundäre Navigation oben. Flache Informationsarchitektur, keine sekundären Seiten außer Sammlungen. Wenn Benutzer zwischen den primären Navigationen wechseln, wird standardmäßig die erste Registerkarte angezeigt, die von Benutzern am häufigsten verwendet wird. Derzeit ist nur ein Klick erforderlich, um die Musikliste anzuzeigen.

Bei vorhandenen Musikplayern wird nach dem Anklicken des Lieds in der Regel eine neue Seite zur Wiedergabe des Lieds aufgerufen. Wenn der Benutzer nach dem Durchsuchen anderer Seiten die Musik ausschalten möchte, muss er die Wiedergabeseite erneut aufrufen, was die Seitentiefe erhöht.
Die Vorgänge und Informationen der Wiedergabeseite, wie etwa Pause, vorheriges Lied/nächstes Lied, Favoriten, Downloads und Wiedergabefortschritt, können in einen relativ kleinen Bereich integriert und am unteren Ende der Musikplayer-Listenseite platziert werden, sodass sie jederzeit einfach zu bedienen sind. Wenn der Benutzer die Liedtexte anzeigen möchte, kann er auf dem Player nach oben wischen, um die Liedtexte zu erweitern.

Wenn Benutzer daran gewöhnt sind, auf die Popup-Bedienebene zu klicken, können sie auch zu einer anderen Methode wechseln. Wischen Sie beim Lied nach rechts, und die Sammlungs- und Downloadvorgänge werden auf der nächsten Ebene des Lieds angezeigt. Natürlich benötigen Sie bei der ersten Verwendung eine gewisse Anleitung.
WeChat lässt sich schütteln, und natürlich lässt sich auch der Musik-Player schütteln. Wenn Sie ein Lied hören, das Ihnen nicht gefällt, schütteln Sie es einfach, um es zu ändern.

Die Verwendung von Dropdown-Menüs in der Weboberfläche ist eine gute Möglichkeit, Platz zu sparen und die Skalierbarkeit zu erhöhen. Auch mobile Endgeräte können davon lernen. Bei selten verwendeten sekundären Aktionen können sie durch Anklicken herausgeschoben werden.
Die Suchfunktion ist in Musik-Apps oft ungünstig platziert. Auf welcher Seite soll sie denn platziert werden? Wenn sie auf einer bestimmten Seite platziert ist, dann kann man auch nur innerhalb des Inhalts dieser Seite suchen. Sie auf allen Seiten zu platzieren ist zu umständlich und eine eigene Suchseite ist auch nicht nötig, schließlich handelt es sich hier um keine häufig genutzte Funktion. Da die Suchfunktion nicht oft verwendet wird, wird die Suche dieses Mal unter „Mehr“ platziert. Nachdem Sie das Suchfeld vertikal oder horizontal herausgezogen haben, können Sie eine globale Suche für alle Online- und lokalen Inhalte durchführen.

3. Aufgrund der begrenzten Zeit wurden nur einige visuelle Entwürfe erstellt:

4. Verwenden Sie Gesten, um nach oben und unten zu wischen, um die Songliste anzuzeigen

Streichen Sie auf dem Player nach oben, um die Liedtexte anzuzeigen, und nach unten, um sie zu schließen.

Schieben Sie das Lied nach rechts und die üblichen Vorgänge werden unten angezeigt.

Klicken Sie auf „Mehr“, schieben Sie die Suche und die Einstellungen heraus, klicken Sie auf „Suchen“, schieben Sie nach links, um das Suchfeld anzuzeigen

Schütteln Sie Ihr Telefon, um das nächste Lied abzuspielen

Andere Klickaktionen

Autor: Li Yue

<<: Rufen Sie die JS-Funktion oder JS-Variable in HTMLs img src="" auf, um den Bildpfad dynamisch anzugeben

>>: Zusammenfassung der Bereitstellung des Tomcat-Clusters und des Nginx-Lastausgleichs basierend auf Docker

WeChat Mini-Programm: Position des Videofeuers zufällig

Analyse und Neugestaltung von Musikplayer-Apps (Anwendungssoftware) So gestalten Sie eine ansprechende Musikplayer-Oberfläche

WeChat Mini-Programm: Position des Videofeuers zufällig

Native JS-Canvas zum Erzielen einer einfachen Schlange

CentOS 7: Erläuterung zum Wechseln des Boot-Kernels und des Boot-Modus

Beheben Sie das Problem, dass die Alibaba Cloud SSH-Remoteverbindung nach kurzer Zeit getrennt wird

MySQL-Gruppierungsmethode für die Gruppierungssequenz einzelner Wörter und die Gruppierung mehrerer Felder

Eine kurze Erläuterung, wo das vom Knoten mithilfe von JWT generierte Token gespeichert werden soll

25 Beispiele für die Verwendung kreisförmiger Elemente im Webdesign

Zusammenfassung der 3 kleineren Fehler, die während der Installation von MySQL 8.0 aufgetreten sind

Grundkenntnisse in HTML: ein erstes Verständnis von Webseiten

Reflexion und Proxy in Front-End-JavaScript

Artikel empfehlen

MySQL-Kill-Befehl – Verwendungshandbuch

Beheben Sie das Problem, dass der benutzerdefinierte CSS-Stil von ElementUI nicht wirksam wird

5 MySQL-GUI-Tools, die Ihnen bei der Datenbankverwaltung empfohlen werden

Acht Möglichkeiten zur Implementierung von Kommunikation in Vue

Detaillierte Erklärung der Startbefehle für Docker-Versionen es, milvus und minio

So sichern Sie MySQL-Kontoinformationen elegant

Führen Sie die folgenden Schritte aus, damit Nginx Anti-Hotlinking konfiguriert.

CSS-Leistungsoptimierung - detaillierte Erklärung der Will-Change-Verwendung

Detaillierte Erläuterung der Verwendung von HTML-Canvas und Seitenspeichertechnologie in JavaScript

Es wird nicht empfohlen, den Inhalt in Word direkt in den Editor auf der Website zu kopieren.

jQuery erzielt einen Bildlaufwiedergabeeffekt auf großem Bildschirm

Detaillierte Erläuterung von Django + Vue + Docker zum Erstellen einer Schnittstellentestplattform

1 Minute Vue implementiert Rechtsklickmenü

Der Grund, warum MySQL den B+-Baum als zugrunde liegende Datenstruktur verwendet

Detaillierte Erläuterung des Prozesses zum Erstellen von Bodennavigationseffekten mit JavaScript