Nakładaj

Stos to zwinięta lista, która wyświetla tylko 1 element treści naraz w postaci stosu, np. powiadomienia lub karty.

Elementy projektu powinny być zakotwiczone u dołu ramki.

Zasady

Stack to komponent kontenera, więc obowiązują go te same zasady projektowania co w przypadku kart i list:

Zawartość: grupy zawierają powiązane informacje i działania w jednej, łatwej do przyswojenia jednostce.

Skupienie i przejrzystość: prezentują treści w jasny i ukierunkowany sposób.

Wszechstronność: stosy mogą wyświetlać karty i powiadomienia.

Spójna prezentacja: stosy mają spójną strukturę wizualną.

Użycie i umieszczenie

Stosy to sposób na pokazanie użytkownikom, że na liście znajduje się wiele zwiniętych elementów, przy jednoczesnym zminimalizowaniu liczby widocznych elementów wizualnych. Istnieją 2 różne warianty stosów: 

  • Stosy kart

  • Stosy powiadomień

Stosy to komponent kontenera, obie wersje nie działają ani nie wyglądają inaczej. 

Oba powinny wyglądać i działać niemal identycznie. Stos to kontener tych elementów sterujących z wbudowaną logiką paginacji. 

Nawigacja stosu

Użytkownicy poruszają się po interfejsie, przesuwając palcem po touchpadzie do przodu i do tyłu. Przewijanie stosu powoduje przesuwanie się tylko po jednym elemencie naraz.

Zakotwiczanie elementów projektu u dołu ramki

Stosy można przeglądać po jednym elemencie.

Po dotknięciu stosy mogą wyświetlać po jednym elemencie naraz, przesuwając się w pionie, a także stawać się listami, aby wyświetlać więcej niż 1 element naraz. Lista powinna korzystać z domyślnych kontenerów i stanów fokusu.

Elementy projektu powinny być zakotwiczone u dołu ramki.

Używanie głębi do wskazywania ostrości

Elementy znajdujące się niżej w stosie mają głębokość 0, a element znajdujący się na samej górze ma głębokość +2.

Anatomia

Stos jest zawsze zwinięty jako komponent paginacji. Głównym elementem jest zawsze element u góry, który ma wyraźniejszą głębię obramowania, chyba że jest w nim zagnieżdżony włączony przycisk.

Przesunięcie palcem poza początek lub koniec stosu powoduje wyświetlenie standardowej animacji rozciągania, która podkreśla początek lub koniec stosu.

Elementy projektu powinny być zakotwiczone u dołu ramki.

Dostosowywanie

Stosy mają wbudowane przyciemnienie, stronicowanie i animacje, których nie można dostosować. Treści w stosach są dostosowywane.

Zachowaj krycie elementów interfejsu podczas przewijania, aby zmniejszyć szum wizualny.
Dostosowywanie przezroczystości elementów stosu podczas przewijania.