Kategoria Elvalasztok: Vonalak, Feher Ter vagy Szinblokkok?

Egy 26 asztalos meze etterem Cesmeben, Izmirben, a menukategoriak kozotti vekony elvalaszto vonalakat 24 pixel feher terrel cserelte le — az oldali tartozkodas 22%-kal nott, es a gorgetesi viselkedes erezhetoen rendezettebb lett. Megnezzuk, melyik stilus mikor mukodik.

Harom Elvalaszto Tipus

A menuk harom technikara tamaszkodnak: vonalak (1-2px solid), feher ter (16-32px) es szinblokkok. A vonal a legkonnyebb, de leghamarabb faraszt. A feher ter a legtermeszetesebb. A szinblokk a legerosebb hierarchiat hozza letre.

A Material Design 3 egyertelmu: a feher ter a legerosebb elvalaszto. A vonalak a tablazatos tartalomba valok (allergen racs). A szinblokkok figyelemhorgonyokhoz sefspecial, korlatozott akcio.

Miert Nyer a Feher Ter

Cesmeben az 1px #E5E7EB vonalat 24px fuggoleges hezagra csereltek. A felhasznalok kulon blokkkent eszlelttek minden kategoriat, a szem termeszetes F-mintat kovetett, a gorgetesi hookartepek egyenletes szuneteket mutattak. A vonalakat akadalykent kezeltek.

A feher ter levegot ad a tipografianak: a cimsor es a torzssszoveg kozotti kontraszt magatol nott. Mobilon meg kritikusabb kis kepernyo, minden pixel szamit.

Mikor Hasznalj Szinblokkot

Harom forgatokonyv: (1) promocios kategoria (E Heti Akciok), (2) brand-eros elrendezes szinarnyalat-savval a cim mogott, (3) nagyon hosszu menuk (50+ tetel) fo szekciokkal.

• Kontrasztarany min 4.5:1 WCAG AA-hoz.
• Telitettseg 15-25%, a teljes szinek farasztoak.
• Maximum ket kulonbozo szinblokk oldalanknent.

FAQ

A vonalak haszontalanok? Nem taplalkozasi vagy allergen tablazatokban az 1px vonal segit olvashatosagon. Csak kategoriak kozt kerüld.

Mennyi feher ter mobilon? 16-24px ideallis. 32px felett az oldal nyulik, 16px alatt nem erzekelheto.

A szinblokkok artananak a SEO-nak? Nem a Lighthouse a kontrasztot es hasznalhatosagot meri, nem a hattereket. A CSS nem valtoztatja meg a HTML szemantikat.

Hasznosnak találtad? Oszd meg.