UI'da Ayırıcı Rengi: Ayırıcılar Neden #000000 Değil
Liste satırları arasındaki saf siyah bir çizgi, ayırdığı kelimelerden daha yüksek sesle bağırır. Açık temada #C6C6C8, koyu temada #38383A kullanın, 1 px olsun, metne hizalı içeri alınsın ve çizgi çizmeden önce boşluğu deneyin.
Doğru ayırıcı rengi, #C6C6C8 gibi yumuşak bir açık gridir; 1 px kalınlıkta çizilir ve metne hizalı olarak içeri alınır, saf siyah bir çizgi değildir. Ayırıcı satırları ayırmak için vardır ve siyah olanı listenin en gürültülü öğesine dönüşür. İşte açık ve koyu ekranlar için değerleriyle dört çözüm.
Siyah ayırıcılar neden bağırır
Kimse bilerek siyah ayırıcı seçmez. Düşünmeden çizilen bir çizgi #000000 çıkar ve biri değiştirene kadar öyle kalır.
Sorun kontrasttır. Beyaz üzerinde saf siyah, bir ekranın gösterebileceği en güçlü ikilidir ve satır metniniz genelde bundan biraz daha yumuşaktır. Böylece çizgi kelimelerin önüne geçer. Göz önce çizgileri okur, sonra aralarındaki içeriği aramaya koyulur.
Ayırıcı bir ipucudur, bir özellik değil. Görevi, gerektiğinde gözün onu bulması, geri kalan zamanda ise görmezden gelinmesidir.
Çözüm 1: Çizgileri açın
#000000 çizgiler
#C6C6C8 çizgiler
iOS liste ayırıcılarını beyaz üzerinde #C6C6C8 ile çizer; bu, yarı saydam sistem ayırıcı renginin beyaz zemine oturmuş halidir. Material 3 de aynı yere varır: outline variant token'ı olan #CAC4D0, 1 dp kalınlıkta.
Siyah çizgi
iOS ayırıcı
Material 3 ayırıcı
Beyaz üzerinde %12 siyah
Zemininiz düz beyaz değilse sabit bir gri yerine alfa değeri kullanın. Material yönergeleri ayırıcıları açık temalarda %12 siyah, koyu temalarda %12 beyaz olarak tarif eder. Beyaz üzerindeki %12 #000000, #E0E0E0 olarak görünür; renkli bir yüzeyde ise renkli kalır, yani çizgi hiçbir zaman yapıştırılmış gibi durmaz.
Aynı çözüm listelerin dışında da geçerli: tablo satır çizgileri, kart alt kısımları, başlığın altındaki çizgi ve menü grupları arasındaki ayraç.
Çözüm 2: Onları metne hizalayarak içeri alın
Tam genişlik
Metinden başlar
Bir iPhone'da Ayarlar'ı açıp bakın. Çizgi ikonun altından değil, etiketten başlar. Material de aynısını söyler: içeri alınmış ayırıcılar ilgili içeriği ayırır ve avatar gibi sabitleyici öğelerle eşleşir.
İkonu satırına bağlayan şey bu iç boşluktur. İkonun altındaki tam genişlikte bir çizgi onu koparır ve liste satırlar yerine şeritler gibi okunur.
iOS 16'dan beri SwiftUI listeleri her ayırıcıyı varsayılan olarak ikona değil satır metninin başlangıç kenarına hizalar. Satırlarınızda ikon ya da avatar yoksa etrafında içeri alınacak bir şey yoktur ve tam genişlikte çizgi sorun değildir.
Çözüm 3: Önce boşluğu deneyin
Her satırda çizgi
Boşluk işi görüyor
Bir çizgiye uzanmadan önce, çizginin ne işe yaradığını sorun. Çoğu zaman bu gruplamadır ve gruplama mesafeyle yapılabilir. Material, tam genişlikte ayırıcılara alternatifler sıralar: beyaz boşluk, alt başlıklar ve içeri alınmış ayırıcılar; tam genişliklileri aşırı kullanmanın görsel gürültü yarattığı konusunda da uyarır. Refactoring UI de "daha az kenarlık kullan" başlığı altında aynı savı yapar: şeyleri boşluk, arka plan rengi veya gölgeyle ayırın.
Hızlı bir test: listenizdeki tüm çizgileri silin. Gruplar hâlâ görünüyorsa, çizgiler süsten ibaretti.
Çözüm 4: Koyuda da kısın
#1C1C1E üzerinde #FFFFFF
#1C1C1E üzerinde #38383A
Kural koyu modda değişmez, tersine döner. Açık ekranda çizgi yüzeyden biraz daha koyudur, koyu ekranda biraz daha açık.
iOS koyu liste arka planında #38383A kullanır. Material 3, #141218 yüzey üzerinde koyu outline variant'ı olan #49454F kullanır.
Saf beyaz çizgiler saf siyah olanlarla aynı sorunu yaşar: listedeki en parlak izlerdir, bu yüzden metni yenerler.
Ayırıcı spesifikasyonu
Kodunu kopyalamak için herhangi bir çipe dokunun.
| Özellik | Değer | Neden |
|---|---|---|
| Renk, açık | #C6C6C8 | Baktığınızda görünür, okurken sessiz |
| Alfa seçeneği | %12 #000000 | Her yüzeye uyum sağlar, beyaz üzerinde #E0E0E0 görünür |
| Kalınlık | 1 px (1 dp) | Daha kalın çizgiler şekle dönüşür |
| İç boşluk | Metinden başla | İkon ve avatarları satırlarına bağlı tutar |
| Renk, koyu | #38383A | Yüzeyden biraz daha açık, asla beyaz değil |
| Boşluk | Önce onu dene | Hiçbir şey çizmeden gruplama |
Bunu geliştiricinize verin
:root {
--divider: #C6C6C8;
}
@media (prefers-color-scheme: dark) {
:root {
--divider: #38383A;
}
}
.row + .row {
border-top: 1px solid var(--divider);
margin-left: 56px; /* icon width plus gap, so the line starts at the text */
}
.group + .group {
margin-top: 24px; /* try this before adding a line */
}
Kenarlıktaki margin-left iç boşluğun kendisidir: çizgi etiketin başladığı yerden başlar. Alfa yaklaşımını kullanırsanız, değişkeni açıkta rgba(0, 0, 0, 0.12), koyuda rgba(255, 255, 255, 0.12) ile değiştirin.
SSS
Ayırıcılar hangi renkte olmalı?
Açık ekranlarda iOS'un #C6C6C8'i veya Material 3'ün #CAC4D0'ı gibi yumuşak bir açık gri. Koyu ekranlarda #38383A gibi biraz daha açık bir koyu gri.
Ayırıcılar siyah olmalı mı?
Hayır. Saf siyah çizgi listedeki en yüksek kontrastlı izdir, bu yüzden göz onu içerikten önce okur. Açık gri ya da yaklaşık %12 opaklıkta siyah kullanın.
Bir ayırıcı ne kadar kalın olmalı?
1 px, yani Material'de 1 dp. Daha kalın çizgiler şekle dönüşür ve satırlarla yarışır.
İçeri alınmış ayırıcı nedir?
Ekran kenarı yerine satırın metninden başlayan, böylece bir ikon veya avatarın altından geçmeyen ayırıcı. iOS Ayarlar her listede bunu kullanır.
Her satır arasında ayırıcı gerekir mi?
Her zaman değil. Gruplar arasındaki daha büyük bir boşluk çoğu zaman hiçbir şey çizmeden içeriği ayırır; Material de tam genişlikte ayırıcıları aşırı kullanmanın görsel gürültü yarattığı konusunda uyarır.
Koyu modda hangi ayırıcı rengi işe yarar?
iOS'un koyu liste arka planında #38383A, Material 3'ün koyu yüzeyinde #49454F. Beyazdan kaçının, çünkü parlak çizgiler koyu ekranlarda göz alır.
Kaynaklar
- Material Design 2, Dividers: ayırıcılar 1 dp kalınlıktadır; açık temalarda %12 siyah, koyu temalarda %12 beyaz; içeri alınmış ayırıcılar ilgili içeriği ayırır ve avatar gibi sabitleyici öğelerle çalışır; tam genişlikte ayırıcılara alternatifler arasında beyaz boşluk, alt başlıklar ve içeri alınmış ayırıcılar vardır; tam genişlikli ayırıcıların aşırı kullanımı görsel gürültü yaratır.
- Material 3 tokens: ayırıcı, 1.0 dp kalınlıkta outline variant rengini kullanır; temel değer açık şemada #CAC4D0, koyu şemada #49454F'dir. #141218 temel koyu yüzeydir.
- Apple, listRowSeparatorLeading ve Adjust List Row Separator Insets: iOS 16'dan beri listeler her ayırıcıyı varsayılan olarak satır metninin başlangıç kenarına hizalar.
- iOS ayırıcı renkleri: açıkta rgba(60, 60, 67, 0.29), beyaz üzerinde #C6C6C8 olarak oturur; koyuda #38383A. iPhone'daki Ayarlar uygulaması iç boşluğu gösterir.
- #FFFFFF üzerindeki %12 #000000, alfa karışımıyla hesaplanan #E0E0E0 olarak görünür.
- Refactoring UI, "Use fewer borders" (Adam Wathan ve Steve Schoger).
- WCAG 2.2, 1.4.11 Non-text Contrast: liste satırları arasındaki ayırıcı süstür, içeriği anlamak için gerekli değildir, bu yüzden ona asgari kontrast uygulanmaz.
- Ayarlar satırları ve "Design review" etkinlik ayrıntıları bu sayfa için uydurulmuştur.
- İlk olarak UX Brainy üzerinde bir carousel olarak yayımlandı.
Want lists, forms and every other surface designed as one quiet system? Our team designs and builds product UI that holds up in light and dark.
Get Started
