Und die Entwickler stehen vor der Frage, wie die Benutzeroberfläche einer großen Anwendung auf einem kleinen Bildschirm eines Mobiltelefons platziert werden kann.
Unter dem Schnitt befindet sich eine Geschichte über die Lösung des Problems einer komplexen Schnittstelle für Musikanwendungen. Die Anwendung wurde für die VK Mini Apps- Plattform erstellt , aber möglicherweise sind die allgemeinen Grundsätze auch für andere Plattformen geeignet.
Geschichte der Schnittstellen des Musikeditors
Musikeditoren sind komplexe grafikintensive Programme. Selbst das einfachste "Ein Weihnachtsbaum wurde im Wald geboren" besteht aus mehreren Tracks für Schlagzeug, Bass, Klavier, und jeder der Tracks enthält Hunderte von Noten.
All dies muss irgendwie auf dem Bildschirm platziert werden und alle Elemente müssen bearbeitbar sein.
Die Benutzeroberfläche sieht normalerweise so aus:
Die Prinzipien von UX / UI für Musikprogramme haben sich seit vielen Jahren nicht geändert. So sahen sie vor 30 Jahren aus:
- Tatsächlich wurden mehr Farben und Schaltflächen hinzugefügt.
Wie haben sich mobile Schnittstellen entwickelt?
Auf dem Standard ausgedehnten Weg.
Die Oberfläche der Desktop-Anwendung wurde übernommen und verkleinert, und die Funktionalität wurde gnadenlos abgeschnitten.
Hier ist ein Beispiel für eine mobile Version von FL Studio (diese ist eine der besten DAWs):
- Die Tasten sind zu klein, um mit dem Finger gedrückt zu werden, die Elemente passen nicht auf den Bildschirm und sind teilweise in den Dropdown-Menüs verborgen, und die Bilder der Titel sind zu klein, um etwas zu sehen.
Schwierigkeiten beim Portieren der Schnittstelle auf kleine Bildschirme
Um die Tiefe des Problems klarer zu machen, sollten Sie einen herkömmlichen 10-Band-Equalizer in Betracht ziehen.
Die meisten Leute benutzen es, ohne zu wissen, was es ist. Hier ist beispielsweise der in den Yandex Music-Dienst integrierte Equalizer:
Zum bequemen Drücken von Fingern müssen Tasten und Bildlaufleisten mindestens 1 cm groß sein. Der Equalizer hat 10 Bildlaufleisten, d.h. Die Gesamtbreite sollte 10 cm betragen.
Dies ist jedoch mehr als die Breite von Mobiltelefonen! Und dies ist nur eine von vielen Kontrollen.
Es stellt sich heraus, dass Sie entweder alles Kleine und Unbequeme zum Drücken tun oder nur einen kleinen Teil der Steuerelemente sichtbar machen und den Rest wegwerfen oder sie in Dropdown-Menüs usw. verstecken müssen.
Eine Lösung finden
Gibt es Ansätze, mit denen Sie komplexe und dennoch benutzerfreundliche Oberflächen für kleine Bildschirme erstellen können?
Sicher.
Das sind Karten. Und das nicht nur auf Mobiltelefonen, sondern auch auf dem Desktop.
Karten verwenden Skalierungs- und Sichtbarkeitsebenen für Elemente. Zeigt Millionen interaktiver Objekte auf einem kleinen Bildschirm.
Die meisten verwenden sie intuitiv, was die Nützlichkeit dieses UX / UI-Ansatzes bestätigt.
Lösungsbeispiel
Es wurde beschlossen, die Spuren in Ebenen übereinander anzuordnen und die gesamte Pianorolle zusammen mit den Steuerelementen zu skalieren.
In der Statik sieht es aus wie bei anderen Anwendungen aus dem Musikbereich:
Aber in der Dynamik ist klar , dass sein Verhalten sehr unterschiedlich ist:
öffnen Sie Video von der Arbeit mit der Anwendung
Das Projekt aus dem Video kann in VKontakte zum Test geöffnet werden:
- In App öffnen
- Funktioniert sowohl auf Telefonen als auch in VKontakte-Feed-Nachrichten
Die vollständige
Anwendung des UI-Skalierungsansatzes ermöglichte es, dass eine große Anzahl von Elementen auf einen kleinen Bildschirm passte.
- Alle Elemente sind "in unmittelbarer Nähe" und schnell zugänglich
- Der Benutzer hat die Möglichkeit, das gesamte Projekt als Ganzes zu sehen und nicht in Teilen, die auf einen kleinen Bildschirm passen