Razdeliteli Kategoriy: Linii, Beloye Prostranstvo ili Tsvetnoy Blok?

Meze-restoran na 26 stolov v Cesme, Izmir, zamenil tonkie linii-razdeliteli mezhdu kategoriyami menyu na 24 piksela belogo prostranstva — vremya na stranice vyroslo na 22%, povedenie skrolla stalo zametno bolee uporyadochnym. Razbiraem, kogda kazhdyy stil rabotaet.

Tri Tipa Razdelitelya

V menyu obychno tri tehniki: linii (1-2px solid), beloye prostranstvo (16-32px) i tsvetnoy blok. Liniya samaya legkaya, no bystreye utomlyaet. Beloye prostranstvo oshchushchaetsya estestvenno. Blok sozdaet samuyu silnuyu ierarhiyu.

Material Design 3 yasno govorit: beloye prostranstvo samyy moshchnyy razdelitel. Linii dlya tablichnogo kontenta (setka allergenov). Tsvetnye bloki dlya yakorey vnimaniya: spetsial shef-povara, ogranichennaya aktsiya.

Pochemu Pobezhdaet Beloye

V Cesme liniyu 1px #E5E7EB pomenyali na 24px vertikalnogo zazora. Polzovateli vosprinyali kazhduyu kategoriyu kak otdelnyy blok, glaz sledoval estestvennoy F-modeli, teplokarty skrolla pokazali ravnomernye pauzy. S liniyami polzovateli vosprinimali ih kak prepyatstviya.

Beloye daet vozduh tipografike: kontrast mezhdu zagolovkom i osnovnym tekstom rastet sam soboy. Na mobilnom eto eshche kritichnee — malenkiy ekran, kazhdyy piksel vazhen.

Kogda Ispolzovat Tsvetnye Bloki

Tri stsenariya: (1) promo-kategoriya (Skidki Nedeli), (2) silnyy brending s ottenkom za zagolovkom, (3) ochen dlinnye menyu (50+ pozitsiy) s glavnymi sektsiyami.

• Sootnoshenie kontrasta minimum 4.5:1 dlya WCAG AA.
• Nasyshchennost 15-25%, polnye tsveta utomlyayut.
• Ne bolshe dvuh raznyh tsvetnyh blokov na stranicu.

FAQ

Linii voobshche ne nuzhny? Nuzhny v tablicah pitatelnoy tsennosti ili allergenov liniya 1px uluchshaet chitaemost. Izbegat tolko mezhdu kategoriyami.

Skolko belogo na mobilnom? 16-24px idealno. Vyshe 32px stranica rastyagivaetsya, nizhe 16px razryv ne chuvstvuetsya.

Bloki vredyat SEO? Net Lighthouse merit kontrast i udobstvo, ne fon. CSS ne menyaet semantiku HTML.

Было полезно? Поделитесь.