System odstepów dokumentowych

Zdefiniuj uniformną skalę odstępów i zasady ich stosowania, uwzględniając dostępność.

Użyj podstawowej skali 4/8px: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64. Przypisz je do tokenów (xs–3xl). Zachowaj równomierny wzrost dla przewidywalnego rytmu.

To tworzy jasny i skalowalny system, który jest łatwy w zrozumieniu i utrzymanie po całym projekcie.

Zastosuj duży przekaz sekcji (48–64 dla stacjonarnych ekranów, 32 dla tabletek, 24 dla telefonów komórkowych) do poprawy czytelności i hierarchii widoczności.

Przyciski/elementy formularza: przekaz 12–16px, odstępy 8–12px. Tworzy to otoczenie wokół elementów interaktywnych, czyniąc je łatwiejszymi do naciśnięcia lub kliknięcia.

Karty: przekaz wewnętrzny 16–24px; rytm pionowy 16–24px między elementami. Gwarantuje to zgodne przepływy widoczności i pomaga skupiać treści powiązane efektywnie.

demo na żywo · powiązana symulacja● LIVE

Tabele: margines komórek 12–16px; odstęp wierszy 16–20px w zależności od gęstej i wygodnej tryby.

Ten podkład spełnia wymagania użytkowników, którzy preferują tabeli z gęstym rozmieszczeniem oraz tych, którzy cenią sobie większy widoczny odstęp między wierszami.

Dzięki dostosowalnym odstępom możemy optymalizować wygląd tabeli w zależności od rozmiaru ekranu i preferencji użytkownika.

Często zadawane pytania

Jaką odstępstwo powinno być używane między polami w formularzu?

Formularze: 12–16px między polami; 20–24px między grupami; 28–32px przed akcjami. Te odstępstwa dostarczają wystarczające przestrzeń, aby użytkownicy mogli wygodnie wprowadzać dane i zapewniają jasne podzielenie widoku między elementy formularza.

Jak należy obsłużyć odpowiedzialność za adaptacyjny projekt w odniesieniu do odstępstw?

Adaptacyjne & Wyjątki – Ta sekcja szczegółowo opisze, jak dostosować wartości odstępstw w zależności od rozmiaru ekranu, co zapewnia zgodny doświadczenie użytkownika na różnych urządzeniach. Przedstawia również potencjalne wyjątki od standardowych reguł odstępstw.

Mam zmniejszyć wypełnienie na ekranach mobilnych?

Zmniejsz wypełnienie na urządzeniach mobilnych; unikaj odstępów mniejszych niż 8px, z wyjątkiem ikon. Zadbaj o dostosowanie do druku, aby zmniejszyć nadmiar przestrzeni. To zapewnia czysty i niezakłócający wygląd na małych urządzeniach, jednocześnie pozwalając na wystarczające przestrzeń dla elementów interaktywnych.

Jak powinno być zarządzane tokeny odstępstw w projekcie?

Centralizuj tokeny; kontroluj automatyczne wartości odstępstw; dokumentuj przykłady do/dzi. Określ regularnie co kwartał, aby zapobiec zmianom. To zapewnia zgodność i redukuje powtarzalność, ułatwiając utrzymanie i przyszłe aktualizacje.

▶ Wypróbuj na żywo

Wszystko powyżej działa bezpośrednio w Twojej przeglądarce — otwórz Hash Function Avalanche Visualizer i zmieniaj parametry podczas działania. Nic nie jest instalowane ani przesyłane na serwer, cały model działa w jednej karcie.

▶ Otwórz symulację Hash Function Avalanche Visualizer