App Store ekran görüntüleri için renk paletleri
Çoğu App Store ekran görüntüsü paleti aynı şekilde başarısız olur: 27 inçlik monitörde harika görünür, App Store'un gerçekte gösterdiği boyutta çamura döner. Karusel, ürün sayfasında tam çözünürlükte görüntülenir; arama sonuçlarında ve "Bunun gibi" bölümlerinde ise küçük resim boyutunda. Paletin yalnızca bu boyutlardan birinde işe yaraması, diğerinde dönüşüm kaybetmen anlamına gelir.
Üç görüntüleme bağlamı
Bunları birbirinden bağımsız üç tasarım kısıtlaması olarak ele al. Birinde kazanan bir palet diğerinde kaybedebilir.
- Tam boyut (iPhone'da 1290 × 2796). Ürün sayfası görüntüsü. Kullanıcıların tıkladıktan sonra geldiği yer. İnce degrade geçişler, küçük metinler ve karmaşık katmanlı renkler burada okunur. Çoğu tasarımcı yalnızca bu boyutu test eder.
- Arama küçük resmi (~300 × 650). App Store aramasında rakip uygulama ikonlarıyla yan yana görüntülenen ilk üç karusel paneli. İnce ayrıntılar kaybolur. Yüksek kontrastlı renk blokları okunur; ince degradeler düzleşir.
- Komşu bağlam. Ekran görüntün aramada asla yalnız görünmez. Etrafındaki yedi uygulamanın kendi paletleri vardır. Kategorindeki herkes sıcak tonlara gidiyorsa ve sen de sıcak tonlara gidersen ekran görüntün kalabalığa karışır.
Beş renk kuralı
Beş renk kabaca üst sınırdır. Bir baskın arka plan rengi (veya ikisi arasında degrade), bir ana metin rengi, vurgu için bir aksent rengi ve uygulamanın gerçek ekran görüntüsünden gelen renkler. Altıncı bir renk eklemek genellikle üstüne ekleme değil, başka bir rengi çıkarmak anlamına gelir.
Bunun nedeni estetik değil — küçük resimler görsel bilgiyi agresif biçimde sıkıştırır ve çok fazla renkli bir palet kirli bir gri tona dönüşür. Dört ile beş renk, her rengin 200 piksel genişlikte ayrı kaldığı aralıktır.
Kontrast: WCAG AA zorunludur
Panel arka planına karşı metin WCAG AA'yı karşılamalı (gövde metni için 4,5:1, 24pt+ büyük metin için 3:1). Apple bunu kontrol etmiyor, ama küçük resim boyutunda AA'nın altındaki her şey tam anlamıyla okunamaz hale gelir. Dışa aktarmadan önce son metin rengin ile son arka plan rengin arasındaki kontrast oranını kontrol et.
Yaygın hata: biraz daha açık koyu gri bir degrade üzerinde koyu gri metin. Figma'da şık görünür. Küçük resim boyutunda tamamen kaybolur.
Kategori geleneği: başlangıç noktası, kural değil
App Store kategorindeki ilk 20 uygulamaya bak. Baskın palet renklerini not al. Bu senin kategori geleneğin — kullanıcıların "bu kategoride güvenilir uygulama" ile ilişkilendirdiği palet. Buna uymayı (düşük risk, düşük farklılaşma) veya kasıtlı olarak kırmayı (yüksek risk, işe yararsa yüksek farklılaşma) seçebilirsin.
Geleneği kırmak belirli bir gerekçen varsa işe yarar. Notion'ın kategorisi (üretkenlik) 2022'de parlak pastel tonlara yönelmişti; Notion neredeyse tek renkli, ince sıcaklıkta bir tasarım tercih etti ve daha ciddi göründü. Headspace'in kategorisi (zihinsel sağlık) yumuşak pastellerle doluydu; Headspace'in derin turuncu degradesi saldırgan olmadan öne çıktı. Güvenli sıra şudur: önce uy, sonra kır — ilk üründe uy, karşılaştıracak kurulum verisi olduğunda kır.
"Aramada komşuluk" denetimi
Göndermeden önce şunu yap: uygulamanın sıralandığı (veya sıralamak istediği) iki ya da üç anahtar kelimeyi App Store'da ara. O anahtar kelimeler için en üstteki uygulamanın altındaki ekran görüntüsü şeridine bak. Tasarladığın palet etrafındaki uygulamalardan öne çıkacak mı, yoksa onlarla mı kaynaşacak?
Bu otuz saniyelik bir denetimdir ve çoğu ekip bunu atlar. Tek başına benzersiz görünen bir ekran görüntüsü paleti, arama sonuçlarında üstünde ve altında beş rakiple aynı mavi-mor degrade olabilir. Genellikle tek bir aksent rengi değişimi sorunu çözer.
Koyu, açık veya ikisi de değil
Net bir pozisyon seç: ağırlıklı koyu arka planlar, ağırlıklı açık arka planlar veya paneller genelinde tutarlı bir degrade ailesi. Tek bir karuselde koyu ve açık panelleri karıştırmak en yaygın hata — tasarımın bir yöneticisi yokmuş gibi görünür.
Her birinin kategoriye göre ne zaman kazandığını görmek için koyu mod ve açık mod karşılaştırmasına bak. Kısaca: koyu mod oyunlarda, müzikte, fotoğraf/videoda ve yapay zekada kazanır; açık mod üretkenlikte, eğitimde ve sağlıkta kazanır; geri kalanında marka kararı belirler.
Renk ve yerelleştirme
Renkler yerel bağlamlara göre farklı anlamlar taşır. Kırmızı, Çin dili konuşulan pazarlarda olumludur (refah); Avrupa'nın büyük bölümünde olumsuz çağrışım yapar. Beyaz, Doğu Asya'nın büyük bölümünde yas rengidir. Parlak yeşil bazı yerlerde "ilerleme", bazı yerlerde "kıskançlık" çağrışımı taşır. Çoğu uygulama için bu farklılıklar marka tutarlılığından daha az önemlidir — tek bir palet seç, dünyaya gönder. Renk sembolizmi konumlandırmanın anlamlı bir parçası olan uygulamalarda (lüks, sağlık, finans) ve harekete geçmek için veriye sahip olduğunda yerel bazlı palet üzerinde düşün.
Bu hafta ne yapmalısın
- Mevcut ekran görüntülerini 200 piksel genişlikte denetle. O boyutta okunamayan her şey değişmeli.
- Her metnin panel arka planına karşı WCAG AA kontrastını doğrula.
- En iyi üç anahtar kelimeni ara ve çevresel bağlamı ekran görüntüsüyle yakala. Paletin öne çıkıyor mu?
- Yeni tasarım gönderiyorsan en fazla beş renkle sınırla. Altıncı renk eklemek bir rengi çıkarmak demektir.