Listy rozwijane systemu Windows 7 & pola kombi

W przypadku listy rozwijanej lub pola kombi użytkownicy tworzą wybór spośród listy wzajemnie wykluczających się wartości. Użytkownicy mogą wybrać jedną i tylko jedną opcję. Ze standardową listą rozwijaną użytkownicy są ograniczeni do wyboru na liście, ale przy użyciu pola kombi mogą wprowadzić wybór, który nie znajduje się na liście.

Typowe pole kombi.

Poniższe terminy są ważne, aby zrozumieć podczas czytania tego artykułu:

• Standardowe pole listy to pole zawierające listę wielu elementów z widocznymi wieloma elementami.
• Lista rozwijana to lista, w której wybrany element jest zawsze widoczny, a pozostałe są widoczne na żądanie, klikając przycisk listy rozwijanej.
• Pole kombi jest kombinacją standardowego pola listy lub listy rozwijanej oraz edytowalnego pola tekstowego , co pozwala użytkownikom na wprowadzanie wartości, która nie znajduje się na liście.
  • Lista rozwijana z możliwością edycji jest kombinacją listy rozwijanej i edytowalnego pola tekstowego.
  • Pole listy edytowalnej jest kombinacją standardowego pola listy i pola tekstowego z możliwością edycji.

Czy jest to właściwa kontrola?

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

• Czy kontrolka służy do wybierania jednej opcji z listy wzajemnie wykluczających się wartości? Jeśli nie, użyj innej kontrolki. Aby wybrać wiele opcji, użyj standardowej listy wielokrotnego wyboru , listy pól wyboru, konstruktora listy lub zamiast tego dodaj/usuń listę.
• Czy opcje są poleceniami? Jeśli tak, użyj przycisku menu lub przycisku podziału. Użyj list rozwijanych i pól kombi dla obiektów (rzeczowników) lub atrybutów (przymiotników), ale nie poleceń (czasowniki).
• Czy lista przedstawia dane, a nie opcje programu? Tak czy inaczej, lista rozwijana lub pole kombi jest odpowiednim wyborem. Natomiast przycisków radiowych są odpowiednie tylko dla niewielkiej liczby opcji programu.

listy rozwijane

• Czy w większości sytuacji jest zalecana opcja domyślna dla większości użytkowników? Czy zaznaczona opcja jest znacznie ważniejsza niż wyświetlanie alternatyw? Rozważ użycie listy rozwijanej, jeśli nie chcesz zachęcić użytkowników do wprowadzania zmian, ukrywając alternatywy. Jeśli tak nie jest, rozważ przyciski radiowe, listę z pojedynczym wyborem lub pole listy z możliwością edycji, które kładzie większy nacisk na alternatywne opcje.

  

  W tym przykładzie najwyższa jakość kolorów jest najlepszym wyborem dla większości użytkowników, więc lista rozwijana jest dobrym wyborem do bagatelizowania alternatyw.

• Czy chcesz zwrócić uwagę na tę opcję? Jeśli tak, rozważ przyciski radiowe, listę z pojedynczym wyborem lub pole listy z możliwością edycji, które zwykle zwraca większą uwagę, poświęcając więcej miejsca na ekranie. Ponieważ listy rozwijane są kompaktowe, są dobrymi wyborami dla opcji, które chcesz zmniejszyć.

• Czy miejsce na ekranie jest dostępne w warstwie Premium? Jeśli tak, użyj listy rozwijanej, ponieważ używane miejsce na ekranie jest stałe i niezależne od liczby wyborów.

• Czy w oknie znajdują się inne listy rozwijane? Jeśli tak, rozważ użycie listy rozwijanej w celu zapewnienia spójności.

listy rozwijane edytowalne

Oprócz zasad podanych właśnie dla list rozwijanych obowiązują również następujące zasady:

• Czy możliwe opcje są ograniczone? Jeśli tak, użyj zamiast tego normalnej listy rozwijanej. Pola kombi są przeznaczone dla danych wejściowych bez ograniczeń, w których użytkownicy mogą wymagać wprowadzenia wartości, która nie znajduje się obecnie na liście. Ponieważ dane wejściowe nie są ograniczone, jeśli użytkownicy wprowadzają tekst, który nie jest prawidłowy, musisz obsłużyć błąd z komunikatem o błędzie.

• Czy można wyliczyć najbardziej prawdopodobne wybory z wyprzedzeniem? Jeśli nie, zamiast tego użyj pola tekstowego.

• Czy lista rozwijana jest używana do wyświetlania listy poprzednich danych wejściowych użytkownika? Jeśli użytkownicy nie muszą przeglądać pełnej listy poprzednich danych wejściowych, zamiast tego użyj pola tekstowego z opcją autouzupełnienia.

  

  W tym przykładzie użytkownicy mogą potrzebować przejrzenia poprzednich danych wejściowych, więc lista rozwijana z możliwością edycji jest dobrym wyborem.

  

  W tym przykładzie pole tekstowe z autouzupełnianiem jest dobrym wyborem.

• Czy użytkownicy będą potrzebować pomocy przy wybieraniu prawidłowych wartości? Jeśli tak, użyj pola tekstowego z przycisk Przeglądaj.

  

  W tym przykładzie użytkownicy mogą kliknąć pozycję "Do", aby pomóc im wybrać prawidłowe wartości.

• Czy ważne jest, aby zachęcić użytkowników do przeglądania alternatywnych wyborów lub zapraszania zmian? Jeśli tak, rozważ użycie pola listy z możliwością edycji. Z edytowalną listą rozwijaną użytkownicy nie będą wiedzieć o alternatywach, dopóki lista nie zostanie porzucona.

• Czy użytkownicy muszą szybko zlokalizować element na dużej liście? (Tylko Win32) Jeśli tak, użyj pola kombi, ponieważ użytkownicy mogą wybrać element, wpisując jego pełną nazwę. Z kolei lista rozwijana Win32 wybiera elementy oparte tylko na ostatnim typie znaku (więc wpisywanie ciągu "Jun" na liście miesięcy będzie zgodne z listopadem, a nie czerwiec). W takim przypadku użyj pola kombi, nawet jeśli możliwe opcje są ograniczone.

pola listy edytowalne

• Czy możliwe opcje są ograniczone? Jeśli tak, zamiast tego użyj listy rozwijanej z pojedynczym wyborem lub normalnej listy rozwijanej. Pola kombi są przeznaczone dla danych wejściowych bez ograniczeń, w których użytkownicy mogą wymagać wprowadzenia wartości, która nie znajduje się obecnie na liście. Ponieważ dane wejściowe nie są ograniczone, jeśli użytkownicy wprowadzają tekst, który jest nieprawidłowy, musisz obsłużyć błąd z komunikatem o błędzie.
• Czy można wyliczyć najbardziej prawdopodobne opcje z wyprzedzeniem? Jeśli nie, zamiast tego użyj pola tekstowego.
• Czy ważne jest, aby zachęcić użytkowników do przeglądania alternatywnych wyborów lub zapraszania zmian? Jeśli nie, rozważ zamiast tego listę rozwijaną z możliwością edycji.
• Czy chcesz zwrócić uwagę na tę opcję? Jeśli nie, rozważ zamiast tego listę rozwijaną z możliwością edycji. Ponieważ listy rozwijane są kompaktowe, są dobrymi wyborami dla opcji, które chcesz zmniejszyć.
• Czy miejsce na ekranie jest dostępne w warstwie Premium? Jeśli tak, użyj listy rozwijanej z możliwością edycji, ponieważ używane miejsce na ekranie jest stałe i niezależne od liczby wyborów.

W przypadku list rozwijanych liczba elementów na liście nie jest czynnikiem podczas wybierania kontrolki, ponieważ są skalowane z tysięcy elementów aż do jednego. Listy rozwijane z możliwością edycji są skalowane z tysięcy elementów do braków, ponieważ użytkownicy mogą wprowadzać wartość, która nie znajduje się na liście. Ponieważ listy rozwijane mogą być używane dla danych, liczba elementów może nie być znana z wyprzedzeniem i być może nie może być gwarantowana. Zawsze dołączaj co najmniej trzy elementy w polach listy edytowalnych, aby uzasadnić dodatkowe miejsce na ekranie.

Wzorce użycia

Listy rozwijane i pola kombi mają kilka wzorców użycia:

Zwyczaj	Przykład
lista rozwijana standardową listę rozwijaną ze stałym zestawem wstępnie określonych wartości.	Po zamknięciu widoczny jest tylko wybrany element. Gdy użytkownicy klikną przycisk listy rozwijanej, wszystkie opcje staną się widoczne. Aby zmienić wartość, użytkownicy mogą otworzyć listę i kliknąć inną wartość. W tym przykładzie lista jest w normalnym stanie. W tym przykładzie lista została usunięta.
lista rozwijana w wersji zapoznawczej listę rozwijaną, która wyświetla podgląd wyników wyboru, aby ułatwić użytkownikom wybór.	W tych przykładach lista rozwijana wyświetla podgląd wyników zaznaczenia.
lista rozwijana z możliwością edycji pole kombi listy rozwijanej, co umożliwia użytkownikom wprowadzanie wartości, która nie znajduje się na liście rozwijanej.	Przykłady edytowalnej listy rozwijanej w trybach edycji i porzuconych. Użyj tej kontrolki, jeśli chcesz zapewnić elastyczność pola tekstowego, ale chcesz pomóc użytkownikom, zapewniając wygodną listę prawdopodobnych wyborów.
pola listy edytowalne zwykłe pole kombi, co umożliwia użytkownikom wprowadzanie wartości, która nie znajduje się na zawsze widocznej liście.	zrzut ekranu W tych przykładach pola listy z możliwością edycji są zawsze wyświetlane. Ta kontrolka jest lepszym wyborem niż lista rozwijana edytowalna, gdy ważne jest, aby zachęcić użytkowników do przeglądania alternatywnych wyborów lub zapraszania zmian.

Wytyczne

Ogólne

• Nie używaj zmiany listy rozwijanej lub pola kombi, aby:
  • Wykonywanie poleceń.
  • Wyświetl inne okna, takie jak okno dialogowe, aby zebrać więcej danych wejściowych.
  • Dynamiczne wyświetlanie innych kontrolek związanych z wybraną kontrolką (czytniki zawartości ekranu nie mogą wykrywać takich zdarzeń).

Prezentacja

• Sortuj elementy listy w kolejności logicznej, takie jak grupowanie opcji o wysokim stopniu powiązanych, umieszczanie najczęściej używanych opcji jako pierwsze lub użycie kolejności alfabetycznej. Sortuj nazwy w kolejności alfabetycznej, liczby w kolejności liczbowej i daty w kolejności chronologicznej. Listy z co najmniej 12 elementami powinny być sortowane alfabetycznie, aby ułatwić znajdowanie elementów.

  poprawna:

  W tym przykładzie elementy listy są sortowane według ich relacji przestrzennej.

  niepoprawne: zrzut ekranu

  W tym przykładzie istnieje tak wiele elementów listy, które muszą być sortowane w kolejności alfabetycznej.

  poprawna:

  W tym przykładzie elementy listy są sortowane w kolejności alfabetycznej z wyjątkiem opcji reprezentującej wszystkie elementy.

• Opcje umieść reprezentujące wszystkie lub Brak na początku listy, niezależnie od kolejności sortowania pozostałych elementów.

• Ująć meta-opcje w nawiasach.

  

  W tym przykładzie "(None)" jest meta-option, ponieważ nie jest prawidłową wartością dla wyboru, a nie opisuje, że sama opcja nie jest używana.

• Podczas wyłączania listy rozwijanej lub pola kombi wyłącz również wszystkie skojarzone etykiety i przyciski poleceń.

Listy rozwijane

• Gdy jedna lista rozwijana jest używana do zmiany widoku skojarzonej kontrolki, zmienić widok natychmiast po zaznaczeniu zamiast wymagać oddzielnego przycisku polecenia. Użyj oddzielnego przycisku polecenia tylko wtedy, gdy renderowanie listy zajmuje znaczną ilość czasu. Jednak nagłówki listy i przyciski menu są preferowanymi kontrolkami w tym celu.

• Nie masz pustych elementów listy,zamiast tego użyj meta-options. Użytkownicy nie wiedzą, jak interpretować puste elementy, natomiast znaczenie meta-options jest jawne.

  poprawna:

  niepoprawne:

  W niepoprawnym przykładzie znaczenie pustej opcji jest niejasne.

Podgląd list rozwijanych

• Użyj podglądów w elementach listy, gdy lepiej wyświetlać obrazy niż opisywać sam tekst.

  

  W tym przykładzie w wersji zapoznawczej wyjaśniono opcje znacznie lepsze niż sam tekst.

• Nie używaj niepotrzebnych, nieprzydatnych ikon w podglądach.

  niepoprawne:

  W tym przykładzie ikony podglądu są niepotrzebne, ponieważ nie komunikują żadnych informacji.

Pola kombi

• Ogranicz długość tekstu wejściowego, gdy to możliwe. Jeśli na przykład prawidłowe dane wejściowe są liczbą z zakresu od 0 do 999, użyj pola kombi, które jest ograniczone do trzech znaków.

• Jeśli istnieje wiele możliwych opcji, skoncentruj zawartość listy na najbardziej prawdopodobnych opcjach. Ponieważ użytkownicy mogą wprowadzać wartości, które nie znajdują się na liście, pola kombi nie muszą zawierać listy wszystkich opcji, tylko prawdopodobnych wyborów lub reprezentatywnej próbki.

  

  W tym przykładzie wiele prawidłowych opcji nie ma na liście, takich jak 15 lub czcionki o rozmiarze pół rozmiaru, takim jak 9,5.

Wartości domyślne

• Wybierz najbezpieczniejszą opcję (aby zapobiec utracie dostępu do danych lub systemu) i najbezpieczniejszą domyślnie. Jeśli bezpieczeństwo i zabezpieczenia nie są czynnikami, wybierz najbardziej prawdopodobną lub wygodną opcję.
  • Wyjątek: Wyświetl pustą wartość domyślną, jeśli kontrolka reprezentuje właściwość w stanie mieszanym , co ma miejsce podczas wyświetlania właściwości dla wielu obiektów, które nie mają tego samego ustawienia.

Monity

Monit to etykieta lub krótka instrukcja umieszczona wewnątrz listy rozwijanej z możliwością edycji jako jego wartość domyślna. W przeciwieństwie do tekstu statycznego monity znikają z ekranu, gdy użytkownicy wpiszą coś w polu kombi lub uzyska fokus wejściowy.

pola wyszukiwania

Typowy monit.

Użyj monitu, gdy:

• Miejsce na ekranie znajduje się w takiej warstwie premium, że użycie etykiety lub instrukcji jest niepożądane, na przykład na pasku narzędzi.
• Monit służy przede wszystkim do identyfikowania przeznaczenia listy w kompaktowy sposób. Nie może to być kluczowe informacje, które użytkownicy muszą zobaczyć podczas korzystania z pola kombi.

Nie używaj monitów tylko do kierowania użytkowników do wybrania czegoś z listy lub kliknięcia przycisków. Na przykład monity, takie jak Wybierz opcję lub Wprowadź nazwę pliku, a następnie kliknij przycisk Wyślij są niepotrzebne.

W przypadku korzystania z monitów:

• Rysuj tekst monitu w szarym i rzeczywistym tekście w normalnym kolorze czarnym. Tekst monitu nie może być mylony z rzeczywistym tekstem.
• Zachowaj zwięzłość tekstu monitu. Zamiast pełnych zdań można używać fragmentów.
• Użyj wielkich liter w stylu zdania.
• Nie używaj końcowej interpunkcji ani wielokropka.
• Tekst monitu nie powinien być edytowalny i powinien zniknąć po kliknięciu lub naciśnięciu karty przez użytkowników w polu tekstowym.
  • Wyjątek: Monit jest wyświetlany, jeśli pole tekstowe ma domyślny fokus wejściowy i zniknie tylko po rozpoczęciu wpisywania przez użytkownika.
• Tekst monitu zostanie przywrócony, jeśli pole tekstowe jest nadal puste, gdy utraci fokus wejściowy.

niepoprawne: zrzut ekranu

W tym przykładzie miejsce na ekranie nie jest w warstwie Premium; gdy lista rozwijana z możliwością edycji zostanie wypełniona, trudno jest użytkownikom zapamiętać, co to jest; tekst monitu jest edytowalny i rysowany tak samo jak tekst rzeczywisty.

Zalecane ustalanie rozmiaru i odstępy

Zalecane ustalanie rozmiaru i odstępy między listami rozwijanymi i polami kombi.

• Wybierz szerokość odpowiednią dla najdłuższych prawidłowych danych. Nie można przewijać list rozwijanych w poziomie, aby użytkownicy mogli zobaczyć tylko to, co jest widoczne w kontrolce. (Należy jednak pamiętać, że pola kombi mogą mieć włączoną funkcję autorollowania).
• Uwzględnij dodatkowe 30 procent (do 200 procent dla krótszego tekstu) dla dowolnego tekstu (ale nie liczb), który zostanie zlokalizowany.
• Wybierz długość listy, która eliminuje niepotrzebne przewijanie w pionie. Ponieważ listy rozwijane są wyświetlane na żądanie, ich listy powinny być wyświetlane do 30 elementów. Pola listy z możliwością edycji (te, które nie mają przycisku listy rozwijanej) powinny być wyświetlane między 3 a 12 elementami.

Etykiety

etykiety kontrolek

• Napisz etykietę jako wyraz lub frazę, a nie jako zdanie i zakończ ją dwukropkiem. wyjątki :

  • Listy rozwijane z możliwością edycji z monitami znajdującymi się w miejscu, w którym znajduje się miejsce w warstwie Premium.
  • Jeśli lista rozwijana lub pole kombi jest podrzędne dla przycisku radiowego lub pola wyboru i jest wprowadzane przez etykietę kończącą się dwukropkiem, nie umieszczaj dodatkowej etykiety na kontrolce.

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

• Użyj wielkich liter w stylu zdania.

• Umieść etykietę z lewej strony lub nad kontrolką i wyrównaj etykietę do lewej krawędzi kontrolki. Jeśli etykieta znajduje się po lewej stronie, wyrównaj tekst etykiety w pionie do tekstu kontrolki.

  poprawna:

  W tym przykładzie etykieta jest poprawnie wyrównana do tekstu kontrolki.

  niepoprawne:

  W tym przykładzie etykieta jest niepoprawnie wyrównana do tekstu kontrolki.

• Możesz określić jednostki (sekundy, połączenia itd.) w nawiasach po etykiecie.

• Nie należy tworzyć zawartości listy rozwijanej ani pola kombi (ani etykiety jednostek) części zdania, ponieważ nie jest to możliwe do zlokalizowania.

tekst opcji

• Przypisz unikatową nazwę do każdej opcji.
• Użyj wielkich liter w stylu zdania, chyba że element jest odpowiednim rzeczownikiem.
• Napisz etykietę jako wyraz lub frazę, a nie jako zdanie i nie używaj końcowej interpunkcji.
• Użyj fraz równoległych i spróbuj zachować długość o tej samej długości dla wszystkich opcji.

tekst instrukcji

• Jeśli musisz dodać tekst instrukcji na temat listy rozwijanej lub pola kombi, dodaj go powyżej etykiety. Używaj pełnych zdań z kończącymi znakami interpunkcyjnymi.

• Użyj wielkich liter w stylu zdania.

• Dodatkowe informacje, które są przydatne, ale nie są niezbędne, powinny być krótkie. Umieść te informacje w nawiasach między etykietą a dwukropkiem lub bez nawiasów poniżej kontrolki.

  

  W tym przykładzie przedstawiono dodatkowe informacje umieszczone poniżej kontrolki.

Dokumentacja

Podczas odwoływania się do list rozwijanych:

• Użyj dokładnego tekstu etykiety, w tym jego wielkości liter, ale nie dołączaj podkreślenia ani dwukropka klucza dostępu; dołącz listę lub pole, w zależności od tego, co jest jaśniejsze.
• W przypadku opcji listy użyj dokładnego tekstu opcji, w tym jego wielkości liter.
• W programowania i innej dokumentacji technicznej zapoznaj się z listami rozwijanych jako listami rozwijanym. Wszędzie indziej użyj listy lub pola, w zależności od tego, co jest jaśniejsze.
• Aby opisać interakcję z użytkownikiem, użyj kliknięcia.
• Jeśli to możliwe, sformatuj opcje etykiety i listy przy użyciu pogrubionego tekstu. W przeciwnym razie umieść etykietę i opcje w cudzysłowie tylko wtedy, gdy jest to wymagane, aby zapobiec nieporozumieniu.

Przykład: na liście Rozmiar czcionki kliknij duże czcionki.

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

• Użyj dokładnego tekstu etykiety, w tym jego wielkości liter, ale nie dołączaj podkreślenia ani dwukropka klucza dostępu; dołącz pole wyrazu.
• W przypadku opcji listy użyj dokładnego tekstu opcji, w tym jego wielkości liter.
• W programowania i inną dokumentację techniczną, zapoznaj się z polami kombi jako polami kombi. Wszędzie indziej użyj pola.
• Aby opisać interakcję użytkownika, użyj Enter.
• Jeśli to możliwe, sformatuj opcje etykiety i listy przy użyciu pogrubionego tekstu. W przeciwnym razie umieść etykietę i opcje w cudzysłowie tylko wtedy, gdy jest to wymagane, aby zapobiec nieporozumieniu.

Przykład: w polu czcionki wprowadź czcionkę, której chcesz użyć.