Das Wetter ist ein großer Teil unseres täglichen Lebens. Daher ist es immer erforderlich, dass Websites und mobile Apps Berichte erstellen. Benutzer möchten alles von den aktuellen Bedingungen außerhalb ihres Hauses bis zur Vorhersage ihres Lieblingsurlaubsortes überprüfen.
Eine attraktive Benutzeroberfläche kann das Wetter verständlicher und sogar unterhaltsamer machen. Designer erreichen dies durch eine Kombination aus Farbe, Animation und lustigen Symbolen. Manchmal können sich auch ein oder zwei unerwartete Überraschungen positiv auswirken.
Schauen wir uns einige Beispiele für Wetter-Benutzeroberflächen an, die dem Design eines sonnigen Tages entsprechen.
Zeit jenseits der Grenzen
Kartenbasierte Benutzeroberflächen scheinen eine natürliche Ergänzung für Wetterdaten zu sein. Alles, was Sie brauchen, ist alles in einem ordentlichen und ordentlichen Raum. Aber dieses Fragment bricht mit der Tradition. Animieren Sie verschiedene Wetterszenarien, die über diese kleine Karte hinausgehen. Regen, Schnee und Sonnenstrahlen platzen außerhalb der Kartengrenzen.
Sehen Sie sich Steve Gardners animierte Stiftwetterkarten an
Einfach wunderschön
Was diese Wetterschnittstelle zum Funktionieren bringt, ist ihre Einfachheit. Die Verwendung bekannter und abgerundeter Formen zusammen mit einem hohen Farbkontrast erleichtert das Lesen. Auch die enthaltenen Scroll-Effekte werden die Aufmerksamkeit des Betrachters auf sich ziehen.
Siehe das Design der Pen Simple Weather-Anwendung von Colin Espinas
Abstrakte Symbole
Hier ist eine Gruppe von CSS3-Symbolen, die sich deutlich von typischen Wetterbildern unterscheiden. Sie sind ein bisschen abstrakt, mit einfachen Animationen, die Persönlichkeit verleihen. Während sie in diesem Beispiel etwas größer sind, eignen sich die Stile auch für kleine Symbole. Sie bieten eine Möglichkeit, sich abzuheben, ohne zu viel Platz in Anspruch zu nehmen.
Siehe die animierten Federwetter-Symbole (reines CSS) von Akhil Sai Ram
SVG-Bewegung
Diese Sammlung animierter SVG-Symbole ist sehr scharf. Die animierten Bewegungen sind intuitiv und bemerkenswert, aber nicht übertrieben. Noch besser ist, dass sie Vektoren sind und auf jede Größe skaliert werden können. Sie sind eine großartige Ergänzung für jede Wetteranwendung.
Schauen Sie sich den Stift einige Wettersymbole svgs von Nat
Ihr lokales Wetter auf Anfrage
Standortbezogene Dienste eignen sich hervorragend, um Ihren Website-Besuchern relevante Informationen bereitzustellen. Dieses Fragment ist ein hervorragendes Beispiel, da es Ihren Standort erkennt und das aktuelle Wetter anzeigt. Die Google-Karte im Hintergrund ist auch eine nette Geste.
Siehe Pen Show Local Weather von Den McHenry
Sanfte Wellen
Dieses Snippet kombiniert verschiedene Aspekte der anderen Beispiele in dieser Liste. Es ist ortsbezogen, verfügt über einen kartenähnlichen Container und verwendet einfache Animationen. Das Ergebnis ist ein Wetter-Widget, das recht minimal, aber bemerkenswert ist. Es ist ein Beweis dafür, dass Sie Benutzer nicht mit zu viel Design überfordern müssen, um sie auf dem Laufenden zu halten.
Siehe Die Coding Aviator Pen Wetterkarte
Jetzt und darüber hinaus
Hier ist ein attraktives Widget, das Ihren Standort erfasst und Ihnen zeigt, was Sie bis Mitternacht am nächsten Tag erwartet. Von Anfang an finden Sie die aktuelle Temperatur und andere relevante Daten. Scrollen Sie nach unten und sehen Sie, wie die Dinge in Schritten von drei Stunden aussehen werden. Der mitgelieferte Videohintergrund rundet den Look wirklich ab.
Sehen Sie die Fließfähigkeit des Stifts – CIT261 von Bermon Painter
Hier ist Mario mit dem heutigen Wetter
Obwohl diese wundervolle Wetterbenutzeroberfläche nicht genau ist, macht es Spaß, sie anzusehen. Der Star der Show braucht keine Einführung, und die wütende Sonne am Himmel weckt schöne Erinnerungen (oder Schrecken). Sie können dies auch jederzeit mit einer API verbinden, um eine echte Prognose zu erhalten.
Sehen Sie den Pen Super Mario Weather von ErreC
Passen Sie Ihre Website dem Wetter an
Das Wetter auf Ihrer Website anzuzeigen ist technisch nicht unbedingt schwierig. Das Entwerfen einer auffälligen Benutzeroberfläche (obwohl sie immer noch diskret ist) ist eine echte Herausforderung.
Die Beispiele hier (mit der möglichen Ausnahme von Mario) bieten eine saubere und einzigartige Möglichkeit, wichtige Informationen anzuzeigen. Die Verwendung von Animationen macht besonders Spaß, da sie verschiedenen Wettertypen Kontext hinzufügen. Außerdem macht es mehr Spaß als ein statisches Bild.
Suchen Sie nach weiteren Ausschnitten der Wetter-Benutzeroberfläche? Packen Sie Ihren Regenschirm ein und besuchen Sie unsere CodePen-Kollektion!
