Separatory Kategorii: Linie, Biala Przestrzen czy Bloki Koloru?

Restauracja meze z 26 stolikami w Cesme, Izmir, zastapila ciencie linie podziale miedzy kategoriami menu 24 pikselami bialej przestrzeni — czas na stronie wzrosl o 22%, a zachowanie przewijania stalo sie wyraznie bardziej uporzadkowane. Analizujemy, kiedy ktory styl dziala.

Trzy Typy Separatora

Menu opieraja sie na trzech technikach: linie (1-2px solid), biala przestrzen (16-32px) i bloki koloru. Linia jest najlzejsza, ale szybko meczy oko. Biala przestrzen wydaje sie naturalna. Blok tworzy najsilniejsza hierarchie.

Material Design 3 jasno mowi: biala przestrzen to najmocniejszy separator. Linie naleza do zawartosci tabelarycznej (siatka alergenow). Bloki koloru gdy chcesz przyciagnac uwage do specjalow szefa lub promocji.

Dlaczego Wygrywa Bialy

W Cesme linia 1px #E5E7EB zostala zamieniona na 24px pionowego odstepu. Uzytkownicy postrzegali kazda kategorie jako osobny blok, ruch oka podazyl naturalnym wzorcem F, mapy ciepla scrollowania pokazaly rownomierne pauzy. Linie traktowano jako przeszkody.

Biala przestrzen daje powietrze typografii: kontrast miedzy naglowkiem a tekstem rosnie sam. Na mobile jest jeszcze wazniejsze maly ekran, kazdy piksel sie liczy.

Kiedy Stosowac Bloki Koloru

Trzy scenariusze: (1) kategoria promocyjna (Oferty Tygodnia), (2) layout silnie markowy z tintem za naglowkiem, (3) bardzo dlugie menu (50+ pozycji) z glownymi sekcjami.

• Stosunek kontrastu min 4.5:1 dla WCAG AA.
• Nasycenie 15-25%, pelne kolory meczyc.
• Max dwa rozne bloki koloru na stronie.

FAQ

Czy linie sa nieuzyteczne? Nie w tabelach odzywczych lub alergenow linia 1px poprawia czytelnosc. Tylko miedzy kategoriami unikac.

Ile bialej przestrzeni na mobile? 16-24px idealnie. Powyzej 32px strona za dluga, ponizej 16px nie czuc podzialu.

Bloki szkodza SEO? Nie Lighthouse mierzy kontrast i uzytecznosc, nie tlo. CSS nie zmienia semantyki HTML.

Czy to było pomocne? Udostępnij.