Hava Durumu Uygulaması Tasarımı: Ana Ekran Yeniden Tasarımı, Önce ve Sonra

İnsanlar bir hava durumu uygulamasını tek bir soruyu yanıtlamak için açar: dışarısı nasıl ve sırada ne var? Aşağıdaki ilk taslak bu soruyu yanıtlıyor, sonra da susmuyor, çünkü tahminin döndürdüğü her şeyi gösteriyor: tam yer adı, saniyesine kadar zaman damgası, 9 px'te dokuz kutu ve renkli ikonlarla on gün. Düzeltme aynı veriyi koruyor ve ana ekranın ne işe yaradığına karar veriyor.

Ekranın tamamı, önce ve sonra

Junior taslak

Düzeltilmiş

Solda ilk kart bir yer adı, bir zaman damgası, bir birim anahtarı, bir sıcaklık, bir durum ve tek küçük satırda dört bilgi daha içeriyor. Altında küçük yazılı üç beyaz kutu var. Sağda ekranın üstünde üç şey var: şehir, sayı ve gökyüzü. Aşağıdaki her şey aynı mavinin üzerinde bir kart.

Sağdaki her kart aynı 20 px sol kenardan başlıyor ve durum ikonu, beyaz bulutun arkasındaki sarı bir güneş, ilk bloğun sağında, sayının karşısında duruyor.

Düzeltme 1: şehir ve tek büyük sayı

Önce

Sonra

Eyalet ve ülkeli bir yer adı, bir zaman damgası, bir anahtar ve küçük bir bilgi satırına karşı: şehir, büyük bir sayı, gökyüzü ve günün aralığı.

Taslağın ilk kartı, tahmin verisi için bir form gibi. "New York, NY, United States", kişinin zaten içinde olduğunu bildiği tek bir yer için üç isim. "Updated 10/24/2026 09:41:12" saniyesine kadar doğru ve kişi için işe yaramaz: kimse ne giyeceğine zaman damgasına bakarak karar vermez. Birim anahtarı da en önemli kartın köşesinde duruyor.

Düzeltme "New York" ve "72°" diyor ve sayıyı 84 px yapıyor, ekrandaki en büyük şey, çünkü sorunun cevabı o. Sonra sözcüklerle gökyüzü geliyor, "Parçalı bulutlu", ardından günün aralığı, "Y 75° D 61°". Hissedilen sıcaklık ve yağmur ihtimali bu bloktan çıktı: hissedilen sıcaklık detaylara indi ve kendi kartını aldı.

Tekrar kullanılacak kural: ana ekranın üstü tek cevap içindir. Kişinin ikinci olarak bakacağı veriyi bir adım aşağı koyun.

Düzeltme 2: altı saat, tek kart, okumaya yetecek alan

Önce

Sonra

Çerçeveli bir şeritte sekiz dar sütuna karşı, sade dilli bir başlıkla altı geniş sütun.

Taslak sekiz saati tek satıra sıkıştırıyor, bu yüzden her sütun ince ve yazı minik. Düzeltme altı saat gösteriyor: Şimdi, 10, 11, 12, 13 ve 14. İki sütun az olunca her saat daha büyük bir ikon ve daha büyük bir sayı alıyor.

Kartın başlığı etiketten cümleye döndü: "Öğleden sonra 3'e kadar güneşli aralıklar". Okura altı sütunun toplamda ne söylediğini anlatıyor, böylece havanın ne zaman değiştiğini bulmak için her ikonu taramak gerekmiyor.

Tekrar kullanılacak kural: bir veri satırının, ondan ne çıkarılacağını söyleyen bir başlığı olmalı.

Düzeltme 3: dört detay, her biri büyük bir sayıyla

Önce

Sonra

Beyaz bir kartta dokuz küçük kutuya karşı, sayının büyük yazıldığı dört büyük kart.

9 px'te dokuz kutu her detayı eşit sayıyor ve hiçbiri bir bakışta okunamıyor. Basınç, çiğ noktası ve görüş mesafesi gerçek veri, ama düzeltmenin ilk sıraya koyduğu şeyler değil.

Düzeltme dördünü tutuyor: hissedilen, nem, rüzgar ve UV indeksi. Her biri bir kart, bir ikon, küçük bir etiket ve taslağınkinden çok daha büyük bir sayı alıyor. "6 Yüksek" ve "8 mph KB" kol mesafesinden okunuyor. Diğer altısı, basınç, görüş mesafesi, çiğ noktası, gün doğumu, gün batımı ve hava kalitesi, bu ana ekranda yok.

Tam bir hava durumu uygulamasının bunlar için yine de bir yere ihtiyacı var, mesela bir detay ekranı, ve bu yeniden tasarım onu çizmiyor.

Dürüst takas bu. Ana ekranın okunması hızlanıyor, verinin geri kalanının ise ikinci bir eve ihtiyacı var.

Düzeltme 4: her aralık için çubuklu üç gün

Önce

Sonra

Yağmur yüzdesi, en yüksek ve en düşük değerle on metin satırına karşı, her günün aralığı için çubuklu üç satır.

On satır "75° / 61°", okurun kafasında karşılaştırması gereken on toplam demek. Hangi gün en sıcak? Hava nerede soğuyor? Cevap rakamların içinde ve göz onu kazıyıp çıkarmak zorunda.

Karşılaştırmayı çubuk yapıyor. Her günün en düşük ve en yüksek değeri 50° ile 78° arasındaki ortak bir ölçeğe oturuyor, yani daha uzun ya da daha sağdaki çubuk daha sıcak ya da daha geniş bir gün demek, renk de çubuk boyunca serin maviden sıcak sarıya akıyor. Yağmur yüzdesi satırlardan çıktı. 24 Ekim Cumartesi "Bugün", sonraki iki gün onu izliyor.

Tekrar kullanılacak kural: soru bir serinin nasıl karşılaştığıysa, karşılaştırmayı çizin.

Daha küçük düzeltmeler

• Tek sol kenar. Taslak solda 14 px, sağda 12 px kullanıyordu ve blokları hizalanmıyordu. Düzeltmedeki her blok 20 px kenardan başlıyor, kartlar arasında 12 px var.
• Daha koyu bir mavi. Gökyüzü #1D4ED8 ile #3B82F6 arasında bir gradyan, taslağın kendi mavisi açık uç olarak. Kartlar yüzde 24'lük lacivert bir perdenin (#1E3A8A) üzerinde duruyor, böylece gökyüzünün parçası gibi okunuyor, üzerindeki beyaz kutular gibi değil.
• Mavi üzerinde okunabilen beyaz yazı. Taslağın #3B82F6 üzerindeki 9 px beyaz yazısı ekrandaki en zayıf çift. Daha koyu kartlarda daha büyük yazı bunu çözüyor.
• Gerçek bir yazı ölçeği. Yazılar 8 ile 13 px'ten iOS'un 13 ile 28 pt boyutlarına geçti, üstte 84 px'lik sıcaklık var.
• Beş değil dört sekme. Düzeltme bir sekmeyi kaldırıyor.
• Ana kartta birim anahtarı yok. F ve C anahtarı ilk karttan çıktı.

Kendi hava durumu uygulamanızı denetleyin

Figma dosyasını alın

Ücretsiz dosyada iki ekran da bileşen olarak, her düzeltme önce ve sonra çifti olarak, renk değişkenleri ve iOS metin stilleri yer alıyor.

Ücretsiz Figma dosyası

Hava durumu ana ekranı, önce ve sonra

İki ekran ve düzeltilen her parça Figma bileşeni olarak. Ücretsiz, salt görüntüleme, taslaklarınıza kopyalayın.

Figma'da aç

SSS

Bir hava durumu uygulaması ana ekranı önce ne göstermeli?

Şehri ve tek büyük bir sıcaklığı, sonra gökyüzünü ve günün en yüksek ve en düşük değerini. Geri kalan her şey bir adım aşağıda: sonraki saatler, birkaç detay ve kısa bir tahmin.

Bir hava durumu uygulaması ana ekranda kaç detay göstermeli?

Çoğu insan için dört yeter: hissedilen sıcaklık, nem, rüzgar ve UV indeksi. Basıncı, görüş mesafesini, çiğ noktasını ve gün doğumu ya da batımını bir detay ekranına koyun.

Bir hava durumu uygulaması saatlik tahmini nasıl göstermeli?

Tek kartta yaklaşık altı saat, büyük ikonlar ve sayılarla, ayrıca saatlerin toplamda ne anlattığını söyleyen bir başlıkla, örneğin "Öğleden sonra 3'e kadar güneşli aralıklar".

Bir uygulamada çok günlük tahmin nasıl gösterilir?

Ana ekranda üç gün, her biri günün en düşüğünden en yükseğine ortak bir ölçekte bir çubukla. Daha uzun listeler kendi ekranına aittir.

Bir hava durumu uygulaması hangi yazı boyutunu kullanmalı?

Platformun metin ölçeğini kullanın, mesela iOS metin boyutlarını, ve sıcaklığı diğer her şeyden çok daha büyük tutun. Düzeltilmiş ekran 84 px'lik bir sıcaklıkla 13 ile 28 pt arasında çalışıyor.

Kaynaklar

• İki ekran da bize ait, Figma'da tasarlandı ve ölçüldü. Yer, sıcaklıklar ve tarihler alıştırma için uydurulmuştur.
• Kontrast, WCAG 2.2 kontrast formülü ile kontrol edildi: beyaz yazı her düzeltilmiş kartta 4,6:1 veya daha iyi, taslağın #3B82F6 üzerindeki 9 px beyaz yazısı ise 3,7:1.
• Düzeltilmiş ekranda kullanılan iOS metin boyutları için Apple Human Interface Guidelines: Typography.
• İlk olarak App Brainy üzerinde bir carousel olarak yayımlandı.