Damla Gölgeler ve Degradeler: Görsel Metaforlarınızda Tutarlı Olun
Alt gölgeler ve degradeler , web üzerindeki en yaygın tasarım öğelerinden iki tanesidir.
Onlara birçok farklı stile eşlik ediyor. Web tasarımcıları için kullanışlı efektlerdir çünkü herhangi bir grafik programıyla çekici, kullanışlı ve kolay bir şekilde oluşturulabilirler. Ancak karanlık bir tarafı var: sık sık istismar ediliyorlar .
Amatör rüzgâr gölgelerini ya da gradyanlarını kullanmak, dünyaya yeni başlayan ya da bir hack olduğunuzu bildirmek için gömleğinize bir kırmızı harf yapıştırmak kadar kötü. İnce ve zor fark edilen hatalar bile, aksi takdirde güzel ve etkili tasarımlara zarar veren gerilimler yaratabilir.
Bu makalede, hangi gölgelerin ve degradelerin ne yaptığına bakacağız, bunları nasıl kullanacağımız hakkında konuşacağız ve bazı hata örneklerine ve nasıl düzeltileceğine bakacağız.
Damla Gölgeler ve Degradeler Ne Yapar?
Bir web tasarımcısının işi, parlayan iki boyutlu ekranlar için renk desenleri yaratmaktır. (Bunun birkaç istisnası var: Web sitelerinde görülebilir, ki, parıldamayan bir Kindle ekranı ve web siteleri kağıt üzerine basılabilir.) Bu ekranlar gerçek dünyayı yansıtmaz; gerçek dünyaya bile benzemezler . Bu nedenle, web sitemizdeki kalıpların, içinde yaşadığımız üç boyutlu dünyadaki nesnelerle herhangi bir ilişki kurması için gerçek bir zorunluluk yok.
Unix ve DOS gibi işletim sistemleri, ekranda bir metinden başka bir şey olmayan bir arayüze sahiptir. Windows ve Mac OS X gibi diğerleri, gerçek nesnelerin yanılsamalarıyla doludur. Örneğin, OS X'in, uzak durulan parlak bir yüzeye sahip bir masaya benzeyen bir iskelesi, eğimli kenarları hafifçe dışarı çıkmış gibi görünen bir menü çubuğu ve yarı saydam pastillere sahip olduğu görünen çubukları kaydırın.
Bütün bu etkiler metaforlardır. Ekranda etkileşimde bulunabileceğimiz bazı unsurları, dijital olmayan dünyadaki nesneler gibi ışık kaynakları ile etkileşimde bulunan üç boyutlu nesnelermiş gibi ele alırlar. Bir şekilde yapılması komik bir şey: tüm bu ışık kaynakları ve kenarları ve şekilleri saf fantazidir. Ekrandaki nesneler hayali olduğundan, onları gerçek dünyadaki nesnelerle niçin ilişkilendirmeliyiz?
Mekânın yanılsaması, hayali olanı, içinde yaşadığımız bir dünyaya bağlar.
Hayali nesneleri gerçek dünyadakilerle ilişkilendirmemizin en önemli nedeni, üç boyutlu dünyamızdaki nesnelerle etkileşimde uzman olduğumuzdur. Üç boyutlu nesnelerle uğraşırken deneyimliyiz ve nesnelerin birbirleriyle uzayda ilişkilerini anlatan görsel kod hakkında bilgi birikimimiz var.
Kısmen, ışığı yorumlama yeteneğinin o kadar dikkat çekici olmasından dolayı, illüzyonda ya da nesnelerin ortaya çıkmasında bu türden bir zevk aldığımızdan dolayı. Bizler, evlerin ve elmalar gibi ortak nesnelerin dramatik biçimde canlı gibi resimlerinin nesnelerin kendileri olduğumuzdan daha çok meşgul olduklarını görürüz. Bizler, binlerce yıldır nesnelerin fikirlerini sunmayı amaçlayan çizimler oluşturduk. Ekrandaki hayali pastiller ve masalar, bu uzun geleneğin en son tezahüründen başka bir şey değildir.
Yine de zevkten daha fazlası var. Şekil ve konum, nesnelerin birbirleriyle nasıl ilişkilendiğiyle ilgili bilgi verir. Örneğin, Safari penceresindeki kaydırma çubuğunun uzun dikey pastili şekli, onu çevreleyen unsurlardan daha yüksek, “daha yüksek” veya daha yakın olduğu yanılsamasını yaratır. Bu, tasarımda daha büyük bir önem kazanmaktadır, çünkü kaydırma çubuğu, sayfalarda gezinmek için gerekli bir arayüz öğesidir.
Görsel metaforlar algılanan uygunluk yaratır.
Bir nesne olarak görünerek, kaydırma çubuğu "algılanan" oluşturur affordance “Bu, kendisini, belirli kullanımlara borç veren gerçek nesnelerin özelliklerine metafor yoluyla bağlar. Örneğin, bir web sayfasındaki eğimli bir düğme, basmayı sağladığını bildirir. Bir sayfada tıklanabilir bir şey yapabiliriz, ancak tıklanabilir bir öğeyi sıkıştırılabilir bir görüntü ile ilişkilendirmek, işlevini açık, açık ve hatta hoş bir şekilde gösterir.
Alt gölgeler ve degradeler, alanın yanılsamasını yaratmak için temel araçlardır.
Alt gölgeler ve degradeler, üç boyutlu olmanın yanılsamasını yaratmaya yardımcı olan ve sayfadaki nesnelerin uzamsal ilişkilerini önleyen iki araçtır. İyi yapıldığında, bu üç boyutlu bilgi, bir tasarımın daha güzel ve anlaşılabilir olmasını sağlar.
Gerçek dünyada, bir nesne bir ışık kaynağının arkasındaki bir yüzeye çarpmasını engellediğinde açılan gölgeler oluşur. Bu, insanların gölgelerin iki boyutlu tasarımlar “pop” yaptıklarını söylediğinin nedenlerinden biridir: çünkü nesnelerin diğer unsurlardan uzaklaştıklarını veya yüzdüğünü fark ettikleri için.
Bir nesnenin bir kısmı bir ışık kaynağına başka bir parçadan daha yakın olduğunda degradeler görünür. Sonuç olarak, daha yakın kısım daha açık görünür ve daha uzak kısım daha koyu görünür. (Birden fazla ışık kaynağı etkileşimde olduğunda veya ışık kaynakları farklı renklerde olduğunda, degradeler daha karmaşık hale gelir.)
Böylece, ışığın gerçek dünyadaki etkilerini taklit ederek, gölgeler ve degradeler metaforik nesneler, hayali ışık kaynakları ve ilişkileri hakkında bilgi verir.
Damla Gölgeler ve Degradeler Etkili Nasıl Kullanılır
İşte bir olasılık: hiç gölgeler veya degradeler kullanmayın.
Bunu ciddiyim. Bu, gölge düşürme ve degrade hatalarından kaçınmanın en kesin yoludur ve seçenek her zaman dikkate alınmalıdır.
Rastgele nesneler üzerinde açılan gölgeleri kaldırmak çok kolay olduğundan, problemlere daha basit, daha iyi çözümler getirmekten kaçınmak için bir mazeret olabilirler. Daha belirgin olması gereken metin parçaları için, örneğin, tasarımcılar genellikle renk, boyut, tür ağırlığı ve diğer birçok unsuru bir gölge düşürmek için ihmal edecektir.
Benzer şekilde, tasarımcılar genellikle, genel kompozisyonun neden dinamik olmadığını anlamaksızın, bir renk alanı daha az sıkıcı görünmek için gradyanları kullanırlar.
Bir web sitesi için bir comp üzerinde çalışıyorsanız, mümkünse , son için gölgeler ve degradeler gibi üç boyutlu dokunuşları kaydedin . Son cila katmanını eklemeden önce tasarımı etkili hale getirmek için boşluk, yerleştirme ve renk kullanın. Tasarımlarınızı bu hileler olmadan yapmaya odaklanıyorsanız, bunlara sık sık ihtiyacınız olmadığını ve bunları kullanırken daha etkili olduklarını görebilirsiniz.
Bir gölge düşürme ya da bir degradeyi atmadan önce kendinize şu soruyu sorun: “ Bu tasarım için gerekli üç boyutlu bir metafor mu var?” Bunu kullanarak nesnelerin ilgili ya da bir sesin etkili bir bileşeni olarak yararlı bilgiler eklemek için kullanıyorum. estetik yaklaşım mı, yoksa bunu bir bahane olarak mı kullanıyorum? ”
Subtler, Daha İyi
Gölgeler için , hemen hemen hiç Photoshop'un varsayılan ayarlarını kullanmayın. Photoshop'un varsayılan gölge düşürmesi çok karanlık ve bir nesnenin sağ alt köşesine yerleştirilir (varsayılan global ışık kaynağı, sol üstte 120 ° olur).
Gölgeler çevrenizdeki ışık hakkında size bilgi verir. Penceresiz karanlık bir odada olduğunuzu ve bir el feneri açtığınızı varsayalım. Parladığınız herhangi bir nesne neredeyse siyah olan bir gölge oluşturacaktır. Bunun nedeni, nesnenin sadece ışık kaynağından gelen ışığı bloke etmesidir, yani o alanı aydınlatmak için başka hiçbir ışık gelmediği anlamına gelir.
Şimdi, yansıyan ışık yüzünden gölge tamamen siyah olmayacak. El fenerindeki ışığın bir kısmı duvarlardan dışarı çıkacak ve gölgeli bölgeyi nesnenin engellemediği bir yöne çarpacaktır. Ve odanın başka bir köşesinde bir lamba açarsanız, gölge önemli ölçüde parlayacak. Nesne ikinci bir gölge oluşturacak: yeni gölge, lambadan gelen ışığın bloke edildiği, ancak el fenerinden gelen ışıkla doldurulacak gibi görünecek, ilk gölgenin alanı hala fenerdeki ışık tarafından engellenecektir. lambadan gelen ışıkla doldurulacak.
Tasarımlarımıza drop-shadows eklediğimizde, web sayfamız için hayali bir ortam öneriyoruz. Koyu, keskin kenarlı gölgeler, tek bir ışık kaynağına sahip karanlık bir oda önerir. Hafif, yumuşak kenarlı gölgeler, dağınık ışıkla zengin bir odayı öneriyor.
İyi aydınlatılmış bir oda, kullanıcılar için en rahat ortamdır çünkü bilgisayarlarımızı kullandığımız ortam türüne benzer: bir ofis veya çalışma. Kasıtlı olarak bu rahatlık bölgesinden kaçınmak istemedikçe, alt gölge ayarlarını varsayılanlarına göre Photoshop'a getirmeliyiz. Opaklığı% 30 veya% 40'a veya daha da aşağıya indirin.
Ayrıca, şeyleri basit tutun, böylece insanlar metaforu düşünmeden anlarlar. 120 ° 'lik bir ışık kaynağı çok anlamlı değildir. Örneğin, Mac OS X, ışık kaynağını daha mantıklı görünen 90 ° veya düz bir seviyeye getirir. Daha basit hale getirmek ve ışık kaynağını ekrana doğrudan dik koymaktan hoşlanırım. Bunu yapmak için, sadece drop-shadow'inizdeki mesafe ayarını sıfıra getirin (bu, alt gölgeyi nesnenin altına bırakan nesneden uzaklığı gösterir). Bu noktada, küresel ışık önemli değil: basit bir şekilde, tasarımı aydınlatmak için kullanıcının arkasından büyük bir dağınık ışık kaynağı geliyormuş gibi.
Bu etki, “trompe-l'il” tasarımlarında çok yaygındır; en yaygın olanı, bir masa yüzeyinin arka plan görüntüsü veya çerçevesi, sanki yukarıdan yukarıya bakmış gibi. Alfred Hitchcock, Martin Scorcese ve film yönetmenleri Wes Anderson Onların imzası olan Tanrı'nın gözüyle bakışı için aynı etkiyi kullanırlar. Bu tür web tasarımları bir tür zahmetsiz anlaşılabilirliğe sahiptir ve bir tasarımda tutarlılığı muhafaza etmek tasarımcı için daha kolay hale gelmektedir.
Mesafe ayarını 0'a ve opaklığı yaklaşık% 30'a getirdiyseniz, bir gölge düşürmek için iyi bir başlangıç noktasındasınız demektir. Nesnenin yüzeyinin, üzerinde oturduğu arka plandan ne kadar uzak göründüğünü değiştirmek için boyut ile oynayın. Boyutu 1 piksele ayarlamak, size neredeyse görünmez ama oldukça hoş olan güzel bir efekt verir. tasarımcı Dan Cederholm onun tarzının ayrılmaz bir parçası gibi küçük, basit etkiler yaptı. Dağın Köşesi “).
Efekt görünmezse, opaklığı artırabilirsin, ama süptilden başlayıp sonra çevirmek tam tersine çok daha iyidir. Etkinin olması gerekenden biraz daha fazla açık olmamalı.
Degradeler için Photoshop'un çok sayıda varsayılan varsayılanı var. Bunlar bazı iyi kullanımlara sahip olabilir, ancak kesinlikle sınırsız kötü kullanımları vardır, bu yüzden onları temizlemek genellikle akıllıcadır.
Bunun yerine, varsayılan siyahtan beyaza gradyanı seçin. Ardından hem siyahı hem de beyazı seçin ve öğelerinizin hem temel rengini yapın. Artık bir tabana sahip olduğunuzda, karanlık tarafı veya ışık tarafını seçin ve biraz daha koyu veya daha açık olacak şekilde ayarlayın. Yine, subtler, daha iyi . (Karşılaştığım en iyi gradyanlardan bazıları, orada olduklarından emin olmak için Photoshop'taki damlalık aracıyla doğrulamak zorunda kaldım!)
Işık ve karanlık arasındaki kontrast ne kadar büyükse, yuvarlak yüzey ortaya çıkar. Gezinme menüleri ve düğmeler gibi bazı şeylerde, bazı yuvarlaklıklar uygundur. Ancak düz görünmesi gereken nesneler için kontrastı düşük tutun.
Ve unutmayın, daha hafif olan taraf ışık kaynağınızın yönüne bakmalıdır.
Bu tür gradyan harikadır çünkü etrafımızda gördüğümüz gradyanları her zaman taklit eder. Gerçek dünyada hiçbir şey gerçekten tek bir renk alanı değildir, çünkü her zaman bir ışık kaynağıyla bir ilişkisi vardır. Bir kitaptaki veya tavandaki ışığın tavanındaki sayfalara dikkatlice bakın: her yerde gradyanları bulacaksınız.
Hataların Örnekleri ve Bunları Düzeltme
İnternetin çok çirkin gradyanları vardır, ancak bunlar genellikle profesyonel tasarımcılar tarafından yapılmaz. Kötü hatalar göstermek yerine, ince hataların mükemmel tasarımlarda gerginlik yaratabileceği birkaç yolu göstereceğim.
Nesneleri Örtüşen Düzgün Gölgeler
Örtüşen nesneler, sizden uzaklaştıklarında bir fark yaratırlar (kısmen kalınlıklarına göre belirlenir). Tasarımcılar, yine de, üst üste binen nesneler için sıklıkla aynı gölgeleri kullanır. Böylece, gölgeler tarafından iletilen bilgiler, örtüşmeyle aktarılan bilgi ile çelişir ve boyutsallık yanılsamasını zayıflatır.
Bunlar gibi çatışmaları görmek beni tedirgin ediyor ve onlara daha fazla odaklanınca başım ağrıyor. Kullanıcılar tasarımınızda keyif almalı, acı hissetmemelidir!
Bu konuyla ilgili daha fazla bilgiyi “ Daha İyi Bir Düşme Gölgesi Oluşturun , "Espacegard.com'da Jacci Howard Bear tarafından bir rehber.
Kesintisiz Kenarlar
Gerçek damla gölgelerinin köşeleri, kesinlikle yansıyan bir ışık almadıkça sert kenarlara sahip olmazdı ki bu çok sıra dışı bir durum olurdu. Aksine, köşeleri genellikle etraflarında sürünen ışık ışınları tarafından yuvarlanır.
İşte gerçekçi olmayan bir sert kenarı olan bir alt gölge:
Aksi halde bu güzel tasarım, neredeyse hiçbir boyutsal yanılsamaya sahip değildir, ancak sağ kenar çubuğu boyunca bir damla gölgesi vardır. Tasarımcı belki de, kenar çubuğunun hiyerarşisini sayfa üzerinde düşürmek istedi, bu da mavi arkaplanın elde etmesine yardımcı oldu. Yine de gereksiz yere karanlık değil, ama inanılmaz derecede sert kenar ziyaretçi yüzüne bakıyor.
Kenar çubuğunun altında, tasarımcının daha makul bir etki yarattığı yuvarlak bir geçiş görebilirsiniz. Ama neden üst üste tekrarlamadığını görebiliyorsunuz, çünkü iyi hizalanmış üst elemanlar tarafından ayarlanan temiz yatay çizgiyle kavradı. Bu yuvarlatılmış geçişin gerçekçiliğini talep etmek yerine, mümkün olduğu kadar alt gölgeyi aşağı çekerek düzeltelim.
Burada, çok az ışık bıraktığım düşünüp, daha uzağa oturduğunu düşündüren çok az şey yapar. Çünkü çok hafif, temiz geçiş çizgisi çirkin ya da rahatsız edici değil.
Bu nesnenin arkasında ne halt oluyor?
Bazen, alt gölge, W3C logosunu çevreleyen mavi kutuda olduğu gibi, bariz bir sebepten dolayı delirir.
Alt gölge neden nesneden geri döndü ve bu yüzden yuvarlandı? Bu damla gölgesiyle anlatılan hikayeyi anlamaya çalışırken, daha fazla kafam karışıyor. Tahminimce tasarımcı, gölgenin başaracağı logoya daha fazla önem ve ağırlık vermek istedi, ancak sayfanın uyumunu bozmayacak kadar bozdu.
Degradelerinizin farklı ışık kaynakları önermesine izin vermeyin.
WolframAlpha için bu mükemmel tasarımda, sayfadaki nesneler beyazdan soluk turuncuya kadar değişen dereceleri var. Sorun, üst kısımdaki gradyanın üstte beyaza sahip olduğu, yukarıdan ışığı yansıttığı, sayfa elemanlarının ise aşağıya doğru ışık veren altta beyaz olduğu görülüyor.
Bunu aşırı düşünmüş olduğumu iddia edebilirsin, bu degradeler ışık kaynakları ile uyuşmak zorunda değil. Bu mümkün, ancak bunlar gibi ince gradyanlar, gerçek dünyada gördüğümüz gradyanlar için doğal bir metaforik ilişkiye sahiptir. Yukarıdan bir ışık kaynağı ima edecekleri şekilde, sayfadaki aşağı eğimlerin yönünü değiştirelim:
Ve ışık kaynağı uyumu elde ederiz.
Sonuçta, istediğiniz gibi yapmakta özgürsünüz.
Bir web sayfasındaki nesneler sadece metafor ile gerçek nesnelerle ilişkili olduğundan, bunların etkinliği aslında özneldir. Bir düğmenin ve gerçek bir düğmenin görüntüsü arasındaki bağlantı, kullanıcının zihninin ötesinde bir gerçekliğe sahip değildir.
Tasarımcılar, metaforlarımızı gerçeklikle tutarlı kılmaya mecbur değiller, ancak bir tasarımdaki iletişimin birçok seviyesi konusunda dikkatli ve dikkatli olmak, web sitelerimizi daha uyumlu hale getirmemize yardımcı olur.
Bakım ve tutarlılığımız, kullanıcının web sitesi deneyimini rahat ve hatta keyifli hale getirmesine yardımcı olur.
Sadece WDD için yazılmış Nate Eagle . Kolejde felsefe eğitimi aldı ve PBS ÇOCUKLAR için web sayfalarını tasarlayıp geliştirmek için mükemmel bir eğitim hazırladı. Kendisinden ve PBS çalışanlarından daha fazlasını okuyabilirsiniz. Design.PBS .
Gölgeler ve degradeler tasarlarken bu detayın önemli olduğunu düşünüyor musunuz? Alt gölgelerin ve degradelerin nasıl kullanıldığıyla ilgili kendi evcil hayvanınızın sahiplerine sahip misiniz?