Notatka
Dostęp do tej strony wymaga autoryzacji. Może spróbować zalogować się lub zmienić katalogi.
Dostęp do tej strony wymaga autoryzacji. Możesz spróbować zmienić katalogi.
Uwaga
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.
Paski narzędzi to sposób grupowania poleceń w celu zapewnienia efektywnego dostępu.
Niektóre typowe paski narzędzi.
Używaj pasków narzędzi oprócz pasków menu lub zamiast pasków menu. Paski narzędzi mogą być wydajniejsze niż paski menu, ponieważ są one bezpośrednie (zawsze wyświetlane zamiast wyświetlane po kliknięciu myszą), natychmiastowe (zamiast wymagać dodatkowych danych wejściowych) i zawierają najczęściej używane polecenia (zamiast kompleksowej listy). W przeciwieństwie do pasków menu paski narzędzi nie muszą być wszechstronne ani oczywiste same w sobie — wystarczy, żeby były szybkie, wygodne i wydajne.
Niektóre paski narzędzi można dostosowywać, umożliwiając użytkownikom dodawanie lub usuwanie pasków narzędzi, zmianę ich rozmiaru i lokalizacji, a nawet zmianę ich zawartości. Niektóre paski narzędzi można odłączyć, w wyniku czego powstaje okno palety. Aby uzyskać więcej informacji na temat odmian pasków narzędzi, zobacz Wzorce użycia w tym artykule.
Uwaga
Wytyczne dotyczące menu, przyciskówpoleceń i ikon są prezentowane w oddzielnych artykułach.
Czy jest to właściwy interfejs użytkownika?
Aby zdecydować, rozważ następujące pytania:
- Czy okno jest oknem podstawowym? Paski narzędzi działają dobrze w przypadku okien podstawowych, ale zwykle są przytłaczające w przypadku okien pomocniczych. W przypadku okien pomocniczych użyj przycisków poleceń, przycisków menu i linków .
- Czy istnieje niewielka liczba często używanych poleceń? Paski narzędzi nie mogą obsługiwać tak wielu poleceń, jak paski menu, więc działają najlepiej jako sposób efektywnego uzyskiwania dostępu do niewielkiej liczby często używanych poleceń.
- Czy większość poleceń jest natychmiastowych? Oznacza to, czy są to głównie polecenia, które nie wymagają dodatkowych danych wejściowych? Aby być wydajnym, paski narzędzi muszą mieć bezpośredni i natychmiastowy wygląd. Jeśli tak nie jest, paski menu lepiej nadają się do poleceń wymagających dodatkowych danych wejściowych.
- Czy większość poleceń można prezentować bezpośrednio? Oznacza to, że użytkownicy korzystają z nich za pomocą jednego kliknięcia? Podczas gdy niektóre polecenia można prezentować za pomocą przycisków menu, prezentowanie większości poleceń w ten sposób podważa wydajność paska narzędzi, dzięki czemu pasek menu jest lepszym wyborem.
- Czy polecenia są dobrze reprezentowane przez ikony? Przyciski paska narzędzi są zwykle reprezentowane przez ikony zamiast etykiet tekstowych (chociaż niektóre przyciski paska narzędzi używają obu), natomiast polecenia menu są reprezentowane przez ich tekst. Jeśli ikony poleceń nie są wysokiej jakości i nie są objaśniające, pasek menu może być lepszym wyborem.
Jeśli program ma pasek narzędzi bez paska menu, a większość poleceń jest dostępna pośrednio za pośrednictwem przycisków menu i przycisków podziału, ten pasek narzędzi jest zasadniczo paskiem menu. Zamiast tego zastosuj wzorzec menu paska narzędzi opisany w wytycznych Menus.
Pojęcia dotyczące projektowania
Dobry pasek menu to kompleksowy wykaz wszystkich dostępnych poleceń najwyższego poziomu, natomiast dobry pasek narzędzi zapewnia szybki, wygodny dostęp do często używanych poleceń. Pasek narzędzi nie ma za zadanie uczyć użytkowników — ma po prostu zwiększać ich produktywność. Gdy użytkownicy dowiedzą się, jak uzyskać dostęp do polecenia na pasku narzędzi, rzadko uzyskują dostęp do polecenia na pasku menu. Z tych powodów pasek menu programu i jego pasek narzędzi nie muszą sobie bezpośrednio odpowiadać.
Paski narzędzi a paski menu
Tradycyjnie paski narzędzi różnią się od pasków menu w następujący sposób:
Częstotliwość. Paski narzędzi zawierają tylko najczęściej używane polecenia, natomiast paski menu zawierają wykaz wszystkich dostępnych poleceń najwyższego poziomu w programie.
Bezpośredniość. Kliknięcie polecenia paska narzędzi działa natychmiast, natomiast polecenie menu może wymagać dodatkowych danych wejściowych. Na przykład polecenie Drukuj na pasku menu najpierw wyświetla okno dialogowe Drukowanie, natomiast przycisk Paska narzędzi Drukuj natychmiast drukuje pojedynczą kopię dokumentu do drukarki domyślnej.
W tym przykładzie kliknięcie przycisku Drukuj pasek narzędzi powoduje natychmiastowe wydrukowanie pojedynczej kopii dokumentu na drukarkę domyślną.
Bezpośredniość. Polecenia paska narzędzi są wywoływane jednym kliknięciem, natomiast polecenia paska menu wymagają nawigowania po menu.
Liczba i gęstość. Przestrzeń ekranowa wymagana przez pasek narzędzi jest proporcjonalna do liczby jego poleceń i ta przestrzeń jest zawsze używana, nawet jeśli polecenia nie są używane. W związku z tym paski narzędzi muszą efektywnie używać miejsca. Natomiast polecenia paska menu są zwykle ukryte przed widokiem, a ich hierarchiczna struktura umożliwia dowolną liczbę poleceń.
Rozmiar i prezentacja. Aby spakować wiele poleceń w małej przestrzeni, paski narzędzi zwykle używają poleceń opartych na ikonach (z etykietkami narzędzi), natomiast paski menu używają poleceń tekstowych (z opcjonalnymi ikonami). Chociaż przyciski paska narzędzi mogą mieć standardowe etykiety tekstowe, używają znacznie więcej miejsca.
Przyciski z etykietami paska narzędzi zajmują co najmniej trzy razy więcej miejsca niż przyciski bez etykiet.
Oczywisty. Dobrze zaprojektowane paski narzędzi wymagają ikon, które są w większości objaśniające, ponieważ użytkownicy nie mogą efektywnie znajdować poleceń tylko przy użyciu etykietek narzędzi. Jednak paski narzędzi nadal sprawdzają się dobrze, jeśli kilka rzadziej używanych poleceń nie jest intuicyjnych.
W tym przykładzie najczęściej używane ikony są intuicyjne.
Rozpoznawalne i łatwe do odróżnienia. W przypadku często używanych poleceń użytkownicy pamiętają atrybuty przycisku paska narzędzi, takie jak lokalizacja, kształt i kolor. Za pomocą dobrze zaprojektowanych pasków narzędzi użytkownicy mogą szybko znaleźć polecenia, nawet jeśli nie pamiętają dokładnego symbolu ikony. Z kolei użytkownicy pamiętają położenie często używanych poleceń na pasku menu, ale przy dokonywaniu wyboru kierują się etykietami poleceń.
W przypadku poleceń na pasku narzędzi charakterystyczne położenie, kształt i kolor pomagają w rozpoznawaniu i odróżnianiu ikon.
W przypadku poleceń na pasku menu użytkownicy ostatecznie polegają na ich nazwach.
Sprawność
Biorąc pod uwagę ich cechy, paski narzędzi muszą być zaprojektowane przede wszystkim pod kątem wydajności. Nieefektywny pasek narzędzi po prostu nie ma sensu.
Jeśli robisz tylko jedną rzecz...
Upewnij się, że paski narzędzi zostały zaprojektowane głównie pod kątem wydajności. Skoncentruj paski narzędzi na poleceniach, które są często używane, dają natychmiastowy efekt, są bezpośrednie i łatwo rozpoznawalne.
Ukrywanie pasków menu
Ogólnie rzecz biorąc, paski narzędzi działają świetnie razem z paskami menu: dobre paski narzędzi zapewniają wydajność i dobre paski menu zapewniają kompleksowość. Obecność zarówno pasków menu, jak i pasków narzędzi pozwala każdemu z nich wykorzystać swoje mocne strony bez kompromisów.
Co zaskakujące, ten model nie radzi sobie z prostymi programami. W przypadku programów z tylko kilkoma poleceniami, posiadanie paska menu i paska narzędzi nie ma sensu, ponieważ pasek menu kończy się nadmiarową, nieefektywną wersją paska narzędzi.
Aby wyeliminować tę nadmiarowość, wiele prostych programów w systemie Windows Vista koncentruje się na dostarczaniu poleceń wyłącznie za pośrednictwem paska narzędzi i ukrywaniu paska menu domyślnie. Takie programy obejmują programy Windows Explorer, Windows Internet Explorer, Windows Media Player i Windows Photo Gallery.
Nie jest to mała zmiana. Usunięcie paska menu zasadniczo zmienia charakter pasków narzędzi, ponieważ takie paski narzędzi muszą być kompleksowe i zmieniać się w następujący sposób:
Częstotliwość. Usunięcie paska menu oznacza, że wszystkie polecenia niedostępne bezpośrednio z okna lub jego menu kontekstowych muszą być dostępne z paska narzędzi, niezależnie od ich częstotliwości użycia.
Bezpośredniość. Usunięcie paska menu sprawia, że pasek narzędzi jest jedynym widocznym punktem dostępu dla poleceń, co wymaga, aby pasek narzędzi miał w pełni funkcjonalne wersje. Jeśli na przykład nie ma paska menu, polecenie Drukuj na pasku narzędzi musi wyświetlić okno dialogowe Drukowanie zamiast drukowania natychmiast. (Chociaż użycie przycisku dzielonego jest w tym przypadku doskonałym kompromisem. Zobacz Standardowe menu i przyciski dzielone, aby zapoznać się ze standardowym dzielonym przyciskiem Drukuj.)
W tym przykładzie przycisk Drukuj na pasku narzędzi w programie Galeria fotografii systemu Windows zawiera polecenie Drukuj, które wyświetla okno dialogowe drukowania.
Bezpośredniość. Aby zaoszczędzić miejsce i zapobiec bałaganowi, rzadziej używane polecenia można przenosić do przycisków menu, co czyni je mniej bezpośrednimi.
Paski narzędzi używane do uzupełnienia paska menu są zaprojektowane inaczej niż paski narzędzi przeznaczone do użytku z usuniętym lub ukrytym paskiem menu. Ponieważ nie można zakładać, że użytkownicy będą wyświetlać ukryty pasek menu w celu wykonania jednego polecenia, ukrywanie paska menu powinno być traktowane tak samo jak usunięcie go całkowicie podczas podejmowania decyzji projektowych. (Jeśli domyślnie ukryjesz pasek menu, nie zakładaj, że użytkownicy będą myśleć o wyświetlaniu paska menu, aby znaleźć polecenie, a nawet ustalić, jak go wyświetlić).
Projektowanie paska narzędzi do pracy bez paska menu często wiąże się z pewnymi kompromisami. Ale pod kątem wydajności nie narażaj zbyt wiele. Jeśli ukrywanie paska menu powoduje nieefektywny pasek narzędzi, nie ukrywaj paska menu!
Dostępność klawiatury
Z klawiatury uzyskiwanie dostępu do pasków narzędzi różni się zupełnie od uzyskiwania dostępu do pasków menu. Paski menu otrzymują fokus danych wejściowych, gdy użytkownicy naciskają Alt i tracą fokus danych wejściowych za pomocą Esc. Gdy fokus znajduje się na pasku menu, można się po nim poruszać niezależnie od pozostałej części okna; obsługiwane są wszystkie klawisze strzałek oraz klawisze Home, End i Tab. Z kolei paski narzędzi otrzymują fokus, gdy użytkownicy przechodzą klawiszem Tab przez całą zawartość okna. Ponieważ paski narzędzi są ostatnie w kolejności tabulacji, mogą one wymagać znacznego nakładu pracy, aby aktywować się na zajętej stronie (chyba że użytkownicy wiedzą, aby użyć Shift+Tab, aby przejść do tyłu).
Ułatwienia dostępu przedstawiają tutaj dylemat: podczas gdy paski narzędzi są łatwiejsze dla użytkowników myszy, są one mniej dostępne dla użytkowników klawiatury. Nie jest to problem, jeśli istnieje zarówno pasek menu, jak i pasek narzędzi, ale jeśli pasek menu zostanie usunięty lub ukryty.
Ze względów ułatwień dostępu wolisz zachować pasek menu, a nie całkowicie usunąć go na rzecz paska narzędzi. Jeśli musisz wybrać między usunięciem paska menu a po prostu ukryciem go, wolisz go ukryć.
Wzorce użycia
Paski narzędzi mają kilka wzorców użycia:
| Użycie | Przykład |
|---|---|
|
Podstawowe paski narzędzi pasek narzędzi zaprojektowany do pracy bez paska menu, ukryte lub usunięte. |
podstawowe paski narzędzi muszą równoważyć potrzebę wydajności z kompleksowością, więc działają najlepiej w przypadku prostych programów.
Podstawowy pasek narzędzi z Eksploratora Windows. |
|
Dodatkowe paski narzędzi pasek narzędzi przeznaczony do pracy z paskiem menu. |
Dodatkowe paski narzędzi mogą koncentrować się na wydajności bez kompromisów.
Dodatkowy pasek narzędzi z programu Windows Movie Maker. |
|
Menu paska narzędzi pasek menu zaimplementowany jako pasek narzędzi. |
Paski narzędziowe menu to paski narzędzi składające się głównie z poleceń w przyciskach menu i przyciskach podzielonych, z zaledwie kilkoma poleceniami bezpośrednimi, o ile w ogóle występują.
Menu paska narzędzi w galerii zdjęć systemu Windows. |
|
Dostosowywalne paski narzędzi pasek narzędzi, który można dostosować przez użytkowników. |
dostosowywalne paski narzędzi umożliwiają użytkownikom dodawanie lub usuwanie pasków narzędzi, zmienianie ich rozmiaru i lokalizacji, a nawet zmienianie ich zawartości.
Dostosowywalny pasek narzędzi z programu Microsoft Visual Studio. |
|
Okna palety niemodalne okno dialogowe zawierające zestaw poleceń. |
Okna palet są odłączonymi paskami narzędzi.
Okna palety z programu Windows Paint. |
Paski narzędzi mają następujące style:
| Styl | Przykład |
|---|---|
|
Ikony bez etykiet co najmniej jeden wiersz małych przycisków ikon bez etykiet. |
użyj tego stylu, jeśli istnieje zbyt wiele przycisków do etykietowania lub program jest często używany. w tym stylu programy ze złożonymi funkcjami mogą mieć wiele wierszy, a zatem jest to jedyny styl, który musi być dostosowywalny. w tym stylu niektóre przyciski poleceń można oznaczyć etykietami, jeśli są one często używane.
Pasek narzędzi ikon bez etykiet z poziomu programu WordPad. |
|
Duże ikony bez etykiet pojedynczy wiersz dużych przycisków ikon bez etykiet. |
użyj tego stylu dla prostych narzędzi, które mają łatwo rozpoznawalne ikony i są zwykle uruchamiane w małych oknach.
Duże paski narzędzi ikon bez etykiet z poziomu programu Windows Live Messenger i narzędzia do fragmentowania systemu Windows. |
|
Ikony oznaczone etykietami pojedynczy wiersz małych ikon oznaczonych etykietami. |
użyj tego stylu, jeśli istnieje kilka poleceń lub program nie jest często używany. ten styl zawsze składa się z jednego wiersza.
Pasek narzędzi ikon oznaczonych etykietą z Eksploratora Windows. |
|
Częściowe paski narzędzi częściowy wiersz małych ikon używanych do zaoszczędzenia miejsca, gdy pełny pasek narzędzi nie jest konieczny. |
użyj tego stylu dla okien z przyciskami nawigacji, polem wyszukiwania lub kartami, aby wyeliminować niepotrzebną wagę w górnej części okna.
Częściowe paski narzędzi można łączyć z przyciskami nawigacji, polem wyszukiwania lub kartami. |
|
Duże fragmenty pasków narzędzi częściowy wiersz dużych ikon używanych do zaoszczędzenia miejsca, gdy pełny pasek narzędzi nie jest konieczny. |
Użyj tego stylu dla prostych narzędzi, które mają przyciski nawigacji lub pole wyszukiwania, aby wyeliminować niepotrzebną wagę w górnej części okna.
Duży częściowy pasek narzędzi z usługi Windows Defender. |
Na koniec kontrolki paska narzędzi mają kilka wzorców użycia:
| Użycie | Przykład |
|---|---|
|
Przyciski poleceń z ikonami Kliknięcie przycisku polecenia inicjuje natychmiastową akcję. |
Przykłady przycisków poleceń z ikonami z programu Faksowanie i skanowanie w systemie Windows. |
|
Przyciski ikon trybu Kliknięcie przycisku trybu wprowadza wybrany tryb. |
Przykłady przycisków trybu z programu Windows Paint. |
|
Przyciski ikon właściwości stan przycisku właściwości odzwierciedla stan aktualnie zaznaczonych obiektów, jeśli istnieje. Kliknięcie przycisku spowoduje zastosowanie zmiany do zaznaczonych obiektów. |
Przykłady przycisków właściwości z programu Microsoft Word. |
|
Przyciski ikon z etykietami przycisk polecenia lub przycisk właściwości oznaczony ikoną i etykietą tekstową. |
te przyciski są używane w przypadku często używanych przycisków paska narzędzi, których ikona nie jest wystarczająco objaśniająca. są one również używane na paskach narzędzi, które mają tak mało przycisków, że każdy przycisk może mieć etykietę tekstową.
Pasek narzędzi z najczęściej używanymi przyciskami oznaczonymi etykietami. |
|
Przyciski menu przycisk polecenia służący do prezentowania małego zestawu powiązanych poleceń. |
pojedynczy trójkąt skierowany w dół wskazuje, że kliknięcie przycisku spowoduje wyświetlenie menu.
Przycisk menu z małym zestawem powiązanych poleceń. |
|
Podziel przyciski przycisk polecenia używany do konsolidacji odmian polecenia, zwłaszcza gdy jeden z poleceń jest używany przez większość czasu. |
przycisk podziału w normalnym stanie. podobnie jak przycisk menu, pojedynczy trójkąt skierowany w dół wskazuje, że kliknięcie najbardziej prawej części przycisku spowoduje wyświetlenie menu.
upuszczony przycisk podziału. w tym przykładzie przycisk podziału służy do konsolidacji wszystkich poleceń związanych z drukowaniem. natychmiastowe polecenie drukowania jest używane przez większość czasu, więc użytkownicy zwykle nie muszą widzieć innych poleceń. w przeciwieństwie do przycisku menu kliknięcie lewej części przycisku powoduje bezpośrednie wykonanie akcji na etykiecie. przyciski podziału są skuteczne w sytuacjach, w których następne polecenie może być takie samo jak ostatnie polecenie. w tym przypadku etykieta zostanie zmieniona na ostatnie polecenie, tak jak w przypadku selektora kolorów:
W tym przykładzie etykieta zostanie zmieniona na ostatnie polecenie. |
| listy rozwijane lista rozwijana (edytowalna lub tylko do odczytu) używana do wyświetlania lub zmieniania właściwości. |
W tym przykładzie listy rozwijane są używane do wyświetlania i ustawiania atrybutów czcionki. Lista rozwijana na pasku narzędzi odzwierciedla stan aktualnie wybranego obiektu, jeśli istnieje. Zmiana listy zmienia stan wybranego obiektu. |
Wytyczne
Prezentacja
Wybierz odpowiedni styl paska narzędzi na podstawie liczby poleceń i ich użycia. Zobacz poprzednią tabelę stylów paska narzędzi, aby uzyskać wskazówki dotyczące sposobu wybierania. Unikaj używania konfiguracji paska narzędzi, która zajmuje zbyt dużo miejsca w obszarze roboczym programu.
Umieść paski narzędzi tuż nad obszarem zawartości pod paskiem menu i paskiem adresu, jeśli są obecne.
Jeśli masz mało miejsca, zaoszczędź je, wykonując następujące czynności:
- Pomijanie etykiet powszechnie znanych ikon i rzadziej używanych poleceń.
- Używanie tylko częściowego paska narzędzi zamiast całej szerokości okna.
- Konsolidowanie powiązanych poleceń za pomocą przycisku menu lub przycisku podziału.
- Użycie szewronu przepełnienia do wyświetlania rzadziej używanych poleceń.
- Wyświetlanie poleceń tylko wtedy, gdy mają zastosowanie do bieżącego kontekstu.
Pasek narzędzi programu Windows Internet Explorer pozwala zaoszczędzić miejsce dzięki pomijaniu etykiet powszechnie znanych ikon, stosowaniu częściowego paska narzędzi oraz przycisku chevron dla rzadziej używanych poleceń.
W przypadku wzorca paska narzędzi ikon bez etykiet użyj domyślnej konfiguracji z nie więcej niż dwoma wierszami pasków narzędzi. Jeśli może być przydatne więcej niż dwa wiersze, dostosuj paski narzędzi. Rozpoczynanie od więcej niż dwóch wierszy może przytłoczyć użytkowników i zająć zbyt dużo miejsca w obszarze roboczym aplikacji.
niepoprawne:
Domyślna konfiguracja z więcej niż dwoma wierszami pasków narzędzi powoduje zbyt dużo bałaganu wizualnego.
Wyłącz poszczególne przyciski paska narzędzi, które nie mają zastosowania do bieżącego kontekstu, zamiast ich usuwać. Dzięki temu zawartość paska narzędzi jest stabilna i łatwiejsza do znalezienia.
Wyłącz poszczególne przyciski paska narzędzi, jeśli kliknięcie ich bezpośrednio spowoduje wystąpienie błędu. Jest to konieczne, aby zachować poczucie bezpośredniości.
W przypadku nieoznaczonego wzorca paska narzędzi ikon usuń całe paski narzędzi, jeśli nie mają zastosowania do bieżącego kontekstu. Wyświetlaj je tylko w odpowiednich trybach.
W tym przykładzie pasek narzędzi Debugowanie jest wyświetlany tylko wtedy, gdy program jest uruchamiany.
Wyrównaj przyciski paska narzędzi do lewej. Ikona Pomocy, jeśli jest dostępna, jest wyrównana do prawej strony.
Wszystkie przyciski na pasku narzędzi są wyrównane do lewej, z wyjątkiem przycisku Pomoc.
Wyjątek: Paski narzędzi w stylu systemu Windows 7 wyrównują do lewej polecenia specyficzne dla programu, ale wyrównują do prawej standardowe, dobrze znane polecenia, takie jak Opcje, Widok i Pomoc.
Nie zmieniaj etykiet przycisków paska narzędzi dynamicznie. Takie działanie jest mylące i nieoczekiwane. Można jednak zmienić ikonę, aby odzwierciedlić bieżący stan.
W tym przykładzie ikona zostanie zmieniona, aby wskazać domyślne polecenie.
Kontrolki i polecenia
Preferuj najczęściej używane polecenia.
- W przypadku podstawowych pasków narzędzi podaj kompleksowe polecenia. Podstawowe paski narzędzi nie muszą być tak kompleksowe, jak paski menu, ale muszą podać wszystkie polecenia, które nie są łatwo odnajdywalne gdzie indziej. Podstawowe paski narzędzi nie muszą mieć poleceń:
- Polecenia znajdujące się bezpośrednio w samym interfejsie użytkownika.
- Polecenia są zwykle dostępne za pośrednictwem menu kontekstowych.
- Standardowe, dobrze znane polecenia, takie jak wycinanie, kopiowanie i wklejanie.
- W przypadku dodatkowych pasków narzędzi podaj polecenia, które są najczęściej używane. Polecenia paska menu stanowią nadzbiór poleceń paska narzędzi, więc nie musisz uwzględniać wszystkiego. Skoncentruj się na szybkim, wygodnym dostępie do poleceń i pomiń resztę.
- W przypadku podstawowych pasków narzędzi podaj kompleksowe polecenia. Podstawowe paski narzędzi nie muszą być tak kompleksowe, jak paski menu, ale muszą podać wszystkie polecenia, które nie są łatwo odnajdywalne gdzie indziej. Podstawowe paski narzędzi nie muszą mieć poleceń:
Preferuj kontrolki bezpośrednie. Użyj przycisków paska narzędzi w następującej kolejności preferencji:
- Przycisk z ikoną. Bezpośrednie i zajmuje minimalne miejsce.
- Przycisk ikony oznaczonej etykietą. Bezpośrednie, ale zajmuje więcej miejsca.
- Przycisk Podziel. Bezpośrednie dla najbardziej typowego polecenia, ale obsługuje odmiany poleceń.
- Przycisk menu. Pośrednie, ale zawiera wiele poleceń.
Preferuj natychmiastowe polecenia. W przypadku poleceń, które mogą być natychmiastowe lub mają dodatkowe dane wejściowe w celu zapewnienia elastyczności:
- W przypadku podstawowych pasków narzędzi użyj elastycznych wersji poleceń (takich jak Drukuj...).
- W przypadku dodatkowych pasków narzędzi użyj natychmiastowych wersji na pasku narzędzi (na przykład Drukuj) i użyj elastycznych wersji na pasku menu (np. Drukuj...).
Podaj etykiety dla często używanych poleceń, zwłaszcza jeśli ich ikony nie są dobrze znanymi ikonami.
dopuszczalne :
Lepiej:
Pasek narzędzi programu Faksowanie i skanowanie w systemie Windows zawiera niewiele poleceń, więc w lepszej wersji najważniejsze z nich są opisane etykietami.
Nie umieszczaj poleceń w menu paska narzędzi, które znajdują się również bezpośrednio na pasku narzędzi.
niepoprawne:
W tym przykładzie drukowanie znajduje się bezpośrednio na pasku narzędzi, więc nie musi znajdować się w menu.
Organizacja i kolejność
Organizuj polecenia na pasku narzędzi w powiązane grupy.
Najpierw umieść najczęściej używane grupy. W grupie umieść polecenia w kolejności logicznej. Ogólnie rzecz biorąc, polecenia powinny mieć przepływ logiczny, aby ułatwić ich znajdowanie, podczas gdy nadal najczęściej używane polecenia są wyświetlane jako pierwsze. Jest to najbardziej wydajne, zwłaszcza jeśli występuje przepełnienie.
Używaj rozdzielaczy grup tylko wtedy, gdy polecenia między grupami są słabo powiązane. Dzięki temu grupowanie jest oczywiste, a polecenia są łatwiejsze do znalezienia.
Przykłady grupowanych pasków narzędzi z poczty systemu Windows.
Unikaj umieszczania destruktywnych poleceń obok często używanych poleceń. Użyj kolejności albo grupowania, aby uzyskać rozdzielenie. Warto również rozważyć, aby nie umieszczać destrukcyjnych poleceń na pasku narzędzi, lecz jedynie w pasku menu lub w menu kontekstowych.
dopuszczalne :
Lepiej:
W lepszym przykładzie polecenie Delete jest fizycznie oddzielone od funkcji Drukuj.
Użyj symbolu przepełnienia, aby wskazać, że nie wszystkie polecenia można wyświetlić. Należy jednak użyć przepełnienia tylko wtedy, gdy nie ma wystarczającego miejsca, aby wyświetlić wszystkie polecenia.
niepoprawne:
Szewron przepełnienia oznacza, że nie wszystkie polecenia są wyświetlane, ale przy lepszym układzie można by wyświetlić ich więcej.
Upewnij się, że najczęściej używane polecenia są bezpośrednio dostępne na pasku narzędzi (czyli nie w przepełnieniu) w małych rozmiarach okien. W razie potrzeby zmień kolejność poleceń, przenieś rzadziej używane polecenia do przycisków menu lub przycisków podziału, a nawet usuń je całkowicie z paska narzędzi. Jeśli pozostanie to problem, ponownie rozważ wybór stylu paska narzędzi.
Ukrywanie pasków menu
Ogólnie rzecz biorąc, paski narzędzi działają świetnie razem z paskami menu, ponieważ obie umożliwiają każdej z nich skupienie się na ich mocnych stronach bez naruszenia.
- Ukryj pasek menu domyślnie, jeśli projekt paska narzędzi sprawia, że pasek menu jest nadmiarowy.
- Ukryj pasek menu zamiast całkowicie go usuwać, ponieważ paski menu są bardziej dostępne dla użytkowników klawiatury.
- Aby przywrócić pasek menu, podaj opcję znacznika wyboru paska menu w kategorii menu Widok (dla podstawowych pasków narzędzi) lub Narzędzia (dla pomocniczych pasków narzędzi). Aby uzyskać więcej informacji, zobacz standardowe menu i przyciski podziału.
- Wyświetla pasek menu, gdy użytkownicy naciskają Alt i ustawiają fokus danych wejściowych w pierwszej kategorii menu.
Interakcja
Po umieszczeniu wskaźnika myszy wyświetl dostępność przycisku, aby wskazać, że ikona jest dostępna do kliknięcia. Po upływie limitu czasu podpowiedzi wyświetl podpowiedź lub infoporadę.
W tym przykładzie przedstawiono różne stany wyświetlania.
Po jednokrotnym kliknięciu lewym przyciskiem myszy:
W przypadku przycisków poleceń należy wchodzić w interakcje z kontrolką w zwykły sposób.
W przypadku przycisków trybu wyświetl kontrolkę, aby odzwierciedlić aktualnie wybrany tryb. Jeśli tryb wpływa na zachowanie interakcji myszy, zmień również wskaźnik.
W tym przykładzie wskaźnik zostanie zmieniony, aby wyświetlić tryb interakcji myszy.
W przypadku przycisków właściwości i list rozwijanych wyświetl kontrolkę, aby odzwierciedlić stan aktualnie wybranych obiektów, jeśli istnieje. Podczas interakcji zaktualizuj stan kontrolki i zastosuj zmianę do wybranych obiektów. Jeśli nic nie jest zaznaczone, nie rób nic.
Po dwukrotnym kliknięciu lewym przyciskiem wykonaj to samo działanie jak po jednokrotnym kliknięciu lewym przyciskiem.
Wyjątek: W rzadkich przypadkach polecenie paska narzędzi może być używane wydajniej modalnie. W takich przypadkach użyj dwukrotnego kliknięcia, aby przełączyć tryb.
W tym przykładzie dwukrotne kliknięcie polecenia Malarz formatów powoduje przejście do trybu, w którym każde kolejne kliknięcie stosuje to samo formatowanie. Użytkownicy mogą wyjść z trybu, klikając jednokrotnie lewym przyciskiem myszy.
Po kliknięciu prawym przyciskiem myszy:
- W przypadku dostosowywalnych pasków narzędzi wyświetl menu kontekstowe służące do dostosowywania paska narzędzi. Wyświetl menu po kliknięciu prawym przyciskiem myszy w dół, a nie myszy w górę.
- W przypadku innych pasków narzędzi nic nie rób.
Ikony
Udostępniaj ikony dla wszystkich kontrolek paska narzędzi z wyjątkiem list rozwijanych.
Listy rozwijane nie wymagają ikon, ale wszystkie inne kontrolki paska narzędzi wymagają ikon.
Wyjątek: Paski narzędzi systemu Windows w stylu 7 używają ikon tylko dla poleceń, których ikony są dobrze znane; w przeciwnym razie używają etykiet tekstowych bez ikon. Poprawia to przejrzystość etykiet, ale wymaga więcej miejsca.
Upewnij się, że ikony paska narzędzi są wyraźnie widoczne w kolorze tła paska narzędzi. Zawsze oceniaj ikony paska narzędzi w kontekście i w trybie dużego kontrastu.
Wybierz projekty ikon, które wyraźnie komunikują swoje przeznaczenie, zwłaszcza w przypadku najczęściej używanych poleceń. Dobrze zaprojektowane paski narzędzi potrzebują ikon, które są zrozumiałe same w sobie, ponieważ użytkownicy nie mogą efektywnie znajdować poleceń za pomocą podpowiedzi. Jednak paski narzędzi nadal działają dobrze, jeśli ikony dla kilku rzadziej używanych poleceń nie są objaśniające.
Wybierz ikony, które są rozpoznawalne i rozróżnialne, szczególnie w przypadku najczęściej używanych poleceń. Upewnij się, że ikony mają charakterystyczne kształty i kolory. Dzięki temu użytkownicy szybko znajdą polecenia, nawet jeśli nie pamiętają symbolu ikony.
Upewnij się, że ikony paska narzędzi są zgodne z wytycznymi dotyczącymi ikon w stylu aero.
Aby uzyskać więcej informacji i przykładów, zobacz Ikony.
Standardowe menu i przyciski podziału
Jeśli używasz przycisków menu i przycisków podziału na pasku narzędzi, spróbuj użyć następujących standardowych struktur menu i odpowiednich poleceń, jeśli to możliwe. W przeciwieństwie do pasków menu polecenia paska narzędzi nie przyjmują kluczy dostępu.
Podstawowe paski narzędzi
Te polecenia dublują polecenia znalezione na standardowych paskach menu, dlatego powinny być używane tylko dla podstawowych pasków narzędzi. Ta lista pokazuje etykiety przycisków (oraz ich typy), ich kolejność i separatory, klawisze skrótów oraz wielokropki. Pamiętaj, że polecenie służące do wyświetlania i ukrywania paska menu znajduje się w menu Widok.
Plik
Nowy (Ctrl + N)
Otwórz (Ctrl + O)
Zamknij
<separator>
Zapisz (Ctrl + S)
Zapisz jako...
<separator>
Wyślij do
<separator>
Drukuj (Ctrl + P)
Podgląd wydruku
Konfiguracja strony
<separator>
Exit (Alt + F4) (skrót zwykle nie podano)
Edit(przycisk menu)
Cofnij (Ctrl + Z)
Ponów (Ctrl + Y)
<separator>
Wytnij (Ctrl + X)
Kopiowanie (Ctrl + C)
Wklej (Ctrl + V)
<separator>
Zaznacz wszystko (Ctrl + A)
<separator>
Usuń (Del) (skrót zwykle nie jest podawany)
Zmień nazwę...
<separator>
Znajdź (Ctrl + F)
Znajdź następny (F3) (polecenie zwykle nie jest podawane)
Zamień (Ctrl + H)
Przejdź do (Ctrl + G)
Drukuj (przycisk podzielony)
Drukuj (Ctrl + P)
Podgląd wydruku
Konfiguracja strony
View(przycisk menu)
Pasek menu (sprawdź, czy jest widoczny)
Okienko szczegółów (sprawdź, czy jest widoczne)
Okienko podglądu (sprawdź, czy jest widoczne)
Pasek stanu (sprawdź, czy jest widoczny)
Zoom
Powiększenie (Ctrl + +)
Pomniejsz (Ctrl + -)
Rozmiar tekstu (wybrane ustawienie ma punktor)
Największy
Większy
Średni
Mniejszy
Najmniejszy
Pełny ekran (F11)
Odświeżanie (F5)
Narzędzia(przycisk menu) ...
Options
Pomoc (przycisk podzielony, użyj ikony Pomoc) <program name> helpF1
Informacje o <program name>
Dodatkowe paski narzędzi
Te polecenia uzupełniają standardowe paski menu. Ta lista pokazuje etykiety przycisków (oraz ich typ), a także ich kolejność i separatory, klawisze skrótów oraz wielokropki. Pamiętaj, że polecenie służące do wyświetlania i ukrywania paska menu znajduje się w menu Narzędzia.
Nazwy kategorii dodatkowych pasków narzędzi różnią się od standardowych nazw kategorii menu, ponieważ muszą one być bardziej obejmujące. Na przykład kategoria Organizuj jest używana zamiast pozycji Edytuj, ponieważ zawiera polecenia, które nie są związane z edytowaniem. Aby zachować spójność między paskami menu i paskami narzędzi, użyj standardowych nazw kategorii menu, jeśli tak nie byłoby mylące.
niepoprawne:
W tym przykładzie pasek narzędzi powinien używać opcji Edytuj zamiast Organizuj w celu zapewnienia spójności, ponieważ ma standardowe polecenia menu Edytuj.
Okna palety
Okna palet mają krótsze paski tytułowe, aby zminimalizować zajmowaną przez nie przestrzeń na ekranie. Umieść przycisk Zamknij na pasku tytułu.
Ustaw tekst paska tytułu na polecenie, które wyświetliło okno palety.
Używaj kapitalizacji jak w zdaniu, bez końcowego znaku interpunkcyjnego.
Podaj menu kontekstowe poleceń zarządzania oknami. Wyświetl to menu kontekstowe, gdy użytkownicy klikną prawym przyciskiem myszy pasek tytułu.
W tym przykładzie użytkownicy mogą kliknąć prawym przyciskiem myszy pasek tytułu, aby wyświetlić menu kontekstowe.
Jeśli to możliwe i przydatne, umożliw zmianę rozmiaru okien palety. Wskaż, że okno jest możliwe do zmiany rozmiaru przy użyciu wskaźników zmiany rozmiaru po przekroczeniu ramki okna.
Gdy okno palety jest ponownie wyświetlane, wyświetl je w tym samym stanie, jak przy ostatnim użyciu. Podczas zamykania zapisz rozmiar i lokalizację okna. Podczas ponownego zapisywania przywróć zapisany rozmiar i lokalizację okna. Należy również rozważyć zachowanie tych atrybutów między uruchomieniami programu dla każdego użytkownika osobno.
Dostosowanie
Umożliwia dostosowanie pasków narzędzi składających się z co najmniej dwóch wierszy. Tylko styl ikon bez etykiet wymaga dostosowania. Proste paski narzędzi z kilkoma poleceniami nie wymagają dostosowania.
Podaj dobrą konfigurację domyślną. Użytkownicy nie powinni dostosowywać swoich pasków narzędzi do typowych scenariuszy. Nie należy zakładać, że użytkownicy sami naprawią złą początkową konfigurację przez jej dostosowanie. Załóżmy, że większość użytkowników nie dostosuje swoich pasków narzędzi.
Podaj menu kontekstowe z następującymi poleceniami:
- Lista pól wyboru do wyświetlania dostępnych pasków narzędzi
- Blokowanie/odblokowywanie pasków narzędzi
- Dostosuj...
Zablokuj domyślnie dostosowywalne paski narzędzi, aby zapobiec przypadkowym zmianom.
W przypadku polecenia Dostosuj wyświetl okno dialogowe opcji, które umożliwia wybranie, które paski narzędzi są wyświetlane, oraz polecenia na każdym pasku narzędzi.
W tym przykładzie program Visual Studio udostępnia okno dialogowe opcji dostosowywania pasków narzędzi.
Podaj polecenie Reset, aby powrócić do oryginalnej konfiguracji paska narzędzi w oknie dialogowym Dostosowywanie opcji.
Umożliwia dostosowanie pasków narzędzi przy użyciu przeciągania i upuszczania w następujący sposób:
- Ustaw kolejność i pozycje paska narzędzi.
- Ustaw długość paska narzędzi, wyświetlając wszystkie paski narzędzi, które są zbyt małe, aby wyświetlić ich zawartość z przepełnieniem chevron.
- Jeśli ta funkcja jest obsługiwana, odłącz paski narzędzi, tak aby były wyświetlane jako okna palet, i odwrotnie.
Po wyświetleniu okna dialogowego Dostosowywanie opcji:
- Ustaw zawartość paska narzędzi.
- Ustaw kolejność zawartości paska narzędzi.
Dzięki temu użytkownicy mogą wprowadzać zmiany bardziej bezpośrednio i wydajnie.
Zapisz wszystkie dostosowania paska narzędzi dla poszczególnych użytkowników.
Używanie wielokropka
Chociaż polecenia paska narzędzi są używane do akcji natychmiastowych, czasami do wykonania akcji jest potrzebnych więcej informacji. Użyj wielokropka, aby wskazać, że polecenie wymaga dodatkowych informacji, zanim zostanie zastosowane. Umieść wielokropek na końcu podpowiedzi i etykiety, jeśli występuje.
W tym przykładzie polecenie „Drukuj...” wyświetla okno dialogowe „Drukowanie”, aby uzyskać dodatkowe informacje.
Jeśli jednak polecenie nie może natychmiast obowiązywać, nie jest wymagany wielokropek. Na przykład polecenie „Ustawienia udostępniania” nie ma wielokropka, mimo że wymaga podania dodatkowych informacji, ponieważ nie może zostać wykonane natychmiast.
Polecenie Ustawienia udostępniania nie ma wielokropka, ponieważ nie może natychmiast obowiązywać.
Ponieważ paski narzędzi są stale widoczne, a przestrzeń jest ograniczona, wielokropka należy używać oszczędnie.
Uwaga
W przypadku menu wyświetlanych przez pasek narzędzi zastosuj wskazówki dotyczące wielokropka menu.
Zalecane ustalanie rozmiaru i odstępy
Zalecane ustalanie rozmiaru i odstępy dla standardowych pasków narzędzi.
Etykiety
Ogólne
-
Użyj wielkich liter w stylu zdania.
- Wyjątek: W przypadku starszych aplikacji możesz użyć wielkich liter w stylu tytułu, jeśli to konieczne, aby uniknąć mieszania stylów wielkich liter.
Przyciski z ikonami bez etykiet
Użyj podpowiedzi, aby opisać polecenie. W tekście etykietki narzędzia użyj etykiety, jaką miałby przycisk, gdyby był opatrzony etykietą, ale uwzględnij także skrót klawiszowy, jeśli jest przypisany.
Przykład podpowiedzi przycisku z ikoną.
Przyciski ikon z etykietami
Użyj zwięzłej etykiety. Jeśli to możliwe, użyj pojedynczego słowa, maksymalnie czterech wyrazów.
Umieść etykietę z prawej strony ikony.
Użyj podpowiedzi, aby opisać polecenie. Ponieważ przyciski mają etykiety, użycie tooltipu zamiast infotipu byłoby zbędne.
Przykład podpowiedzi dla przycisku ikonowego z etykietą.
Listy rozwijane
Jeśli lista zawsze ma wartość, użyj bieżącej wartości jako etykiety.
W tym przykładzie aktualnie wybrana nazwa czcionki działa jako etykieta.
Jeśli lista rozwijana z możliwością edycji nie ma wartości, użyj monitu.
W tym przykładzie dla etykiety listy rozwijanej jest używany monit.
Przyciski menu i przyciski podziału
- Preferuj nazwy przycisków menu opartego na czasowniku. Jednak pomiń czasownik, jeśli jest to Create, Show, View lub Manage. Na przykład przyciski menu Narzędzia i Strona nie mają czasowników.
- Użyj pojedynczego, konkretnego słowa, które wyraźnie i dokładnie opisuje zawartość menu. Chociaż nazwy nie muszą być tak ogólne, że opisują wszystkie elementy w menu, powinny być wystarczająco przewidywalne, aby użytkownicy nie byli zaskoczeni tym, co znajdują w menu.
- Mimo że nie jest to wymagane, podaj opisy etykietek informacji, jeśli są one przydatne.
Elementy menu
- Używaj nazw elementów menu zaczynających się od czasownika, rzeczownika lub frazy rzeczownikowej.
- Preferuj nazwy menu oparte na czasownikach. Jednak pomiń czasownik, jeśli jest to Create, Show, View lub Manage. Na przykład następujące polecenia nie używają czasowników:
- O nas
- Zaawansowany
- Pełny ekran
- Nowy
- Opcje
- Właściwości
- Użyj określonych czasowników. Unikaj ogólnych, nieprzydatnych czasowników, takich jak Zmiana i zarządzanie.
- Użyj pojedynczych rzeczowników dla poleceń, które mają zastosowanie do pojedynczego obiektu, w przeciwnym razie użyj rzeczowników w liczbie mnogiej.
- W przypadku par poleceń uzupełniających wybierz wyraźnie uzupełniające nazwy. Przykłady: Dodawanie, usuwanie; Pokaż, Ukryj; Wstaw, usuń.
- Wybierz nazwy elementów menu na podstawie celów i zadań użytkownika, a nie technologii.
- Użyj następujących nazw elementów menu w określonym celu:
- Opcje: Aby wyświetlić opcje programu.
- Dostosuj: Aby wyświetlić opcje programu związane z konfiguracją mechanicznego interfejsu użytkownika.
- Personalizuj: Wyświetla podsumowanie często używanych ustawień personalizacji.
- Preferencje: Nie używaj. Zamiast tego użyj opcji.
- Właściwości: Aby wyświetlić okno właściwości obiektu.
- Ustawienia: Nie używaj jako etykiety menu. Zamiast tego użyj opcji.
- Elementy menu, które wyświetlają podmenu, nigdy nie mają wielokropka na etykiecie. Strzałka podmenu wskazuje, że wymagane jest inne zaznaczenie.
Dokumentacja
Podczas odwoływania się do pasków narzędzi:
- Jeśli istnieje tylko jeden pasek narzędzi, nazywaj go paskiem narzędzi.
- Jeśli istnieje wiele pasków narzędzi, odwołuj się do nich, podając najpierw nazwę, a następnie określenie „pasek narzędzi”. Zapoznaj się z głównym paskiem narzędzi, który jest domyślnie włączony i zawiera przyciski dla podstawowych zadań, takich jak otwieranie i drukowanie pliku, jako standardowy pasek narzędzi.
- Pasek narzędzi jest jednym, niekapitalizowanym słowem. (Natomiast pasek menu to dwa wyrazy).
- Odnoś się do przycisków paska narzędzi za pomocą etykiet podpowiedzi. Użyj dokładnie tekstu etykiety, z zachowaniem wielkości liter, ale nie dodawaj wielokropka.
- Odwołuj się do przycisków menu na pasku narzędzi, używając ich etykiet oraz słowa „menu”. Użyj dokładnego tekstu etykiety, w tym użytych w niej wielkich i małych liter.
- Elementy sterujące paska narzędzi należy ogólnie określać jako przyciski paska narzędzi.
- Do opisywania interakcji użytkownika używaj słowa „kliknij” w odniesieniu do przycisków paska narzędzi i list rozwijanych tylko do odczytu, a słowa „wprowadź” w odniesieniu do edytowalnych list rozwijanych. Nie używaj słów „choose”, „select” ani „pick”.
- Nie używaj określeń „cascading”, „pull-down”, „drop-down” ani „pop-up” w odniesieniu do przycisków menu, z wyjątkiem dokumentacji programistycznej.
- Określaj niedostępne elementy jako niedostępne, a nie jako wyszarzone, wyłączone lub szare. Użyj opcji wyłączonej w dokumentacji programowania.
- Jeśli to możliwe, sformatuj etykiety przy użyciu pogrubionego tekstu. W przeciwnym razie umieść etykiety w cudzysłowie tylko wtedy, gdy jest to wymagane, aby zapobiec nieporozumieniu.
Przykłady:
- W menu Strona na pasku narzędzi kliknij pozycję Wyślij stronę pocztą e-mail.
- W polu Czcionki na pasku narzędzi wprowadź "Segoe UI".
- Na pasku narzędzi Formatowanie wskaż polecenie Pokaż, a następnie kliknij pozycję Komentarze.