Układy to szablony strukturalne, które umożliwiają zachowanie spójności wizualnej w aplikacji. Dzięki definiowaniu siatki wizualnej, odstępów i sekcji układy zapewniają spójną i uporządkowaną strukturę do prezentowania informacji i elementów interfejsu.
W skrócie
- 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, by ułatwić obsługę 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. Nowoczesny telewizor ma format obrazu 16:9, dlatego zaleca się projektowanie aplikacji z ekranem o wymiarach 960 x 540 pikseli. Dzięki temu rozmiar wszystkich elementów można dostosować proporcjonalnie do ekranów HD lub 4K.
Marginesy nadmiarowego skanowania
Marginesy nadmiarowego obrazu to odstępy między treścią oraz lewą i prawą 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 treści i informacje były bezpieczne, użyj 5% układu marginesu (58 dp po bokach i 28 dp przy 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. Rynki to odstępy między kolumnami, 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 musi być przestrzeń o wartości 58 dp, a odstęp między wierszami w pionie powinien wynosić 4 dp.
Wzorce układu
W zależności od przeznaczenia i urządzenia wyświetlającego dostępne są 3 wzory układu: Układ stosu poziomego, Układ stosu pionowego 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. Często używa się go do grupowania treści i komponentów.
Układ pionowy
W układzie stosu pionowym komponenty są rozmieszczone w pionie, co pozwala na elastyczny rozmiar, proporcje i format. Powszechnie używa się go do grupowania różnych typów tekstu, komponentów interaktywnych i wzorców układu.
Układ siatki
Siatka to zbiór przecinających się kolumn i wierszy, a w układzie siatki jej zawartość jest wyświetlana w siatce. Treści są układane w logiczny sposób, co ułatwia użytkownikom nawigację i przeglądanie.
Aby uniknąć nakładania się, należy wziąć pod uwagę dopełnienie między elementami i zwiększenie rozmiaru skupionych stanów. np. gdy zaznaczony jest zaznaczony komponent (jak karta). Jeśli korzystasz z naszego sugerowanego układu siatki (12 kolumn o wymiarach 52 dp, z rynienkami o wymiarach 20 dp), zapoznaj się z sekcją Karty zawierające zalecany układ i podglądy komponentów.
Struktury układu
Oto kilka struktur układu, które pomogą Ci podejmować lepsze decyzje podczas projektowania układów telewizyjnych. Dzielenie ekranów telewizorów w poziomie pomaga rozdzielić różne typy komponentów, przekazywać hierarchię informacji i logikę nawigacji. Panel może zawierać wiele kolumn jednostek. Każdy panel może zawierać inne wzorce układu, np. 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ą prowadzić do dezorientacji, irytacji i opadu zaangażowania. Zadbaj o to, aby projekt był łatwy do skanowania i zachowania schludny, i zawieraj tylko najważniejsze informacje.
Unikaj używania zbyt wielu paneli do grupowania treści. Spowoduje to u użytkowników niepotrzebne obciążenie poznawcze i większą hierarchię.
Tak
Nie wolno
Szybka hierarchia i nawigacja
Panele wizualne oddzielają i porządkują treści. Pomagają one kierować użytkowników i pozwalają stworzyć bardziej intuicyjny interfejs, który zwiększy ich zadowolenie.
Tak
Nie wolno
Szablony układu
Szablony układów zwiększają kolejność, spójność i znajomość. Interfejs jest wygodny w obsłudze i jasno informuje, gdzie jest użytkownik i dokąd może się udać.
Przeglądaj
Szablon przeglądarki wyświetla „klastry” lub wiersze treści multimedialnych na 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ży 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.
GRid
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.
Alert
Szablon alertu wyświetli wiadomość pełnoekranową. Zwykle wymagane jest działanie w celu odblokowania alertu i powrót do poprzedniego ekranu.
Kolumny karty
1 układ karty
Szerokość karty – 844 dp
Układ 2 kart
Szerokość karty – 412 dp
Układ 3 kart
Szerokość karty – 268 dp
Układ 4 kart
Szerokość karty – 196 dp
Układ 5 kart
Szerokość karty – 124 dp
