Widoki listy
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.
W widoku listy użytkownicy mogą wyświetlać kolekcje obiektów danych i korzystać z niej przy użyciu pojedynczego zaznaczenia lub wielokrotnego wyboru.
Typowy widok listy.
Widoki listy mają większą elastyczność i funkcjonalność niż pola listy. W przeciwieństwie do pól listy, obsługują one zmienianie widoków, grupowanie, wiele kolumn z nagłówkami, sortowanie według kolumn, zmienianie szerokości i kolejności kolumn, bycie źródłem przeciągania lub obiektem docelowym upuszczania oraz kopiowanie danych do i ze schowka.
Nuta
Wytyczne dotyczące układu i pól listy są prezentowane w oddzielnych artykułach.
Czy jest to właściwa kontrola?
Widok listy jest bardziej elastycznym i funkcjonalnym polem listy: jego dodatkowa funkcjonalność powoduje różne użycie. W poniższej tabeli przedstawiono porównanie.
Zwyczaj | Pola listy | Wyświetlanie listy widoków |
---|---|---|
typ danych |
Zarówno dane, jak i opcje programu. |
Tylko dane. |
zawartość |
Tylko etykiety. |
Etykiety i dane pomocnicze, prawdopodobnie w wielu kolumnach. |
interakcji |
Służy do wybierania. |
Może służyć do podejmowania wyborów, ale często używany do wyświetlania i interakcji z danymi. Może być źródłem przeciągania lub obiektem docelowym upuszczania. |
prezentacji |
Stały. |
Użytkownicy mogą zmieniać widoki, grupować, sortować według kolumn i zmieniać szerokość i kolejność kolumn. |
Aby zdecydować, czy jest to właściwa kontrola, rozważ następujące pytania:
- Czy lista przedstawia dane, a nie opcje programu? Jeśli nie, rozważ użycie pola listy.
- Czy użytkownicy muszą zmieniać widoki, grupować, sortować według kolumn lub zmieniać szerokość i kolejność kolumn? Jeśli nie, zamiast tego użyj pola listy.
- Czy kontrolka musi być źródłem przeciągania, czy obiektem docelowym upuszczania? Jeśli tak, użyj widoku listy.
- Czy elementy listy muszą zostać skopiowane do schowka lub wklejone? Jeśli tak, użyj widoku listy.
Widoki listy pól wyboru
- Czy kontrolka służy do wybierania zera lub większej liczby elementów z listy danych? Aby wybrać jeden element, zamiast tego użyj pojedynczego zaznaczenia.
- Czy wybór wielokrotny jest niezbędny do zadania, czy często używany? Jeśli tak, użyj widoku listy pól wyboru, aby dokonać wielokrotnego wyboru, zwłaszcza jeśli użytkownicy docelowi nie są zaawansowani. Jeśli tak nie jest, użyj standardowego widoku listy wielokrotnego wyboru, jeśli pola wyboru będą zwracać zbyt dużą uwagę na wybór wielokrotny lub spowodować zbyt dużą ilość bałaganu ekranu.
- Czy stabilność wielokrotnego wyboru jest ważna? Jeśli tak, użyj listy pól wyboru , konstruktora listy lub dodaj/usuń listę, ponieważ kliknięcie zmienia tylko jeden element naraz. Dzięki standardowej liście wielokrotnej zaznaczenia bardzo łatwo jest wyczyścić wszystkie wybory nawet przypadkowo.
Nuta
Czasami kontrolka, która wygląda jak widok listy, jest implementowana przy użyciu pola listy i na odwrót. W takich przypadkach zastosuj wytyczne oparte na użyciu, a nie na implementacji.
Wzorce użycia
Wszystkie widoki obsługują wybór pojedynczy, w którym użytkownicy mogą wybrać tylko jeden element jednocześnie, a także wybór wielokrotny, w którym użytkownicy mogą wybrać dowolną liczbę elementów, w tym brak. Widoki listy obsługują tryb wyboru rozszerzonego , gdzie można rozszerzyć zaznaczenie, przeciągając lub naciskając Shift+kliknij lub Ctrl+kliknij, aby wybrać grupy wartości ciągłych lub nieprzyległych, odpowiednio. W przeciwieństwie do pól listy, nie obsługują one wielu trybów zaznaczenia, gdzie kliknięcie dowolnego elementu przełącza jego stan zaznaczenia niezależnie od Shift i Ctrl.
Widok listy standardowej
Kontrolka widoku listy obsługuje pięć widoków standardowych:
Zwyczaj | Przykład |
---|---|
kafelka każdy element jest wyświetlany jako średnia ikona z etykietą i opcjonalnymi szczegółami po prawej stronie. |
![]() Widok kafelka zawiera średnie ikony z etykietami i opcjonalnymi szczegółami po prawej stronie. |
duża ikona każdy element jest wyświetlany jako dodatkowa duża, duża lub średnia ikona z etykietą poniżej. |
![]() Widok duży ikona przedstawia każdy element jako dużą ikonę z etykietą poniżej. |
Mała ikona każdy element jest wyświetlany jako mała ikona z etykietą po prawej stronie. |
![]() Mały widok Ikona pokazuje każdy element jako małą ikonę z etykietą po prawej stronie. |
listy każdy element jest wyświetlany jako mała ikona z etykietą po prawej stronie. |
w trybie listy ten widok porządkuje elementy w kolumnach i używa poziomego paska przewijania. natomiast tryby wyświetlania ikon porządkują elementy w wierszach i używają pionowego paska przewijania. ![]() Tryb listy pokazuje każdy element jako małą ikonę z etykietą po prawej stronie. |
szczegóły każdy element jest wyświetlany jako wiersz w formacie tabelarycznym. Kolumna po lewej stronie zawiera zarówno opcjonalną ikonę elementu, jak i etykietę, a kolejne kolumny zawierają dodatkowe informacje, takie jak właściwości elementu. |
ponadto można dodawać lub usuwać kolumny oraz zmieniać kolejność i zmieniać ich rozmiar. wiersze można grupować, sortować według kolumn. ![]() Widok szczegółów przedstawia każdy element jako wiersz w formacie tabeli. |
Odmiany widoku listy
Etykieta | Wartość |
---|---|
wyboru kolumn Widoki listy czasami mają tak wiele kolumn, że nie jest to praktyczne, aby pokazać je wszystkie. W takim przypadku najlepszym rozwiązaniem jest wyświetlanie domyślnie najbardziej przydatnych kolumn i umożliwienie użytkownikom dodawania lub usuwania kolumn zgodnie z potrzebami. |
![]() Kliknięcie prawym przyciskiem myszy nagłówka kolumny powoduje wyświetlenie menu kontekstowego, które umożliwia użytkownikom dodawanie lub usuwanie kolumn. ![]() Kliknięcie pozycji Więcej w menu kontekstowym nagłówka kolumny powoduje wyświetlenie okna dialogowego Wybieranie kolumn, co pozwala użytkownikom dodawać lub usuwać kolumny, a także zmienić ich kolejność. |
Widok listy pól wyboru Zezwalaj użytkownikom na wybieranie wielu elementów. |
Widoki listy wielokrotnego wyboru mają dokładnie taki sam wygląd jak widoki listy pojedynczej zaznaczenia, dlatego nie ma żadnych wskazówek wizualnych, że obsługują one wybór wielokrotny. Widok listy pól wyboru może służyć do wyraźnego wskazania, że istnieje wiele opcji wyboru. W związku z tym ten wzorzec powinien być używany w przypadku zadań, w których wybór wielokrotny jest niezbędny lub często używany.![]() W tym przykładzie widok Mały ikona używa pól wyboru, ponieważ wiele zaznaczeń jest niezbędne dla zadania. |
widoki listy z grupami Organizowanie danych w grupach. |
Chociaż widoki Szczegóły często obsługują sortowanie danych według dowolnej kolumny, widoki listy dodatkowo umożliwiają użytkownikom organizowanie elementów w grupach. Oto niektóre korzyści wynikające z grupowania:
![]() W tym przykładzie w Centrum powitalnym systemu Windows są wyświetlane pogrupowane elementy w widoku listy. |
Wytyczne
Prezentacja
Sortuj elementy listy w kolejności logicznej. Sortuj nazwy w kolejności alfabetycznej, liczby w kolejności liczbowej i daty w kolejności chronologicznej.
W razie potrzeby zezwól użytkownikom na zmianę kolejności sortowania. Sortowanie użytkowników jest ważne, jeśli lista zawiera wiele elementów lub jeśli istnieją scenariusze, w których elementy są znajdowane efektywniej przy użyciu kolejności sortowania innej niż domyślna.
Użyj atrybutu Always Show Selection, aby użytkownicy mogli łatwo określić wybrany element, nawet jeśli kontrolka nie ma fokusu.
Unikaj prezentowania pustych widoków listy. Jeśli użytkownicy tworzą listę, zainicjuj listę za pomocą instrukcji lub przykładowych elementów, których użytkownicy mogą potrzebować.
W tym przykładzie widok listy wyszukiwania początkowo przedstawia instrukcje.
Jeśli użytkownicy mogą zmieniać widoki, grupować, sortować według kolumn lub zmieniać kolumny oraz ich szerokość i kolejność, ustaw te ustawienia jako trwałe, aby zaczęły obowiązywać przy następnym wyświetleniu widoku listy. Utrwały je w widoku dla poszczególnych użytkowników.
Interakcja
Użyj pojedynczego kliknięcia, aby wybrać element listy wskazywany przez użytkownika. Wyjątek: W przypadku wzorca listy łączy poleceń kliknięcie jedno kliknięcie wybiera element i zamyka okno lub przechodzi do następnej strony.
Rozważ zapewnienie zachowania dwukrotnego kliknięcia. Dwukrotne kliknięcie powinno mieć taki sam efekt jak wybranie elementu i wykonanie jego domyślnego polecenia.
Zachowanie dwukrotnego kliknięcia jest nadmiarowe. Zawsze powinien istnieć przycisk polecenia lub polecenie menu kontekstowego, które ma taki sam efekt.
Jeśli element listy wymaga dalszego wyjaśnienia, podać wyjaśnienie w. Używaj pełnych zdań i kończenia interpunkcji.
etykietki informacji klawiatury
W tym przykładzie etykietka informacyjna służy do dostarczania dalszych informacji.
Podaj menu kontekstowe odpowiednich poleceń. Takie polecenia obejmują wycinanie, kopiowanie, wklejanie, usuwanie lub usuwanie, zmienianie nazwy i właściwości.
Jeśli użytkownicy mogą zmienić kolejność sortowania i grupowanie, podaj menu kontekstowe Sortuj według i Grupuj według. Pierwsze kliknięcie nazwy kolumny sortuje lub grupuje listę w kolejności rosnącej dla tej kolumny, a drugie kliknięcie sortuje lub grupy w kolejności malejącej. Użyj poprzedniego zamówienia (z innej kolumny) jako klucza pomocniczego.
W tym przykładzie menu kontekstowe Sortuj według zmienia kolejność sortowania. Kliknięcie pozycji Nazwa posortuje według nazwy w kolejności rosnącej. Kliknięcie przycisku Nazwa ponownie sortuje według nazwy w kolejności malejącej.
Udostępnij nagłówek kolumny widoku listy za pomocą klawiatury.
- Deweloperzy: Możesz to zrobić, ustawiając fokus na kontrolce nagłówka kolumny. Ta funkcja jest nowsza w systemie Windows Vista.
Podczas wyłączania widoku listy wyłącz również wszystkie skojarzone etykiety i przyciski poleceń.
Unikaj przewijania poziomego. Tryb listy używa przewijania poziomego. Ten tryb jest zwykle najbardziej kompaktowy, ale przewijanie w poziomie jest zwykle trudniejsze do użycia niż przewijanie w pionie. Rozważ użycie widoku Mała ikona zamiast tego, jeśli kompaktowanie nie jest ważne. Jednak tryb listy jest dobrym wyborem, gdy istnieje wiele elementów posortowanych alfabetycznie i wystarczająca ilość miejsca na ekranie dla szerokiej kontrolki.
dopuszczalne :
W tym przykładzie używany jest tryb listy, ponieważ istnieje wiele elementów i mnóstwo dostępnego miejsca na ekranie dla szerokiej kontrolki.
Listy wielokrotnego wyboru
Rozważ wyświetlenie liczby wybranych elementów poniżej listy, zwłaszcza jeśli użytkownicy mogą wybrać kilka elementów. Te informacje nie tylko zawierają przydatne opinie, ale także wyraźnie wskazują, że widok listy obsługuje wybór wielokrotny.
W tym przykładzie liczba wybranych elementów jest wyświetlana poniżej listy.
Alternatywnie zamiast liczby wybranych elementów można nadać inne metryki wyboru, które mogą być bardziej znaczące, takie jak zasoby wymagane do wyboru.
zrzut ekranu
miejsca na dysku
W tym przykładzie miejsce na dysku wymagane do zainstalowania składników jest bardziej znaczące niż liczba wybranych składników.
W przypadku widoków listy pól wyboru, jeśli istnieje potencjalnie wiele elementów i wybranie lub wyczyszczenie wszystkich z nich jest prawdopodobne, dodaj przycisk Zaznacz wszystko i Wyczyść wszystkie przyciski poleceń.
Użyj pól wyboru stanu mieszanego, aby wskazać częściowe zaznaczenie elementów w kontenerze. Stan mieszany nie jest używany jako trzeci stan dla pojedynczego elementu.
Zmienianie widoków
Jeśli użytkownicy mogą zmieniać widoki:
Domyślnie wybierz najbardziej wygodny widok. Wszelkie zmiany wprowadzone przez użytkowników powinny być trwałe w widoku dla poszczególnych użytkowników.
Zmień widok przy użyciu przycisku podziału, przycisku menu lub listy rozwijanej. Zawsze, gdy jest to praktyczne, użyj przycisku podziału na pasku narzędzi i zmień etykietę przycisku, aby odzwierciedlić bieżący widok.
W tym przykładzie do zmiany widoków służy przycisk podziału na pasku narzędzi.
podaj menu kontekstowe Widok.
W tym przykładzie do zmiany widoków jest używane menu kontekstowe Widok.
Widoki szczegółów
rozważ użycie widoku kafelków w celu zwiększenia czytelności.
dopuszczalne :
W tym przykładzie jest za dużo danych, a okno, lista i kolumny są zbyt małe, dzięki czemu elementy listy są trudne do odczytania.
lepiej:
W tym przykładzie widok Kafelek wyświetla dane bez obcinania.
Wybierz domyślne szerokości kolumn odpowiednie dla najdłuższych danych. Widoki listy automatycznie obcinają długie dane wielokropkiem, więc szerokość kolumny jest odpowiednia, jeśli domyślnie jest wyświetlanych kilka wielokropków. Użytkownicy mogą zmieniać rozmiar kolumn, ale preferują inne rozwiązania:
- Rozmiar każdej szerokości kolumny w celu dopasowania ich do danych.
- Dopasuj szerokość kontrolki, aby dopasować kolumny oraz dowolne prawdopodobne paski przewijania.
- W razie potrzeby użyj przewijania poziomego.
- Mają obcięte dane tylko dla elementów o nieparzysty rozmiarze lub jako ostateczność.
Jeśli dane o normalnym rozmiarze muszą być domyślnie obcięte, zmień rozmiar okna i widoku listy. Uwzględnij dodatkowe 30 procent (do 200 procent dla krótszego tekstu) dla dowolnego tekstu (ale nie liczb), które zostaną zlokalizowane.
niepoprawne:
W tym przykładzie większość danych jest obcięta. Wiele wielokropka wyraźnie wskazuje, że szerokość kontrolki i kolumny jest zbyt mała dla danych.
niepoprawne:
W tym przykładzie dane są obcięte bez powodu.
Wybierz odpowiednią domyślną kolejność kolumn. Ogólnie rzecz biorąc, porządkuj kolumny w następujący sposób:
- Najpierw nazwa elementu lub identyfikacja danych.
- Następnie inne dane przydatne podczas różnicowania elementów listy.
- Następnie najbardziej przydatne (najlepiej krótkie lub stałe długości) dane.
- Następnie mniej przydatne (preferowane krótkie lub stałe długości) dane.
- Ostatnie, długie dane o zmiennej długości.
Długie, zmienne dane długości są umieszczane w ostatnich kolumnach, aby zmniejszyć potrzebę przewijania w poziomie. W tych kategoriach umieść powiązane informacje razem w sekwencji logicznej.
W razie potrzeby zezwalaj użytkownikom na dodawanie i usuwanie kolumn, a także zmienianie kolejności. Wyświetl domyślnie najbardziej przydatne kolumny. Jest to osiągane za pomocą atrybutu Przeciągnij i upuść nagłówek.
Wybierz wyrównanie odpowiednie dla danych. Użyj następujących reguł:
- Wyrównaj liczby, waluty i godziny do prawej.
- Tekst wyrównany do lewej, identyfikatory (nawet jeśli liczbowe) i daty.
W przypadku nagłówków kolumn sortowalnych pierwsze kliknięcie nagłówka sortuje listę w kolejności rosnącej dla kolumny, a drugie kliknięcie sortuje w kolejności malejącej. Użyj poprzedniej kolejności sortowania (z innej kolumny) jako pomocniczego klucza sortowania.
danych
W tym przykładzie najpierw kliknięliśmy kolumnę Nazwa, a następnie kolumnę Typ. W związku z tym typ w kolejności rosnącej jest podstawowym kluczem sortowania, a nazwa w kolejności rosnącej jest pomocniczym.
Użyj atrybutu Wybierz pełny wiersz, aby użytkownicy mogli łatwo określić wybrane elementy we wszystkich kolumnach.
Nie używaj nagłówka kolumny sortowalnej, chyba że dane można sortować.
Nie używaj nagłówka kolumny, jeśli istnieje tylko jedna kolumna i nie ma potrzeby odwrotnego sortowania. Zamiast tego użyj etykiety, aby zidentyfikować dane.
niepoprawne:
poprawna:
W poprawnym przykładzie etykieta jest używana zamiast nagłówka kolumny.
Zalecane ustalanie rozmiaru i odstępy
Zalecane określanie rozmiaru i odstępów dla widoków listy.
- Wybierz wysokość widoku listy, która wyświetla całkowitą liczbę elementów. Unikaj obcinania elementów w pionie.
- Wybierz rozmiar widoku listy, który eliminuje niepotrzebne przewijanie pionowe i poziome we wszystkich obsługiwanych widokach. Widoki listy powinny zawierać od 3 do 20 elementów. Rozważ, aby widok listy był nieco większy, jeśli w ten sposób eliminuje pasek przewijania. Listy z potencjalnie wieloma elementami powinny wyświetlać co najmniej pięć elementów, aby ułatwić przewijanie, wyświetlając jednocześnie więcej elementów i ułatwiając pozycjonowanie paska przewijania.
- Jeśli użytkownicy korzystają z większego widoku listy, zmień rozmiar widoku listy i jego okna nadrzędnego. Dzięki temu użytkownicy mogą dostosować rozmiar widoku listy zgodnie z potrzebami. Jednak widoki listy z możliwością zmiany rozmiaru powinny być wyświetlane nie mniej niż trzy elementy.
Etykiety
Etykiety kontrolek
Wszystkie widoki listy wymagają etykiet. Napisz etykietę jako wyraz lub frazę, a nie jako zdanie, kończąc na dwukropku przy użyciu tekstu statycznego.
Przypisz unikatowy klucz dostępu dla każdej etykiety. Aby uzyskać wskazówki, zobacz Klawiatura.
Umieść etykietę nad kontrolką i wyrównaj etykietę do lewej krawędzi kontrolki.
W przypadku widoków listy wielokrotnego wyboru należy napisać etykietę, która wyraźnie wskazuje, że istnieje możliwość wyboru wielokrotnego. Etykiety widoku listy pól wyboru mogą być mniej jawne.
poprawna:
W tym przykładzie etykieta wyraźnie wskazuje, że istnieje możliwość wyboru wielokrotnego.
niepoprawne:
W tym przykładzie etykieta nie zawiera informacji na temat wielokrotnego wyboru.
dopuszczalne :
W tym przykładzie pola wyboru wyraźnie wskazują, że istnieje możliwość wielokrotnego zaznaczenia, więc etykieta nie musi być jawna.
Możesz określić jednostki (sekundy, połączenia itd.) w nawiasach po etykiecie.
Etykiety nagłówków
- Zachowaj krótkie etykiety nagłówków (trzy wyrazy lub mniej).
- Użyj pojedynczej frazy nounowej lub ciołowej bez końcowej interpunkcji.
- Użyj wielkich liter w stylu zdania.
- Wyrównaj nagłówek tak samo jak dane.
Etykiety grup
- Użyj następujących etykiet grup dla kolekcji wysokiego poziomu:
- Nazwy: użyj pierwszej litery nazw lub zakresów liter.
- Rozmiary: nieokreślone, 0 KB, 0–10 KB, 10–100 KB, 100 KB – 1 MB, 1–16 MB, 16–128 MB
- Daty: Dzisiaj, Wczoraj, W zeszłym tygodniu, Na początku tego roku i Dawno temu.
- W przeciwnym razie etykiety grup używają dokładnego tekstu grupowanych danych, w tym wielkości liter i interpunkcji.
Tekst danych
Tekst instruktażowy
- Jeśli musisz dodać tekst instrukcji dotyczący widoku listy, 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.
Dokumentacja
Podczas odwoływania się do widoków listy:
- Użyj dokładnego tekstu etykiety, w tym jego wielkości liter, ale nie uwzględnij podkreślenia lub dwukropka klucza dostępu i dołącz listę wyrazów. Nie należy odwoływać się do pola listy jako pola listy, widoku listy ani pola.
- W przypadku danych listy użyj dokładnego tekstu danych, w tym jego wielkości liter.
- Zapoznaj się z widokami listy jako widokami listy tylko w programowaniu i inną dokumentacją techniczną. Wszędzie indziej użyj listy.
- Aby opisać interakcję użytkownika, użyj opcji wybierz dane, a następnie kliknij nagłówki.
- 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 Programy i usługi wybierz pozycję Udostępnianie plików i drukarek.
W przypadku odwoływania się do pól wyboru w widoku listy:
- Użyj dokładnego tekstu etykiety, w tym jego wielkości liter i dołącz pole wyboru wyrazu. Nie dołączaj podkreślenia klucza dostępu.
- 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.