Ta strona została przetłumaczona przez Cloud Translation API.

Układy

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.

Siatka układu

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).

Marginesy nadmiarowego skanowania

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.

Kolumny Rynny

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 poziomy ze stosem

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 pionowy

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.

Układ siatki

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

Umieść powiązane treści w jednym panelu. Pomaga to użytkownikom zrozumieć pogrupowanie treści.

Nie

Unikaj używania zbyt wielu paneli do grupowania treści. Powoduje to u użytkowników niepotrzebne obciążenie poznawcze i hierarchię.

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

Grupuj treści na podstawie ścieżki czytelniczej użytkownika. Upewnij się, że ścieżka ostrożności jest zgodna z hierarchią lub logiką podejmowania decyzji.

Nie

Nie należy przełączać uwagi użytkownika między panelami. Powoduje to tworzenie nienaturalnych ścieżek skupienia, które nie są zgodne z nawykami użytkownika dotyczącymi czytania.

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źć.

Przeglądaj

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.

Lewa nakładka

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ą.

Prawa nakładka

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.

Wyśrodkuj nakładkę

Ś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.

Dolna nakładka

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.

Działania

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.

Szczegóły dotyczące treści

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.

Kompilacja

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

Siatka

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.