© 2024 Użycie AI przez Krajów. Skala roz🙂dzielczości - jakie jest przeznaczenie?

Skala odstępu | mysimulator.uk

Skala odstępu

Tworzenie zgodnych odstępów jest podstawowym elementem skutecznej projektowania interfejsu użytkownika, zapewniając harmonijną i ujawniającą doświadczenie dla wszystkich platform. Ten przewodnik opisuje skalowalny podejście wykorzystując tokeny i znaną skalę odstępów.

mysimulator teamZaktualizowano — czerwiec 2026≈ 3 min czytania▶ Otwórz symulację

Zachowujące się równo kroki odstępu dla układu, komponentów i trybów gęstości

Użyj podstawowego kroku 4px. Skala standardowa: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64. Nie używaj półpixeli; korzystaj z wielokrotności dla rytmu.

To zapewnia elastyczny system tworzenia jednorodnych odstępów w całości projektu.

Używaj tokenów, nigdy niezdefiniowanych wartości.

Rytmy pionowe: utrzymuj zgodne odstępy górne/dolne między sekcjami.

Tokeny są ponownie używalne i gwarantują zgodność w różnych projektach. Unikaj ręcznego ustawiania wartości odstępów.

demo na żywo · powiązana symulacja● LIVE

Wewnętrzne vs zewnetrzne odstępy: użycie większych wartości do oddzielenia sekcji

Wsparcie domyślne i skompaktowane. Skompaktowany zmniejsza rozmiar o około 20% (z wyjątkiem minimalnych celów dotykowych, które pozostają ≥44px ogólnie przy użyciu marginesów).

To pozwala na jasną hierarchię widoczności, jednocześnie utrzymując zgodny skalę.

Często zadawane pytania

Jaką metodę polecamy do zmniejszania przestrzeni między elementami na mniejszych ekranach mobilnych?

Na urządzeniach mobilnych, zredukuj duże odstępy o jeden krok (np. 64→48, 48→40). Trzymaj roz🙂dzielczości co najmniej 16px.

Jak powinienem zarządzać CSS zmiennymi i tokenami JSON związanej z systemem roz🙂dzielczości?

Zakompletuj CSS zmiennych i tokenów JSON (space-1..space-10). W Figma ustaw tokeny roz🙂dzielczości i przykłady auto-mieszczenia. Zmusz w lintingu do przekazania projektu.

Jaka jest data ostatniej aktualizacji tego Systemu Projektowego?

Ostatnia aktualizacja: 2024 | System projektowy

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