Udostępnij za pośrednictwem


Pola wyboru

Nuta

Ten przewodnik projektowania został utworzony dla systemu Windows 7 i nie został zaktualizowany dla nowszych wersji systemu Windows. Większość wskazówek nadal ma zastosowanie w zasadzie, ale prezentacja i przykłady nie odzwierciedlają naszych bieżących wskazówek dotyczących projektowania.

Pole wyboru umożliwia użytkownikom podjęcie decyzji między dwoma wyraźnie przeciwnymi wyborami. Etykieta pola wyboru wskazuje wybrany stan, natomiast znaczenie wyczyszczonego stanu musi być jednoznacznym przeciwieństwem wybranego stanu. W związku z tym pola wyboru powinny być używane tylko do przełączania opcji włączonej lub wyłączonej albo do zaznaczenia lub usunięcia zaznaczenia elementu.

zrzut ekranu przedstawiający jedno z czterech pól wyboru zaznaczonych

Typowa grupa pól wyboru.

Nuta

Wskazówki dotyczące układu przedstawiono w osobnym artykule.

Czy jest to właściwa kontrola?

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

  • Czy pole wyboru służy do przełączania opcji włączonej lub wyłączonej, czy do zaznaczenia lub usunięcia zaznaczenia elementu? Jeśli nie, użyj innej kontrolki.

  • Czy wybrane i wyczyszczone stany są jasne i jednoznaczne? Jeśli nie, użyj przycisków radiowych lub listy rozwijanej , aby można było oznaczyć stany niezależnie.

  • W przypadku użycia w grupie, czy grupa składa się z niezależnych wyborów, z których użytkownicy mogą wybrać zero lub więcej? Jeśli nie, rozważ kontrolek do wyboru zależnych, takich jak przyciski radiowe i widoki drzewa pól wyboru.

  • W przypadku użycia w grupie czy grupa składa się z wyborów zależnych, z których użytkownicy muszą wybrać co najmniej jeden? Jeśli tak, użyj grupy pól wyboru i obsłuż błąd, gdy żadna z opcji nie jest zaznaczona.

  • Czy liczba opcji w grupie wynosi 10 lub mniej? Ponieważ używane miejsce na ekranie jest proporcjonalne do liczby opcji, zachowaj liczbę pól wyboru do 10 lub mniej. Aby uzyskać więcej niż 10 opcji, użyj listy pól wyboru .

  • Czy przycisk radiowy byłby lepszym wyborem? Jeśli pola wyboru są odpowiednie tylko do włączania lub wyłączania opcji, przyciski radiowe mogą być używane do zupełnie różnych opcji. Jeśli oba rozwiązania są możliwe:

    • Użyj przycisków radiowych, jeśli znaczenie wyczyszczonego pola wyboru nie jest całkowicie oczywiste.

      niepoprawne:

      zrzut ekranu z jednym polem wyboru oznaczonym poziomym

      W tym przykładzie przeciwny wybór z obszaru Poziome nie jest jasny, więc pole wyboru nie jest dobrym wyborem.

      poprawna:

      zrzut ekranu przedstawiający dwa przyciski radiowe

      W tym przykładzie wybory nie są przeciwieństwami, dlatego przyciski radiowe są lepszym wyborem.

    • Użyj przycisków radiowych na stronach kreatora, aby usunąć alternatywy, nawet jeśli pole wyboru jest w inny sposób akceptowalne.

    • Użyj przycisków radiowych, jeśli masz wystarczającą ilość miejsca na ekranie, a opcje są wystarczająco ważne, aby być dobrym użyciem tego miejsca na ekranie. W przeciwnym razie użyj pola wyboru lub listy rozwijanej.

      niepoprawne:

      zrzut ekranu przedstawiający wyświetlanie i nie pokazuj przycisków współczynnika

      W tym przykładzie opcje nie są wystarczająco ważne, aby używać przycisków radiowych.

      poprawna:

      zrzut ekranu pola wyboru nie wyświetlaj komunikatu

      W tym przykładzie pole wyboru to efektywne wykorzystanie miejsca na ekranie dla tej opcji peryferyjnej.

  • Użyj pola wyboru, jeśli w oknie znajdują się inne pola wyboru.

  • Czy opcja przedstawia opcję programu, a nie dane? Wartości opcji nie powinny być oparte na kontekście ani na innych danych. W przypadku danych użyj listy pól wyboru lub listy wielokrotnego wyboru.

Wzorce użycia

Pola wyboru mają kilka wzorców użycia:

Zwyczaj Przykład
Wybór indywidualny Pojedyncze pole wyboru służy do wybierania indywidualnego wyboru.
zrzut ekranu przedstawiający jedno pole wyboru z przypomnieniami etykietami
Jedno pole wyboru jest używane do wyboru indywidualnego.
Opcje niezależne (zero lub więcej) Grupa pól wyboru służy do wybierania z zestawu zera lub większej liczby opcji.
w przeciwieństwie do kontrolek wyboru jednokrotnego, takich jak przyciski radiowe , użytkownicy mogą wybrać dowolną kombinację opcji w grupie pól wyboru.
zrzut ekranu przedstawiający dwa z trzech pól wyboru zaznaczonych
Grupa pól wyboru służy do niezależnych wyborów.
opcje zależne (co najmniej jeden) Grupy pól wyboru można również użyć do wybrania spośród zestawu co najmniej jednego wyboru.
może być konieczne przedstawienie wyboru co najmniej jednego wyboru zależnego. ponieważ system microsoft?windows nie ma kontrolki, która bezpośrednio obsługuje ten typ danych wejściowych, najlepszym rozwiązaniem jest użycie grupy pól wyboru i obsłużenie błędu, gdy żadna z opcji nie jest zaznaczona.
zrzut ekranu przedstawiający jedno z dwóch pól wyboru zaznaczonych
Grupa pól wyboru jest używana w przypadku wybrania co najmniej jednego protokołu.
wyboru mieszanego Oprócz ich zaznaczonych i wyczyszczone stany, pola wyboru mają również stan mieszany dla wielu zaznaczeń, aby wskazać, że opcja jest ustawiona dla niektórych, ale nie wszystkich obiektów.
zrzut ekranu przedstawiający niebieskie pole wyboru tylko do odczytu
Pole wyboru stanu mieszanego.

Wytyczne

Ogólne

  • pola wyboru Powiązane z grupą. Połącz powiązane opcje i oddzielne niepowiązane opcje w grupy 10 lub mniej, używając wielu grup w razie potrzeby.

    zrzut ekranu powiązanych i niepowiązanych pól wyboru

    Przykład grup powiązanych, niezależnych opcji.

  • ponownie rozważyć użycie pól grupowych w celu organizowania grup pól wyboru to często powoduje niepotrzebne zaśmiecanie ekranu.

  • listy pól wyboru w kolejności logicznej, takich jak grupowanie opcji wysoce powiązanych lub umieszczanie najbardziej typowych opcji jako pierwsze, lub po innych naturalnych postępach. Kolejność alfabetyczna nie jest zalecana, ponieważ jest zależna od języka, a zatem nie jest lokalizowalna.

  • Wyrównaj pola wyboru w pionie, a nie poziomo. Wyrównanie w poziomie jest trudniejsze do odczytania.

    poprawna:

    zrzut ekranu przedstawiający pola wyboru wyrównane w pionie

    W tym przykładzie pola wyboru są poprawnie wyrównane.

    niepoprawne:

    zrzut ekranu przedstawiający pola wyboru wyrównane w poziomie

    W tym przykładzie wyrównanie w poziomie jest trudniejsze do odczytania.

  • Nie używaj stanu mieszanego do reprezentowania trzeciego stanu. Stan mieszany służy do wskazywania, że dla niektórych jest ustawiona opcja, ale nie wszystkie obiekty podrzędne. Użytkownicy nie powinni mieć możliwości ustawienia stanu mieszanego bezpośrednio, a nie stanu mieszanego jest odbiciem obiektów podrzędnych. Stan mieszany nie jest używany jako trzeci stan dla pojedynczego elementu. Aby reprezentować trzeci stan, użyj przycisków radiowych lub listy rozwijanej.

    niepoprawne:

    zrzut ekranu przedstawiający pole wyboru solidnej niebieskiej usługi motywu

    W tym przykładzie stan mieszany wskazuje, że usługa Motyw nie jest zainstalowana.

    poprawna:

    zrzut ekranu listy rozwijanej z trzema opcjami

    W tym przykładzie użytkownicy mogą wybrać jedną z trzech przejrzystych opcji.

  • Kliknięcie pola wyboru stanu mieszanego powinno przechodzić przez wszystkie zaznaczone, wyczyszczone i oryginalne stany mieszane. W przypadku przebaczenia ważne jest, aby móc przywrócić oryginalny stan mieszany, ponieważ ustawienia mogą być złożone lub nieznane użytkownikowi. W przeciwnym razie jedynym sposobem przywrócenia stanu mieszanego z ufnością byłoby anulowanie zadania i rozpoczęcie od nowa.

  • Nie używaj pól wyboru jako wskaźnika postępu. Zamiast tego użyj wskaźnika postępu .

    niepoprawne:

    zrzut ekranu przedstawiający cztery pola wyboru pokazujące postęp

    W tym przykładzie pola wyboru są niepoprawnie używane jako wskaźnik postępu.

    poprawna:

    zrzut ekranu przedstawiający częściowo wypełniony pasek postępu

    Przykład typowego paska postępu.

  • Pokaż wyłączone pola wyboru przy użyciu poprawnego stanu zaznaczenia. Mimo że użytkownicy nie mogą ich zmieniać, wyłączone pola wyboru przekazują informacje, aby były zgodne z wynikami.

    niepoprawne:

    zrzut ekranu przedstawiający jedno z dwóch pól wyboru wygaszone

    W tym przykładzie opcja "Zawsze odczytaj tę sekcję na głos" powinna zostać wyczyszczone, ponieważ sekcja nie jest odczytywana, gdy opcja jest wyłączona.

  • Nie używaj zaznaczenia pola wyboru, aby:

    • Wykonywanie poleceń.
    • Wyświetl inne okna, takie jak okno dialogowe, aby zebrać więcej danych wejściowych.
    • Dynamiczne wyświetlanie innych kontrolek powiązanych z wybraną kontrolką (czytniki zawartości ekranu nie mogą wykryć takich zdarzeń).

Nie pokazuj tego elementu <ponownie>

  • Rozważ użycie opcji Nie pokazuj tego elementu <> ponownie, aby umożliwić użytkownikom pomijanie okna dialogowego cyklicznego tylko wtedy, gdy nie ma lepszej alternatywy. Spróbuj określić wcześniej, czy użytkownicy naprawdę potrzebują okna dialogowego; jeśli tak, zawsze wyświetla okno dialogowe, a jeśli tak nie jest, wyeliminuj okno dialogowe.

Aby uzyskać więcej wytycznych i przykładów, zobacz okna dialogowe.

Kontrolki podrzędne

  • Umieść kontrolki podrzędne z prawej strony lub poniżej (wcięcie, opróżnij z etykietą pola wyboru) pole wyboru i jego etykietę. Zakończ etykietę pola wyboru dwukropkiem.

    zrzut ekranu pola tekstowego poniżej etykiety pola wyboru

    W tym przykładzie pole wyboru i jego podrzędna kontrola współdzielą etykietę pola wyboru i jego klucz dostępu.

  • Pozostaw włączone zależne pola tekstowe z możliwością edycji i listy rozwijane, jeśli udostępniają etykietę pola wyboru. Gdy użytkownicy wpiszą lub wkleją dowolne elementy w polu, zaznacz odpowiednią opcję automatycznie. Upraszcza to interakcję.

    zrzut ekranu przedstawiający pola tekstowe nagłówka i stopki

    W tym przykładzie wprowadzenie nagłówka lub stopki powoduje automatyczne wybranie opcji.

  • Jeśli zagnieżdżasz pola wyboru z przyciskami radiowymi lub innymi polami wyboru, wyłączyć te kontrolki podrzędne do momentu wybrania opcji wysokiego poziomu. Pozwala to uniknąć nieporozumień dotyczących znaczenia mechanizmów kontroli podrzędnych.

  • Ustaw kontrolki podrzędne na ciągłe pole wyboru przy użyciu pola wyboru w kolejności tabulacji.

  • Jeśli wybranie opcji oznacza wybranie podrzędnych pól wyboru, jawnie zaznacz te pola wyboru, aby wyczyścić relację.

    niepoprawne:

    zrzut ekranu: zaznaczony przycisk, wyczyszczone pola wyboru

    W tym przykładzie pola wyboru podrzędne nie są zaznaczone.

    poprawna:

    zrzut ekranu : zaznaczony przycisk, zaznaczone pola wyboru

    W tym przykładzie zaznaczone są pola wyboru podrzędne, dzięki czemu ich relacja z wybraną opcją jest jasna.

  • Użyj zależnych pól wyboru, jeśli alternatywy dodają niepotrzebną złożoność. Pola wyboru powinny być niezależnymi opcjami, ale czasami alternatywy, takie jak przyciski radiowe, dodają niepotrzebną złożoność.

    poprawna:

    zrzut ekranu przedstawiający mylące przyciski i pola wyboru

    W tym przykładzie użycie przycisków radiowych jest dokładne, ale powoduje niepotrzebne złożoność.

    lepiej:

    zrzut ekranu pól wyboru tylko

    W tym przykładzie użycie pól wyboru jest prostsze i umożliwia użytkownikom skupienie się na wybieraniu żądanych opcji zamiast na ich złożonej relacji.

    Ważne: zastosuj te wytyczne tylko w bardzo rzadkich okolicznościach, gdy pokazanie zależności zwiększa znaczącą złożoność bez dodawania jasności. W poprzednim przykładzie jest mało prawdopodobne, aby użytkownicy próbowali wybrać zarówno indeks górny, jak i indeks dolny, a jeśli tak, łatwo byłoby zrozumieć, że są to opcje wyłączne.

Wartości domyślne

  • Jeśli pole wyboru jest dla opcji użytkownika, ustawić najbezpieczniejszy (aby zapobiec utracie dostępu do danych lub systemu), najbezpieczniejszy i prywatny stan domyślnie. Jeśli bezpieczeństwo i zabezpieczenia nie są czynnikami, wybierz najbardziej prawdopodobną lub wygodną wartość.

rysunek sugerowanego pola wyboru określania rozmiaru i odstępów

Zalecane ustalanie rozmiaru i odstępy między polami wyboru.

Etykiety

Etykiety pól wyboru

  • Etykietuj każde pole wyboru.

  • Przypisz unikatowy klucz dostępu do każdej etykiety. Aby uzyskać wskazówki, zobacz Klawiatura.

  • Użyj wielkich liter w stylu zdania.

  • Zapisz etykietę jako frazę lub zdanie imperatywne i nie używaj końcowej interpunkcji.

    • Wyjątek: Jeśli etykieta pola wyboru również oznacza podrzędną kontrolkę, która jest po niej zgodna, zakończ etykietę dwukropkiem.
  • Zapisz etykietę tak, aby opisywała wybrany stan pola wyboru.

  • W przypadku grupy pól wyboru użyj fraz równoległych i spróbuj zachować długość o tej samej długości dla wszystkich etykiet.

  • W przypadku grupy pól wyboru skoncentruj tekst etykiety na różnicach między opcjami. Jeśli wszystkie opcje mają ten sam tekst wprowadzający, przenieś ten tekst do etykiety grupy.

  • Użyj fraz dodatnich. Nie frazuj etykiety, aby zaznaczenie pola wyboru nie oznaczało wykonania akcji.

    • Wyjątek: nie pokazuj tego elementu <> ponownie pola wyboru.

    niepoprawne:

    zrzut ekranu przedstawiający etykietę ujemną

    W tym przykładzie opcja nie używa fraz dodatnich.

  • Opisz tylko opcję z etykietą. Zachowaj krótkie etykiety, aby łatwo było odwoływać się do nich w komunikatach i dokumentacji. Jeśli ta opcja wymaga dalszego wyjaśnienia, podaj wyjaśnienie w statycznym tekście kontrolce przy użyciu pełnych zdań i zakończenia interpunkcji.

    Nuta

    Dodanie wyjaśnienia do jednego pola wyboru w grupie nie oznacza, że musisz podać wyjaśnienia dla wszystkich pól wyboru w grupie. Podaj odpowiednie informacje w etykiecie, jeśli to możliwe, i użyj wyjaśnień tylko wtedy, gdy jest to konieczne. Nie należy jedynie odpoczniać etykiety pod kątem spójności.

    zrzut ekranu pola wyboru, etykiety i opisu

    W tym przykładzie etykieta pola wyboru zawiera dodatkowy tekst objaśniający poniżej.

  • Jeśli opcja jest zdecydowanie zalecana, rozważ dodanie elementu "(zalecane)" do etykiety. Pamiętaj, aby dodać etykietę kontrolki, a nie do notatek uzupełniających.

  • Jeśli musisz użyć etykiet wielowierszowych, wyrównaj górną część etykiety z polem wyboru.

  • Nie używaj kontrolki podrzędnej, wartości, które zawiera, ani etykiety jednostek, aby utworzyć zdanie lub frazę. Taki projekt nie jest lokalizowalny, ponieważ struktura zdań różni się w zależności od języka.

    niepoprawne:

    zrzut ekranu etykiety pola wyboru z polem tekstowym

    W tym przykładzie pole tekstowe jest niepoprawnie umieszczone wewnątrz etykiety pola wyboru.

Etykiety grup pól wyboru

  • Użyj etykiety grupy, aby wyjaśnić cel grupy, a nie sposób dokonać wyboru. Załóżmy, że użytkownicy wiedzą, jak używać pól wyboru. Na przykład nie należy powiedzieć "Wybierz dowolną z następujących opcji".

  • Kończ każdą etykietę dwukropkiem.

  • Nie przypisuj klucza dostępu do etykiety. Nie jest to konieczne i sprawia, że inne klucze dostępu są trudniejsze do przypisania.

  • Aby wybrać co najmniej jedną opcję zależną, wyjaśnij wymaganie etykiety.

    poprawna:

    zrzut ekranu etykiety dla dwóch kontrolek: protokoły

    W tym przykładzie użytkownicy mogą myśleć, że mogą wybrać tylko jeden wybór.

    lepiej:

    zrzut ekranu etykiety: protokoły wybierają co najmniej jedną

    W tym przykładzie jest jasne, że użytkownicy mogą dokonać więcej niż jednego wyboru.

Dokumentacja

W przypadku odwoływania się do pól wyboru:

  • Użyj dokładnego tekstu etykiety, w tym jego wielkości liter, ale nie dołączaj podkreślenia ani dwukropka klucza dostępu. Uwzględnij pole wyboru wyrazu.

  • Pole wyboru należy odwoływać się do pola wyboru, a nie opcji, pola wyboru lub po prostu, ponieważ pole wyboru jest niejednoznaczne dla lokalizatorów.

  • Aby opisać interakcję z użytkownikiem, użyj opcji wybierz i wyczyść.

  • 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: zaznacz pole wyboru podkreśleniu.