Etykietki narzędzi i etykietki informacji

Artykuł
03/12/2025

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.

Etykietka narzędzia to małe okno podręczne, które oznacza wskazywaną kontrolkę bez etykiet, na przykład kontrolki paska narzędzi bez etykiet lub przycisków poleceń.

Zrzut ekranu przedstawiający przycisk drukowania z wyświetloną etykietą narzędzia

Typowa etykietka narzędzia dla przycisku paska narzędzi.

Ponieważ etykietki narzędzi okazały się tak przydatne, istnieje powiązana kontrolka o nazwie infotips, która udostępnia bardziej opisowy tekst niż jest to możliwe za pomocą etykietek narzędzi.

Etykietka informacyjna to małe okno podręczne, które zwięźle opisuje wskazywany obiekt, na przykład opisy kontrolek paska narzędzi, ikony, grafiki, linki, obiekty Eksploratora Windows, elementy menu Start i przyciski paska zadań. Etykietki informacji są formą progresywnych mechanizmów kontroli ujawniania, eliminując potrzebę zawsze posiadania tekstu opisowego na ekranie.

zrzut ekranu przedstawiający przycisk udostępniania z etykietki informacji

Typowa etykietka informacyjna.

Na potrzeby tego artykułu etykietki narzędzi i etykietki informacji są określane zbiorczo jako porady.

Porady ułatwiają użytkownikom zrozumienie nieznanych lub nieznanych obiektów, które nie zostały opisane bezpośrednio w interfejsie użytkownika. Są one wyświetlane automatycznie, gdy użytkownicy najeżdżają kursorem na obiekt i usuwają po kliknięciu kontrolki lub przeniesieniu myszy lub przekroczeniu limitu czasu porady.

Deweloperzy: Nie ma kontrolki etykietki informacji; Etykietki informacji są implementowane za pomocą kontrolki etykietki narzędzia. Rozróżnienie dotyczy użycia, a nie implementacji.

Nuta

Wskazówki dotyczące dymków, paskach narzędzi i Pomoc są prezentowane w oddzielnych artykułach.

Czy jest to właściwa kontrola?

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

Czy informacje są wyświetlane na podstawie wskaźnika myszy? Jeśli nie, użyj innej kontrolki. Wyświetlanie porad tylko w wyniku interakcji użytkownika nigdy nie wyświetla ich samodzielnie. Natomiast balony mogą być wyświetlane samodzielnie (podobnie jak w przypadku powiadomień), dzięki czemu mają ogon, który identyfikuje swoje źródło.
Czy kontrolka ma etykietę tekstową? Jeśli nie, użyj etykietki narzędzia, aby podać etykietkę. Należy pamiętać, że większość kontrolek powinna być oznaczona etykietą i dlatego nie ma etykietek narzędzi. Kontrolki paska narzędzi i przyciski poleceń z etykietami graficznymi powinny zawierać etykietki narzędzi.
Czy obiekt korzysta z dodatkowego opisu lub dalszych informacji? Jeśli tak, użyj etykietki informacji. Jednak tekst musi być uzupełnieniem, który nie jest niezbędny dla podstawowych zadań. Jeśli jest to niezbędne, umieść go bezpośrednio w interfejsie użytkownika, aby użytkownicy nie musieli ich odnajdywać ani szukać.
Czy informacje uzupełniające są błędem, ostrzeżeniem lub stanem? Jeśli tak, użyj innego elementu interfejsu użytkownika, takiego jak dymek, komunikatu o błędzielub paska stanu . Etykietki informacji o obszarze powiadomień są wyjątkiem, ponieważ mogą służyć do wyświetlania informacji o stanie.
Czy użytkownicy muszą wchodzić w interakcję z poradą? Jeśli tak, użyj innej kontrolki, takiej jak balon. Użytkownicy nie mogą wchodzić w interakcje z poradami, ponieważ przeniesienie myszy sprawia, że znikną.
Czy użytkownicy muszą wydrukować informacje uzupełniające? Jeśli tak, użyj innej kontrolki, takiej jak pole statycznego komentarza. Można jednak również użyć etykietek informacji, aby zapewnić bardziej bezpośredni dostęp do tych informacji.

W tym przykładzie pole statycznego komentarza w programie Microsoft Word umożliwia użytkownikom drukowanie komentarzy.
Czy kontekst taki, że użytkownicy mogą znaleźć porady irytujące lub rozpraszające uwagę? Jeśli tak, rozważ użycie innego rozwiązania, w tym nic nie robi. Jeśli używasz porad w takich kontekstach, zezwól użytkownikom na ich wyłączenie.

Odpowiednie wskazówki usprawniają komunikację z użytkownikiem. Nigdy nie używaj wskazówek jako zamiennika dobrego projektu. Jeśli grafika, przycisk lub inny obiekt wymaga od użytkowników sprawdzenia porady, aby ją zrozumieć, projekt jest nieprawidłowy. Napraw projekt.

Pojęcia dotyczące projektowania

Porady to zaawansowany sposób upraszczania interfejsu użytkownika. Udostępniają informacje potrzebne użytkownikom, gdy ich potrzebują, przy minimalnym nakładzie pracy. Porady mogą pomóc w bardziej efektywnym używaniu miejsca na ekranie i zmniejszeniu bałaganu ekranu. Jednak słabo zaprojektowane wskazówki mogą być irytujące, rozpraszające, niepomocne, przytłaczające lub w ten sposób. Poniższe koncepcje projektowe mają na celu pokazanie różnicy.

Odnajdywania

Porady są wyświetlane automatycznie, gdy użytkownicy najeżdżają kursorem na obiekt przez pewien czas. Ten mechanizm opóźnienia czasu sprawia, że wskazówki są bardzo wygodne, ale zmniejsza również ich możliwości odnajdywania.

Z biegiem czasu użytkownicy dowiedzą się, że niektóre standardowe obiekty, takie jak przyciski paska narzędzi, przyciski graficzne, elementy menu Start i ikony obszaru powiadomień, mają porady, dzięki czemu można użyć ich możliwości odnajdywania.

Odnajdywanie wskazówek w nietypowych miejscach zajmuje użytkownikom dłużej. Nie ma żadnych wskazówek wizualnych, takich jak zmiana punktu gorącego lub wskaźnika, która wskazuje, że obiekt ma wskazówkę. Co gorsza, niektórzy użytkownicy bardzo poruszają się myszą, zwłaszcza gdy uczą się nawigować po interfejsie użytkownika. Użytkownicy muszą wiedzieć, że obiekt ma wskazówkę — za pośrednictwem wcześniejszego środowiska lub eksperymentowania.

Możliwość odnajdywania można poprawić, korzystając ze wskazówek spójnych, co z kolei sprzyja przewidywalności. Jeśli podasz porady dotyczące niektórych obiektów, należy podać je dla wszystkich podobnych obiektów, dla których użytkownicy mogą chcieć uzyskać dodatkowe informacje. Czasami może to być trudne, ponieważ musisz również upewnić się, że wskazówki są pomocne i nie są oczywiste.

W przypadku zapewnienia możliwych do odnalezienia, konsekwentnie pomocnych wskazówek okaże się problemem, rozważ alternatywne projekty, takie jak etykiety kontrolek objaśniających lub tekst uzupełniający w miejscu.

Odpowiednie informacje

Informacje odpowiednie dla wskazówek mają następujące cechy:

Zwięzły. Wyskakujące okna używane przez porady doskonale nadają się do krótkich zdań i fragmentów zdań, a także tekstu sformatowanego. Duże, niesformatowane bloki tekstu są trudne do odczytania i przytłaczające.
Pomocny. Tekst porady musi być informacyjny. Nie powinno być oczywiste lub po prostu powtarzać to, co jest już na ekranie.
Dodatkowe. Ponieważ tekst porad nie zawsze jest widoczny, powinny to być dodatkowe informacje, których użytkownicy nie muszą odczytywać. Ważne informacje powinny być przekazywane przy użyciu etykiet kontrolek objaśniających lub tekstu uzupełniającego w miejscu.
Statyczny. Użytkownicy nie oczekują, aby porady zmieniły się z jednego wystąpienia na następne, więc prawdopodobnie nie zauważą zmian w zawartości dynamicznej, takich jak informacje o stanie. Porady dotyczące ikon obszaru powiadomień są godnym uwagi wyjątkiem: Użytkownicy są bardziej skłonni do odnajdywania zmian w informacjach o poradach, ponieważ te ikony komunikują się głównie ze stanem.

Odpowiednie limity czasu

Odpowiednie automatyczne wyświetlanie i usuwanie wskazówek ma kluczowe znaczenie dla celu, w jakim użytkownicy kontrolują środowisko interfejsu użytkownika. Porady mają trzy wartości limitu czasu:

Inicjał. Czas, w którym wskaźnik musi pozostać nieruchomy, aby pojawić się wskazówka. Domyślny czas to 0,5 sekundy.
Ponownie pokazuj. Czas, w którym wskaźnik musi pozostać nieruchomy, ponieważ wskaźnik przenosi się z jednego celu do drugiego. Domyślny czas to 0,1 sekundy.
Usunięcie. Czas, po którym porada zostanie automatycznie usunięta. Domyślny czas to 5 sekund.

Zbyt krótkie wartości początkowe i reshow powoduje denerwujące, destrukcyjne środowisko, ponieważ często są one wyświetlane przypadkowo, podczas gdy zbyt długie wyniki w poradach czują się nieodpowiadające lub nie są odnajdywane. Domyślny czas usuwania działa dobrze w przypadku krótkiego tekstu porad, jak w etykietkach narzędzi. Etykietki informacji mają dłuższy tekst, więc potrzebują dłuższego czasu wyświetlania.

Odpowiednie rozmieszczenie

Porady należy umieścić w pobliżu obiektu, który jest zatrzymany, zwykle na ogonie lub głowie wskaźnika, jeśli to możliwe. Jednak nigdy nie należy umieszczać ich w sposób, który zakłóca działanie użytkownika, zaciemniając obiekt zainteresowania. Zapobieganie temu problemowi może wymagać odejścia końcówki od wskaźnika, ale sąsiadującego z obiektem. Nie jest to problem, o ile relacja między obiektem a jego poradą jest jasna. Upewnij się, że użytkownicy nie przenoszą wskaźnika, aby uzyskać wskazówki dotyczące programu, aby odejść.

Dostępność

Porady mają nietypowy wpływ na ułatwienia dostępu. Gdy są one zwykle wyzwalane przez umieszczenie wskaźnika myszy nad obiektem, wskazówki są obsługiwane przez czytniki zawartości ekranu dla kontrolek z dostępem za pomocą klawiatury. W przypadku użycia odpowiedniego do zwięzłych, przydatnych, statycznych, uzupełniających informacji porady mogą poprawić ogólną dostępność. W rzeczywistości wzorzec porad tekstowych alternatywnych jest preferowanym sposobem udostępniania grafiki. Jednak w przypadku niewłaściwego użycia szkodzą ułatwieniom dostępu, utrudniając uzyskanie ważnych lub dynamicznych informacji.

Podaj więcej niż jeden sposób uzyskiwania dostępu do kontrolki, jeśli ta kontrolka wymaga porady, która nie ma dostępu za pomocą klawiatury.

zrzut ekranu przycisku drukowania z etykietkami narzędzi

W tym przykładzie użytkownicy mogą drukować przy użyciu przycisku paska narzędzi (który nie jest dostępny za pomocą klawiatury) lub skrótu klawiaturowego Drukuj.

Jeśli robisz tylko jedną rzecz...

Projektuj możliwe do odnalezienia wskazówki, które wyświetlają zwięzłe, przydatne, statyczne, uzupełniające informacje w odpowiednim miejscu w odpowiednim czasie.

Wzorce użycia

Porady mają kilka wzorców użycia:

Zwyczaj	Przykład
etykietki narzędzi wyświetla etykietę nieoznaczonej kontrolki lub glif.	Ponieważ te porady służą jako etykiety, ich tekst jest zgodny z wytycznymi dotyczącymi etykiet dla podstawowej kontrolki. w tym przykładzie etykietka narzędzia zawiera etykietę polecenia. w tych przykładach przyciski graficzne etykietek narzędzi. W tym przykładzie etykietka narzędzia oznacza glif.
etykietki informacji podaj dodatkowy opis lub wyjaśnienie obiektu lub kontrolki.	Użyj etykietek informacji, aby opisać lub wyjaśnić obiekty i kontrolki, takie jak kontrolki paska narzędzi, ikony (w tym nakładki ikon), linki, karty , progresywne kontrolki ujawnianiai kontrolki niestandardowe. W tych przykładach etykietki informacyjne zawierają dodatkowe informacje o kontrolkach i obiektach.
etykietki informacji tekstowych alternatywnych opis grafiki dotyczącej ułatwień dostępu.	Ten wzorzec dotyczy głównie użytkowników, którzy mają jakąś formę upośledzenia wzroku i mogą używać czytnika zawartości ekranu. W tym przykładzie etykietka informacyjna opisuje grafikę menu Start.
Thumbnails wyświetla mały obraz elementu.	Miniatury dają łatwo rozpoznawalną graficzną reprezentację okna lub dokumentu. w tym przykładzie pasek zadań systemu Windows zawiera wskazówki dotyczące miniatur dla jego elementów. W tym przykładzie galeria zdjęć systemu Windows zawiera wskazówki dotyczące miniatur dla swoich elementów.
etykietki informacji szczegółowych wyświetlić szczegółowe informacje o obiekcie.	Etykietki informacji to skuteczny sposób wyświetlania szczegółowych informacji o obiekcie lub udostępniania danych. W tych przykładach etykietki informacyjne zawierają szczegółowe informacje o obiekcie lub danych.
etykietki informacji menu Start opisywanie elementu w menu Start.	Menu Start składa się z nazw programów i ważnych miejsc docelowych okien, takich jak dokumenty, obrazy i panel sterowania. Te porady opisują elementy menu Start, zazwyczaj, podając krótki opis programu lub miejsca docelowego, a także podstawowe zadania, które użytkownicy mogą z nim wykonywać. te opisy są również indeksowane przez pole wyszukiwania menu Start, co jeszcze bardziej ułatwia użytkownikom znajdowanie potrzebnych programów. etykietki informacji centrum powitalnego W tym przykładzie w etykietce informacji opisano, co użytkownicy mogą robić z programem w menu Start.
etykietki informacji panelu sterowania opisz kategorię lub zadanie panelu sterowania.	Te porady zawierają dodatkowe informacje ułatwiające użytkownikom wybór odpowiedniej kategorii i elementu panelu sterowania. zrzut ekranu przedstawiający W tym przykładzie etykietka informacyjna opisuje kategorię Panel sterowania konta użytkowników.
etykietki informacji o pełnej nazwie wyświetla pełną nazwę elementu, gdy nazwa jest obcięta lub nie jest w pełni widoczna.	Te wskazówki umożliwiają wyświetlanie elementów w bardziej kompaktowym obszarze, jednocześnie zmniejszając potrzebę przewijania poziomego. jest to szczególnie ważne, gdy długość zawartości jest nieznana, ponieważ jest dynamiczna. w przeciwieństwie do innych wzorców, w przypadku użycia na listach i drzewach te porady są wyświetlane bezpośrednio nad obiektem źródłowym. W tym przykładzie etykietka informacyjna służy do wyświetlania pełnej nazwy elementu po umieszczeniu wskaźnika myszy.
etykietki informacji o stanie wyświetla informacje o stanie ikon obszaru powiadomień.	Zwykle porady powinny być statyczne, ponieważ użytkownicy nie oczekują, że zmienią się z jednego wystąpienia na następne. ikony obszaru powiadomień są wyjątkiem, ponieważ te ikony komunikują się ze stanem i nie ma innego miejsca na ekranie dostępnym dla tekstu stanu. W tych przykładach etykietki informacji zawierają informacje o stanie ikon obszaru powiadomień.

Wytyczne

Limity czasu

Użyj domyślnych limitów czasu początkowego i ponownego pokazu. Wyjątek:
- Miniatury, które nie są nadmiarowe i wyświetlane po stronie skojarzonego obiektu, mogą być wyświetlane natychmiast (bez opóźnień). Jednak użyj domyślnego początkowego limitu czasu dla nadmiarowych miniatur (takich jak duża porada miniatury dla małego obiektu graficznego) lub miniatur, które obejmują skojarzony z nim obiekt.
W przypadku etykietek narzędzi użyj domyślnego limitu czasu usuwania pięciosekundowej porady.
W przypadku etykietek informacji wyłącz limit czasu usuwania porad. Deweloperzy: Ponieważ nie można technicznie wyłączyć limitu czasu usuwania, ustaw ją na największą wartość.
W przypadku ułatwień dostępu, jeśli musisz ustawić wartości limitu czasu na wartość inną niż wartość maksymalna, wprowadź ich wielokrotność SPI_GETMOUSEHOVERTIME i SPI_GETMESSAGEDURATION parametrów systemowych zamiast używać stałych czasów. Dzięki temu limity czasu są dostosowywane do szybkości użytkownika.

Umieszczenie

Unikaj zakrywania obiektu, z którymi użytkownik ma się wyświetlać lub z nim korzystać. Zawsze umieszczaj wskazówkę po stronie obiektu, nawet jeśli wymaga to rozdzielenia między wskaźnikiem a końcówką. Niektóre rozdzielenie nie jest problemem, o ile relacja między obiektem a jego poradą jest jasna.
- Wyjątek: etykietki narzędzi pełnej nazwy używane na listach i drzewach.
niepoprawne:

poprawna:

W poprawnym przykładzie etykietka informacyjna jest umieszczana poza polem Wyszukiwania, mimo że wymaga to odstępu między nim a daszek.

niepoprawne:

poprawna:

W poprawnym przykładzie tekst źródłowy jest znacznie bardziej przydatny niż porada, więc etykietka informacyjna jest dobrze umieszczona poza drogę.
W przypadku kolekcji elementów należy unikać zakrywania następnego obiektu, z którymi użytkownik prawdopodobnie będzie wyświetlał lub wchodził w interakcję. W przypadku elementów rozmieszczonych w poziomie należy unikać umieszczania wskazówek po prawej stronie; w przypadku elementów rozmieszczonych w pionie należy unikać umieszczania poniższych wskazówek.

niepoprawne:

poprawna:

W niepoprawnym przykładzie porada obejmuje obiekt, z którymi użytkownik najprawdopodobniej będzie wchodzić w interakcję.
W przypadku potencjalnie rozpraszających (często dużych) wskazówek upewnij się, że informacje są przydatne dla większości użytkowników. Jeśli tak nie jest, albo sprawić, aby rozpraszające porady były opcjonalne, a nawet wyeliminować je. W przeciwnym razie większość użytkowników będzie musiała przenieść wskaźnik z dala od obiektu docelowego, aby pozbyć się końcówki.