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.

Obraz w tle dla układów

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

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 Androida

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.

Zapewnij widoczność

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

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

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.

Przykład układu z jednym panelem

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.

Przykład układu z 2 panelami

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.

Umieść powiązane treści w jednym panelu. Pomaga to użytkownikom zrozumieć pogrupowanie treści.
Unikaj używania zbyt wielu paneli do grupowania treści. Powoduje to u użytkowników niepotrzebne obciążenie poznawcze i hierarchię.

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.

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

Przeglądaj

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

Nakładka po lewej

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.

Prawa nakładka

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.

Wyśrodkuj nakładkę

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.

Dolna nakładka

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.

Działania

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.

Szczegóły dotyczące treści

Kompilacja

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

Kompilacja

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.

Siatka

Alert

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

Alert

Kolumny karty

1 układ karty

Szerokość karty – 844 dp

1 układ karty

Układ 2 kart

Szerokość karty – 412 dp

Układ 2 kart

Układ 3 kart

Szerokość karty – 268 dp

Układ 3 kart

Układ 4 kart

Szerokość karty – 196 dp

Układ 4 kart

Układ 5 kart

Szerokość karty – 124 dp

Układ 5 kart