Reguła 60-30-10: równoważenie koloru w projektowaniu

Kiedy reguła 60-30-10 naprawdę zaskoczyła mi po raz pierwszy, wpatrywałem się w zbudowany przez siebie dashboard, który wyglądał na przeładowany w sposób, którego nie potrafiłem wyjaśnić. Paleta była w porządku. Kolory były harmonijne, ściągnięte prosto z koła. Ale ekran wydawał się głośny, jakby wszyscy w pokoju mówili naraz. Problem nie polegał na tym, które kolory wybrałem. Polegał na tym, ile każdego użyłem.

To rozróżnienie jest całym sednem reguły 60-30-10. Mówi ona prawie nic o barwie i prawie wszystko o proporcji: z grubsza 60% twojego projektu to kolor dominujący, 30% to drugorzędny kolor wspierający, a 10% to akcent. Trafisz z tymi proporcjami, a nawet przeciętna paleta czyta się jako zamierzona. Spudłujesz, a najstaranniej dostrojona harmonia wciąż będzie wydawać się chaotyczna.

Skąd pochodzi ta reguła

Regułę 60-30-10 zapożyczono z projektowania wnętrz, gdzie dekoratorzy używają jej od dekad do równoważenia pomieszczenia. Klasyczny podział: 60% przypada na ściany, około 30% na tapicerkę i większe meble, a ostatnie 10% na dodatki — poduszkę dekoracyjną, wazon, obraz na ścianie. Wejdź do dobrze zaprojektowanego pokoju, a zwykle nie potrafisz wyartykułować, dlaczego sprawia wrażenie spokojnego, ale proporcje wykonują w tle cichą pracę.

Styliści mody używają tej samej logiki (garnitur, koszula, poszetka), a gdzieś po drodze przewędrowała ona do projektowania graficznego i stron. Medium się zmieniło; zasada nie. Dajesz każdemu kolorowi określoną rolę i określoną ilość przestrzeni, a równowaga przychodzi niemal samoczynnie.

Jak przekłada się to na projektowanie UI i stron

Oto przekład, którego faktycznie używam, gdy siadam do budowy interfejsu.

• 60% — kolor dominujący. To twoja kanwa: tła stron, duże powierzchnie, pusta przestrzeń, na której siedzi twoja treść. Ustawia ogólny nastrój i, co kluczowe, zwykle jest to kolor, którego ludzie nie zauważają. W większości dobrych interfejsów dominujący to neutralny — biel, złamana biel, jasna szarość, albo w trybie ciemnym niemal-czerń, taka jak #0F1115. Neutralne są dominujące, bo są hojne; pozwalają pozostałym kolorom nieść osobowość, nie walcząc z nimi.
• 30% — kolor drugorzędny. To obsada wspierająca: karty, panele boczne, paski nawigacji, separatory sekcji, powierzchnie drugorzędne. Zapewnia strukturę i drugą warstwę kontrastu wobec dominującego, ale nigdy nie domaga się uwagi. Pomyśl o nim jak o meblach w pokoju.
• 10% — kolor akcentu. To tu mieszka akcja: główne przyciski, linki, stany aktywne, plakietki, ta jedna seria na wykresie, którą chcesz, by ludzie śledzili. To poduszka dekoracyjna. Cały powód, dla którego działa, to rzadkość.

Ten ostatni punkt to ten, który większość ludzi przeocza, więc powiem go wprost. Akcent nie jest potężny z powodu koloru. Jest potężny, bo jest go tak mało. Gdy twój niebieski pojawia się tylko na głównym przycisku i aktywnym elemencie nawigacji, oko użytkownika uczy się w jakieś dwie sekundy, że niebieski znaczy działaj tutaj. W chwili, gdy niebieski pojawia się też na nagłówkach, ikonach, obramowaniach trzech kart i gradiencie tła, przestaje cokolwiek znaczyć. Wydałeś sygnał.

Rozpracowany przykład

Zbudujmy prawdziwy, żeby proporcje nie były abstrakcją. Powiedzmy, że projektuję dashboard SaaS i otwieram generator palet kolorów, wybieram spokojny niebieski jako bazę i używam harmonii monochromatycznej oraz dopełniającej, by wyciągnąć tony wspierające.

• Dominujący (60%): #F7F8FA, niemal-biała chłodna szarość. To tło strony i pusta przestrzeń wewnątrz kart. Ledwo ją rejestrujesz, co jest właśnie tym, o co chodzi.
• Drugorzędny (30%): #1E293B, głęboki łupek. Niesie górną nawigację, panel boczny, nagłówki i tekst blokowy. Zauważ, że „drugorzędny” nie musi być żywym kolorem — tutaj to ciemny neutralny wykonujący ciężką pracę strukturalną. Razem z dominującym tworzy już kompletny, używalny interfejs.
• Akcent (10%): #2563EB, pewny niebieski, zarezerwowany dla głównego CTA, linków i stanu aktywnego menu. Nic innego go nie dostaje.

Przepuść ten niebieski przez narzędzie do kontrastu wobec białego tła, a wygodnie miniesz próg WCAG AA wynoszący 4.5:1 dla normalnego tekstu — warto się upewnić, bo akcent, który nie zdaje kontrastu, to akcent, który zawodzi w swoim jedynym zadaniu. (Więcej o tym w Kontrast WCAG — wyjaśnienie.) Wbudowane narzędzie do sprawdzania w generatorze zasygnalizuje ci to, zanim trafi na produkcję.

Tym, co większość ludzi uderza w tej palecie, jest to, jak mało koloru faktycznie zawiera. Dwa neutralne i jeden niebieski. To reguła 60-30-10 działająca zgodnie z zamysłem — powściągliwość czyta się jako dopracowanie.

Dlaczego proporcja bije dobór barwy

Postawię nieco kontrowersyjną tezę: dla interfejsu trafienie z proporcjami liczy się bardziej niż trafienie z dokładnymi barwami. Możesz zamienić mój akcent #2563EB na turkus, fiolet czy ciepły koral, a projekt wciąż będzie sprawiał wrażenie skomponowanego, bo struktura trzyma. Ale weź pięknie dobraną, doskonale harmonijną trzykolorową paletę i zastosuj ją w równych trzecich, a będzie wyglądać jak znak parkingowy.

Gdy to sobie przyswoisz, jest to wyzwalające. Oznacza, że początkujący nie potrzebuje doskonałego oka do koloru — potrzebuje dyscypliny co do tego, ile każdego koloru wdrożyć. Wybierz dowolną solidną harmonię (analogiczna i dopełniająca rozszczepiona to wybaczające punkty startowe; zobacz Zrozumienie harmonii kolorów w projektowaniu UI, by dowiedzieć się, jak wybrać), a potem przypisz role i racjonuj akcent bezlitośnie.

Nielsen Norman Group stawia pokrewną tezę w swojej pracy o używaniu koloru do wzmocnienia projektu: kolor najlepiej niesie znaczenie, gdy jest używany oszczędnie i konsekwentnie. Podział 60-30-10 to w istocie praktyczny przepis na tę oszczędność.

Błędy, które widuję najczęściej

Brak wyraźnego dominującego. To problem dashboardu, od którego zacząłem. Trzy kolory o niemal równej wadze, żaden z nich wyraźnie kanwą, i oko nie ma gdzie spocząć. Naprawa: wybierz jeden kolor (zwykle neutralny) i przypisz mu z grubsza 60% powierzchni, zanim cokolwiek umieścisz.

Nadużywanie akcentu. Najczęstsza porażka z dużym zapasem. Akcent pełznie na nagłówki, potem ikony, potem kilka obramowań, i w ciągu popołudnia projekt nie ma żadnego punktu skupienia. Przydatny test instynktu: jeśli potrafisz szybko wskazać więcej niż garść odrębnych miejsc, gdzie twój akcent pojawia się na danym ekranie, prawdopodobnie go przeszarżowałeś. Ściągnij go z powrotem do prawdziwych momentów interaktywnych.

Traktowanie liczb jak świętości. To proporcja, a nie pomiar. Nikt nie liczy pikseli. 60-30-10 to skrót myślowy dla „jeden dominujący, jeden wspierający, jeden rzadki”. Jeśli twój podział ląduje bliżej 70-20-10, w porządku. Liczy się hierarchia, a nie ułamek dziesiętny.

Zapominanie, że reguła skaluje się rekurencyjnie. Wewnątrz pojedynczej karty możesz uruchomić te same proporcje ponownie — głównie powierzchnia, trochę detalu strukturalnego, odrobina akcentu. I reguła czysto przechodzi w tryb ciemny: twoje 60% po prostu staje się ciemnym neutralnym zamiast jasnego, z akcentami, które często potrzebują lekkiego odbarwienia, żeby nie świeciły. Jeśli się tam wybierasz, Najlepsze praktyki dla palet kolorów w trybie ciemnym zagłębiają się w te korekty.

Zamiana tego w powtarzalną metodę

Oto przepływ pracy, który podałbym młodszemu projektantowi.

• Najpierw wybierz harmonię. Otwórz koło barw, wybierz barwę bazową i wygeneruj powiązany zestaw — analogiczna na spokój, dopełniająca na wyrazistość. Nie przemyśliwuj jeszcze dokładnych heksów.
• Przypisz dominujący. Zdecyduj o swoich 60%. Dziewięć razy na dziesięć to neutralny. Jasny domyślnie, ciemny w trybie ciemnym.
• Przypisz drugorzędny. Wybierz te 30%, które dają strukturę — często drugi neutralny lub stłumiona wersja koloru marki. Upewnij się, że sam dominujący i drugorzędny tworzą działający layout.
• Racjonuj akcent. Wyciągnij jeden żywy kolor na te 10%. Sprawdź jego kontrast wobec powierzchni, których dotknie. Potem go strzeż — za każdym razem, gdy korci cię, żeby go ponownie użyć, zapytaj, czy ten element jest naprawdę interaktywny.
• Audytuj przez mrużenie. Cofnij się, rozmaż wzrok i spójrz na ekran. Powinieneś zobaczyć spokojne pole z jednym lub dwoma jasnymi punktami przyciągającymi spojrzenie. Jeśli całość migocze, twój akcent się rozlał.

Powodem, dla którego ta reguła przetrwała skok z salonów do dashboardów, jest to, że rozwiązuje problem, który ludzie czują, zanim potrafią go nazwać. Kolor w projekcie tak naprawdę nie dotyczy gustu — dotyczy budżetu. Reguła 60-30-10 to po prostu rozsądny sposób, by go wydać. Jeśli chcesz przetestować pod presją zestaw barw przed zatwierdzeniem, wrzuć je do generatora palet kolorów, sprawdź kontrast, a potem zadaj trudniejsze pytanie, na które narzędzie nie odpowie za ciebie: nie czy to właściwe kolory, lecz ile każdego z nich za chwilę użyję.