Układy to szablony strukturalne, które umożliwiają spójność wizualna w całej aplikacji. Definiując siatki wizualne, odstępy i sekcje, aby stworzyć spójną i uporządkowaną strukturę prezentacji informacji i elementów interfejsu.

Najciekawsze
- W przeciwieństwie do internetu i urządzeń mobilnych telewizory mają stały współczynnik proporcji ekranu (16:9).
- Optymalizuj układy wzdłuż osi poziomej i pionowej, aby ułatwić korzystanie i kontrolę.
Zasady
Wskazówki pomagające podejmować decyzje projektowe przy projektowaniu układów telewizyjnych.

Do dużych ekranów
Od czasu spopularyzowania telewizorów HDTV prostokątne telewizory o współczynniku proporcji 16:9 stały się normą. Dawniej telewizory były produkowane w kwadratowym formacie obrazu 4:3, czyli 1,33:1.

Projektowanie na platformie Android
Podczas projektowania używaj jednostki dp, aby wyświetlać elementy równomiernie na ekranach o różnej gęstości, jak w przypadku każdego innego urządzenia z Androidem. Pamiętaj, aby zawsze projektować projekt w rozdzielczości MDPI i w zakresie 960 × 540 pikseli.
Przy MDPI: 1 piksel = 1 dp
Komponenty muszą mieć rozdzielczość 1080p. Dzięki temu system Android może w razie potrzeby zmniejszyć skalę elementów układu do 720p.

Zadbaj o widoczność i bezpieczeństwo w trybie nadmiarowego skanowania
Zadbaj o to, aby ważne elementy były zawsze widoczne dla użytkowników. W tym celu umieść elementy z 5% marginesem 48 dp po lewej i prawej stronie oraz 27 dp na górze i u dołu układu. Dzięki temu elementy ekranu układu znajdują się w ramach nadmiarowego skanowania.

Wypełnij pełny ekran
Nie dostosowuj i nie przycinaj elementów ekranu tła w bezpiecznym obszarze nadskanowania. Zamiast tego zezwól na częściowe wyświetlanie elementów poza ekranem. Dzięki temu wszystkie ekrany będą prawidłowo wyświetlać tło i elementy poza ekranem.

Optymalizuj za pomocą osi
Zastanów się, w jaki sposób użytkownicy korzystają z pilota w telewizorze. Sprawdź, czy interfejs telewizora jest prosty w obsłudze za pomocą pilota. Zaprojektuj każdy kierunek (w górę, w dół, w lewo, w prawo) tak, aby mieć jasny cel i wzorzec nawigacji, aby użytkownicy wiedzieli, jak korzystać z dużych grup opcji.
Układ
Rozmiary ekranu telewizora różnią się w zależności od urządzenia. Ponieważ nowoczesny telewizor format obrazu 16:9, zaleca się projektowanie aplikacji z Rozmiar ekranu: 960 x 540 pikseli. Dzięki temu wszystkie elementy będą skalowane proporcjonalnie do ekranów HD lub 4K.
Marginesy nadmiarowego skanowania
Marginesy nadmiarowego obrazu to odstępy między treścią, od lewej i prawej krawędzi ekranu.
960 * ~5% = 48dp
540 * ~5% = 27dp round off to 24dp
Te marginesy chronią główne elementy przed potencjalnymi problemami z nadmiernym przeskanowaniem. Aby Twoje treści i informacje były bezpieczne, użyj układu 5% marginesu (58 dp po bokach oraz 28 dp na górnej i dolnej krawędzi).
Kolumny i rynny
Treści są umieszczane w obszarach ekranu z kolumnami i rynienkami. System siatki składa się z 12 kolumn. Rynny to miejsca między kolumny, które pomagają dzielić treści.
Użyj 12 kolumn o szerokości 52 dp i odstępach między nimi wynoszącym 20 dp. Po obu stronach brakuje miejsca o wielkości 58 dp, a w pionie – 4 dp. między wierszami.
Wzorce układu
Dostępne są 3 wzory układu w zależności od urządzenia do celów i wyświetlania: układ poziomy, pionowy układ stosu, i Układ siatki.
Układ poziomy ze stosem
W układzie stosu poziomym komponenty są rozmieszczane w poziomie. Mogą one mieć różne rozmiary, proporcje i format. Ten układ jest często służą do grupowania treści i komponentów.
Układ pionowy
W układzie stosu pionowego komponenty są rozmieszczane w pionie, pozwalają na elastyczne rozmiary, proporcje i formaty. Często do grupowania różnych typów tekstu, komponentów interaktywnych wzorów układu.
Układ siatki
Siatka to zbiór przecinających się kolumn i wierszy, Układ wyświetla treść w tej siatce. Uporządkuje treści w ułatwiając użytkownikom nawigację i przeglądanie stron.
Aby uniknąć nakładania się, weź pod uwagę dopełnienie elementów i zwiększenia rozmiaru skupionych stanów. Na przykład gdy skupisz się na komponent (np. karta). Jeśli korzystasz z proponowanych przez nas Układ siatki (12 kolumn o rozdzielczości 52 dp, z rynienkami w rozdzielczości 20 dp), patrz Karty zalecane układy i podglądy komponentów.
Struktury układu
Oto kilka struktur układu, które pomogą Ci ulepszyć przy projektowaniu układów telewizyjnych. Dzieląc ekrany telewizorów w poziomie, pomaga rozdzielić różne typy komponentów, przekazywać informacje hierarchii i nawigacji. Panel może zawierać wiele kolumn jednostek. Każdy panel może hostować inne wzorce układu, na przykład Układ stosu i Układ siatki.

Układ z jednym panelem
Układ z jednym panelem może pomóc zwrócić uwagę na główne treści. Używaj jej w połączeniu z treściami i stronami z najważniejszymi informacjami.

Układ z 2 panelami
Układ z 2 panelami działa lepiej, gdy strona zawiera treści hierarchiczne. Jest on powszechnie stosowany w przypadku zadań związanych z zadaniem.
Przeciążenie poznawcze
Skomplikowane i niejasne treści mogą być dezorientujące, irytujące oraz zniechęcać zaangażowanie użytkowników. Spraw, aby Twój projekt był łatwy do skanowania, schludny i obecny tylko kluczowe informacje.
Unikaj używania zbyt wielu paneli do grupowania treści. Powoduje to zbędne obciążenie poznawcze i hierarchię aplikacji.

Tak

Nie
Szybka hierarchia i nawigacja
Panele wizualne oddzielają i porządkują treści. Pomagają kierować użytkowników, i tworzą bardziej intuicyjny interfejs, który zwiększy wygodę korzystania.

Tak

Nie
Szablony układu
Szablony układów zwiększają kolejność, spójność i znajomość. Projekt wygodny interfejs użytkownika i jasno informuje, i gdzie mogą się znaleźć.
Szablon przeglądarki wyświetla „klastry” treści multimedialnych lub wiersze w stosie pionowym. Użytkownicy przewijają wiersze w górę i w dół, a także w prawo i w lewo, aby przeglądać zawartość konkretnego wiersza.

Szablon nawigacji po lewej stronie wyświetla panel nakładki po lewej stronie ekranu. W tle zazwyczaj wyświetla elementy nawigacyjne lub elementy, na których można wykonać działania związane z treścią.

Szablon nakładki z prawej strony przedstawia panel nakładki po prawej stronie ekranu. Zazwyczaj wyświetlają się w niej elementy, na których podstawie podejmujesz działanie niezależnie od treści w tle.

Środkowy szablon nakładki zawiera element modalny, który jest nakładany na istniejący widok. Służą do przekazywania pilnych informacji lub podejmowania decyzji.

Dolny szablon nakładki jest często używany w przypadku dolnych arkuszy. Dolne arkusze to powierzchnie z uzupełniającymi treściami zakotwiczone u dołu ekranu. Umożliwiają tworzenie krótkich procesów bez utraty kontekstu bieżącej strony.

Po lewej stronie szablonu działania wyświetla się tytuł i podtytuł, a po prawej – opcje i działania. Użytkownicy są zwykle proszeni o wybranie opcji lub wykonanie działania w przypadku tego szablonu.

Szablon szczegółów treści pokazuje treść w układzie poziomym skumulowanym. Do treści należą zwykle tytuł, metadane, krótki opis, szybkie działania i powiązane klastry informacji.

Szablon kompilacji pokazuje po lewej stronie ekranu szczegóły elementu (np. podcastu) wraz z jego elementami, np. odcinkami, w panelu po prawej stronie.

Szablon siatki wyświetla kolekcje treści w uporządkowanej siatce. Zapewnia przejrzyste informacje na temat zdalnej nawigacji i zapewnia optymalny komfort przeglądania treści.

Szablon alertu wyświetli wiadomość pełnoekranową. Zwykle wymagane jest działanie w celu odblokowania alertu i powrót do poprzedniego ekranu.

Kolumny karty
Szerokość karty – 844 dp

Szerokość karty – 412 dp

Szerokość karty – 268 dp

Szerokość karty – 196 dp

Szerokość karty – 124 dp
