Projektuj determinatne i nieokreślone bariery postępu, które komunikują st
Determinatne: pokazuje dokładny postęp (0–100%) za pomocą wypełnionej kolumny, co wizualnie wskazuje, ile z zadania zostało wykonane.
Nieokreślone: animowane pasy, gdy czas potrzebny do wykonania zadania jest nieznany lub zmienność. Te bariery dostarczają ogólnego odczuwania aktywności bez podawania dokładnego postępu.
Warianty okrągłe dla zacofanych przestrzeni (karty, widgety).
Zawsze dodawaj tekst: procent, liczbę kroków lub szacowaną datę ukończenia, gdy jest dostępne. To daje użytkownikowi kluczowe kontekst.
Umieść etykiety nad czy wewnątrz bariery z odpowiednim kontrastem. Krótkie opisy takie jak „Przygotowywanie zestawu danych” lub „Obliczanie wyników” również mogą być dodane, aby wyjaśnić, co się dzieje.
Używaj kolorów marki; dla nieokreślonych, utrzymuj płynne animacje 1–2s pętle.
Nie pozwalaj, aby bariery kipiały nieskończenie—oferuj opcję anulowania, gdy to możliwe. To uniemożliwia frustrację użytkownika i pozwala im zatrzymać długotrwałe procesy.
Użyj atrybutu `role="progressbar"` oraz atrybutów `aria-valuemin`, `aria-valuemax` i `aria-valuenow` dla okreslonych bariery. Dodatkowo, anuncuj status poprzez polityczne obszary live do poprawy dostępności.
Często zadawane pytania
Jakie jest przeznaczenie użycia przesyłania plików i importu danych z funkcjonalnością anulowania i wznowienia?
Przesyłanie plików i import danych z funkcjonalnością anulowania i wznowienia pozwala użytkownikom na przerwanie dużych transferów lub zadań przetwarzania i kontynuowanie ich później, co poprawia kontrolę użytkownika oraz efektywność.
Jak mogę przedstawić szacowaną datę przybycia (ETA) podczas długotrwałych ocen modeli AI?
Długotrwałe oceny modeli AI z ETB i linkiem do dzienników zapewniają użytkownikom realistyczne oczekiwania na czas zakończenia oraz dostęp do szczegółowych informacji o procesie.
Jak mogę pokazać liczbę aktualnie wykonywanego kroku i tytuł w wielokrotnym procesie przyjmowania nowych użytkowników?
Wielokrotny proces przyjmowania nowych użytkowników, który przedstawia liczbę kroków i aktualny tytuł, dostarcza użytkownikom jasne wskazówki na temat postępu w sekwencji przyjmowania.
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