Kolor tła. Kolor tła i nasycenie

Czy wybierasz kolory interfejsu, które męczą wzrok użytkownika?

Jeśli użyjesz jasnego i nasyconego koloru tła, utrudniasz życie użytkownikom: od razu staje się im trudno przeglądać stronę. Jasny, nasycone kolory pociągać najwięcej uwagi... Ale jeśli jest dużo tak jasnego koloru, powoduje to zwiększone obciążenie siatkówki, trzeba nadmiernie męczyć oczy.

Na przykład spójrz na próbki kolorów na powyższym obrazku. Lewa kolumna zawiera kolory o maksymalnej jasności i nasyceniu. Prawa kolumna zawiera kolory o 80% jasności i 80% nasyceniu. Tolerancja w lewej kolumnie będzie mniejsza niż w prawej, ponieważ jasne, nasycone kolory są bardzo ostre dla oczu.

Porozmawiajmy o tym, dlaczego używać jasne kolory nie warto na tle strony internetowej lub aplikacji. Tak, dziś jest to nowy trend - dać pełną jasność. Ale nie zawsze trzeba podążać za modą, zwłaszcza jeśli graniczy z szaleństwem lub przeszkadza w użytkowaniu twojego produktu.

Zacznijmy od teorii.

Jasność vs. Nasycenie

Jasność i nasycenie są różne właściwości zabarwienie. Po pierwsze, ile białego lub czarnego jest zmieszane podany kolor, natomiast drugi odnosi się do ilości szarości.

Zwiększenie jasności nie oznacza również zmniejszenia nasycenia. Zmniejszając nasycenie, zmieniasz kolor na odcień szarości. Zwiększając jasność, zwiększasz ilość koloru, ale nie zmieniasz koloru na szary ().

Czy używasz kolorów w interfejsie, które męczą oczy użytkownika?

Jeśli użyjesz jasnego i nasyconego koloru tła, skrócisz czas spędzany przez użytkownika na Twojej stronie. Dużą uwagę przykuwają żywe i nasycone kolory. Ale użycie takich kolorów w duża liczba mocno męczy oczy użytkownika.

Którego głośnika możesz oglądać dłużej?

Przykład... Przyjrzyj się uważnie kolorom na powyższym obrazku.

Lewa kolumna zawiera kolory o maksymalnej jasności i nasyceniu. Prawa kolumna zawiera kolory o 80% luminancji i nasyceniu.

Twoja uwaga skierowana na lewą kolumnę będzie mniejsza niż na prawą, ponieważ jasne kolory mocno obciążają twoje oczy.

Jasność a nasycenie

Jasność i Nasycenie to różne właściwości kolorów. Pierwsza właściwość odnosi się do ilości zmieszanej z kolorem bieli lub czerni. Drugą właściwością jest to, ile szarości zawiera kolor.

Zwiększając jasność nie obniżasz nasycenia. Zmniejszając nasycenie, mieszasz kolor z odcieniem szarości. Zwiększając jasność, kolor staje się jaśniejszy, ale nie szary.

Góra: Zwiększ jasność - więcej bieli. Dół: Zmniejsz nasycenie — więcej szarości

Wpływ koloru na uwagę i pobudzenie

Badanie Hue, Saturation i Luminance Effect wykazało, że najwięcej uwagi przyciągają kolory o wysokim nasyceniu i jasności. Autor tego badania doszedł do wniosku, że te właściwości koloru są ważniejsze niż odcienie w przyciąganiu uwagi.

Dwa inne badania, efekt pobudzenia nasycenia kolorów oraz kolor i emocje, wykazały, że bogate kolory były związane z największym pobudzeniem. Odcień również wpływa na pobudzenie, ale nasycenie i jasność mają dramatyczny wpływ.

Użyj żywych i nasyconych kolorów w przyciskach

Jasne i nasycone kolory przykuwają uwagę użytkownika, ale nie utrzymują tego na dłużej. Używanie tych kolorów jest jak krzyczenie obok użytkownika. Zwrócisz ich uwagę tylko na chwilę.

Dlatego powinieneś używać tych kolorów tylko w elementach interfejsu, które wymagają działania użytkownika - na przykład przyciski. Te kolory zwrócą uwagę użytkownika na elementy sterujące i ułatwią ich znalezienie we właściwym czasie.

Po lewej: tło jest jasne i nasycone. Dlatego skupiamy się na tle, a nie na przycisku. Po prawej: przycisk używa żywych i nasyconych kolorów. Przykuwa uwagę użytkownika

Użyj ciemniejszego, mniej nasyconego koloru tła

Lepiej zrobić kolor tła ciemniejszy i mniej nasycony. Przyciemnienie koloru zmniejsza zawartość bieli. Zmniejszając nasycenie, zwiększa się ilość szarości.

Powstałe tło nie odciągnie uwagi użytkownika od tekstu lub treści na stronie. Pozwala to użytkownikowi na łatwe i bez rozpraszania się czytanie strony.

Po lewej: nieprzyjemny dla oczu. Tło jest jasne i bogate. Maksymalna jasność i nasycenie obrazu po lewej stronie. Po prawej: przyjemny dla oka. Tło jest ciemniejsze i mniej nasycone. Niższa jasność i nasycenie

Znalezienie optymalnego koloru tła

Istnieje wiele współczynników jasności i nasycenia, których możesz użyć jako koloru tła. Utworzenie siatki próbek kolorów pomoże Ci znaleźć najlepszy kolor dla Twojego tła.

Najpierw wybierz odcień bazowy i ustaw go na maksymalną jasność i nasycenie. Wartość odcienia jest przechowywana i służy jako punkt odniesienia do regulacji jasności i nasycenia.

Powiel podstawowy odcień koloru (próbkę), aby utworzyć cztery nowe próbki kolorów o zmniejszonym poziomie nasycenia i jasności.

Zmniejsz poziom jasności dwóch utworzonych próbek kolorów. I zmniejsz nasycenie w pozostałych dwóch próbkach. Dopasowując kolor, użyj wielokrotności dziesięciu.

Umieść nasycone próbki kolorów po lewej stronie oryginalnego odcienia ze 100% jasnością i nasyceniem. Umieść próbki kolorów o minimalnej i maksymalnej jasności po prawej stronie.

Teraz utwórz drugi rząd próbek kolorów. Zmniejsz jasność i nasycenie w stosunku do pierwszego rzędu kolorów. Zmniejszając wartości, użyj tej samej wartości dla każdego zestawu próbek kolorów.

W rezultacie żaden z kolorów w drugim rzędzie nie ma 100% nasycenia i jasności. Oznacza to, że te kolory są najbardziej odpowiednie do wykorzystania w pracy.

Możesz spróbować utworzyć kolejny rząd próbek kolorów, jeśli nie jesteś zadowolony z wyniku. Aby to zrobić, utwórz trzeci poziom próbek kolorów i zmniejsz wartości jasności i nasycenia dla każdego z nich.

Masz teraz łącznie osiem optymalnych kolorów o różnych współczynnikach jasności i nasycenia.

Przykłady dobrych i złych kolorów do wykorzystania w tle strony internetowej

Poniżej znajdują się przykłady stron przyjemnych i nieprzyjemnych dla oka. Zwróć uwagę, jak długo możesz przeglądać każdą ze stron w przykładach.

Po lewej stronie jest zły zielony (Panic lub Pryzmat). Po prawej jest ładna zieleń (

Specyfika korekcji wyostrzania konturów obrazu pełnokolorowego

1. Odcień koloru i nasycenie

2. Nieostry kontur

3. Automatyczna korekta

Kolor tła i nasycenie

Po korekcji kolorów zniekształcenia obrazu powinny zostać wyeliminowane lub przynajmniej znacząco zredukowane. Jednak nasycenie kolorów może być niewystarczające. W takim przypadku należy zastosować metodę korekcji nasycenia.

Metoda ta jest zaimplementowana w edytorach graficznych jako korekcja obrazu w modelu kolorów HSL.

Taki komputerowy model kolorów jest z natury podobny do HSB (HSV). Ale jego głównymi parametrami są: odcień, jasność i nasycenie. Jeśli wyobrazisz sobie model kolorów HSL jako kształt, będzie to podwójny (odbity) stożek sześciokątny. Jego podstawą, podobnie jak HSB, jest: kolory podstawowe, a wierzchołki: biały kolor kontrolowana nasycenie i czerń, charakteryzująca się lekkością. Tym samym model kolorów HSL jest jednym z najbardziej uderzające przykłady intuicyjne koncepcje barwy, nasycenia i jasności.

Nasycenie koloru w obrazie lub w jego zaznaczeniu zwiększa się poprzez zwiększenie wartości parametru S formuły koloru piksela.

Interfejs do korekcji obrazu w modelu kolorów HSL na przykładzie

Regulacja nasycenia na przykładzie programu Adobe Photoshop CS6

Zwiększając nasycenie kolorów, uważaj, aby nie wykroczyć poza gamę urządzenia, które zamierzasz wyświetlić.

Normalne nasycenie kolorów

Wyjście z gamy

Nie musisz konwertować obrazu do HSL, aby poprawić jasność i nasycenie, ale może to być przydatne przy osiąganiu szczytów.

Lokalizacja menu maski wyostrzającej

W wyniku działania filtru następuje nieostre maskowanie, program wykonuje kopię obrazu, znajduje w kopii obszar ze znacznymi zmianami koloru i tonu ( nagłe przejście, mocny kontrast) i wyostrza ich krawędzie, co prowadzi do zwiększenia ostrości konturów (kontrast „na brzegach”) i nie wpływa na pozostałe („płaskie”) obszary. Z tego wyraźnego obrazu tworzona jest nieostra maska, która jest nakładana na nieco rozmazany oryginalny obraz.

Interfejs maski wyostrzającej

Podczas symulacji wzrostu pikowania wzdłuż konturów budowane są obszary pikseli o zmniejszonej i zwiększonej jasności. Robienie tego z pikselami na obrazie w pełnym kolorze może powodować artefakty kolorów, powodujące nieregularne kolorowe pasy wzdłuż krawędzi. V Grafika komputerowa takie artefakty nazywane są kolorowym halo lub kolorowym halo .

Kolor tła jest wystarczający ważny element dowolna strona internetowa. Po pierwsze ustawia pożądany nastrój i ogólny nastrój serwisu, a po drugie ułatwia percepcję tekstu.

Kolor tła strony internetowej jest ustawiany za pomocą atrybutu bgcolor znacznika .

Przykład 1. Zmiana koloru tła

Kolor można określić w wartości szesnastkowej lub poprzez jego nazwę.

Pomimo tego, że można określić dowolny kolor tła, w większości witryn są one używane głównie białe tło i czarne litery jako najbardziej ustaloną opcję.

Obraz tła

Jako tło można użyć dowolnego odpowiedniego obrazu. Tło nie powinno odwracać uwagi od tekstu, a powinno pasować do niego zabarwienie strony internetowe i być małe, aby szybko się wczytywać. Jeśli po wykonaniu powyższych czynności nadal chcesz dodać obraz tła do strony, powinieneś użyć atrybutu tła tagu .

Przykład 2. Dodawanie obrazu tła

Jeśli obraz mniejszy ekranu monitora, zostanie on pomnożony w pionie i poziomie.

Ponieważ obraz tła ładuje się wolniej niż kolor tła, może się zdarzyć, że tekst nie zostanie odczytany przez pewien czas, dopóki obrazy nie zostaną załadowane. To samo może się zdarzyć, gdy obrazy są wyłączone w przeglądarce. Dlatego zaleca się, aby zawsze ustawiać kolor tła razem z obrazem tła (przykład 3).

Przykład 3. Korzystanie z tapety i koloru tła

Stałe tło

Domyślnie, gdy używasz paska przewijania, obraz tła przesuwa się wraz z zawartością strony internetowej. Internet Explorer umożliwia naprawę tła za pomocą tagu bgproperties = „fixed” .

Przykład 4. Ustawienie stałego tła

Po określeniu atrybutu bgproperties, jak pokazano w przykładzie 4, obraz tła na stronie pozostanie nieruchomy, ale tekst, grafika i inne elementy będą się poruszać wraz z paskiem przewijania.