Projektowanie interfejsu 1/3
Dziś nie będzie kody w tym i kolejnych postach skupie się na zasadach jakie obowiązują przy projektowaniu interfejsu dla aplikacji Metro. W dzisiejszy poście skupie się na temacie nawigacji pomiędzy stronami i elementami jakie wchodzą w skład nawigacji.
Pisząc na temat nawigowania w aplikacjach metro dla systemu Windows 8 trzeba rozpocząć od przedstawienia dwóch podstawowych wzorców nawigacyjnych.
Układ hierarchiczny
Jest jednym z najczęściej używanych systemów nawigacji. Ten system nawigacji najlepiej nadaje się do aplikacji gdzie mamy dużo treści lub zróżnicowanych zawartości.
Najważniejsze w układzie hierarchicznym jest podział na sekcje i różne poziomy szczegółowości. Charakterystycznym elementem jest przycisk wstecz który ułatwia nawigowanie. Układ hierarchiczny składa się z 3 głównych typów stron które reprezentują różne poziomy szczegółowości.
Strona główna – hub
Hub jest pierwszym poziomem aplikacji. Hub zawiera wszystkie elementy aplikacji a zarazem jest najmniej szczegółowy. Zawartość jest wyświetlana panoramiczne dzięki czemu użytkownik ma łatwy dostęp.
Hub zawiera odnośniki do poszczególnych sekcji w różnych kategoriach. Na tym poziomie nie ma sztywnych wizualnych form projektowania. Przeciwnie zaleca się aby strona wizualna była różnorodna dzięki czemu ułatwi to projektantowi rozdzielenie poszczególnych sekcji a użytkownikowi pozwoli na łatwiejsze poruszanie.
Sekcje
Sekcja to kolejny poziom szczegółowości. Strona ta zawiera więcej szczegółów ale i tu nie ma sztywnych reguł do wyglądu. Strona powinna jak najlepiej dopasowana do wyświetlanego materiału. Ta strona składa się z pojedynczych elementów które przekierowują do strony z detalami.
Szczegóły
Ten poziom jest to najbardziej szczegółowym i znajdują się tutaj informacje na temat jednego elementu. Ta strona może zawierać wiele informacji jak również elementów wideo lub obrazy. Format wyświetlania powinien być dostosowany do zawartości.
Układ płaski
Jest to kolejny często wykorzystywany układ nawigacji. Wykorzystuje się go tam gdzie elementy znajdują się na tym samym poziomie hierarchii. Najlepiej nadaje się do aplikacji gdzie liczba stron jest niewielka a użytkownik przemieszka się pomiędzy stronami lub kartami które są dostępne pod prawym przyciskiem.
Pasek nawigacyjny
Pasek nawigacyjny służy do przełączania się pomiędzy stronami. Element jest zlokalizowany przy górnej krawędzi. Wyświetlany jest po kliknięciu prawym klawiszem myszki lub szybkim przeciągnięciu do górnej lub dolnej krawędzi ekranu.
Przełączanie
Nie ma tu przycisku wstecz a nawigacja pomiędzy stronami odbywa się przy pomocy bezpośrednich linków lub wykorzystując pasek nawigacyjny.
Podsumujmy teraz sobie wszystkie elementy jakie wchodzą w skład nawigacji.
-
Nagłówek oraz przycisk wstecz.
-
Hub.
-
Sekcja lub kategorie.
-
Zoom semantyczny.
-
Pasek nawigacyjny.
-
Menu nagłówka.
-
Link do strony głównej.
-
Pasek aplikacji.
-
Widok/sortowanie/filtrowanie.
-
Swiping do krawędzi.
Nawigowanie za pomocą etykiet menu i sekcji nagłówka
Nagłówek jest elementem który znajduje się na każdym poziomie w naszej aplikacji. Możemy go wykorzystać do nawigowania umieszczając w nim łącza do każdej sekcji na danym poziomie oraz łącze do Huba aplikacji.
Warto również przy nagłówkach sekcji dodawać informacje o liczbie elementów. Poinformuje to użytkownika ze jest więcej elementów niż te co widzi.
Poniżej znajduje się diagram który przedstawia przykłady nawigacji wraz z przedstawieniem wszystkiego co jest interaktywne.
Filtrowanie, sortowanie i widok
Na koniec tego postu skupie się na elementach które dają użytkownikowi większą kontrolę nad prezentacją danych.
Sortowanie i filtrowanie stron
Elementy filtrowania i sortowania można umieścić pomiędzy nagłówkiem na treścią.
Te elementów mogą również zawierać rozwijalną listę w przypadku jak opcji jest za dużo aby pokazać je wszystkie na raz.
Pasek aplikacji – przełączanie widoku
Pasek aplikacji jest używany do przechowywania akcji jakie mogą być wykonane na aktualnym elemencie. W tym miejscu powinny znajdować się i wyłącznie akcje jakie można wykonać na aktualnym elemencie. Operacje jakie mogą się tutaj między innymi znaleźć to sterowanie, przełączanie widoku, przestawianie, filtrowanie i sortowanie. Nie powinno się umieszczać tutaj elementów nawigacyjnych do innych części aplikacji. Na przykładzie kalendarza można łatwo zaobserwować zmianę widoku. 
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.
Programowanie .NET 