Podstawy interfejsu Windows 8 - Projektowanie elementów nawigacyjnych  

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

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

Opublikowano: 2012-04-17

W tym artykule nauczysz się organizować zawartość Twojej aplikacji, aby była ona intuicyjna i łatwa w obsłudze dla każdego użytkownika.

Układ hierarchiczny

Jednym z najczęściej wykorzystywanych systemów nawigacji jest układ hierarchiczny. Dzięki niemu, aplikacja jest płynna, szybka i łatwa w użyciu. Ten układ jest najlepszy dla aplikacji zawierających dużo treści lub aplikacji o zróżnicowanej zawartości.

Warstwy w hierarchii

Istotą układu hierarchicznego jest podzielenie zawartości na różne sekcje oraz różne poziomy szczegółowości. Charakterystycznym przyciskiem, stosowanym w tym układzie, jest przycisk wstecz, ułatwiający użytkownikowi poruszanie się po aplikacji.

Strona główna - hub

Hub aplikacji jest pierwszym poziomem aplikacji - głównym punktem, koncentrującym wszystkie elementy. To z niego, użytkownik będzie nawigował do kolejnych sekcji. Zawartość jest wyświetlana panoramicznie, dzięki czemu użytkownik od razu widzi, co jest nowe i dostępne.

Hub stanowi mapę różnych kategorii, zawierającą odnośniki do poszczególnych sekcji. Tutaj nie obowiązuje sztywne trzymanie się jednego formatu, wręcz przeciwnie, na stronie głównej wskazane jest stosowanie wizualnej różnorodności. Na pewno, pomoże to projektantowi rozróżnić poszczególne sekcje, ułatwiając tym samym użytkownikowi poruszanie się po aplikacji.

Sekcje

Sekcje są drugim poziomem aplikacji. Tutaj, zawartość może być wyświetlana w dowolnej formie, najlepiej pasującej do zawartości sekcji. Strona sekcji składa się z pojedynczych elementów, z których każdy ma własną stronę detali. Może wykorzystywać grupowanie zawartości oraz układ panoramiczny.

Szczegóły

Strona zawierająca szczegóły to trzeci poziom aplikacji. Tutaj, wyświetlane są szczegóły poszczególnych elementów. Może ona zawierać wiele informacji, ale także pojedynczy element, taki jak obraz lub wideo. Format powinien być uzależniony od wyświetlanej zawartości i może być różny na każdej ze stron.

Układ płaski

Kolejnym, często wykorzystywanym, systemem nawigacji jest układ płaski. Spotykany jest często w grach lub przeglądarkach, gdzie wszystkie elementy znajdują się na tym samym poziomie hierarchii. Użytkownik tylko przesuwa strony lub karty. Ten układ jest najlepszy dla aplikacji z niewielką liczbą stron, gdzie zależy nam na szybkim przełączaniu pomiędzy nimi.

Zawartość stron

Istotą układu płaskiego jest oddzielenie zawartości na różnych stronach.

Pasek nawigacyjny

Pasek nawigacyjny wykorzystywany jest do przełączania pomiędzy kontekstami, np.: karty, gry, dokumenty itp.

Jest  to element przejściowy, znajdujący się w górnej części ekranu. Wyświetlany jest po kliknięciu prawym przyciskiem myszy na stronę aplikacji lub szybkim przeciągnięciu palca (w przypadku ekranu dotykowego) od górnej lub dolnej krawędzi ekranu (tzw. sliping). Elementy na pasku reprezentowane są poprzez proste miniatury i mogą zmieniać się w zależności od zawartości strony.

Przełączanie

W tym układzie nie ma, charakterystycznego dla układu hierarchicznego, przycisku wstecz. Poruszanie się pomiędzy stronami odbywa się za pomocą bezpośrednich linków lub przy wykorzystaniu paska nawigacyjnego, na którym mogą znajdować się takie elementy, jak np. dodanie nowej karty lub strony.

Swiping -  efektywne wykorzystywanie krawędzi

Swiping, czyli poruszanie się po aplikacji, wyświetlając odpowiednie paski nawigacyjne po szybkim przeciągnięciu palcem od danej krawędzi. Poszczególne krawędzie odpowiadają za:

• dolna lub górna krawędź – pasek nawigacji i poleceń,
• lewa krawędź – przełączanie pomiędzy używanymi aplikacjami,
• prawa krawędź – pasek poleceń systemu (Start, wyszukiwanie, ustawienia),
• górna krawędź w kierunku dolnej (do końca krawędzi) – zamyka aplikacje.

Nawigacja – podsumowanie krok po kroku

Informacje o sposobie nawigacji pomiędzy sekcjami w aplikacji, pomiędzy różnymi poziomami w hierarchii i na pojedynczej stronie aplikacji:

1.  Nagłówek oraz przycisk wstecz.

Etykieta nagłówka bieżącej strony wskazuje, gdzie znajduje się użytkownik. Przycisk wstecz ułatwia szybkie powracanie do poprzedniej strony.

2.  Hub.

Pokazuje użytkownikowi główne elementy aplikacji.

3.  Sekcje lub kategorie.

Powinny być odpowiednio sformatowane w celu, jak najlepszego wyświetlenia elementów.

4.  Zoom semantyczny: przechodzenie pomiędzy poziomami w hierarchii.

Zapewnia szybkie i płynne poruszanie się po aplikacji, zwłaszcza w przypadku długiej listy.

5.  Pasek nawigacyjny.

Zawiera dostęp do elementów nawigacyjnych lub innych części aplikacji.

6.  Menu nagłówka.

Pozwala na szybkie przechodzenie pomiędzy sekcjami. Jest dostępne z dowolnego miejsca aplikacji.

7.  Link do strony głównej.

Szybki sposób na powrót do głównego katalogu, strony aplikacji. Znajduje się w dolnej części menu nagłówka.

8.  Pasek aplikacji.

Zawiera dostęp do poleceń związanych z określonym widokiem.

9.  Widok/sortowanie/filtrowanie.

Zmieniają sposób wyświetlania zawartości w ramach określonego widoku. Znajdują się na pasku aplikacji.

10.  Swiping od krawędzi.

Umożliwia dostęp do paska nawigacyjnego, paska aplikacji oraz poleceń systemowych.

Nawigacja za pomocą etykiet menu i sekcji nagłówka

Jako przykład, ilustrujący używanie przycisku wstecz, menu nagłówka oraz sekcji, posłuży aplikacja Food with Friends.

Menu nagłówka zawiera łącze do każdej sekcji strony (poziom 2) oraz łącze powrotu do Huba aplikacji (poziom 1), umożliwiające tym samym szybkie poruszanie się po aplikacji. Menu pojawia się na każdym poziomie, na każdej stronie aplikacji, ułatwiając użytkownikowi przejście do zamierzonego elementu.

Użytkownik może wybrać etykietę sekcji, aby przejść do odpowiedniej strony w tej sekcji. Zapewnienie wizualnej wskazówki, jak View all (x), informuje użytkownika, że jest więcej elementów w tej sekcji, co jest wyświetlane na stronie głównej. Wykorzystanie tego elementu umożliwia uniknięcie konieczności umieszczenia linku w zawartości aplikacji.

Poniżej, znajduje się uproszczony diagram, przedstawiający przykłady nawigowania po elementach, używany jako przedstawienie wszystkiego, co jest interaktywne.

Filtrowanie, pivoty, sortowanie i widoki

Inną częścią elementów nawigacji aplikacji jest ustalenie kiedy, gdzie i w jaki sposób udostępnić użytkownikowi większą kontrolę nad prezentowaną zawartością. Filtrowanie, pivoty, sortowanie oraz przełączniki widoków są elementami, które trzeba dobrze zaplanować, projektując aplikację.

Nazwa	Definicja	Przykład
Filtrowanie	Pokazywanie lub ukrywanie zawartości w obrębie danego zbioru danych, w oparciu o pewne kryteria.	Kiedy szukasz gry przygodowej, możesz zawęzić obszar poszukiwania gier tylko do kategorii – przygodowe.
Pivot	Reorganizacja zawartości w obrębie zbioru danych, oparta na pewnych kryteriach.	Kiedy patrzysz na kolekcję muzyki, możesz układać piosenki wg. wykonawcy lub gatunku.
Sortowanie	Zmienia kolejność wyświetlania zbioru danych.	Podczas przeglądania artykułów, możesz posortować je, np. od najnowszego.
Widok	Zmiana stylu lub sposobu wyświetlania zawartości.	Przeglądając restauracje w aplikacji, możesz wybrać wyświetlenie ich na mapie zamiast na liście.

Wyświetlanie w elemencie canvas

Użyj elementów sterujących do filtrowania, przestawiania oraz sortowania na elemencie canvas, kiedy wynik jest najważniejszy, podobnie jak na stronie wyników wyszukiwania.

Kontrolki powinny być na pasku aplikacji, jeśli aplikacja zorientowana jest na przeglądanie zawartości, tak jak np. czasopisma, zakupy.

Sortowanie i filtrowanie stron

Elementy filtrowania i sortowania można umieścić pomiędzy nagłówkiem i treścią. W poniższym przykładzie filtrowane są tylko seriale, posortowane według serii.

W tym przykładzie, dla aplikacji Store, rozwijana lista pozwala przefiltrować zawartość bieżącego widoku. Po wyświetleniu listy, aktualnie aktywny filtr zaznaczony jest na liście rozwijanej.

Pasek nawigacji

Pasek nawigacji jest wykorzystywany do nawigacji po sekcjach lub stronach w aplikacji, która wykorzystuje układ płaski. Może być również wykorzystywany przy układzie hierarchicznym, zamiast menu nagłówka, udostępniając kontrolki globalnej nawigacji. Pasek nawigacji powinien być pokazywany na każdej stronie i wszystkich poziomach aplikacji, udostępniając użytkownikowi wygodny, przewidywalny sposób nawigacji po aplikacji.

W aplikacji Finance (poziom 1), na stronie głównej znajduje się lista sekcji (Headlines i Watchlist), które jednocześnie są odnośnikami. Na poziomie sekcji (poziom 2), po wywołaniu paska nawigacyjnego, użytkownik ma dostęp do katalogu głównego oraz pozostałych sekcji aplikacji.

Pasek aplikacji – przełączanie widoku

Pasek aplikacji używany jest przede wszystkim do sterowania, ale również pozwala na zmienianie sposobu przeglądania zawartości. Przełączanie widoków, przestawianie, filtrowanie i sortowanie mogą być wykonywane poprzez użycie tego paska. Nie należy umieszczać na nim nawigacji do innego miejsca w aplikacji. Wszystkie elementy paska aplikacji powinny oddziaływać na aktualną zawartość widoku.

W aplikacji kalendarz, widok jest domyślnie ustawiony na cały miesiąc, aby wybrać inne widoki, należy wyświetlić pasek aplikacji. Inne polecenie, np. takie, jak dodawanie nowego terminu, także może pojawić się na tym pasku.

Na stronie All Restaurants, przykładowej aplikacji Food with Friends, dostępne jest przeglądanie elementów w widoku listy lub mapy, z możliwością sortowania widocznych elementów, na podstawie takich kryteriów jak: koszty, lokalizacja i ocena. Opcje filtrowania są dostępne jako kontrolki w menu wysuwanym.

 

---