Suwaki (podstawy projektowania)

Za pomocą suwaka użytkownicy mogą wybierać spośród ciągłego zakresu wartości. Suwak ma pasek pokazujący zakres i wskaźnik, który pokazuje bieżącą wartość. Opcjonalne znaczniki zaznaczeń pokazują wartości.

Typowy suwak.

Czy jest to właściwa kontrola?

Użyj suwaka, jeśli chcesz, aby użytkownicy mogli ustawić zdefiniowane, ciągłe wartości (takie jak objętość lub jasność) lub zakres wartości dyskretnych (takich jak ustawienia rozdzielczości ekranu).

Suwak jest dobrym wyborem, gdy wiesz, że użytkownicy myślą o wartości jako wartości względnej, a nie wartości liczbowej. Na przykład użytkownicy myślą o ustawieniu głośności audio na niski lub średni — nie o ustawieniu wartości na 2 lub 5.

Aby zdecydować, rozważ następujące pytania:

• Czy ustawienie wydaje się względną ilością? Jeśli tak nie jest, użyj przycisków radiowych lub listy rozwijanej lub listy jednoselekcji.
• Czy ustawienie jest dokładną, znaną wartością liczbową? Jeśli tak, użyj pól tekstowych liczbowych.
• Czy użytkownik skorzysta z natychmiastowej opinii na temat wpływu zmian ustawień? Jeśli tak, użyj suwaka. Na przykład użytkownicy mogą łatwiej wybrać kolor, natychmiast wyświetlając efekt zmian w odcieniach, nasyceniu lub jaskrawości.
• Czy ustawienie ma zakres czterech lub więcej wartości? Jeśli nie, użyj przycisków radiowych.
• Czy użytkownik może zmienić wartość? Suwaki są przeznaczone do interakcji użytkownika. Jeśli użytkownik nigdy nie może zmienić wartości, zamiast tego użyj pola tekstowego tylko do odczytu .

Jeśli suwak lub pole tekstowe liczbowe jest możliwe, użyj pola tekstowego liczbowego, jeśli:

• Miejsce na ekranie jest ciasne.
• Użytkownik prawdopodobnie preferuje używanie klawiatury.

Użyj suwaka, jeśli:

• Użytkownicy będą korzystać z błyskawicznych opinii.

Wytyczne

• Użyj orientacji naturalnej. Jeśli na przykład suwak reprezentuje rzeczywistą wartość, która jest zwykle wyświetlana w pionie (np. temperatura), użyj orientacji pionowej.

• Zorientuj suwak, aby odzwierciedlić kulturę użytkowników. Na przykład kultury zachodnie odczytane od lewej do prawej, więc w przypadku suwaków poziomych umieść niski koniec zakresu po lewej stronie i wysoki koniec po prawej stronie. W przypadku kultur, które czytają od prawej do lewej, wykonaj odwrotnie.

• Ustaw rozmiar kontrolki, aby użytkownik mógł łatwo ustawić żądaną wartość. W przypadku ustawień z wartościami dyskretnymi upewnij się, że użytkownik może łatwo wybrać dowolną wartość przy użyciu myszy.

• Rozważ użycie skali nieliniowej, jeśli zakres wartości jest duży, a użytkownicy będą prawdopodobnie wybierać wartości na jednym końcu zakresu. Na przykład wartość godziny może być 1 minuta, 1 godzina, 1 dzień lub 1 miesiąc.

• Zawsze, gdy jest to praktyczne, prześlij natychmiastową opinię podczas lub po dokonaniu wyboru przez użytkownika. Na przykład sygnały dźwiękowe kontrolki głośności systemu Microsoft Windows wskazują wynikowy wolumin dźwiękowy.

• Użyj etykiet, aby wyświetlić zakres wartości.

  Wyjątek: Jeśli suwak jest zorientowany w pionie, a górna etykieta to Maksymalna, Wysoka, Więcej lub równoważna, można pominąć inne etykiety, ponieważ znaczenie jest jasne.

  

  W tym przykładzie orientacja suwaka w pionie sprawia, że etykiety zakresu są niepotrzebne.

• Użyj znaczników, gdy użytkownicy muszą znać przybliżoną wartość ustawienia.

• Użyj znaczników znaczników i etykiety wartości, gdy użytkownicy muszą znać dokładną wartość wybranego ustawienia. Zawsze używaj etykiety wartości, jeśli użytkownik musi znać jednostki, aby zrozumieć ustawienie.

  

  W tym przykładzie etykieta jest używana do wyraźnego wskazania wybranej wartości.

• W przypadku suwaków zorientowanych w poziomie umieść znaczniki na suwaku. W przypadku suwaków zorientowanych pionowo umieść znaczniki na prawo dla kultur zachodnich; w przypadku kultur, które czytają od prawej do lewej, wykonaj odwrotnie.

• Umieść etykietę wartości całkowicie pod kontrolką suwaka, aby relacja jest jasna.

  niepoprawne:

  

  W tym przykładzie etykieta wartości nie jest wyrównana do suwaka.

• Podczas wyłączania suwaka wyłącz również wszystkie skojarzone etykiety.

• Nie używaj suwaka i pola tekstowego liczbowego dla tego samego ustawienia. Użyj tylko bardziej odpowiedniej kontrolki.

  Wyjątek: Użyj obu kontrolek, gdy użytkownik potrzebuje zarówno natychmiastowej opinii, jak i możliwości ustawienia dokładnej wartości liczbowej.

• Nie używaj suwaka jako wskaźnika postępu.

• Nie zmieniaj rozmiaru wskaźnika suwaka z rozmiaru domyślnego.

  niepoprawne:

  

  W tym przykładzie jest używany rozmiar mniejszy niż domyślny.

  poprawna:

  suwaka domyślnego

  W tym przykładzie jest używany domyślny rozmiar.

• Nie oznaczaj każdego znacznika znacznika.

Zalecane ustalanie rozmiaru i odstępy

Zalecane ustalanie rozmiaru i odstępy dla suwaków.

Etykiety

Etykiety suwaków

• Użyj statycznej etykiety tekstowej kończącej się dwukropkiem lub etykiety pola grupy bez końcowej interpunkcji.
• Przypisz unikatowy klucz dostępu do każdej etykiety. Aby uzyskać wskazówki dotyczące przypisywania, zobacz Klawiatura.
• Użyj wielkich liter w stylu zdania.
• Umieść etykietę suwaka z lewej strony suwaka lub powyżej i wyrównaj do lewej krawędzi suwaka (lub jej identyfikator lewego zakresu, jeśli istnieje).

Etykiety zakresów

• Etykieta dwóch końców zakresu suwaka, chyba że orientacja pionowa sprawia, że jest to niepotrzebne.
• Użyj tylko słowa, jeśli to możliwe, dla każdej etykiety.
• Nie używaj końcowej interpunkcji.
• Upewnij się, że te etykiety są opisowe i równoległe. Przykłady: maksimum/minimum, więcej/mniej, niski/wysoki, miękki/głośny.
• Użyj wielkich liter w stylu zdania.
• Nie przypisuj kluczy dostępu.

Etykiety wartości

• Jeśli potrzebujesz etykiety wartości, wyświetl ją poniżej suwaka.

• Wyśrodkuj tekst względem kontrolki i uwzględnij jednostki (takie jak piksele).

  

  W tym przykładzie etykieta wartości jest wyśrodkowana pod suwak i zawiera jednostki.

Dokumentacja

Podczas odwoływania się do suwaków:

• Użyj dokładnego tekstu etykiety, w tym jego wielkości liter i dołącz suwak wyrazu. Nie dołączaj podkreślenia ani dwukropka klucza dostępu.
• Aby opisać interakcję użytkownika, użyj polecenia move.
• Jeśli to możliwe, sformatuj etykietę przy użyciu tekstu pogrubionego. W przeciwnym razie umieść etykietę w cudzysłowie tylko wtedy, gdy jest to wymagane, aby zapobiec nieporozumieniu.

Przykład: aby zwiększyć rozdzielczość ekranu, przesuń suwak rozdzielczości ekranu po prawej stronie.

Tematy pokrewne

słownika