Podstawy interfejsu Windows 8 - Projektowanie poleceń  

Tłumaczenie na podstawie Commanding design for Metro style apps: Aurelia Tokarek

[Ta dokumentacja jest wstępna i może ulec zmianie.]

Opublikowano: 2012-04-17

Masz kilka dostępnych powierzchni, na których możesz umieścić polecenia i kontrolki aplikacji interfejsu Windows 8, włączając okna aplikacji, pop-upy oraz paski. Wybór odpowiedniej powierzchni, w odpowiednim czasie może wpłynąć znacząco na trudności w jej obsłudze.

Używaj głównego obszaru aplikacji

Użytkownicy powinni być w stanie wykonać podstawowe scenariusze za pomocą głównego obszaru aplikacji. Jeśli jest to możliwe, należy pozwolić użytkownikowi manipulować bezpośrednio zawartością, a nie dodawać polecenia oddziałującego na treść.

Na przykład, w aplikacji Restaurant, wyszukiwanie i przeglądanie szczegółów powinno być zrealizowane na głównym obszarze aplikacji poprzez dotyk, panoramę lub wybieranie zawartości.

Używaj charms

Wykorzystaj charms i kontrakty. Unikaj duplikowania funkcjonalności charms w Twojej aplikacji:

• wyszukiwanie: pozwól użytkownikom szybko przeszukać, z dowolnego miejsca w systemie, zawartość Twojej aplikacji, łącznie z innymi aplikacjami i vice versa,
• udostępnianie: pozwól użytkownikom dzielić zawartość Twojej aplikacji z innymi osobami lub aplikacjami,
• urządzenia: pozwól użytkownikom cieszyć się z plików audio, wideo lub zdjęć, przesyłanych z Twojej aplikacji do innych urządzeń, znajdujących się w sieci domowej,
• ustawienia: umieszczenie wszystkich ustawień w jednym miejscu pozwoli użytkownikom skonfigurować aplikację, używając wspólnego mechanizmu.

Używaj paska aplikacji

Użyj paska aplikacji do wyświetlania poleceń na żądanie użytkownika. Pasek aplikacji pokazuje polecenia powiązane z kontekstem zawartości, zazwyczaj bieżącej strony lub aktualnego zaznaczenia.

Pasek aplikacji nie jest domyślnie widoczny. Pojawia się, kiedy użytkownik przesunie palec z górnej lub dolnej krawędzi ekranu, może pojawić się także po kliknięciu prawym przyciskiem myszy.

Pasek aplikacji nie jest elementem stałym. Pojawia się i znika na żądanie użytkownika. W razie potrzeby można zachować pasek na widoku lub aktywować go po wykonaniu określonej czynności.

Używaj menu kontekstowego

Możesz użyć menu kontekstowego do działania schowka (wycinanie, kopiowanie, wklejanie) lub poleceń, które odnoszą się do treści, a które nie mogą być wybierane (jak zdjęcie na stronie internetowej).

System udostępnia aplikacje z domyślnym menu kontekstowym dla tekstu i hiperłącz. Dla tekstu, domyślne menu kontekstowe zawiera polecenia schowka. Dla hiperłącz – pokazuje polecenia kopiuj i otwórz łącze.

Umieszczanie poleceń

Jako przykład zostanie użyta fikcyjna aplikacja Restaurant, ilustrująca proces organizowania poleceń na pasku aplikacji, dla aplikacji umożliwiającej przeglądanie treści.

Organizowanie poleceń

Pierwszym krokiem jest identyfikacja wszystkich poleceń aplikacji i zorganizowanie ich w zależności od scenariusza lub lokalizacji. Poniżej, znajduje się lista najczęściej używanych poleceń podczas przeglądania listy restauracji:

• Które polecenia powinny pojawiać się w całej aplikacji?
• Które polecenia powinny pokazywać się na określonych stronach?
• Które polecenia powinny zostać przeniesione do charms oraz ustawień?

Tworzenie zestawów poleceń

Następnie, grupujemy polecenia w zestawy poleceń. Pasek aplikacji wyświetla zestawy poleceń jako jednostki, z przegrodą pomiędzy seriami:

• Które komendy są funkcjonalnie powiązane?
• Które polecenia przełączają typy widoków?
• Które polecenia powinny pojawić się po zaznaczeniu elementu?

Polecenia widoku	Polecenia filtrowania	Polecenia sortowania
Polecenia wyboru	Polecenia widoku	Polecenie Nowy element

Tworzenie menu

Kolejny krokiem będzie rozważenie, czy Twoje zestawy komend będą lepiej działały w menu komend:

• Czy pasek aplikacji nie jest zbyt zatłoczony, czy nie ma tam zbyt wielu poleceń, czy będą do siebie pasowały?
• Czy istnieje zbiór, który korzysta z dłuższych etykiet lub interaktywnej kontrolki?

Menu pozwala zaprezentować więcej opcji na mniejszej przestrzeni, włączając interaktywne kontrolki.

W tym przykładzie, menu Sortowanie pojawia się jako prosta lista, ułatwiająca wybór opcji. W menu filtrowania pojawia się szereg kontrolek, pozwalających użytkownikom filtrować elementy wg. bardziej złożonych kryteriów.

Umieść polecenia na pasku aplikacji

Istnieje kilka sposobów pozycjonowania polecenia na pasku aplikacji, a różnice mogą pojawiać się w zależności od okoliczności. Poniżej, przedstawione zostały zasady umieszczania poleceń, które powinny być przestrzegane w miarę możliwości.

Przewidywalność:  W miarę możliwości należy użyć spójnej interakcji oraz umieścić polecenia we wszystkich widokach.

Ergonomia: Zastanów się, w jaki sposób rozmieszczenie poszczególnych poleceń może poprawić szybkość i łatwość ich wykorzystania.

Estetyka: Ogranicz liczbę poleceń. Wybierz ikony, które są łatwe do zrozumienia i przewidzenia. Stosuj krótkie etykiety.

1. Trwałe polecenia umieszczaj po prawej stronie paska aplikacji.

Zacznij od umieszczania domyślnych poleceń po prawej stronie paska aplikacji. Jeśli istnieje zaledwie kilka poleceń, pasek aplikacji może skończyć się na poleceniach tylko po prawej stronie.

W tym przykładzie, dla polecenia przeglądaj, filtrowanie/sortowanie są elementami stałymi.

2. Używaj krawędzi.

Jeśli jest większa liczba poleceń, w celu zrównoważenia i ułatwienia wykorzystania paska aplikacji, oddziel różne zestawy na lewo lub prawo.

Tutaj, zadecydowaliśmy się przenieść polecenie widok na lewą stronę, zaś polecenia filtrowanie/sortowanie na prawą stronę.

3. Pokazywanie/ukrywanie komend.

Polecenia, które nie są istotne w pewnych okolicznościach powinny zostać ukryte. Kiedy się pojawią, nie powinny zakłócać porządku stałych poleceń.

W tym przykładzie, kiedy widok mapy jest aktywny, po prawej stronie pojawiają się dodatkowe polecenia.

4. Wstawianie poleceń wyboru.

Polecenia, pojawiające się jako rezultat działań użytkownika (np. zaznaczenia), przesuwają się skrajnie na lewo w stosunku do pozostałych. To sprawia, że polecenia wyboru są bardziej zauważalne i łatwiej dostępne.

Oto zestawy poleceń, które przesuwają się w prawo, robiąc miejsce dla poleceń wyboru:

Użyj standardowego umieszczania wspólnych poleceń

Niektóre polecenia występują w wielu aplikacjach. Aby były spójne, należy przestrzegać następujących wytycznych przy podejmowaniu decyzji odnośnie umieszczenia polecenia w pasku aplikacji.

Polecenia wyboru, związane z dokonaniem wyboru, zawsze pojawiają się skrajnie na lewo. Kiedy są kontekstowe, pojawiają się przy danej sekcji.

W tym przykładzie, zanim użytkownik coś zaznaczy, polecenie select all pojawi się po lewej. Po zaznaczeniu czegoś przez użytkownika pozostałe polecenia pojawiają się po lewej stronie.

Polecenie Nowy element pojawi się po prawej stronie, jeśli aplikacja wymaga polecenia Nowy (New), gdzie tworzony jest nowy typ (dodawanie, tworzenie, komponowanie). Dzięki temu, polecenie New staje się łatwo dostępne przy użyciu kciuków, niezależnie od konkretnej aplikacji lub kontekstu.

W tym przykładzie, polecenie New review pozwala użytkownikom utworzyć nową recenzję restauracji. Inne polecenia związane z New review umieszczane są obok niej, na lewo.

Polecenie New nie powinno pojawiać się w innym miejscu na pasku aplikacji.

Polecenie Usuń/Nowy (Delete/New) powinno być zawsze usytuowane w przedstawionej na rysunku kolejności.

Polecenie Usuń/Dodaj (Remove/Add) powinno być zawsze usytuowane w zaprezentowanej na rysunku kolejności.

Jasne polecenia - użyj etykiety, aby polecenie było czytelne, szczególnie dla operacji destrukcyjnych.