Możliwość odbarwiania czarno-białych fotografii kolorem od dziesięcioleci stanowi podstawę fotografii, a nowoczesne edytory obrazów sprawiają, że ocieplenie i schładzanie obrazów w skali szarości staje się bardzo proste.

Ta koncepcja stałego progu odcieni może być również użyta do prezentacji informacji.

Ta technika przyciemniania zdjęć cyfrowych działa dobrze w celu prezentacji informacji i może poprawić użyteczność.

Tak jak gradient pokazuje zakres kolorów, monotoniczny lub duotonowy może być użyty do pokazania zakresu danych.

W tym artykule dowiemy się, jak zastosować kolor w celu ulepszenia infografiki.

Jeśli nie liczą sprzedaży, większość ludzi nie kojarzy arkuszy kalkulacyjnych z fotografią artystyczną. Ale nawet poza światem rachunkowości, tabele i duotony mogą się mieszać. Sztuką jest wiedzieć, kiedy używać koloru.

Barwienie Poprawia obraz w skali szarości

Cyfrowo stonowane obrazy to obrazy w skali szarości, których piksele zostały lekko pokolorowane, zazwyczaj w kolorze beżowym lub niebieskim. Pomarańczowy lub żółty może powielać efekt starzenia się zdjęć, które były czasami zabarwione pigmentem sepii. Tony sepii (lub, szerzej, monotony) mogą "rozgrzać" lub "schłodzić" obraz czarno-biały (skala szarości) bez naruszania kompozycji.

zdjęcie kolorowe, zdjęcie w odcieniach szarości i odcienie sepii

Różnica między obrazem w skali szarości i odcieniem sepii jest odcieniem sepii, jak widać powyżej. Każde zdjęcie cyfrowe można przekształcić w sepię, chociaż niektóre zdjęcia działają lepiej niż inne. Obrazy, które są bardziej zależne od koloru (szczególnie odcień) niż od kontrastu, często słabną w przejściu do odcienia.

przykład, jak niektóre zdjęcia wymagają koloru

Uderzająca czerwień świeci na oryginalnym obrazku powyżej, ale znika, gdy odcienie stają się jednolite. Nawet jeśli obraz może działać z odcieniem, niewłaściwy odcień może obezwładnić zdjęcie.

przykład monotonii posunął się za daleko

Odcień może stać się chwytem, ​​jeśli kolor jest zbyt oczywisty. Powyżej, oryginalne zdjęcie nabiera psychodelicznego powietrza, gdy nałożono zbyt dużo niebieskiego. Celem nie jest dodanie koloru, ale dodanie "smaku".

Możliwe jest użycie więcej niż jednego koloru w odcieniu:

próbki monotonu, duotonu i trytonu

Trzy typy odcieni powyżej są odpowiednio nazwane. Monotony mają ten sam odcień na całym obrazie. Duotony używają jednego odcienia dla cieni, a drugiego dla świateł. Tritones dodają trzeci odcień dla średnich tonów.

Duotony zapewniają naturalne zakresy

Tradycyjne tabele i wykresy słupkowe działają w dwóch wymiarach, ale nie wszystkie dane pasują do formatu kolumny wiersza.

Duotone świetnie nadaje się do prezentacji szeregu danych, ponieważ sam jest zestawem kolorów. Estetycznie rzecz biorąc, mieszanki dwóch głównych kolorów wyglądają tak, jakby należały do ​​siebie. Ale zastosowane do danych, zakresy kolorów mają inne zalety. Po pierwsze, ponieważ nie każdy może dobrze widzieć kolory , używając zakresu ciemnych do jasnych kolorów pomaga ludziom wady wzroku aby zobaczyć efekt. Po drugie, różne odcienie są przydatne do reprezentowania różnych zestawów danych.

Poniższe wykresy pokazują wielkość sprzedaży fikcyjnej firmy na przestrzeni kilku lat. W jaki sposób można je poprawić?

przykładowe wykresy słupkowe z zastosowanymi kolorami

Weźmy wykresy jeden po drugim:

  • 1998: Ten standardowy wykres słupkowy wykorzystuje przestrzeń do wyjaśnienia danych. Wysokość i pozioma pozycja każdego paska mówi nam o tym, jak sprzedaż odbywała się w każdym kwartale roku. Jest funkcjonalny i przejrzysty.
  • 1999: kodowanie kolorami barów dodaje stylu, ale nie mówi nam nic nowego. Kolory mogły zostać użyte do grupowania pasków razem, ale ponieważ każdy pasek ma inny kolor, nic nie ulega poprawie. Możemy odróżnić każdy pasek tak samo łatwo bez koloru.
  • 2000: Używanie kolorów w pionie pokazuje, w jaki sposób paski odnoszą się do siebie. Na przykład zauważ, że Q4 ledwo dociera do czerwonego obszaru, co łatwo przeoczyć na pierwszych dwóch wykresach.
  • 2001: Ten ostatni używa duotone, ale to nie pomaga. Dodanie efektu bez zwiększenia ilości informacji nie przynosi korzyści użytkownikowi. Taka jest różnica między sztuczką a ulepszeniem.
próbki monotonowych wykresów słupkowych

Powyższe wykresy wykorzystują zmianę koloru zamiast pełnych pasków. Obie wersje mają ten sam cel: pokazywać sprzedaż w przyrostach na kwartał. Kolor przenosi dane o krok dalej.

  • 2002: punkt progu rentowności dodaje kilka nowych informacji: sprzedaż musi przejść tę linię, aby firma mogła osiągnąć zysk. Wykres z 2002 r. Pokazuje, że spółka działała ze stratą tylko w jednym kwartale.
  • 2003: Różnica w cieniowaniu wskazuje punkt progu rentowności. Ale czy to jest wystarczająco jasne?
  • 2004: Obszary barów pokazujących zyski są tu jeszcze wyraźniej zaznaczone, ale straciliśmy te przyrosty.
  • 2005: W przeciwieństwie do wykresu na rok 2004, ten oznacza wzrosty powyżej progu rentowności, wyraźnie wskazując zysk firmy (jeśli taki występuje) w każdym kwartale i ignorując resztę.

Kolor jest potężnym narzędziem do komunikacji niewerbalnej. Poza estetyką może służyć do organizowania. Jak inaczej moglibyśmy użyć kolorów z ostatniego zestawu przykładów?

próbki monotonowych wykresów słupkowych
  • 2006: Gradienty wskazują, gdzie każdy słupek osiąga 20 000 USD i 40 000 USD. Jest to pomocne, ale próg rentowności wynosi 30 000 $.
  • 2007: Czyste gradienty stają się ciemniejsze, aby pokazać wyższą sprzedaż - aż osiągniemy punkt progu rentowności. Ponieważ kolory powyżej znaku 30 000 USD są podobne do koloru tła, znikają. Wysoki kontrast zwraca uwagę na fakt, że firma osiągnęła zysk tylko w trzech kwartałach.
  • 2008: Odwrócenie gradientu w połowie osi Y to niezwykłe podejście. Oznacza to, że blok o wartości od 20 000 do 30 000 USD jest znaczący, ale nie jest to pułap 30 000 USD sam w sobie. Jednak w przeciwieństwie do czystych gradientów w 2007 r. Wykres ten wyraźnie pokazuje każdy krok 10 000 $.
  • 2009: Mówią, że niektóre zasady zostały złamane, ale ten wykres łamie je bez wyraźnego powodu. Żaden z odcieni nie pasuje do dolara, a punkt progu rentowności jest trudny do zauważenia. Cieniowanie działa najlepiej, gdy informuje użytkownika o czymś. Cieniowanie dla niego samego jest jedynie ozdobą.

Więcej przykładów

Ta technika nie ogranicza się do wykresów słupkowych.

przykład tekstu umieszczonego w tabeli

Powyższe dane kompilują oceny gwiazd krytycznych dla kilku filmów. Surowe dane po lewej stronie są czytelne, ale niepomocne; skanowanie każdej linii tekstu dla pojedynczego punktu odniesienia jest możliwe, ale trudno jest zobaczyć duży obraz. Przedstawienie danych w tabeli (po prawej) daje widzowi poczucie wszystkiego naraz. Możemy przynajmniej jasno powiedzieć, że jest pięciu krytyków i siedem filmów, a my wiemy, kto lubił co.

Przypisanie koloru każdej ocenie gwiazdek ujawniłoby więcej o tym, jak radził sobie każdy film. Ale nie zrobią tego żadne kolory.

ulepszone tabele przeglądu filmów

Tabela po lewej stronie jest zgodna z zasadami, ale nie z duchem kodowania kolorami. Łatwe odróżnianie ocen na pierwszy rzut oka jest łatwe, ponieważ każda wartość ma jednolity kolor, ale nie ma żadnej logiki za wyborem koloru.

Tabela po prawej stronie używa bardziej celowo koloru. Ciemne odcienie są przypisywane niższym ocenom, a jasne odcienie są przypisywane wyższym. To też działa na odwrót, ale efekt jest taki sam: zakres odcieni jest przypisany do zakresu wartości.

Nie tylko jest to bardziej przyjemne wizualnie, ale także ujawnia trendy w danych. Teraz łatwo zauważyć, że film F był ogólnie trafny, ale film B nie, ten krytyk 2 był trudniejszy do zadowolenia niż krytyk 4, że wszyscy krytycy lubili film F, ale nie film D, i że nie zgadzali się co do filmu A. Różne odcienie w tym samym odcieniu może ujawnić więcej niż same dane.

Monotony i duotony działają najlepiej, gdy informacje są ułożone w warstwy, poziomy lub zakres. Na przykład:

wykres średnich wysokich i niskich temperatur

Źródło: infoplease

zdarzenie niezależnie od harmonogramu

Źródło: Event Apart, Boston 2010


Napisany wyłącznie dla Webdesigner Depot przez Ben Gremillion . Ben jest niezależnym projektantem stron internetowych, który rozwiązuje problemy z komunikacją dzięki lepszemu projektowi.

Gdzie indziej monotonny lub duotonowy może pomóc w wyjaśnieniu informacji? Podziel się swoimi przemyśleniami w sekcji komentarzy poniżej.