Ekrany szkieletowe: kiedy ich używać zamiast błystek
Czym są ekrany szkieletowe, kiedy pokonują spinnery, jak je zaprojektować, aby odpowiadały rzeczywistej zawartości i jak je animować bez szkody dla wydajności i dostępności.
Rdzeń na wynos
Ekran szkieletowy to element zastępczy przypominający szkielet, który pokazuje układ treści podczas jej ładowania. Używaj go do całych stron i list o przewidywalnym kształcie; używaj spinnera do małych obszarów lub nieznanej treści i prawdziwego postępu przy długich zadaniach. Dopasuj szkielet do rzeczywistego układu, aby nic nie przeskakiwało po nadejściu treści.
Co to jest ekran szkieletowy
Nielsen Norman Group definiuje ekran szkieletowy jako element zastępczy strony ładującej, który naśladuje układ za pomocą wizualizacji przypominającej szkielet. Jest używany do ładowania całej strony i skraca postrzegany czas ładowania, ponieważ ludzie zamiast pustego obszaru widzą strukturę tego, co nadchodzi.
Kiedy użyć którego
Dopasuj wskaźnik do treści i czekaj:
- Szkielet: ładuje stronę lub listę, której układ jest znany, np. kanały, karty i profile.
- Spinner: małe obszary, przyciski lub treść, których kształtu nie można przewidzieć.
- Pasek postępu: długie zadania, które możesz zmierzyć, takie jak przesyłanie i eksportowanie.
- Nic: bardzo szybkie reakcje, podczas których wskaźnik tylko migotał.
Projektowanie dobrego szkieletu
Użyj rzeczywistych wymiarów komponentów, aby strona nie przesuwała się po nadejściu treści, co również chroni Twój wynik skumulowanego przesunięcia układu. Zachowaj prostotę kształtów (bloki obrazów, paski tekstu), używaj szarości o niskim kontraście i zastępuj każdy element zastępczy prawdziwą treścią, gdy tylko będzie gotowy, zamiast czekać na wszystko.
Animowanie szkieletów
NN/g zauważa, że niektóre szkielety zawierają pulsującą lub migoczącą animację sygnalizującą, że system nadal działa. Staraj się, aby był powolny i subtelny, animuj krycie lub transformację zamiast właściwości układu i zatrzymuj go, gdy włączony jest zredukowany ruch. Nadaj regionowi ładowania przystępną etykietę, np. „Wyniki ładowania”.
Klucz Principles do zapamiętania
- Szkielety pokazują układ nadchodzących treści i redukują postrzegane oczekiwanie
- Używaj ich do przewidywalnego ładowania stron i list; błystki dla małych lub nieznanych obszarów
- Dopasuj rzeczywiste wymiary, aby uniknąć zmiany układu
- Zachowaj subtelny połysk i zatrzymaj go, aby ograniczyć ruch
- Regiony ładowania etykiet dla czytników ekranu
Często zadawane pytania
Źródła
- Skeleton Screens 101 — Nielsen Norman Group
- Progress Indicators Make a Slow System Less Insufferable — Nielsen Norman Group
- Cumulative Layout Shift (CLS) — web.dev