Windows 8.1 i Windows Phone 8 - Kontrolki - zestawienie

     W kilku poprzednich artykułach opisywałam szczegółowo dwie kontrolki: Pivot, Hub. W tym artykule postanowiłam zebrać większość dostępnych kontrolek.

Zacznijmy od początku, czyli A jak App Bar (Application Bar). 
Kontrolka dostępna jest dla Windows 8.1, Windows Phone 8, Windows Phone Silverlight 8.1, Windows Phone OS 7.1.
App Bar to dodatkowe menu aplikacji. Umieszczone jest na dole ekranu telefonu. Automatycznie wyśrodkowuje się jeśli zmieniamy orientację telefonu: pion-poziom.

Rys1. Przykładowy AppBar

Składa się z rzędu ikon z tekstami (lub samych ikon czy tekstów) oraz wielokropka, który po tapnięciu rozwija pozostałe opcje menu. Taki przykładowy rozwinięty App Bar widoczny jest na Rys1.   Wysokość App Bara w trybie portretowym i szerokość w trybie poziomym jest ustalona na 72 piksele i nie może być modyfikowana. Wyświetlanie App Bara można ustawić na pokaż-ukryj.



Na App Barze możemy umieścić przyciski stale się wyświetlające, niezależnie od miejsca, w którym jesteśmy w aplikacji, przyciski kontekstowe, zależne od miejsca, w którym się znajdujemy oraz zależne od tego co zaznaczyliśmy w aplikacji (usuń, wyczyść, zapisz, wyślij itp) oraz przyciski nawigujące.

Zasady projektowania:
- przyciski o podobnym znaczeniu umieszczaj obok siebie
- przyciski nieaktywne ukrywaj a jeśli będą znów dostępne pokaz je w tym samym miejscu
- grupuj przyciski, oddzielaj grupy separatorem
- dbaj o przejrzystość menu

Dla telefonu jest tylko dolny App Bar. Natomiast dla tabletów/PC jest dolny i/lub górny App Bar.
Na tablecie nie ma App Bara w wersji mini (z trzema kropkami);
Domyślna wysokość App Bara mini to 30px.
Wielkości App Bara można dostosowywać do własnych potrzeb.
Domyślna wielkość ikon na app Barze: 48x48px koło a sama ikona w środku 26x26px

B jak Border, czyli po prostu ramka pusta bądź z tłem lub samo tło dookoła obiektu.

B jak Button to kontrolka, do której przypisane jest zdarzenie Click. Związany jest z wyzwoleniem natychmiastowej akcji dlatego nie powinno się używać przycisków do akcji typu: przejście do innej strony - do tego służą linki. Oczywiście jest wyjątek: do nawigacji Wstecz i naprzód można użyci tej kontrolki. Zawartość kontrolki ustawia się w Content.

Wskazówki dla projektantów:
- jeśli treść przycisku jest dynamiczna, zwróć uwagę na to jak się zachowa przycisk
- do akcji, które muszą być dostępne na wielu stronach aplikacji, zamiast powielać przycisk na wielu stronach, rozważ użycie przycisku na dolnym App Barze
- na jednej stronie wstawiaj tylko jeden lub dwa przyciski, na przykład, Zapisz i Anuluj. Jeśli potrzebujesz przycisków dla większej ilości działań użytkownika rozważ skorzystanie z checkboxów i/lub radio buttonów, które będą zapisywane za pomocą wspólnego przycisku
- standardowo przycisk zawiera treść ale może tez zawierać ikonę i/lub treść
- treść na przycisku powinna być zwięzła
- domyślny kształt to prostokąt ale możesz zmieniać kształt (np. okrąg)

Stany dla przycisków:

- normalny (bez akcji)
- wciśnięty (może być innego koloru)
- nieaktywny (np. wyszarzony)
- wskazany (np. podświetlony)

2xB jak Back Button odpowiada za powrót do poprzednio otwartej zawartości aplikacji; Dla Windows 8.1 stosuje się w aplikacji; Dla Windows Phone istnieje przycisk w telefonie, który może wracać do poprzedniej strony. Dla telefonów bez przycisku wstecz - pojawia się on w aplikacji: wysuwany z dolnej krawędzi.

C jak checkbox użytkownik może zaznaczyć/odznaczyć wskazaną jedną bądź wiele opcji z listy opcji do wyboru; Jeśli chcesz użyć listy z możliwą tylko jedną opcją do wyboru, skorzystaj z Radio Buttona;

C jak Combo box (drop-down list) używana jeśli chcemy dać możliwość wyboru jednej lub wielu wartości z listy (jeśli jest mało opcji, mniej niż pięć - rozważ użycie Radio buttonów lub check boxów).

D jak Date picker używany, jeśli użytkownik ma wybrać datę.
O ile dla Windows Phone mamy jeden widok date pickera o tyle dla Windows 8.1 (big windows) można użyć pickera z listami rozwijanymi np. Miesiąc, dzień, rok

Flip view

F jak Flip View służy do poruszania się w kolekcji i umożliwia przeglądanie tej kolekcji po jednym obrazie naraz; do wykorzystania np. w albumie foto.

Zamiast tej kontrolki można zastosować kontrolkę context indicator, która pozwala przeskoczyć do wybranego elementu kolekcji

Dla kolekcji większych niż 25 elementów stosujemy List View

F jak Flyout wysuwane okno powiązane z aktualną akcją użytkownika (inaczej nić dialog nie blokuje innych akcji użytkownika oraz nie tworzy osobnego okna); znika jeśli użytkownik kliknie poza jego obszarem; pojawia się w pobliżu obiektu, który go wywołuje;
zamieszczamy informacje typu: czy na pewno chcesz usunąć?
zamieszczamy też komunikaty błędu nieglobalne, związane z pojedynczym polem;
informacje, ostrzeżenia, powiadomienia;

L jak Label  

wielkość czcionki:

• 11 pt Segoe UI Semilight dla treści strony 

• 9 pt Segoe UI, mały element tekstowy

• 20 pt Segoe UI Light teksty, które muszą być dobrze widoczne na stronie (jeśli 20 to za dużo użyj 16pt ale nigdy obu na tej samej stronie!)

• 42 pt Segoe UI Light nagłówki składające się z jednego lub dwóch słów
  Dodatkowo dla podkreślenia kontrastu skorzystaj z następujących poziomów krycia czcionki:

• właściwy tekst - krycie 100%.

• drugorzędny tekst - 60%.

• tekst na hoverze - 80%.

• czarny i biały tekst w stanie naciśnięcia - 40%; tekst w innym kolorze - 60%

L jak List view prezentuje kolekcję elementów, które mogą być wertykalnie scrollowane;

M jak Message dialogs 

Message dialog - Windows 8.1

Message dialog - Windows Phone 8

wyświetla treść komunikatu, w ustalonym miejscu; inaczej wygląda dla tabletu, inaczej dla telefonu (rysunki powyżej); działanie na aplikacji jest wstrzymane (pytania blokujące); można wyświetlać informacje o globalnych błędach (o błędach związanych z pojedynczym polem informujemy we flyoucie), 

P jak Password Box maskuje wprowadzaną przez użytkownika treść;

Progress control

P jak progress sygnalizuje, że jakaś czynność się toczy
wyróżniamy 3 rodzaje:
- pasek postępu (progress bar) używany gdy czynność w trakcie; pasek zawsze idzie do przodu; 
- nieokreślony postęp, używamy gdy jakaś akcja dzieje się w tle i reszta aplikacji się nie blokuje
- postęp. który blokuje możliwość działania na aplikacji na czas trwania akcji, opis na prawo od pierścienia

Dobrze jest dać możliwość użytkownikowi anulowania akcji (szczególnie jeśli trwa ona długo np więcej niż 10 sekund);

P jak Pop up  wyświetla się jako warstwa, nakładka an aktualnie otwartą stronę; 

S jak semantic zoom dość interesująca kontrolka, która pozwala użytkownikowi przełączać się pomiędzy różnymi widokami tego samego zestawu treści;
Przykłady:
lista wszystkich aplikacji w postaci kafelek i w postaci zgrupowanej według alfabetu;
lista wszystkich wiadomości i lista wiadomości pogrupowanych według dni;
lista wszystkich zdjęć i lista zdjęć pogrupowanych po dacie;

Przykład zastosowania kontrolki Semantic Zoom

S jak slider, czyli suwak, pozwalający ustawić użytkownikowi wartość na wybranym zakresie; używany np do wyboru głośności, wyboru zakresu od do (na obu końcach suwaka dodane są etykiety zakresu określające minimum i maksimum); może m\być umieszczony w różnych orientacjach (pion/poziom);
Nie należy mylić suwaka z paskiem postępu (progress bar control: określa na jakim etapie jest dana czynność)


T jak Toggle switch czyli przełącznik, który pozwala użytkownikowi włączyć/wyłączyć coś (on/off); zawsze używany do binarnych ustawień gdzie zmiany następują natychmiast po wprowadzeniu (tu jest różnica z checkboxami i radio gdzie trzeba jeszcze nacisnąć przycisk wyślij, zapisz itp);

T jak Tooltip dodatkowe informacje wyjaśniające dany element interfejsu (dymek z tekstem); pojawiają się po najechaniu, naciśnięciu, przytrzymaniu akcji, do której dodany jest tooltip;