Podcast-App-Design: Ein Redesign des Startbildschirms, Vorher und Nachher
Ein Podcast-App-Startbildschirm im Junior-Stil mit haarfeinem Fortschrittsbalken, drei Icons in jeder Chart-Zeile und sechs Genre-Farben, und derselbe Screen repariert. Jede Änderung im Vergleich, der Grund dahinter und die kostenlose Figma-Datei.
Das Häufigste, was man in einer Podcast-App tut, ist dort weiterzuhören, wo man aufgehört hat. Der erste Entwurf unten hat alles, was Hörer brauchen, und versteckt genau diese eine Sache: Die Folge, die man halb gehört hat, steckt in einer kleinen Karte mit haarfeinem Fortschrittsbalken zwischen drei Covern. Die Korrektur behält die Shows, die Charts und die Genres und macht die pausierte Folge zum größten Element auf dem Screen.
Der ganze Screen, vorher und nachher
Junior-Entwurf
Repariert
Links ist die Folge der Person eines von drei gleich großen Covern mit 2 px Fortschritt darunter, und die Chart-Zeilen enden jeweils in drei Icons. Rechts hat die pausierte Folge eine eigene Karte mit 6 px Fortschrittsbalken und drei großen Bedienelementen, und die Listenzeilen enden in einem Button.
| Junior-Entwurf | Repariert | |
|---|---|---|
| Pausierte Folge | Eines von 3 Covern, 2 px Fortschrittslinie | Eine Karte, 6 px Fortschrittsbalken, 3 Bedienelemente |
| Icons pro Listenzeile | 3 | 1 |
| Genre-Farben | 6 | 1 |
| Mini-Player-Bedienelemente | Zurück, Pause, Weiter | 30 zurück, Pause, 30 vor |
| Tabs | 5 | 4 |
| Seitenrand | 14 px links, 12 px rechts | 20 px auf beiden Seiten |
| Textgrößen | 8 bis 20 px | 11 bis 28 pt |
Fix 1: eine große Karte für die Folge, die du pausiert hast
Vorher
Nachher
Drei Cover mit haarfeinem Fortschritt, gegen eine Karte mit Restzeit und Bedienelementen.
Das "Weiterhören" im Entwurf ist ein Regal. Drei Cover liegen gleich groß nebeneinander, jedes mit einer 2-px-Fortschrittslinie, einem bei "Ep. 142: Why Great Apps Feel Calm (And..." abgeschnittenen Titel und "23 min left" in kleiner grauer Schrift. Um die eine wichtige Folge fortzusetzen, öffnet man eine Folge, wartet auf einen Player und drückt Play.
Die Korrektur gibt der pausierten Folge eine Karte. Oben stehen das Cover, ein lila Label, "Weiterhören · 23 Min. übrig", der volle Titel, "Why great apps feel calm", und die Show, "Studio Hour · Episode 142". Darunter sitzt ein 6-px-Fortschrittsbalken neben drei Bedienelementen: 30 zurück, Play und 30 vor. Die beiden anderen Cover sind aus diesem Bereich verschwunden.
Die Buttons für 30 zurück und 30 vor sind ein Kreispfeil mit einer 30 darin, in 44-px-Touch-Targets, das Muster, das Audible nutzt. Wer unterbrochen wurde, kann eine halbe Minute zurückspringen, ohne den Startscreen zu verlassen.
Die Regel zum Wiederverwenden: Das, was die Person gerade getan hat, ist die wahrscheinlichste nächste Aktion, also gib ihr eine Karte und ihre Bedienelemente.
Fix 2: zweizeilige Titel und ein Play-Button
Vorher
Nachher
Abgeschnittene Titel, Platzierungsnummern und drei Icons, gegen vollständige Titel und einen Play-Button.
Die Chart-Zeilen im Entwurf enden jeweils in einem Download-Pfeil, einem Drei-Punkte-Menü und einem Play-Dreieck, also muss der Titel in den Rest passen, und das tut er nicht: "The Week in Tech, in 20 Minutes: Al...", "How to Learn Anything in 30 Days...", "Live from Brooklyn Part 2 (Uncut Ex...". Die Platzierung ist eine große lila Zahl, und unter jedem Titel steht eine Zeile mit Show, Kategorie und Länge.
Die Korrektur lässt den Titel auf zwei Zeilen umbrechen: "The week in tech, in 20 minutes". Darunter steht eine Zeile, Tag und Länge, "Heute · 21 Min.". Rechts sitzt ein runder Play-Button, die einzige Aktion, die eine Zeile braucht, und sein Touch-Target ist groß genug zum Treffen. Download und Menü sind nicht auf der Zeile, und dieses Redesign zeichnet nicht, wohin sie wandern.
Dieses Redesign hat nicht nur das Aussehen der Liste verändert, sondern auch ihre Aufgabe. Aus fünf nummerierten "Top-Charts"-Zeilen wurden drei "Als Nächstes"-Zeilen, also braucht eine echte App weiterhin einen Platz für die Charts.
Die Regel zum Wiederverwenden: Lass den Titel umbrechen, denn ein abgeschnittener Titel lässt sich nicht lesen, und gib jeder Zeile eine Aktion.
Fix 3: Genres in einem Stil
Vorher
Nachher
Sechs satte Farben auf zwei Zeilen, gegen eine Reihe Pills mit einer gefüllten.
Die Genre-Tags im Entwurf sind pink, blau, rot, grün, orange und türkis, jeweils mit weißem Text. Sie brauchen zwei Zeilen.
Die Korrektur ist eine Reihe Pills in einem Stil. "Alle" ist im Markenlila #8B5CF6 gefüllt, die übrigen sind weiß. "Mehr" steht am Ende für die Genres, die nicht passen. Nur die gefüllte Pill bedeutet etwas, nämlich "das siehst du gerade".
Die Regel zum Wiederverwenden: Farbe soll sagen, welches gewählt ist. Sie soll nicht sagen, welches welches ist.
Fix 4: ein Mini-Player mit den Bedienelementen, die Leute nutzen
Vorher
Nachher
Zurück, Pause und Weiter, gegen 30 zurück, Pause und 30 vor.
Ein Mini-Player hat auf dem Screen den wenigsten Platz, also muss sich jedes Bedienelement darin seinen Platz verdienen. Die drei im Entwurf sind Zurück, Pause und Weiter. Zurück und Weiter springen zu einer anderen Folge.
Die Korrektur nutzt 30 zurück, Pause und 30 vor. Das Cover und der Titel, "Why great apps feel...", bleiben links, mit der Show darunter. Die Fortschrittslinie läuft am oberen Rand des Players entlang, sie zeigt also, wie weit die Folge ist, ohne eine Zeile zu verbrauchen.
Die Regel zum Wiederverwenden: Ein Mini-Player sollte die drei Buttons haben, die Leute beim Hören tatsächlich benutzen.
Die kleineren Fixes
- Eine linke Kante. Die Ränder im Entwurf waren 14 px links und 12 px rechts. Die Korrektur nutzt 20 px auf beiden Seiten und 16 px zwischen den Karten.
- Ein Markenlila. Die Korrektur nutzt #8B5CF6 für Flächen und die Play-Buttons und ein dunkleres #7C3AED für kleinen lila Text, der mehr Kontrast zum Lesen braucht.
- Eine echte Typo-Skala. Der Text ging von 8 bis 20 px auf iOS-Größen von 11 bis 28 pt.
- Ein größerer Titel, ein kleinerer Header. Der Header im Entwurf enthielt ein Such-Icon, eine Glocke und einen Avatar. Die Korrektur behält den Avatar und einen großen Titel "Podcasts".
- Vier Tabs statt fünf. Home, Entdecken, Bibliothek, Suche und Profil wurden zu Jetzt hören, Entdecken, Bibliothek und Suche. Das Profil ist der Avatar im Header.
Prüfe deine eigene Podcast-App
| Frage | Warum es wichtig ist |
|---|---|
| Ist die pausierte Folge größer als die anderen Cover? | Sie ist der wahrscheinlichste nächste Tap |
| Kann ein Hörer vom Startscreen aus 30 Sekunden zurückspringen? | Unterbrochene Hörer brauchen das zuerst |
| Brechen Titel um oder werden sie abgeschnitten? | Ein abgeschnittener Titel lässt sich nicht lesen |
| Wie viele Icons beenden jede Zeile? | Eine Aktion wird gefunden, drei werden abgesucht |
| Bedeutet die Genre-Farbe nur eine Sache? | Farbe sollte das gewählte Genre markieren |
| Hat der Mini-Player die Buttons, die Leute nutzen? | 30 zurück und 30 vor nutzen Hörbuch- und Podcast-Hörer am häufigsten |
Hol dir die Figma-Datei
Die kostenlose Datei enthält beide Screens als Komponenten, jeden Fix als Vorher-Nachher-Paar, die Farbvariablen und die iOS-Textstile.
Kostenlose Figma-Datei
Podcast-Startscreen, vorher und nachher
Beide Screens und jedes reparierte Teil als Figma-Komponenten. Kostenlos, nur Ansicht, dupliziere sie in deine Entwürfe.
FAQ
Was sollte ein Podcast-App-Startscreen zuerst zeigen?
Die Folge, die der Hörer halb gehört hat, auf einer großen Karte mit Restzeit, Play sowie 30 Sekunden zurück und vor. Charts, Genres und neue Shows kommen danach.
Welche Buttons sollte ein Podcast-Mini-Player haben?
30 zurück, Pause und 30 vor. Vorherige und nächste Folge springen zu einer anderen Folge, also spare sie dir für den großen Player auf.
Wie gestaltet man einen Weiterhören-Bereich?
Eine Karte für die zuletzt pausierte Folge, mit Cover, vollem Titel, Show, Restzeit und Fortschrittsbalken, plus den Bedienelementen zum Fortsetzen. Gib ihr nicht dieselbe Größe wie den anderen Covern.
Wie sollte eine Podcast-App Folgen auflisten?
Lass den Titel auf zwei Zeilen umbrechen, setze Tag und Länge in eine graue Zeile und beende die Zeile mit einem Play-Button. Verschiebe Download und Menü auf die Folgenseite.
Wie gestaltet man Genre-Filter für eine Podcast-App?
Eine Reihe Pills in einem Stil, das gewählte in der Markenfarbe gefüllt und Mehr am Ende. Sechs Farben auf sechs Tags machen, dass Farbe nichts bedeutet.
Welche Schriftgröße sollte eine Podcast-App nutzen?
Die Textskala der Plattform. Der reparierte Screen nutzt iOS-Größen von 11 bis 28 pt, mit einem großen Titel.
Quellen
- Beide Screens sind unsere eigenen, in Figma gestaltet und vermessen. Shownamen, Folgen und Personen sind erfunden; die Cover sind Fotos mit dem daraufgesetzten Shownamen.
- Fotos über Pexels von Jace Oner, Somogro Bangladesh, Sound On, Brett Sayles, Ali Dashti, frank minjarez und pessoas uem.
- Apple Human Interface Guidelines: Typography, für die iOS-Textgrößen im reparierten Screen.
- Apple Human Interface Guidelines: Accessibility, für die Touch-Target-Größe von 44 pt.
- Zuerst als Karussell veröffentlicht auf App Brainy.
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
