Pastellfarbene Benutzeroberfläche der Lauf-App mit Faultier-Maskottchen

{ "type": "UI-Modell für eine mobile Fitness-App", "style": "Ein klares und modernes App-Design in Pastellfarben mit sanften Beige- und Warmweißtönen, akzentuiert durch zartes Salbeigrün, abgerundete Karten und Schaltflächen, dezente Schatten, schlanke, minimalistische Icons, eine freundliche und verspielte Markenidentität mit einem Faultier-Maskottchen und einem dunkelbraunen, gepunkteten Hintergrund im Dribbble-Stil.", "theme": "Lauf-Tracking-App", "layout": { "device_count": 3, "arrangement": "Drei längliche Smartphone-Bildschirme nebeneinander, gleichmäßig verteilt, Frontansicht.", "background": "Sehr dunkles Braun mit einem dezenten, gleichmäßigen Punktgittermuster.", "screens": [ { "position": "Linke Seite", "screen_type": "Startseite", "header": { "greeting": "Guten Morgen, Läufer! 👋", "left_icon": "kein", "right_icon": "Benachrichtigungsglocke" }, "hero_card": { "headline": "Bereit für einen Wunderbarer Tag?", "subcard_text_line_1": "Jeder Schritt nach vorn ist ein Sieg.", "subcard_text_line_2": "Lasst uns jeden Moment bedeutungsvoll gestalten. 🌱", "illustration": "Ein entzückendes Faultier mit cremefarbenem Stirnband und mintgrünem Trainingsanzug steht rechts auf der Karte und winkt." }, "sections": [ { "title": "Diese Woche", "position": "Obere Mitte", "count": 3, "labels": [ "Anzahl der Läufe", "Distanz", "Zeit" ], "values": [ "3", "12,6 km", "1 Stunde 45 Minuten" ], "presentation": "Eine einzelne Statistikkarte mit abgerundeten Ecken, die drei Spalten mit gleich breitem Inhalt und ein hellgrünes kreisförmiges Symbol enthält." }, { "title": "Nächstes Ziel", "position": "Mitte bis unten", "count": 1, "labels": [ "20 Kilometer diesen Monat" ], "values": [ "63%" ], "presentation": "Fortschrittskarte mit abgerundeten Ecken, grünem Fortschrittsbalken und einer kleinen Illustration eines winkenden Faultiers rechts." }, { "title": "Letzte Aktivitäten", "position": "unten", "count": 1, "labels": [ "Letzte Aktivitäten" ], "presentation": "Der obere Rand der anderen abgerundeten Karte ist sichtbar, wird aber von der unteren Navigationsleiste verdeckt." } ], "bottom_nav": { "count": 4, "labels": [ "Startseite", "Laufen", "Zeitplan", "Persönliche Informationen" ], "active": "Startseite" } }, { "position": "Mitte", "screen_type": "Laufzusammenfassung", "header": { "left_icon": "Zurück-Pfeil", "center_text": "Gut gemacht!", "subtext": "Du hast es geschafft! Zeit zu feiern! 🎉", "right_icon": "Teilen" }, "hero_illustration": "Ein entzückendes Faultier mit Stirnband, mintgrünem Trainingsanzug und Goldmedaille reckt jubelnd die Arme in die Höhe.", "stats_row": { "count": 3, "labels": [ "Distanz", "Zeit", "Tempo" ], "values": [ "5,00 km", "32:15", "6:27" ], "presentation": "Drei abgerundete Statistik-Kapseln" }, "achievement_card": { "count": 1, "title": "Neue persönliche Bestleistung! 🌟", "subtitle": "Du warst 1 Minute und 12 Sekunden schneller als beim letzten Mal, als du 5 Kilometer zurückgelegt hast.", "icon": "Kleine Goldmedaille" }, "table_section": { "title": "Segmentierung", "count": 2, "columns": [ "Kilometer", "Tempo", "Zeit" ], "rows": [ [ "1", "6:35", "6:35" ], [ "2", "6:23", "12:58" ] ], "presentation": "Abgerundete weiße Formularkarten mit hellen Trennlinien" } }, { "position": "rechte Seite", "screen_type": "Laufziele setzen", "header": { "left_icon": "Schließen X", "center_text": "Los geht's!", "subtext": "Du schaffst das. Wir gehen es langsam an." 🦥", "right_icon": "Gang einstellen" }, "goal_visual": { "type": "Kreisförmiger Fortschrittswähler", "top_label": "Ziel auswählen", "main_value": "5.00", "unit": "Kilometer", "ring": "Kräftiger salbeigrüner Bogen auf hellbeigem Ring", "illustration": "Ein kleines Faultier, das sich in der oberen rechten Ecke des Kreises streckt" }, "goal_options": { "count": 4, "labels": [ "2 Kilometer", "5 Kilometer", "10 Kilometer", "Halbmarathon" ], "active": "5 Kilometer" }, "primary_cta": { "label": "Lauf starten", "style": "Großer, abgerundeter, salbeigrüner Button" }, "secondary_action": { "label": "Nur Track", "icon": "Standortmarkierung" }, "bottom_nav": { "count": 4, "labels": [ "Startseite", "Laufen", "Zeitplan", "Persönliche Informationen" ], "aktiv": "läuft" } } ] } }