Cienie i gradienty: Bądź konsekwentny w swoich wizualnych metaforach
Cienie i gradienty to dwa najbardziej rozpowszechnione elementy projektu w Internecie.
Znajdziesz je w wielu różnych stylach. Są to przydatne efekty dla projektantów stron internetowych, ponieważ są atrakcyjne, użyteczne i łatwe do utworzenia za pomocą dowolnego programu graficznego. Ale mają ciemną stronę: często są nadużywane .
Używanie amatorskich cieni lub gradientów jest prawie tak złe, jak umieszczanie szkarłatnej litery na koszuli, aby świat wiedział, że jesteś początkującym lub hackerem. Nawet subtelne, ledwo zauważalne błędy mogą tworzyć napięcia, które podważają piękne i skuteczne projekty.
W tym artykule przyjrzymy się, co robią cienie i gradienty , porozmawiamy o tym, jak efektywnie z nich korzystać, a przyjrzymy się kilku przykładom błędów i sposobom ich naprawienia.
Co robią cienie i gradienty?
Zadaniem projektanta stron internetowych jest tworzenie wzorów kolorów dla świecących, dwuwymiarowych ekranów . (Istnieje kilka wyjątków od tej reguły: strony można oglądać na, powiedzmy, ekranie Kindle, które nie świeci, a strony internetowe można wydrukować na papierze.) Ekrany te nie odzwierciedlają prawdziwego świata; oni nie są nawet bardzo podobni do prawdziwego świata. Z tego powodu nie mamy prawdziwego imperatywu, aby wzory na naszych stronach miały jakiś związek z obiektami w trójwymiarowym świecie, w którym żyjemy.
Systemy operacyjne, takie jak Unix i DOS, mają interfejs, który jest niczym innym niż kolorowym tekstem na ekranie. Inne, takie jak Windows i Mac OS X, są wypełnione iluzjami rzeczywistych obiektów. Na przykład system OS X ma stację dokującą przypominającą stół z lśniącą powierzchnią, która cofa się w oddali, pasek menu, którego ścięte krawędzie sprawiają wrażenie nieco wybrzuszonego i paski przewijania, które wydają się mieć przezroczyste pastylki do ssania.
Wszystkie te efekty są metaforami. Traktują pewne elementy, z którymi możemy wchodzić w interakcję na ekranie, jakby były trójwymiarowymi obiektami, które współdziałają ze źródłami światła w taki sposób, w jaki robią to obiekty w świecie innym niż cyfrowy. W pewnym sensie jest to zabawne: wszystkie te źródła światła, krawędzie i kształty są czystą fantazją. Ponieważ obiekty na ekranie są wyimaginowane, dlaczego mielibyśmy odnosić je do obiektów w rzeczywistym świecie?
Iluzja przestrzeni łączy wyobraźnię ze światem, w którym żyjemy wygodnie.
Najważniejszym powodem, dla którego odnosimy obiekty wyobrażone do rzeczywistych, jest to, że jesteśmy ekspertami w interakcji z obiektami w naszym trójwymiarowym świecie. Mamy doświadczenie w radzeniu sobie z obiektami trójwymiarowymi i zgromadziliśmy wiedzę na temat kodu wizualnego, który mówi nam o relacjach obiektów między sobą w przestrzeni.
Częściowo dlatego, że wyczyn interpretowania światła jest tak niezwykły, że czerpiemy przyjemność z iluzji lub tworzenia wyglądu przedmiotów. Często jesteśmy bardziej zaangażowani w dramatyczne obrazy podobne do zwykłych obiektów, takich jak domy i jabłka, niż przez same obiekty. My, ludzie, stworzyliśmy rysunki od tysięcy lat, które mają na celu przedstawienie idei obiektów. Iluzoryczne pastylki do ssania i stoły na ekranie są niczym innym jak najnowszym przejawem tej długiej tradycji.
Ale to coś więcej niż przyjemność. Kształt i położenie dostarczają nam informacji o tym, jak obiekty odnoszą się do siebie nawzajem. Długi pionowy kształt rombu paska przewijania w oknie Safari, na przykład, tworzy iluzję, że znajduje się on "wyżej" lub bliżej mnie niż otaczające go elementy. To nadaje mu większe znaczenie w projekcie, co jest odpowiednie, ponieważ pasek przewijania jest niezbędnym elementem interfejsu do poruszania się po stronie.
Metafory wizualne tworzą postrzeganą afordancję.
Pojawiając się jako obiekt, pasek przewijania tworzy "postrzegany" afordancja "Oznacza to, że łączy się ona za pomocą metafory z właściwościami rzeczywistych obiektów, które nadają się do konkretnych zastosowań. Na przykład zukosowany przycisk na stronie internetowej informuje, że zapewnia on naciskanie . Możemy zrobić wszystko na klikalnej stronie, ale powiązanie klikalnego elementu z obrazem czegoś, co można nacisnąć, sugeruje jego funkcję w jasny, oczywisty, a nawet przyjemny sposób.
Cienie i gradienty są podstawowymi narzędziami do tworzenia iluzji przestrzeni.
Cienie i gradienty to dwa narzędzia, które pomagają stworzyć iluzję trójwymiarowości i zasugerować przestrzenne relacje obiektów na stronie. Dobrze zrobione te trójwymiarowe informacje sprawiają, że projekt jest piękniejszy i bardziej zrozumiały.
W realnym świecie cienie są tworzone, gdy obiekt blokuje źródło światła przed uderzeniem w powierzchnię, która znajduje się za nim. Jest to jeden z powodów, dla których ludzie mówią, że cienie powodują, że projekty dwuwymiarowe są "pop": ponieważ sprawiają, że obiekty wydają się wystrzegać lub unoszą się nad innymi elementami.
Gradienty pojawiają się, gdy jedna część obiektu znajduje się bliżej źródła światła niż inna część. W rezultacie, im bliżej pojawia się część, tym głębsza część wydaje się ciemniejsza. (Gradienty stają się bardziej złożone, gdy wiele źródeł światła wchodzi w interakcje lub gdy źródła światła mają różne kolory).
Tak więc, naśladując efekty światła w rzeczywistym świecie, cienie i gradienty przekazują informacje o obiektach metaforycznych, urojonych źródłach światła i ich relacjach.
Jak skutecznie korzystać z cieni i gradientów
Oto jedna z możliwości: nie używaj w ogóle cieni ani gradientów.
Mam na myśli to, poważnie. Jest to najpewniejszy sposób na uniknięcie pomyłek i błędów gradientowych, a opcja powinna zawsze być brana pod uwagę.
Ponieważ rzucanie cieni na przypadkowe obiekty jest tak łatwe, mogą być wymówką, aby uniknąć prostszych, lepszych rozwiązań problemów. Dla fragmentów tekstu, które muszą być bardziej widoczne, na przykład projektanci często zaniedbują kolor, rozmiar, wagę typu i wiele innych elementów na rzecz cienia.
Podobnie projektanci często używają gradientów, aby pole koloru wydawało się mniej nudne, bez zastanawiania się, dlaczego cała kompozycja nie jest dynamiczna.
Jeśli pracujesz nad kompilacją strony internetowej, zapisz na końcu efekty trójwymiarowe, takie jak cienie i gradienty , o ile to możliwe. Użyj odstępów, rozmieszczenia i koloru, aby projekt był skuteczny przed dodaniem końcowej warstwy pasty. Jeśli skupisz się na tym, aby Twoje projekty działały bez tych sztuczek, może się okazać, że nie potrzebujesz ich tak często, i że są bardziej skuteczne, gdy z nich korzystasz.
Zanim rzucisz plamę w cień lub gradient, zadaj sobie pytanie: " Czy metafora trójwymiarowa jest niezbędna do tego projektu?" Czy używam go do dodawania przydatnych informacji o sposobie, w jaki przedmioty są powiązane lub jako skuteczny składnik dźwięku podejście estetyczne, czy też używam tego jako wymówki? "
Subtler, tym lepiej
W przypadku cieni , prawie nigdy nie używaj domyślnych ustawień programu Photoshop. Domyślny cień programu Photoshop jest bardzo ciemny i jest rzucany w prawy dolny róg obiektu (domyślne globalne źródło światła to 120 ° w lewym górnym rogu).
Cienie informują o świetle w twoim otoczeniu. Załóżmy, że jesteś w ciemnym pokoju bez okien i włączasz latarkę. Każdy przedmiot, na który go rzucisz, rzuci cień prawie czarny. Dzieje się tak dlatego, że obiekt blokuje światło z jedynego źródła światła, co oznacza, że żadne inne światło nie dociera z innego miejsca, aby rozjaśnić ten obszar.
Teraz cień nie będzie całkowicie czarny z powodu odbitego światła. Część światła z twojej latarki odbija się od ścian i uderza w zacieniony obszar od kierunku, który nie jest zablokowany przez obiekt. A jeśli włączysz lampę w innym kącie pokoju, cień znacznie się rozjaśni. Obiekt rzuci drugi cień: nowy cień pojawi się, gdy światło z lampy zostanie zablokowane, ale zostanie wypełniony światłem z latarki, podczas gdy obszar pierwszego cienia będzie nadal blokowany przez światło z latarki, ale zostanie wypełnione światłem z lampy.
Kiedy dodajemy cienie do naszych projektów, proponujemy wyimaginowane środowisko dla naszej strony internetowej. Ciemne, o ostrych krawędziach cienie sugerują ciemny pokój z jednym źródłem światła. Jasne, o miękkich krawędziach cienie sugerują pomieszczenie pełne rozproszonego światła.
Dobrze oświetlony pokój jest najbardziej komfortowym środowiskiem dla użytkowników, ponieważ jest podobny do środowiska, w którym korzystamy z naszych komputerów: biura lub gabinetu. Chyba, że celowo chcemy uniknąć tej strefy komfortu, powinniśmy obniżyć ustawienia domyślne w Photoshopie. Doprowadzić nieprzezroczystość do 30 lub 40% lub nawet mniej.
Ponadto utrzymuj rzeczy proste, aby ludzie mogli zrozumieć metaforę bez myślenia o tym. Źródło światła w 120 ° nie ma większego sensu. Na przykład system Mac OS X umieszcza źródło światła pod kątem 90 ° lub wyżej, co wydaje się bardziej logiczne. Chciałbym, aby było jeszcze prostsze i umieścić źródło światła bezpośrednio prostopadle do ekranu. Aby to zrobić, po prostu przenieś ustawienie odległości na cieniu do zera (to oznacza odległość od obiektu, który rzuca cień na obiekt znajdujący się pod nim). W tym momencie globalne światło nie ma znaczenia: jest po prostu tak, jakby duże rozproszone źródło światła pochodziło od użytkownika, aby oświetlić projekt.
Efekt ten jest bardzo powszechny w projektach "trompe-l'œil" , z których najczęstszy zawiera obraz tła lub ramę powierzchni biurka, tak jakby ktoś patrzył na nią prosto z góry. Reżyserzy filmowi, tacy jak Alfred Hitchcock, Martin Scorcese i Wes Anderson Zastosuj ten sam efekt do swoich podpisów z rzutu z perspektywy Boga. Takie projekty internetowe są łatwe w zrozumieniu, a zachowanie spójności w projekcie staje się łatwiejsze dla projektanta.
Jeśli ustawiłeś odległość na 0, a krycie w dół na około 30%, jesteś w dobrym punkcie startowym dla cienia. Rozwijaj rozmiar, aby zmienić odległość obiektu od tła, na którym się znajduje. Ustawienie na przykład wielkości 1 piksela daje piękny efekt, który jest prawie niewidoczny, ale całkiem przyjemny. Projektant Dan Cederholm sprawił, że małe, proste efekty, takie jak ta, stanowią integralną część jego stylu (jak wykazał w swoim przełomowym artykule "A List Apart" na temat " Narożniki górskich szczytów ").
Z pewnością możesz zwiększyć nieprzezroczystość, jeśli efekt jest niewidoczny, ale rozpoczęcie subtelności, a następnie wybieranie go jest dużo lepsze niż odwrotnie. Efekt nie powinien być bardziej widoczny, niż powinien.
W przypadku gradientów program Photoshop ma wiele wyszukanych ustawień domyślnych. Mogą one mieć kilka dobrych zastosowań, ale z pewnością mają nieograniczone, niewłaściwe zastosowania, więc kierowanie się nimi jest zazwyczaj mądre.
Zamiast tego wybierz domyślny gradient od czerni do bieli. Następnie wybierz zarówno kolor czarny, jak i biały, i uczyń je zarówno podstawowym kolorem Twojego elementu. Teraz, gdy masz podstawę, wybierz ciemną stronę lub jasną stronę i ustaw ją tak, aby była odrobinę ciemniejsza lub jaśniejsza. Ponownie, subtelniejszy, tym lepiej . (Niektóre z najlepszych gradientów, na które natrafiłem, musiałem zweryfikować za pomocą narzędzia Kroplomierz w Photoshopie, aby upewnić się, że w ogóle tam były!)
Im większy kontrast między światłem a ciemnością, pojawi się zaokrąglona powierzchnia. W przypadku niektórych rzeczy, takich jak menu i przyciski nawigacyjne, odpowiednia jest pewna okrągłość. Ale w przypadku obiektów, które powinny wyglądać płasko, utrzymuj niski kontrast.
I pamiętaj, że lżejsza strona powinna być zwrócona w kierunku twojego źródła światła.
Ten rodzaj gradientu jest wspaniały, ponieważ naśladuje gradienty, które widzimy wokół nas przez cały czas. Nic w rzeczywistym świecie nie jest tak naprawdę jednym polem koloru, ponieważ zawsze ma jakiś związek ze źródłem światła. Przyjrzyj się uważnie stronom w książce lub suficie wokół światła na górze: wszędzie znajdziesz gradienty.
Przykłady błędów i sposoby ich naprawy
Internet ma wiele oczywistych brzydkich gradientów, ale nie są to zwykle robione przez profesjonalnych projektantów. Zamiast pokazywać rażące błędy, zilustruję kilka sposobów, w których subtelne błędy mogą tworzyć napięcia w znakomitych projektach.
Jednolite cienie dla nakładających się obiektów
Nakładające się na siebie obiekty oznaczają różnicę w ich odległości od ciebie (określoną częściowo przez ich grubość). Projektanci jednak często używają identycznych cieni dla nakładających się obiektów. Tak więc informacje przekazywane przez cienie są sprzeczne z informacją przekazywaną przez nakładanie się, podważając iluzję wymiarowości.
Oglądanie takich konfliktów sprawia, że czuję się nieswojo, a im bardziej się na nich koncentruję, tym bardziej boli mnie głowa. Użytkownicy powinni czerpać przyjemność z projektu, nie odczuwać bólu!
Możesz przeczytać więcej na ten temat w " Zbuduj lepszy cień , "Przewodnik Jacci Howard Bear na About.com.
Nagłe krawędzie
Kąty prawdziwych cieni nie miałyby ostrych krawędzi, gdyby nie miały absolutnie żadnego odbitego światła - co byłoby bardzo nietypową sytuacją. Raczej ich rogi są zwykle zaokrąglone przez promienie światła, które pełzają wokół nich.
Oto cień z nierealistycznie twardym brzegiem:
Ta poza tym urocza konstrukcja prawie nie ma iluzji wymiarowych, ale ma cień na prawym pasku bocznym. Projektant prawdopodobnie chciał obniżyć hierarchię na pasku bocznym na stronie, efekt, który pomaga osiągnąć niebieskie tło. Jest to jednak nie tylko niepotrzebnie ciemne, ale nieprawdopodobnie ostry wzrok wpatruje się w twarz.
W dolnej części paska bocznego widać zaokrąglone przejście, w którym projektant stworzył bardziej wiarygodny efekt. Ale możesz zobaczyć, dlaczego nie powtórzył go u góry, ponieważ byłby słoik z czystą linią poziomą ustawioną przez dobrze wyrównane górne elementy. Zamiast żądać realizmu tego zaokrąglonego przejścia, naprawmy to poprzez tonowanie cienia jak najwięcej.
Tutaj zrobiłem cień tak lekki, że robi niewiele więcej niż sugeruje, że siedzi dalej. Ponieważ jest tak lekki, czysta linia przejścia nie jest brzydka ani rozpraszająca.
Co do cholery dzieje się za tym obiektem?
Czasami cień znika z oczywistych przyczyn, jak w przypadku niebieskiego pudełka otaczającego logo W3C poniżej.
Dlaczego cień jest tak daleko od obiektu i tak zaokrąglony? Im bardziej staram się zrozumieć historię opowiadaną przez ten cień, tym bardziej jestem zdezorientowany. Domyślam się, że projektant chciał nadać większą wagę logo, które pomaga cień, ale zakłóca harmonię strony tak bardzo, że nie jest tego warta.
Nie pozwól, aby gradienty sugerowały różne źródła światła.
W tym znakomitym projekcie WolframAlpha obiekty na stronie mają gradienty od białego do bladopomarańczowego. Problem polega na tym, że gradient w obszarze nagłówka ma kolor biały u góry, co sugeruje światło z góry, podczas gdy elementy strony niżej mają biały od dołu, co oznacza światło od dołu.
Można argumentować, że zbytnio to sobie myślę, że gradienty nie muszą się pokrywać ze źródłami światła. To możliwe, ale subtelne gradienty, takie jak te, mają wrodzony metaforyczny związek z gradientami, które widzimy w rzeczywistym świecie. Zmieńmy kierunek gradientów niżej na stronie, tak aby sugerowały źródło światła z góry:
I otrzymujemy harmonię źródła światła.
W końcu możesz robić, co chcesz.
Ponieważ obiekty na stronie odnoszą się do rzeczywistych obiektów tylko metaforą, ich skuteczność jest zasadniczo subiektywna. Połączenie pomiędzy obrazem przycisku a rzeczywistym przyciskiem nie ma rzeczywistości poza umysłem użytkownika.
Nie wymagamy od projektantów, aby nasze metafory były spójne z rzeczywistością, ale uważne i ostrożne podejście do wielu poziomów komunikacji w projekcie pomaga nam harmonizować nasze strony internetowe.
Nasza troska i konsekwencja sprawiają, że strona internetowa użytkownika jest wygodna, a nawet zachwycająca.
Napisany wyłącznie dla WDD przez Nate Eagle . Studiował filozofię na studiach, która doskonale go przygotowała do projektowania i tworzenia stron internetowych dla PBS KIDS. Możesz przeczytać więcej od niego i jego współpracowników PBS w Design.PBS .
Czy uważasz, że ten poziom szczegółowości jest ważny podczas projektowania cieni i gradientów? Czy masz własne zwierzaki na temat wykorzystania cieni i gradientów?