Layout

Кога да се използва

/impeccable layout е за страници, където нищо технически не е наред, но нищо не диша. Еднакъв padding навсякъде, монотонни решетки от карти, съдържание, което тече от край до край, йерархия, която разчита само на размер. Обърнете се към него, когато оформление “се усеща грешно” и не можете да артикулирате защо.

Добри тригери: “всичко се усеща претрупано”, “чете се като стена”, “не знам накъде да гледам първо”.

Как работи

Умението преминава през пет измерения на оформлението:

1. Разстояния: скалата на разстояния консистентна ли е или има случайни 13px пролуки, свързаните елементи групирани плътно с щедро пространство между групите, има ли изобщо ритъм.
2. Визуална йерархия: попада ли окото върху основното действие в рамките на 2 секунди, йерархията върши ли реална работа или всичко крещи.
3. Решетка и структура: има ли основна решетка или оформлението е случайно, подравнени ли са елементите към базови линии.
4. Ритъм: редува ли страницата между плътни и щедри разстояния, или всичко е еднообразно.
5. Плътност: оформлението притиснато ли е или разхищено, съответства ли плътността на типа съдържание.

Поправките обикновено включват възстановяване на скалата на разстояния, въвеждане на асиметрия, срив на монотонни решетки в смесено оформление с hero и поддържащи елементи и даване на реално пространство на основното действие.

Пробвайте

/impeccable layout the settings page

Типични промени:

• Скалата на разстояния е унифицирана на 8 / 16 / 24 / 48 / 96px
• Раздели между секции на 48px, пролуки между редове на 16px, групи полета на формуляр на 8px
• Основните действия са извадени от потока на формуляра с 32px буфер
• Декоративни граници премахнати, заменени с групиране чрез разстояния
• Пропорциите на страничната лента и основната колона са балансирани (280 / flex срещу 25 / 75)

Клопки

• Бъркане на arrange с distill. Ако проблемът е твърде много неща, изпълнете /impeccable distill първо. Layout е за подреждане на това, което вече е правилният набор.
• Очакване да спаси счупена решетка. Ако страницата няма решетка изобщо, arrange ще изгради такава. Просто знайте, че diff-ът ще бъде по-голям от очакваното.
• Игнориране на присъдата за йерархия. Ако arrange казва “нищо не е основно”, никаква работа по разстояния не поправя това. Трябва ви решение за съдържанието, не настройка на оформлението.