8 CSS və JS hava widgetlarının fantastik nümunələri

Hava gündəlik həyatımızın böyük bir hissəsidir. Buna görə veb saytların və mobil tətbiqetmələrin hesabat verməsi həmişə lazımdır. İstifadəçilər evlərindən kənarda olan mövcud şəraitdən sevimli tətil yerlərinin proqnozuna qədər bir şey yoxlamaq istəyirlər.

Cəlbedici bir istifadəçi interfeysi, havanın anlaşılmasını asanlaşdırır və bir az daha əyləncəlidir. Dizaynerlər bunu rəng, animasiya və əyləncə nişanlarının birləşməsi ilə həyata keçirirlər. Bəzən gözlənilməz bir sürpriz və ya ikisi də müsbət təsir göstərə bilər.

Günəşli bir günün dizayn ekvivalenti olan hava UI-lərinin bəzi nümunələrinə nəzər salaq.

Sərhəddən kənar vaxt

Karta əsaslanan UI, hava məlumatları üçün təbii bir uyğunluq kimi görünür. Lazım olan hər şey səliqəli və nizamlı bir yerdədir. Ancaq bu fraqment ənənə ilə pozulur. O kiçik kartdan kənara çıxan müxtəlif hava ssenarilərini canlandırın. Yağış, qar və günəşin şüaları kartın hüdudlarından kənarda partladı.

Steve Gardner'in cizgi qələm hava kartlarına baxın

Sadəcə gözəldir

Bu hava interfeysinin işini asanlaşdıran şey onun sadəliyidir. Tanış və yuvarlaq formaların yüksək rəngli kontrastla birlikdə istifadəsi oxumağı asanlaşdırır. Ayrıca, daxil edilmiş hərəkət effektləri tamaşaçı diqqətini cəlb edəcəkdir.

Colin Espinas tərəfindən qələm sadə hava tətbiqinin dizaynına baxın

Abstrakt nişanlar

Budur, tipik hava görüntülərindən aydın şəkildə fərqli görünən bir qrup CSS3 nişanı. Şəxsiyyət əlavə edən sadə animasiyalarla bir az mücərrəddirlər. Bu nümunədə bir az daha böyük olsalar da, üslublar kiçik nişanlara da borc verir. Çox yer tutmadan dayanmağın bir yolunu təklif edirlər.

Akhil Sai Ram tərəfindən canlandırılmış lələk hava nişanlarına (təmiz CSS) baxın

SVG hərəkəti

Bu cizgi SVG nişanlar toplusu çox kəskindir. Cizgi hərəkəti intuitiv və diqqətəlayiqdir, lakin şişirdilmir. Daha yaxşısı odur ki, onlar vektorlardır və istənilən ölçüdə ölçülə bilər. Hər hansı bir hava tətbiqinə əla bir əlavələr edərdilər.

Nat tərəfindən bir neçə hava simvolu svg-lərinə baxın

İstəyinizə görə yerli hava

Yerə əsaslanan xidmətlər saytınızın ziyarətçilərinə müvafiq məlumat vermək üçün əladır. Bu fraqment əla bir nümunədir, çünki yerinizi müəyyənləşdirir və mövcud havanı göstərir. Arxa planda olan Google xəritəsi də xoş bir toxunuşdur.

Den McHenry tərəfindən Qələm Göstər Yerli Hava Göstər

Yumşaq dalğalar

Bu parça bu siyahıdakı digər nümunələrin müxtəlif cəhətlərini özündə birləşdirir. Bu yer əsasındadır, karta bənzər bir konteyner edir və sadə animasiya istifadə edir. Nəticə olduqca minimal, lakin diqqətəlayiq bir hava widgetıdır. Bu məlumatlı olmaq üçün istifadəçiləri həddən artıq dizayn etməyinizə ehtiyac olmadığınızın sübutudur.

Kodlaşdırıcı Aviator Qələm Hava Kartına baxın

İndi və kənarda

Budur yerinizi tutan və ertəsi gün gecə yarısına qədər nə gözlədiyinizi göstərən cəlbedici bir widget. Əvvəldən cari temperatur və digər müvafiq məlumatları tapacaqsınız. Aşağıya fırladın və üç saat artımda nələrin görünəcəyini gör. Daxil olan video fon görünüşü həqiqətən tamamlayır.

Bermon Painter – Qələmin axıcılığına baxın – CIT261

Budur bugünkü hava ilə Mario

Bu gözəl hava istifadəçi interfeysi dəqiq olmasa da, izləmək çox əyləncəlidir. Şounun ulduzuna heç bir giriş lazım deyil və səmadakı qəzəbli günəş xoş xatirələri (və ya terroru) geri qaytarır. Ayrıca, real bir proqnoz almaq üçün bunu hər zaman bir API ilə əlaqələndirə bilərsiniz.

Qələm Super Mario Hava baxın ErreC

Hava üçün veb saytınızı bəzəyin

Veb saytınızdakı hava şəraiti texniki baxımdan mütləq çətin deyil. Ancaq göz oxşayan bir istifadəçi interfeysinin dizaynı (hələ təmkinli olarkən) real problemdir.

Buradakı nümunələr (Mario istisna olmaqla) vacib məlumatları göstərmək üçün təmiz və unikal bir yol təqdim edir. Müxtəlif hava şəraitinə kontekst əlavə etdiyi üçün animasiyadan istifadə xüsusilə xoşdur. Üstəlik, statik bir görüntüdən daha əyləncəlidir.

Daha çox hava UI parçaları axtarırsınız? Çətirinizi və başınızı CodePen kolleksiyamıza yığın!