Streaming-App-Design: Ein dunkler Home Screen im Redesign, Vorher und Nachher
Ein dunkler Streaming-App-Home-Screen mit sechs Fakten in einer 9-px-Zeile, drei gleich gewichteten Buttons und Rot in einer cyanfarbenen Marke, und derselbe Screen repariert. Jede Änderung im Vergleich, der Grund dahinter und die kostenlose Figma-Datei.
Jemand öffnet eine Streaming-App, um auf Play zu drücken. Der erste Entwurf unten hat eine gute Serie zu verkaufen und umgibt den einen wichtigen Button mit anderem Kram: ein Header mit vier Icons, eine Zeile mit sechs Fakten in 9-px-Schrift, drei Buttons mit gleichem Gewicht und rote Badges in einer cyanfarbenen App. Die Korrektur behält dieselbe Serie und dieselben Reihen und bringt die Reihenfolge des Screens in Einklang mit der Reihenfolge dessen, was ein Zuschauer tut.
Der ganze Screen, vorher und nachher
Junior-Entwurf
Repariert
Links ist das Erste im Hero ein Titel in Großbuchstaben und eine Zeile, die zu klein zum Lesen ist. Rechts hat der Hero einen Namen, eine Zeile und einen Button.
| Junior-Entwurf | Repariert | |
|---|---|---|
| Header | Logo, 4 Icons | Logo, 2 Buttons mit 40 px |
| Hero-Fakten | 6 in einer 9-px-Zeile | Eine kurze Zeile |
| Hero-Buttons | 3 in Großbuchstaben, gleiches Gewicht | 1 großer Play, 1 Plus-Button |
| Weiterschauen-Reihe | 3 hohe Poster, 10-px-Labels | 2 breite Karten mit verbleibender Zeit |
| Top-Reihe | 4 Poster, jedes mit demselben TOP-10-Chip | 4 Poster mit Rang 1 bis 4 |
| Verwendete Farben | Cyan, dazu rote Badges und rote Balken | Ein Cyan für Fortschritt und Links |
| Hintergrund | Reines Schwarz #000000 | Blendet von Bernstein #3A2510 zu #0E0E12 aus |
| Tabs | 5 | 4 |
| Seitenrand | 14 px links, 12 px rechts | 20 px, mit 16 px zwischen den Abschnitten |
| Textgrößen | 7 bis 30 px | 11 bis 28 pt |
Korrektur 1: ein Header, der zwei Aufgaben erledigt
Vorher
Nachher
Vier kleine Icons gegen zwei runde Buttons.
Der Header des Entwurfs enthält Suche, Cast, eine Glocke mit rotem Punkt und den Avatar des Zuschauers, jeweils etwa 20 px breit. Die Zeile ist unruhig, und der Avatar doppelt den Tab „Profil“ unten.
Die Korrektur behält Suche und Benachrichtigungen als zwei runde 40-px-Buttons und streicht das Cast-Icon und den Avatar. Der Punkt an der Glocke ist cyanfarben. Das Profil hat bereits seinen Tab, also muss der Header ihn nicht wiederholen.
Die Regel zum Mitnehmen: Jedes Bedienelement sollte an einem einzigen Ort leben. Wenn die Tab-Leiste ein Profil hat, braucht der Header kein Profilbild.
Korrektur 2: ein Play-Button
Vorher
Nachher
Ein Titel, eine winzige Faktenzeile und drei Buttons, gegen einen Titel, eine Zeile und einen Button.
Der Hero ist der wertvollste Platz auf dem Screen, und der Entwurf füllt ihn zu. Der Titel steht in Großbuchstaben unten in der Mitte des Posters, unter einem roten Chip „NEW EPISODES“. Darunter enthält eine 9-px-Zeile sechs Fakten: „2025 • TV-MA • 2 Seasons • Sci-Fi, Action, Drama • ★ 8.3“. Dann folgen drei Buttons, PLAY, MY LIST und INFO, alle in Großbuchstaben und alle ungefähr gleich gewichtet, sodass der Zuschauer wählen muss, bevor er drückt.
Die Korrektur rückt den Titel nach unten links im Bild, mit einem dunklen Verlauf darunter, damit er lesbar bleibt, und eine kurze Zeile unter dem Titel: „Sci-Fi · Staffel 2 · 2025“. Der Chip sagt „Neue Staffel“ im Marken-Cyan.
Unter dem Bild nimmt ein breiter weißer Button „Play“ den größten Teil der Breite ein, und daneben sitzt ein rundes „+“ für die Liste. INFO ist nicht auf dem Screen.
Die Regel zum Mitnehmen: Ein Hero braucht eine Aktion. Gib ihr den größten Button auf dem Screen und mach alles andere kleiner.
Korrektur 3: breite Karten, die sagen, wie viel noch übrig ist
Vorher
Nachher
Drei hohe Poster mit dünnem roten Balken, gegen zwei breite Karten mit der verbleibenden Zeit.
Die Reihe „Continue Watching for Alex“ im Entwurf zeigt drei hohe Poster. Jedes hat darunter einen 3 px roten Fortschrittsbalken und ein Label wie „S2:E5“ in 10-px-Schrift. Ein Poster sagt, was die Serie ist. Es sagt nicht, wo der Zuschauer aufgehört hat, und der rote Balken ist eine zweite Farbe in einer cyanfarbenen App.
Die Korrektur nutzt zwei breite Karten, mit dem Fortschrittsbalken in Cyan im Bild und einem Titel darunter. Die Zeile unter dem Titel lautet „S2 E5 · noch 12 Min.“ und beantwortet die Frage, die man sich stellt, wenn man etwas wieder aufnimmt: Habe ich dafür Zeit?
Die Regel zum Mitnehmen: Eine Weiterschauen-Reihe gehört dem Platz des Zuschauers. Zeig die verbleibende Zeit, nicht nur den Episodencode.
Korrektur 4: Ränge, die man lesen kann
Vorher
Nachher
Vier Poster mit demselben Chip, gegen vier Poster mit ihren Rängen.
Die Reihe „TRENDING NOW“ im Entwurf hat vier Poster, und jedes trägt denselben roten Chip „TOP 10“. Der Chip sagt, dass alle in den Top Ten sind, aber nicht, auf welchem Platz. Der Zuschauer kann den ersten nicht vom vierten unterscheiden.
Die Korrektur benennt die Reihe in „Top 10 heute“ um und setzt neben jedes Poster eine große umrandete Zahl: 1, 2, 3, 4. Die Reihe hat jetzt eine Reihenfolge, die man von links nach rechts liest. Der Link „Alle ansehen“ nutzt das Marken-Cyan, dieselbe Farbe wie die Fortschrittsbalken.
Die Regel zum Mitnehmen: Ein Ranking sollte den Rang zeigen. Ein Badge, das bei jedem Eintrag gleich ist, ist Dekoration.
Die kleineren Korrekturen
- Eine Markenfarbe. Die Korrektur nutzt Cyan #22D3EE für Logo, Fortschritt und Links. Die roten Badges und roten Fortschrittsbalken sind weg.
- Ein Hintergrund, der zum Hero passt. Die Korrektur blendet vom Bernstein des Heros, #3A2510, in #0E0E12 aus, sodass sich der erste Screen wie ein einziges Bild anfühlt. Der Entwurf sitzt auf reinem Schwarz, #000000.
- Eine linke Kante. Die Ränder des Entwurfs waren 14 px links und 12 px rechts. Die Korrektur nutzt auf beiden Seiten 20 px und 16 px zwischen den Abschnitten.
- Eine echte Typo-Skala. Der Text ging von 7 bis 30 px auf iOS-Größen von 11 bis 28 pt.
- Vier Tabs, nicht fünf. Home, Suche, Demnächst, Downloads und Mehr wurden zu Home, Suche, Downloads und Profil.
Prüfe deinen eigenen Streaming-Screen
| Frage | Warum es wichtig ist |
|---|---|
| Hat der Hero einen Button, der größer ist als alle anderen? | Ein Hero braucht eine Aktion |
| Sagt die Weiterschauen-Reihe, wie viel noch übrig ist? | Sie beantwortet, ob Zeit da ist |
| Zeigt eine Ranking-Reihe den Rang? | Ein Chip, der sich wiederholt, sagt nichts |
| Nutzt der Screen mehr als eine Akzentfarbe? | Ein zweiter Akzent konkurriert mit dem ersten |
FAQ
Was sollte ein Streaming-App-Home-Screen zuerst zeigen?
Einen Hero mit dem Titel der Serie, einer kurzen Faktenzeile und einem großen Play-Button. Der eigene Platz des Zuschauers, die Weiterschauen-Reihe, kommt direkt danach.
Wie viele Buttons sollte ein Hero-Banner haben?
Einen Hauptbutton und höchstens einen kleinen sekundären Button, etwa ein Plus für die Liste. Drei Buttons mit gleichem Gewicht lassen den Zuschauer wählen, bevor er auf Play drückt.
Wie gestaltet man eine Weiterschauen-Reihe?
Nutze breite Karten mit Fortschrittsbalken, Titel und verbleibender Zeit, etwa „noch 12 Min.“. Ein hohes Poster zeigt, was die Serie ist, eine breite Karte zeigt, wo der Zuschauer aufgehört hat.
Wie gestaltet man eine Top-10-Reihe?
Setze eine große Rangzahl neben jedes Poster, damit die Reihe eine Ordnung hat. Ein Badge mit „Top 10“ auf jedem Poster sagt nicht, welchen Platz die Serie belegt.
Welche Farben funktionieren für eine dunkle Streaming-App?
Eine Akzentfarbe für Fortschritt und Links auf dunklem Hintergrund. Der reparierte Screen nutzt Cyan #22D3EE auf einem Hintergrund, der vom Bernstein des Heros zu #0E0E12 ausblendet.
Welche Schriftgröße sollte eine Streaming-App nutzen?
Die Textskala der Plattform. Der reparierte Screen nutzt iOS-Größen von 11 bis 28 pt, sodass im Hero nichts unter 11 liegt.
Quellen
- Beide Screens sind unsere eigenen, in Figma gestaltet und vermessen. Der Zuschauer, die Serien und die Streamix-App sind erfunden, und jedes Poster ist eine flache Farbe mit einem gesetzten Titel.
- Avatar-Foto über Pexels von Amir SeilSepour.
- Apple Human Interface Guidelines: Typography, für die iOS-Textgrößen im reparierten Screen.
- Apple Human Interface Guidelines: Dark Mode, für die Gestaltung einer Oberfläche, die auf dunklem Hintergrund funktioniert.
- Zuerst veröffentlicht als Karussell auf App Brainy.
Want this for your own app? Our team redesigns streaming and media apps like this one, from the first audit to the finished components.
Get Started
