UI Gölgeleri: %25 Siyah Gölge Neden Yanlış Görünür ve Kullanman Gereken Katmanlı Gölgeler

Çoğu tasarımcının ilk uzandığı gölge %25 siyahtır. Bu güçte ışığa benzemez. Kartın altında bir leke gibi durur.

İyi bir gölge neredeyse görünmezdir: gölgeyi görmeden önce yükselmeyi hissedersin. İşte oraya nasıl varılır, kopyalaman için dört token ile.

Varsayılan neden leke gibi görünür

Figma'nın varsayılan drop shadow'u %25 opaklıkta siyahtır ve 4 aşağı kaydırılmıştır. İki yaygın eğitim bunu tekrarlar, böylece yayılır: bir araç varsayılanı, kimsenin vermediği bir tasarım kararına dönüşür.

Gerçek bir gölge yumuşaktır. Işık nesnenin etrafını sarar, bu yüzden gölgenin kenarı yavaş yavaş sönümlenir ve gölge nesneden uzaklaştıkça silikleşir. Tek, sert, koyu bir katmanda bunların hiçbiri yoktur. Tek bir kenarı ve tek bir gücü vardır, göz de bunu yükselmiş bir yüzey olarak değil, kir, gri bir leke olarak okur.

Düzeltme 1: %25 değil, yüzde 8

%25 siyah

%8 siyah, daha geniş blur

Aynı kart, aynı zemin. Solda gölge kartın en gürültülü öğesi. Sağda yumuşak bir yükselme ve baktığın şey içerik. Opaklığı düşürmek işin yarısı. Blur'un büyümesine izin vermek diğer yarısı.

Blur büyüdükçe aynı miktarda gölge daha geniş bir alana yayılır ve kendiliğinden hafifler. Bu yüzden yüzde 8'deki geniş bir gölge, yüzde 8'deki dar bir gölgeden daha doğal görünür. Yüzde 8'den başla, yalnızca kart arka planında kayboluyorsa artır.

Düzeltme 2: iki gölgeyi üst üste koy

Tek bir gölge iki işi birden yapmak zorunda kalır ve ikisini de iyi yapamaz. İki gölge işi böler.

Dar olan kenarın hemen altında durur ve "bu yüzeye temas ediyor" der. Geniş olan, "bu yüzeyden havalanmış" diyen yumuşak haledir. Birlikte tek bir doğal gölge gibi görünürler, çünkü gerçek ışık da bunu yapar: koyu bir temas çizgisi artı geniş, silik bir sönümlenme.

CSS'te iki katman, virgülle ayrılmış tek bir bildirimdir:

Düzeltme 3: grileştirme, tonla

Saf siyah

Mürekkeple tonlanmış

Renkli bir arka plana karışan saf siyah onu gri ve bulanık yapar. Arka planın kendi tonunun koyu bir tonundaki gölge temiz kalır. Buradaki iki gölge de yüzde 16, yani tek fark renk.

Kural şu: paletindeki en koyu renk olan mürekkebini, düşük opaklıkla gölge rengi olarak kullan. Kendi token'larımızda mürekkep #1B1530, çok koyu bir mor. Beyaz bir sayfada ton zor fark edilir. Renkli bir sayfada, bir marka panelinde ya da tonlu bir bölümde, ait görünen gölge ile yapıştırılmış gibi duran gölge arasındaki farktır.

Düzeltme 4: daha yüksek, daha büyük demek

Bir şey daha yüksekte durduğunda, kartın üstündeki bir menü ya da sayfanın üstündeki bir modal gibi, gölgesi daha büyük ve daha yumuşak olur, çünkü ışığın yayılacak daha çok yeri vardır. Daha koyu olmaz. Yüksekteki şeyin gölgesini koyulaştıran tasarımcı yine lekeye geri döner.

Bu bize küçük, kapalı bir token kümesi verir:

Her katman X 0 ve spread 0 kullanır, #1B1530 mürekkebiyle renklendirilir. Figma'nın X, Y, blur ve spread alanları CSS box-shadow içindeki dört sayıya doğrudan karşılık gelir.

Token'lar CSS olarak

Bu dördü bizim önerimizdir, bir platform değeri değildir. Mürekkep rengini kendi en koyu marka tonunla değiştir ve yapıyı koru.

Gölgelerin işe yaramadığı yer: dark mode

Koyuda gölge

Daha açık yüzey

Gölge arkasındakini koyulaştırır ve koyu bir arka planın koyulaştırılacak pek bir şeyi kalmamıştır. Solda büyük gölge görünmez ve kart sayfaya karışır. Sağda kart sadece daha açık bir yüzeydir ve onu yükselten de budur.

Bu yüzden koyu temada bir katmanı gölgeleyerek değil, daha açık yaparak yükselt. Dark mode renk sistemleri yazımız yüzey rampasını, light mode arka plan rengi yazımız ise öbür taraftaki grileri anlatır.

Gözünü kısma testi

Ekrana gözünü kısarak bak ya da geri çekil. Her gölgeyi hâlâ koyu bir şekil olarak görebiliyorsan fazla güçlüdür. Kart kenarları en kötü monitöründe kayboluyorsa opaklığı bir adım artır. Doğru gölge doğrudan baktığında kaybolur, onu kaldırdığında kendini belli eder.

SSS

UI için en iyi drop shadow hangisi?

Kendi mürekkebinin koyu bir tonunda iki üst üste katman: yüzde 6'da 0 1px 2px gibi dar bir katman ve yüzde 8'de 0 8px 24px gibi geniş bir katman. Leke gibi değil, doğal ışık gibi okunur.

Bir UI gölgesinin opaklığı ne olmalı?

Dört token'ımız yüzde 6 ile 12 arasında değişir. Bir kart için yüzde 8'den başla, yalnızca kenar kayboluyorsa artır. Yaygın bir varsayılan olan %25 siyah, temiz bir arayüzde nadiren doğrudur.

Figma'nın varsayılan drop shadow'u nedir?

Yüzde 25 opaklıkta siyah (#000000), 4 aşağı kaydırmalı. Aracın başlangıç noktasıdır, tasarım kararı değildir, bu yüzden çoğu tasarım onu değiştirerek iyileşir.

Gölgeler saf siyah olmalı mı?

Hayır. Marka ya da mürekkep renginin çok koyu bir sürümünü kullan. Renkli bir arka planda saf siyah gölgeyi gri ve bulanık yapar, tonlu gölge ise rengi temiz tutar.

Gölgelerle yüksekliği nasıl gösteririm?

Daha yüksek öğenin gölgesini daha koyu değil, daha büyük ve daha yumuşak yap. XS, SM, MD ve LG gibi küçük bir token kümesi kullan, böylece arayüzün her katmanı dört gölgeden birini kullanır.

Gölgeler dark mode'da işe yarar mı?

Kötü. Koyulaştırılacak açık bir arka plan kalmadığı için büyük gölgeler kaybolur. Bunun yerine bir katmanı daha açık bir yüzey rengi vererek yükselt.

CSS'te katmanlı box-shadow nasıl yazılır?

Katmanları virgülle ayırarak tek bir box-shadow bildiriminde listele: box-shadow: 0 1px 2px rgba(27,21,48,.06), 0 8px 24px rgba(27,21,48,.08);.

Kaynaklar

• Figma'nın varsayılan drop shadow'u #000000, %25 opaklık, X 0, Y 4'tür. Eğitimler %25 siyah konusunda hemfikir; varsayılan blur konusunda ayrışıyorlar, bu yüzden bu yazı onu hiç belirtmez.
• #00000040, 8 haneli hex'te %25 #000000'dır (0x40, 255 içinde 64'tür, yaklaşık %25).
• Dört token ve #1B1530 mürekkebi (violet 900) bizim UX Brainy efekt stillerimizdir. Bir öneridir, platform değeri değildir.
• Yukarıdaki kartlar bizim kendi örneklerimizdir. Ton demosu, %16 siyahın yanında %16 #4E2FB3 kullanır.
• Bunun gibi daha fazla tek kurallı yazı için UX Brainy.