Udostępnij za pośrednictwem


Karty

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.

Karty umożliwiają prezentowanie powiązanych informacji na osobnych stronach z etykietami.

zrzut ekranu przedstawiający pięć kart

Typowy zestaw kart.

Karty są zwykle skojarzone z oknami właściwości (i odwrotnie), ale karty mogą być używane w dowolnym typie okna.

Kontrolki tabulacji reprezentują tabulatory folderów manili używanych do organizowania informacji w szafkach zgłoszenia często spotykanych w Stanach Zjednoczonych. (Foldery Manili nie są używane na całym świecie).

Nuta

Wytyczne dotyczące układu, menu kart , okna dialogowe i okna właściwości są prezentowane w oddzielnych artykułach.

Czy jest to właściwa kontrola?

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

  • Czy kontrolki mogą wygodnie zmieścić się na jednej stronie o rozsądnym rozmiarze? Jeśli tak, użyj jednej strony.
  • Czy jest tylko jedna karta? Jeśli tak, użyj jednej strony.
  • Czy karty są ze sobą powiązane w jakiś oczywisty sposób? Jeśli nie, rozważ podzielenie informacji na oddzielne okna powiązanych informacji.
  • Czy ustawienia są całkowicie niezależne od ustawień na różnych stronach? Czy zmiana ustawienia na jednej stronie wpłynie na ustawienia na innych stronach? Jeśli nie są niezależne, zamiast tego użyj stron zadań lub kreatora.
  • Czy karty są przede wszystkim elementami równorzędnymi, czy istnieje relacja hierarchiczna? Jeśli hierarchiczny, rozważ użycie stopniowego ujawniania lub podrzędnych okien dialogowych w celu wyświetlenia powiązanych informacji.
  • Czy karty są używane do wyświetlania kroków w zadaniu? Możesz użyć "tabulatorów", aby wyświetlić kroki w ramach zadania tylko wtedy, gdy zostaną przedstawione, aby wyglądać jak kroki, i istnieje oczywisty, alternatywny sposób przechodzenia do kroku tekstowego, takiego jak przycisk Dalej. W przeciwnym razie, jeśli kroki są wymagane, użyj stron w przepływie strony lub kreatora . Jeśli kroki są opcjonalne, wyświetl opcjonalne kroki przy użyciu modalnych okien dialogowych .
  • Czy karty różnią się widokami tych samych danych? Jeśli tak, rozważ użycie przycisku podziału lub listy rozwijanej , aby zmienić widoki. Chociaż karty mogą być skutecznie używane do zmieniania widoków, alternatywy są bardziej lekkie.

Wzorce użycia

Karty mają kilka wzorców użycia:

Zwyczaj Przykład
dynamicznej powierzchni okna
podobnie jak paski przewijania, karty mogą służyć do zwiększania obszaru powierzchni okna w celu wyświetlania powiązanych informacji.
W przypadku tego wzorca użycie kart jest koncepcyjnie podobne do umieszczania wszystkich informacji na kartach liniowo na pojedynczej powierzchni przewijanej z etykietami tabulacji jako nagłówkami.
zrzut ekranu przedstawiający pięć kart
W tym przykładzie karty skutecznie zwiększają obszar powierzchni okna.
wiele widoków
Na przykład przyciski podziału lub listy rozwijane, karty mogą służyć do wyświetlania różnych widoków tych samych lub powiązanych informacji.
zrzut ekranu przedstawiający karty projektowania, podziału i podglądu
W tym przykładzie karty zmieniają widoki w dokumencie.
wiele dokumentów
podobnie jak w przypadku wielu okien, karty mogą służyć do wyświetlania różnych dokumentów w jednym oknie.
zrzut ekranu przedstawiający trzy karty dla różnych dokumentów
rysunek kart dla różnych miesięcy
W tych przykładach karty pokazują różne dokumenty w jednym oknie aplikacji.
opcji wyłącznych
podobnie jak przyciski radiowe, karty mogą służyć do prezentowania wielu opcji wyłącznych. w tym wzorcu jest stosowana tylko wybrana karta, a wszystkie inne karty są ignorowane.
zrzut ekranu przedstawiający karty lokalizacji, danych i komunikatów
W tym przykładzie karty są używane (niepoprawnie) jako zamiennik przycisków radiowych.
ten wzorzec nie jest zalecany, ponieważ używa on niestandardowego zachowania. Karty zachowują się jako ustawienie, a nie wyłącznie sposób nawigowania w oknie.

Jeśli robisz tylko jedną rzecz...

Upewnij się, że informacje na kartach są powiązane, ale ustawienia na różnych stronach są niezależne. Wybrana ostatnia karta nie powinna mieć specjalnego znaczenia.

Wytyczne

Ogólne

  • Użyj kart poziomych, jeśli:

    • Okno ma siedem lub mniej kart.
    • Wszystkie karty mieszczą się w jednym wierszu, nawet jeśli interfejs użytkownika jest zlokalizowany.
  • Użyj kart pionowych, jeśli:

    • Okno właściwości ma co najmniej osiem kart.

    • Używanie kart poziomych wymaga więcej niż jednego wiersza.

      zrzut ekranu okna właściwości z jedenaście opcji

      W tym przykładzie karty pionowe mieszczą się w ośmiu lub więcej kartach.

  • Nie zagnieżdżaj kart ani nie łącz kart poziomych z kartami pionowymi. Zamiast tego zmniejsz liczbę kart, użyj tylko kart pionowych lub użyj innej kontrolki, takiej jak lista rozwijana.

  • Nie przewijaj kart poziomych. Przewijanie w poziomie nie jest łatwo wykrywalne. Możesz jednak przewijać karty pionowe.

    niepoprawne:

    zrzut ekranu przedstawiający obcinaną etykietę tabulacji poziomej

    W tym przykładzie karty poziome są przewijane.

  • W przypadku kart w oknie lub okienku z możliwością zmiany rozmiaru umieść pasek przewijania, jeśli jest to konieczne, na stronie, a nie w oknie lub okienku. Karty powinny być zawsze widoczne i nie przewijane z widoku.

    zrzut ekranu przedstawiający pionową stronę karty z paskiem przewijania

    W tym przykładzie strona karty ma pasek przewijania, a nie okienko.

  • Upewnij się, że karty wyglądają jak karty, a nie inny typ kontrolki.

    niepoprawne:

    zrzut ekranu okna z przyciskami kart

    W tym przykładzie te karty wyglądają jak przyciski poleceń.

Interakcja

  • Gdy kontrolki mają zastosowanie tylko do strony, umieść je w obramowanie strony z kartami.
  • Gdy kontrolki są stosowane do całego okna, umieść je poza stroną z kartami.
  • Nie przypisuj efektów do zmieniania kart. Karty muszą być dostępne w dowolnej kolejności. Zmiana bieżącej karty nigdy nie powinna mieć skutków ubocznych, zastosowania ustawień lub wystąpienia komunikatu o błędzie.
  • Nie przypisuj specjalnego znaczenia do ostatniej wybranej karty. Wybór karty służy do nawigacji po wybraniu ostatniej karty użytkownika nie jest ustawieniem.
  • Nie należy wprowadzać ustawień na stronie zależnych od ustawień na innych stronach. Zamiast tego umieść wszystkie ustawienia zależne na tej samej stronie.
  • Jeśli użytkownicy prawdopodobnie zaczną rozpoczynać się od ostatniej karty, ustaw kartę na utrwalone i wybierz ją domyślnie. Utrwał ustawienia dla poszczególnych okien dla poszczególnych użytkowników. W przeciwnym razie wybierz pierwszą stronę domyślnie.

Ikony

  • Nie umieszczaj ikon na kartach. Ikony zwykle dodają niepotrzebny bałagan wizualny, zużywają miejsce na ekranie i często nie poprawiają zrozumienia użytkownika. Dodaj tylko ikony, które ułatwiają zrozumienie, takie jak standardowe symbole.

    niepoprawne:

    zrzut ekranu przedstawiający okno z ikonami na kartach

    W tym przykładzie ikony dodają bałagan wizualny i niewiele robią, aby poprawić zrozumienie użytkownika.

    Wyjątek: Można użyć wyraźnie rozpoznawalnych ikon, jeśli może być za mało miejsca do wyświetlania znaczących etykiet:

    poprawna:

    zrzut ekranu kart z ikonami i skróconymi etykietami

    W tym przykładzie okno jest tak wąskie, aby ikony lepiej komunikowały się z kartami niż etykiety.

  • Nie używaj logo produktów do grafiki tabulacji. Karty nie są przeznaczone do znakowania .

Dynamiczny wzorzec powierzchni okna

  • Nie używaj pasków przewijania na stronach kart. Karty działają podobnie do pasków przewijania w celu zwiększenia efektywnego obszaru okna. Jeden mechanizm powinien być wystarczający.

  • Użyj zwięzłych etykiet kart. Użyj jednego lub dwóch wyrazów, które wyraźnie opisują zawartość strony. Dłuższe etykiety zużywają miejsce na ekranie, zwłaszcza gdy etykiety są zlokalizowane.

  • Użyj określonych, znaczących etykiet kart. Unikaj ogólnych etykiet kart, które mogą być stosowane do dowolnej karty, takiej jak Ogólne, Zaawansowane lub Ustawienia.

  • Jeśli karta nie ma zastosowania do bieżącego kontekstu, a użytkownicy nie oczekują jej, usuń go. Upraszcza to interfejs użytkownika, a użytkownicy nie przegapią tego interfejsu użytkownika.

    niepoprawne:

    zrzut ekranu przedstawiający okno opcji z nazwą karty wygaszone

    W tym przykładzie karta Lokalizacje plików jest niepoprawnie wyłączona, gdy program Microsoft Word jest używany jako edytor poczty e-mail. Zamiast wyłączać tę kartę, należy ją usunąć, ponieważ użytkownicy nie spodziewają się wyświetlania ani zmieniania lokalizacji plików w tym kontekście.

  • Jeśli karta nie ma zastosowania do bieżącego kontekstu, a użytkownicy mogą oczekiwać, że:

    • Wyświetl kartę.
    • Wyłącz kontrolki na stronie.
    • Dołącz tekst wyjaśniający, dlaczego kontrolki są wyłączone.

    Nie wyłączaj karty, ponieważ nie jest to objaśniające i uniemożliwia eksplorację. Użytkownicy, którzy szukają określonej wartości, będą musieli wyszukać wszystkie inne karty.

    zrzut ekranu okna z opcjami karty widoku wygaszone

    W tym przykładzie żadna z opcji Widok nie ma zastosowania w układzie do czytania. Jednak użytkownicy mogą oczekiwać, że będą one stosowane na podstawie etykiety karty, więc strona jest wyświetlana, ale opcje są wyłączone.

Wiele widoków i wzorców dokumentów

  • Użyj nazw widoków lub dokumentów na etykietach kart.
  • Unikaj zbyt długich nazw kart. W razie potrzeby mają maksymalny rozmiar nazwy lub obcinają wyświetlaną etykietę karty przy użyciu wielokropka. Dłuższe etykiety zużywają miejsce na ekranie, zwłaszcza gdy etykiety są zlokalizowane.
  • Jeśli karta nie ma zastosowania do bieżącego kontekstu, usuń kartę.

Wzorzec opcji wyłącznych

  • Nie używaj tego wzorca! Zamiast tego użyj przycisków radiowych lub listy rozwijanej.

    niepoprawne:

    zrzut ekranu przedstawiający okno z dwiema kartami

    W tym przykładzie karty są niepoprawnie używane jako zamiennik przycisków radiowych.

    poprawna:

    zrzut ekranu okna z dwoma przyciskami radiowymi

    W tym przykładzie przyciski radiowe są poprawnie używane.

Etykiety

  • Karty etykiet na podstawie ich wzorca. Używaj nouns, a nie czasowników, bez kończenia interpunkcji. Aby uzyskać więcej informacji, zobacz poprzednie wytyczne dotyczące wzorca.
  • Użyj wielkich liter w stylu zdania.
  • Nie przypisuj klucza dostępu. Karty są dostępne za pomocą skrótów (Ctrl+Tab, Ctrl+Shift+Tab, Ctrl+PgUp, Ctrl+PgDn). Brakuje dobrych opcji klucza dostępu, więc nie przypisywanie kluczy dostępu do kart ułatwia przypisywanie ich do innych kontrolek.

Dokumentacja

Podczas odwoływania się do kart:

  • Użyj dokładnego tekstu etykiety, w tym jego wielkości liter i dołącz kartę wyrazów.
  • Aby opisać interakcję z użytkownikiem, użyj kliknięcia.
  • 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.
  • Ponieważ wiele zastosowań może być niejednoznaczne, zwłaszcza dla odbiorców na całym świecie, użyj samej karty rzeczownika, aby odwołać się tylko do kontrolki tabulacji. W przypadku innych zastosowań wyjaśnij znaczenie deskryptorem: Tab, zatrzymanie karty lub znacznik tabulatora na linijce.

Przykład: w menu narzędzia kliknij pozycję Opcje , a następnie kliknij kartę Widok.